rudeshark.net/src/client/app/mobile/views/components/drive.file-detail.vue

255 lines
5.7 KiB
Vue
Raw Normal View History

2018-02-20 04:38:45 +01:00
<template>
<div class="pyvicwrksnfyhpfgkjwqknuururpaztw">
2018-02-20 04:38:45 +01:00
<div class="preview">
<x-file-thumbnail class="preview" :file="file" :detail="true"/>
<template v-if="kind != 'image'"><fa icon="file"/></template>
2018-02-20 04:38:45 +01:00
<footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height">
<span class="size">
<span class="width">{{ file.properties.width }}</span>
<span class="time">×</span>
<span class="height">{{ file.properties.height }}</span>
<span class="px">px</span>
</span>
<span class="separator"></span>
<span class="aspect-ratio">
<span class="width">{{ file.properties.width / gcd(file.properties.width, file.properties.height) }}</span>
<span class="colon">:</span>
<span class="height">{{ file.properties.height / gcd(file.properties.width, file.properties.height) }}</span>
</span>
</footer>
</div>
<div class="info">
<div>
<span class="type"><mk-file-type-icon :type="file.type"/> {{ file.type }}</span>
2018-02-20 04:38:45 +01:00
<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 14:50:36 +02:00
<span class="data-size">{{ file.size | bytes }}</span>
2018-02-20 04:38:45 +01:00
<span class="separator"></span>
<span class="created-at" @click="showCreatedAt"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
2018-08-18 20:56:44 +02:00
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw"><fa :icon="['far', 'eye-slash']"/> {{ $t('nsfw') }}</span>
2018-08-18 20:56:44 +02:00
</template>
2018-02-20 04:38:45 +01:00
</div>
</div>
<div class="menu">
<div>
2019-01-12 01:13:35 +01:00
<ui-input readonly :value="file.url">URL</ui-input>
<ui-button link :href="dlUrl" :download="file.name"><fa icon="download"/> {{ $t('download') }}</ui-button>
<ui-button @click="rename"><fa icon="pencil-alt"/> {{ $t('rename') }}</ui-button>
<ui-button @click="move"><fa :icon="['far', 'folder-open']"/> {{ $t('move') }}</ui-button>
<ui-button @click="toggleSensitive" v-if="file.isSensitive"><fa :icon="['far', 'eye']"/> {{ $t('unmark-as-sensitive') }}</ui-button>
<ui-button @click="toggleSensitive" v-else><fa :icon="['far', 'eye-slash']"/> {{ $t('mark-as-sensitive') }}</ui-button>
<ui-button @click="del"><fa :icon="['far', 'trash-alt']"/> {{ $t('delete') }}</ui-button>
2018-02-20 04:38:45 +01:00
</div>
</div>
<div class="hash">
<div>
<p>
<fa icon="hashtag"/>{{ $t('hash') }}
2018-02-20 04:38:45 +01:00
</p>
<code>{{ file.md5 }}</code>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
2018-09-05 19:44:01 +02:00
import { gcd } from '../../../../../prelude/math';
import { appendQuery } from '../../../../../prelude/url';
import XFileThumbnail from '../../../common/views/components/drive-file-thumbnail.vue';
2018-02-20 04:38:45 +01:00
export default Vue.extend({
i18n: i18n('mobile/views/components/drive.file-detail.vue'),
2018-02-20 04:38:45 +01:00
props: ['file'],
2018-10-15 11:02:57 +02:00
components: {
XFileThumbnail
},
2018-02-20 04:38:45 +01:00
data() {
return {
gcd,
exif: null
};
},
2018-10-15 11:02:57 +02:00
2018-02-20 04:38:45 +01:00
computed: {
browser(): any {
return this.$parent;
},
2018-10-15 11:02:57 +02:00
2018-02-20 04:38:45 +01:00
kind(): string {
return this.file.type.split('/')[0];
2018-02-27 16:34:57 +01:00
},
2018-10-15 11:02:57 +02:00
2018-02-27 16:34:57 +01:00
style(): any {
2019-04-08 12:56:42 +02:00
return this.file.properties.avgColor ? {
'background-color': this.file.properties.avgColor
2018-02-27 16:34:57 +01:00
} : {};
},
dlUrl(): string {
return appendQuery(this.file.url, 'download');
2018-02-20 04:38:45 +01:00
}
},
2018-10-15 11:02:57 +02:00
2018-02-20 04:38:45 +01:00
methods: {
rename() {
const name = window.prompt(this.$t('rename'), this.file.name);
2018-02-20 04:38:45 +01:00
if (name == null || name == '' || name == this.file.name) return;
2018-11-09 00:13:34 +01:00
this.$root.api('drive/files/update', {
2018-03-29 07:48:47 +02:00
fileId: this.file.id,
2018-02-20 04:38:45 +01:00
name: name
}).then(() => {
this.browser.cf(this.file, true);
});
},
2018-10-15 11:02:57 +02:00
2018-02-20 04:38:45 +01:00
move() {
this.$chooseDriveFolder().then(folder => {
2018-11-09 00:13:34 +01:00
this.$root.api('drive/files/update', {
2018-03-29 07:48:47 +02:00
fileId: this.file.id,
folderId: folder == null ? null : folder.id
2018-02-20 04:38:45 +01:00
}).then(() => {
this.browser.cf(this.file, true);
});
});
},
2018-10-15 11:02:57 +02:00
del() {
2018-11-09 00:13:34 +01:00
this.$root.api('drive/files/delete', {
fileId: this.file.id
}).then(() => {
this.browser.cd(this.file.folderId, true);
});
},
2018-10-15 11:02:57 +02:00
toggleSensitive() {
2018-11-09 00:13:34 +01:00
this.$root.api('drive/files/update', {
2018-10-15 11:02:57 +02:00
fileId: this.file.id,
isSensitive: !this.file.isSensitive
});
this.file.isSensitive = !this.file.isSensitive;
},
2018-02-20 04:38:45 +01:00
showCreatedAt() {
this.$root.dialog({
type: 'info',
text: (new Date(this.file.createdAt)).toLocaleString()
});
2018-02-20 04:38:45 +01:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 07:03:55 +02:00
.pyvicwrksnfyhpfgkjwqknuururpaztw
2018-02-20 04:38:45 +01:00
> .preview
padding 8px
2018-09-28 07:03:55 +02:00
background var(--bg)
2018-02-20 04:38:45 +01:00
> .preview
width fit-content
width -moz-fit-content
2018-02-20 04:38:45 +01:00
max-width 100%
margin 0 auto
2018-04-29 01:51:17 +02:00
box-shadow 1px 1px 4px rgba(#000, 0.2)
overflow hidden
color var(--driveFileIcon)
justify-content center
2018-02-20 04:38:45 +01:00
> footer
padding 8px 8px 0 8px
text-align center
2018-09-28 07:03:55 +02:00
font-size 0.8em
color var(--text)
opacity 0.7
2018-02-20 04:38:45 +01:00
> .separator
display inline
padding 0 4px
> .size
display inline
.time
margin 0 2px
.px
margin-left 4px
> .aspect-ratio
display inline
opacity 0.7
&:before
content "("
&:after
content ")"
> .info
padding 14px
font-size 0.8em
2018-09-28 07:03:55 +02:00
border-top solid 1px var(--faceDivider)
2018-02-20 04:38:45 +01:00
> div
max-width 500px
margin 0 auto
2018-09-28 07:03:55 +02:00
color var(--text)
2018-02-20 04:38:45 +01:00
> .separator
padding 0 4px
> .created-at
> [data-icon]
2018-02-20 04:38:45 +01:00
margin-right 2px
2018-08-18 20:56:44 +02:00
> .nsfw
color #bf4633
2018-02-20 04:38:45 +01:00
> .menu
2019-01-12 01:13:35 +01:00
padding 0 14px 14px 14px
2018-09-28 07:03:55 +02:00
border-top solid 1px var(--faceDivider)
2018-02-20 04:38:45 +01:00
> div
max-width 500px
margin 0 auto
> .hash
padding 14px
2018-09-28 07:03:55 +02:00
border-top solid 1px var(--faceDivider)
2018-02-20 04:38:45 +01:00
> div
max-width 500px
margin 0 auto
> p
display block
margin 0
padding 0
2018-09-28 07:03:55 +02:00
color var(--text)
2018-02-20 04:38:45 +01:00
font-size 0.9em
> [data-icon]
2018-02-20 04:38:45 +01:00
margin-right 4px
> code
display block
width 100%
margin 6px 0 0 0
padding 8px
white-space nowrap
overflow auto
font-size 0.8em
color #222
border solid 1px #dfdfdf
border-radius 2px
background #f5f5f5
</style>