summaryrefslogtreecommitdiff
path: root/src/server/web/app/mobile/views/components/drive.file.vue
diff options
context:
space:
mode:
authorsyuilo <syuilotan@yahoo.co.jp>2018-03-29 20:32:18 +0900
committersyuilo <syuilotan@yahoo.co.jp>2018-03-29 20:32:18 +0900
commitcf33e483f7e6f40e8cbbbc0118a7df70bdaf651f (patch)
tree318279530d3392ee40d91968477fc0e78d5cf0f7 /src/server/web/app/mobile/views/components/drive.file.vue
parentUpdate .travis.yml (diff)
downloadmisskey-cf33e483f7e6f40e8cbbbc0118a7df70bdaf651f.tar.gz
misskey-cf33e483f7e6f40e8cbbbc0118a7df70bdaf651f.tar.bz2
misskey-cf33e483f7e6f40e8cbbbc0118a7df70bdaf651f.zip
整理した
Diffstat (limited to 'src/server/web/app/mobile/views/components/drive.file.vue')
-rw-r--r--src/server/web/app/mobile/views/components/drive.file.vue171
1 files changed, 0 insertions, 171 deletions
diff --git a/src/server/web/app/mobile/views/components/drive.file.vue b/src/server/web/app/mobile/views/components/drive.file.vue
deleted file mode 100644
index 7d1957042b..0000000000
--- a/src/server/web/app/mobile/views/components/drive.file.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-<a class="file" @click.prevent="onClick" :href="`/i/drive/file/${ file.id }`" :data-is-selected="isSelected">
- <div class="container">
- <div class="thumbnail" :style="thumbnail"></div>
- <div class="body">
- <p class="name">
- <span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
- <span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
- </p>
- <!--
- if file.tags.length > 0
- ul.tags
- each tag in file.tags
- li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
- -->
- <footer>
- <p class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</p>
- <p class="separator"></p>
- <p class="data-size">{{ file.datasize | bytes }}</p>
- <p class="separator"></p>
- <p class="created-at">
- %fa:R clock%<mk-time :time="file.createdAt"/>
- </p>
- </footer>
- </div>
- </div>
-</a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
- props: ['file'],
- data() {
- return {
- isSelected: false
- };
- },
- computed: {
- browser(): any {
- return this.$parent;
- },
- thumbnail(): any {
- return {
- 'background-color': this.file.properties.avgColor ? `rgb(${this.file.properties.avgColor.join(',')})` : 'transparent',
- 'background-image': `url(${this.file.url}?thumbnail&size=128)`
- };
- }
- },
- created() {
- this.isSelected = this.browser.selectedFiles.some(f => f.id == this.file.id)
-
- this.browser.$on('change-selection', this.onBrowserChangeSelection);
- },
- beforeDestroy() {
- this.browser.$off('change-selection', this.onBrowserChangeSelection);
- },
- methods: {
- onBrowserChangeSelection(selections) {
- this.isSelected = selections.some(f => f.id == this.file.id);
- },
- onClick() {
- this.browser.chooseFile(this.file);
- }
- }
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.file
- display block
- text-decoration none !important
-
- *
- user-select none
- pointer-events none
-
- > .container
- max-width 500px
- margin 0 auto
- padding 16px
-
- &:after
- content ""
- display block
- clear both
-
- > .thumbnail
- display block
- float left
- width 64px
- height 64px
- background-size cover
- background-position center center
-
- > .body
- display block
- float left
- width calc(100% - 74px)
- margin-left 10px
-
- > .name
- display block
- margin 0
- padding 0
- font-size 0.9em
- font-weight bold
- color #555
- text-overflow ellipsis
- overflow-wrap break-word
-
- > .ext
- opacity 0.5
-
- > .tags
- display block
- margin 4px 0 0 0
- padding 0
- list-style none
- font-size 0.5em
-
- > .tag
- display inline-block
- margin 0 5px 0 0
- padding 1px 5px
- border-radius 2px
-
- > footer
- display block
- margin 4px 0 0 0
- font-size 0.7em
-
- > .separator
- display inline
- margin 0
- padding 0 4px
- color #CDCDCD
-
- > .type
- display inline
- margin 0
- padding 0
- color #9D9D9D
-
- > .mk-file-type-icon
- margin-right 4px
-
- > .data-size
- display inline
- margin 0
- padding 0
- color #9D9D9D
-
- > .created-at
- display inline
- margin 0
- padding 0
- color #BDBDBD
-
- > [data-fa]
- margin-right 2px
-
- &[data-is-selected]
- background $theme-color
-
- &, *
- color #fff !important
-
-</style>