misskey/src/client/app/mobile/views/components/drive.file.vue

156 lines
3.2 KiB
Vue
Raw Normal View History

2018-02-20 10:15:18 +09:00
<template>
<a class="vupkuhvjnjyqaqhsiogfbywvjxynrgsm" @click.prevent="onClick" :href="`/i/drive/file/${ file.id }`" :data-is-selected="isSelected">
2018-02-20 10:15:18 +09:00
<div class="container">
<x-file-thumbnail class="thumbnail" :file="file" fit="cover"/>
2018-02-20 10:15:18 +09:00
<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>
<footer>
2018-08-19 03:56:44 +09:00
<span class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</span>
<span class="separator"></span>
Use PostgreSQL instead of MongoDB (#4572) * wip * Update note.ts * Update timeline.ts * Update core.ts * wip * Update generate-visibility-query.ts * wip * wip * wip * wip * wip * Update global-timeline.ts * wip * wip * wip * Update vote.ts * wip * wip * Update create.ts * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update files.ts * wip * wip * Update CONTRIBUTING.md * wip * wip * wip * wip * wip * wip * wip * wip * Update read-notification.ts * wip * wip * wip * wip * wip * wip * wip * Update cancel.ts * wip * wip * wip * Update show.ts * wip * wip * Update gen-id.ts * Update create.ts * Update id.ts * wip * wip * wip * wip * wip * wip * wip * Docker: Update files about Docker (#4599) * Docker: Use cache if files used by `yarn install` was not updated This patch reduces the number of times to installing node_modules. For example, `yarn install` step will be skipped when only ".config/default.yml" is updated. * Docker: Migrate MongoDB to Postgresql Misskey uses Postgresql as a database instead of Mongodb since version 11. * Docker: Uncomment about data persistence This patch will save a lot of databases. * wip * wip * wip * Update activitypub.ts * wip * wip * wip * Update logs.ts * wip * Update drive-file.ts * Update register.ts * wip * wip * Update mentions.ts * wip * wip * wip * Update recommendation.ts * wip * Update index.ts * wip * Update recommendation.ts * Doc: Update docker.ja.md and docker.en.md (#1) (#4608) Update how to set up misskey. * wip * :v: * wip * Update note.ts * Update postgre.ts * wip * wip * wip * wip * Update add-file.ts * wip * wip * wip * Clean up * Update logs.ts * wip * :pizza: * wip * Ad notes * wip * Update api-visibility.ts * Update note.ts * Update add-file.ts * tests * tests * Update postgre.ts * Update utils.ts * wip * wip * Refactor * wip * Refactor * wip * wip * Update show-users.ts * Update update-instance.ts * wip * Update feed.ts * Update outbox.ts * Update outbox.ts * Update user.ts * wip * Update list.ts * Update update-hashtag.ts * wip * Update update-hashtag.ts * Refactor * Update update.ts * wip * wip * :v: * clean up * docs * Update push.ts * wip * Update api.ts * wip * :v: * Update make-pagination-query.ts * :v: * Delete hashtags.ts * Update instances.ts * Update instances.ts * Update create.ts * Update search.ts * Update reversi-game.ts * Update signup.ts * Update user.ts * id * Update example.yml * :art: * objectid * fix * reversi * reversi * Fix bug of chart engine * Add test of chart engine * Improve test * Better testing * Improve chart engine * Refactor * Add test of chart engine * Refactor * Add chart test * Fix bug * コミットし忘れ * Refactoring * :v: * Add tests * Add test * Extarct note tests * Refactor * 存在しないユーザーにメンションできなくなっていた問題を修正 * Fix bug * Update update-meta.ts * Fix bug * Update mention.vue * Fix bug * Update meta.ts * Update CONTRIBUTING.md * Fix bug * Fix bug * Fix bug * Clean up * Clean up * Update notification.ts * Clean up * Add mute tests * Add test * Refactor * Add test * Fix test * Refactor * Refactor * Add tests * Update utils.ts * Update utils.ts * Fix test * Update package.json * Update update.ts * Update manifest.ts * Fix bug * Fix bug * Add test * :art: * Update endpoint permissions * Updaye permisison * Update person.ts #4299 * データベースと同期しないように * Fix bug * Fix bug * Update reversi-game.ts * Use a feature of Node v11.7.0 to extract a public key (#4644) * wip * wip * :v: * Refactoring #1540 * test * test * test * test * test * test * test * Fix bug * Fix test * :sushi: * wip * #4471 * Add test for #4335 * Refactor * Fix test * Add tests * :clock4: * Fix bug * Add test * Add test * rename * Fix bug
2019-04-07 21:50:36 +09:00
<span class="data-size">{{ file.size | bytes }}</span>
2018-08-19 03:56:44 +09:00
<span class="separator"></span>
<span class="created-at"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
2018-08-19 03:56:44 +09:00
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw"><fa :icon="['far', 'eye-slash']"/> {{ $t('nsfw') }}</span>
2018-08-19 03:56:44 +09:00
</template>
2018-02-20 10:15:18 +09:00
</footer>
</div>
</div>
</a>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import XFileThumbnail from '../../../common/views/components/drive-file-thumbnail.vue';
2018-02-20 10:15:18 +09:00
export default Vue.extend({
i18n: i18n('mobile/views/components/drive.file.vue'),
2018-02-20 10:15:18 +09:00
props: ['file'],
components: {
XFileThumbnail
},
2018-02-20 10:15:18 +09:00
data() {
return {
isSelected: false
};
},
computed: {
browser(): any {
return this.$parent;
}
},
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>
2018-09-28 14:03:55 +09:00
.vupkuhvjnjyqaqhsiogfbywvjxynrgsm
2018-02-20 10:15:18 +09:00
display block
text-decoration none !important
*
user-select none
pointer-events none
> .container
display grid
2018-02-20 10:15:18 +09:00
max-width 500px
margin 0 auto
padding 16px
grid-template-columns 64px 1fr
grid-column-gap 10px
2018-02-20 10:15:18 +09:00
&:after
content ""
display block
clear both
> .thumbnail
width 64px
height 64px
color var(--driveFileIcon)
2018-02-20 10:15:18 +09:00
> .body
display block
word-break break-all
2018-02-20 10:15:18 +09:00
> .name
display block
margin 0
padding 0
font-size 0.9em
font-weight bold
2018-09-28 14:03:55 +09:00
color var(--text)
2019-03-19 17:35:50 +09:00
word-break break-word
2018-02-20 10:15:18 +09:00
> .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
2018-09-28 14:03:55 +09:00
color var(--text)
2018-02-20 10:15:18 +09:00
> .separator
padding 0 4px
> .type
2018-09-28 14:03:55 +09:00
opacity 0.7
2018-02-20 10:15:18 +09:00
2018-03-04 12:14:53 +09:00
> .mk-file-type-icon
2018-02-20 10:15:18 +09:00
margin-right 4px
> .data-size
2018-09-28 14:03:55 +09:00
opacity 0.7
2018-02-20 10:15:18 +09:00
> .created-at
2018-09-28 14:03:55 +09:00
opacity 0.7
2018-02-20 10:15:18 +09:00
> [data-icon]
2018-02-20 10:15:18 +09:00
margin-right 2px
2018-08-19 03:56:44 +09:00
> .nsfw
color #bf4633
2018-02-20 10:15:18 +09:00
&[data-is-selected]
2018-09-26 20:19:35 +09:00
background var(--primary)
2018-02-20 10:15:18 +09:00
&, *
color var(--primaryForeground) !important
2018-02-20 10:15:18 +09:00
</style>