tweak drive-cleaner
This commit is contained in:
parent
32c60c774c
commit
3d6aaa7aaa
3 changed files with 164 additions and 196 deletions
|
@ -32,14 +32,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, defineAsyncComponent, ref } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import copyToClipboard from '@/scripts/copy-to-clipboard';
|
|
||||||
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
|
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
|
||||||
import bytes from '@/filters/bytes';
|
import bytes from '@/filters/bytes';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { $i } from '@/account';
|
import { $i } from '@/account';
|
||||||
|
import { getDriveFileMenu } from '@/scripts/get-drive-file-menu';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
file: Misskey.entities.DriveFile;
|
file: Misskey.entities.DriveFile;
|
||||||
|
@ -60,48 +60,16 @@ const isDragging = ref(false);
|
||||||
|
|
||||||
const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
|
const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
|
||||||
|
|
||||||
function getMenu() {
|
|
||||||
return [{
|
|
||||||
text: i18n.ts.rename,
|
|
||||||
icon: 'ti ti-forms',
|
|
||||||
action: rename,
|
|
||||||
}, {
|
|
||||||
text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
|
|
||||||
icon: props.file.isSensitive ? 'ti ti-eye' : 'ti ti-eye-off',
|
|
||||||
action: toggleSensitive,
|
|
||||||
}, {
|
|
||||||
text: i18n.ts.describeFile,
|
|
||||||
icon: 'ti ti-text-caption',
|
|
||||||
action: describe,
|
|
||||||
}, null, {
|
|
||||||
text: i18n.ts.copyUrl,
|
|
||||||
icon: 'ti ti-link',
|
|
||||||
action: copyUrl,
|
|
||||||
}, {
|
|
||||||
type: 'a',
|
|
||||||
href: props.file.url,
|
|
||||||
target: '_blank',
|
|
||||||
text: i18n.ts.download,
|
|
||||||
icon: 'ti ti-download',
|
|
||||||
download: props.file.name,
|
|
||||||
}, null, {
|
|
||||||
text: i18n.ts.delete,
|
|
||||||
icon: 'ti ti-trash',
|
|
||||||
danger: true,
|
|
||||||
action: deleteFile,
|
|
||||||
}];
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClick(ev: MouseEvent) {
|
function onClick(ev: MouseEvent) {
|
||||||
if (props.selectMode) {
|
if (props.selectMode) {
|
||||||
emit('chosen', props.file);
|
emit('chosen', props.file);
|
||||||
} else {
|
} else {
|
||||||
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
os.popupMenu(getDriveFileMenu(props.file), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onContextmenu(ev: MouseEvent) {
|
function onContextmenu(ev: MouseEvent) {
|
||||||
os.contextMenu(getMenu(), ev);
|
os.contextMenu(getDriveFileMenu(props.file), ev);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDragstart(ev: DragEvent) {
|
function onDragstart(ev: DragEvent) {
|
||||||
|
@ -118,62 +86,6 @@ function onDragend() {
|
||||||
isDragging.value = false;
|
isDragging.value = false;
|
||||||
emit('dragend');
|
emit('dragend');
|
||||||
}
|
}
|
||||||
|
|
||||||
function rename() {
|
|
||||||
os.inputText({
|
|
||||||
title: i18n.ts.renameFile,
|
|
||||||
placeholder: i18n.ts.inputNewFileName,
|
|
||||||
default: props.file.name,
|
|
||||||
}).then(({ canceled, result: name }) => {
|
|
||||||
if (canceled) return;
|
|
||||||
os.api('drive/files/update', {
|
|
||||||
fileId: props.file.id,
|
|
||||||
name: name,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function describe() {
|
|
||||||
os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
|
|
||||||
default: props.file.comment != null ? props.file.comment : '',
|
|
||||||
file: props.file,
|
|
||||||
}, {
|
|
||||||
done: caption => {
|
|
||||||
os.api('drive/files/update', {
|
|
||||||
fileId: props.file.id,
|
|
||||||
comment: caption.length === 0 ? null : caption,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}, 'closed');
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleSensitive() {
|
|
||||||
os.api('drive/files/update', {
|
|
||||||
fileId: props.file.id,
|
|
||||||
isSensitive: !props.file.isSensitive,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyUrl() {
|
|
||||||
copyToClipboard(props.file.url);
|
|
||||||
os.success();
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
function addApp() {
|
|
||||||
alert('not implemented yet');
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
async function deleteFile() {
|
|
||||||
const { canceled } = await os.confirm({
|
|
||||||
type: 'warning',
|
|
||||||
text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (canceled) return;
|
|
||||||
os.api('drive/files/delete', {
|
|
||||||
fileId: props.file.id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -1,49 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<MkSelect v-model="sortModeSelect">
|
<div class="_gaps">
|
||||||
<template #label>{{ i18n.ts.sort }}</template>
|
<MkSelect v-model="sortModeSelect">
|
||||||
<option v-for="x in sortOptions" :key="x.value" :value="x.value">{{ x.displayName }}</option>
|
<template #label>{{ i18n.ts.sort }}</template>
|
||||||
</MkSelect>
|
<option v-for="x in sortOptions" :key="x.value" :value="x.value">{{ x.displayName }}</option>
|
||||||
<br>
|
</MkSelect>
|
||||||
<div v-if="!fetching" class="_gap_m">
|
<div v-if="!fetching">
|
||||||
<MkPagination v-slot="{items}" :pagination="pagination" class="driveitem list">
|
<MkPagination v-slot="{items}" :pagination="pagination">
|
||||||
<div
|
<div class="_gaps">
|
||||||
v-for="file in items"
|
<div
|
||||||
:key="file.id"
|
v-for="file in items" :key="file.id"
|
||||||
>
|
class="_button"
|
||||||
<MkA
|
@click="$event => onClick($event, file)"
|
||||||
v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${dateString(file.createdAt)}`"
|
@contextmenu.stop="$event => onContextMenu($event, file)"
|
||||||
class="_button"
|
>
|
||||||
:to="`${file.url}`"
|
<div :class="$style.file">
|
||||||
behavior="browser"
|
<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
|
||||||
@contextmenu.stop="$event => onContextMenu($event, file.id)"
|
<MkDriveFileThumbnail :class="$style.fileThumbnail" :file="file" fit="contain"/>
|
||||||
>
|
<div :class="$style.fileBody">
|
||||||
<div class="file">
|
<div style="margin-bottom: 4px;">
|
||||||
<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
|
{{ file.name }}
|
||||||
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
|
</div>
|
||||||
<div class="body">
|
<div>
|
||||||
<div style="margin-bottom: 4px;">
|
<span style="margin-right: 1em;">{{ file.type }}</span>
|
||||||
{{ file.name }}
|
<span>{{ bytes(file.size) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span style="margin-right: 1em;">{{ file.type }}</span>
|
<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
|
||||||
<span>{{ bytes(file.size) }}</span>
|
</div>
|
||||||
</div>
|
<div v-if="sortModeSelect === 'sizeDesc'">
|
||||||
<div>
|
<div :class="$style.meter"><div :class="$style.meterValue" :style="genUsageBar(file.size)"></div></div>
|
||||||
<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
|
|
||||||
</div>
|
|
||||||
<div v-if="sortModeSelect === 'sizeDesc'">
|
|
||||||
<div class="uawsfosz">
|
|
||||||
<div class="meter"><div :style="genUsageBar(file.size)"></div></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</MkA>
|
</div>
|
||||||
</div>
|
</MkPagination>
|
||||||
</MkPagination>
|
</div>
|
||||||
</div>
|
<div v-else>
|
||||||
<div v-else class="gap_m">
|
<MkLoading/>
|
||||||
{{ i18n.ts.checking }} <MkEllipsis/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -58,6 +53,7 @@ import bytes from '@/filters/bytes';
|
||||||
import { dateString } from '@/filters/date';
|
import { dateString } from '@/filters/date';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
import MkSelect from '@/components/MkSelect.vue';
|
import MkSelect from '@/components/MkSelect.vue';
|
||||||
|
import { getDriveFileMenu } from '@/scripts/get-drive-file-menu';
|
||||||
|
|
||||||
let sortMode = '+size';
|
let sortMode = '+size';
|
||||||
const pagination = {
|
const pagination = {
|
||||||
|
@ -78,27 +74,22 @@ const sortModeSelect = ref('sizeDesc');
|
||||||
|
|
||||||
fetchDriveInfo();
|
fetchDriveInfo();
|
||||||
|
|
||||||
watch(fetching, () => {
|
|
||||||
if (fetching.value) {
|
|
||||||
fetchDriveInfo();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(sortModeSelect, () => {
|
watch(sortModeSelect, () => {
|
||||||
switch (sortModeSelect.value) {
|
switch (sortModeSelect.value) {
|
||||||
case 'sizeDesc':
|
case 'sizeDesc':
|
||||||
sortMode = '+size';
|
sortMode = '+size';
|
||||||
fetching.value = true;
|
fetchDriveInfo();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'createdAtAsc':
|
case 'createdAtAsc':
|
||||||
sortMode = '-createdAt';
|
sortMode = '-createdAt';
|
||||||
fetching.value = true;
|
fetchDriveInfo();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function fetchDriveInfo(): void {
|
function fetchDriveInfo(): void {
|
||||||
|
fetching.value = true;
|
||||||
os.api('drive').then(info => {
|
os.api('drive').then(info => {
|
||||||
capacity.value = info.capacity;
|
capacity.value = info.capacity;
|
||||||
usage.value = info.usage;
|
usage.value = info.usage;
|
||||||
|
@ -113,30 +104,12 @@ function genUsageBar(fsize: number): object {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function onContextMenu(ev: MouseEvent, fileId: string): void {
|
function onClick(ev: MouseEvent, file) {
|
||||||
const target = ev.target as HTMLElement;
|
os.popupMenu(getDriveFileMenu(file), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||||
const items = [
|
}
|
||||||
{
|
|
||||||
text: i18n.ts.delete,
|
function onContextMenu(ev: MouseEvent, file): void {
|
||||||
icon: 'ti ti-trash-x',
|
os.contextMenu(getDriveFileMenu(file), ev);
|
||||||
danger: true,
|
|
||||||
action: async (): Promise<void> => {
|
|
||||||
const res = await os.confirm({
|
|
||||||
type: 'warning',
|
|
||||||
title: i18n.ts.delete,
|
|
||||||
text: i18n.ts.deleteConfirm,
|
|
||||||
});
|
|
||||||
if (!res.canceled) {
|
|
||||||
await os.apiWithDialog('drive/files/delete', { fileId: fileId });
|
|
||||||
fetching.value = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
ev.preventDefault();
|
|
||||||
os.popupMenu(items, target, {
|
|
||||||
viaKeyboard: false,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
definePageMetadata({
|
definePageMetadata({
|
||||||
|
@ -145,49 +118,39 @@ definePageMetadata({
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
|
|
||||||
@use "sass:math";
|
|
||||||
|
|
||||||
.file {
|
.file {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .thumbnail {
|
|
||||||
width: 128px;
|
|
||||||
height: 128px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .body {
|
|
||||||
margin-left: 0.3em;
|
|
||||||
padding: 8px;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.uawsfosz {
|
.fileThumbnail {
|
||||||
> .meter {
|
width: 100px;
|
||||||
$size: 12px;
|
height: 100px;
|
||||||
background: rgba(0, 0, 0, 0.1);
|
}
|
||||||
border-radius: math.div($size, 2);
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
> div {
|
.fileBody {
|
||||||
height: $size;
|
margin-left: 0.3em;
|
||||||
border-radius: math.div($size, 2);
|
padding: 8px;
|
||||||
}
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.meter {
|
||||||
|
margin-top: 8px;
|
||||||
|
height: 12px;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: clip;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meterValue {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
93
packages/frontend/src/scripts/get-drive-file-menu.ts
Normal file
93
packages/frontend/src/scripts/get-drive-file-menu.ts
Normal file
|
@ -0,0 +1,93 @@
|
||||||
|
import * as Misskey from 'misskey-js';
|
||||||
|
import { defineAsyncComponent } from 'vue';
|
||||||
|
import { i18n } from '@/i18n';
|
||||||
|
import copyToClipboard from '@/scripts/copy-to-clipboard';
|
||||||
|
import * as os from '@/os';
|
||||||
|
|
||||||
|
function rename(file: Misskey.entities.DriveFile) {
|
||||||
|
os.inputText({
|
||||||
|
title: i18n.ts.renameFile,
|
||||||
|
placeholder: i18n.ts.inputNewFileName,
|
||||||
|
default: file.name,
|
||||||
|
}).then(({ canceled, result: name }) => {
|
||||||
|
if (canceled) return;
|
||||||
|
os.api('drive/files/update', {
|
||||||
|
fileId: file.id,
|
||||||
|
name: name,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function describe(file: Misskey.entities.DriveFile) {
|
||||||
|
os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
|
||||||
|
default: file.comment != null ? file.comment : '',
|
||||||
|
file: file,
|
||||||
|
}, {
|
||||||
|
done: caption => {
|
||||||
|
os.api('drive/files/update', {
|
||||||
|
fileId: file.id,
|
||||||
|
comment: caption.length === 0 ? null : caption,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}, 'closed');
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSensitive(file: Misskey.entities.DriveFile) {
|
||||||
|
os.api('drive/files/update', {
|
||||||
|
fileId: file.id,
|
||||||
|
isSensitive: !file.isSensitive,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyUrl(file: Misskey.entities.DriveFile) {
|
||||||
|
copyToClipboard(file.url);
|
||||||
|
os.success();
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
function addApp() {
|
||||||
|
alert('not implemented yet');
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
async function deleteFile(file: Misskey.entities.DriveFile) {
|
||||||
|
const { canceled } = await os.confirm({
|
||||||
|
type: 'warning',
|
||||||
|
text: i18n.t('driveFileDeleteConfirm', { name: file.name }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (canceled) return;
|
||||||
|
os.api('drive/files/delete', {
|
||||||
|
fileId: file.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDriveFileMenu(file: Misskey.entities.DriveFile) {
|
||||||
|
return [{
|
||||||
|
text: i18n.ts.rename,
|
||||||
|
icon: 'ti ti-forms',
|
||||||
|
action: rename,
|
||||||
|
}, {
|
||||||
|
text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
|
||||||
|
icon: file.isSensitive ? 'ti ti-eye' : 'ti ti-eye-off',
|
||||||
|
action: toggleSensitive,
|
||||||
|
}, {
|
||||||
|
text: i18n.ts.describeFile,
|
||||||
|
icon: 'ti ti-text-caption',
|
||||||
|
action: describe,
|
||||||
|
}, null, {
|
||||||
|
text: i18n.ts.copyUrl,
|
||||||
|
icon: 'ti ti-link',
|
||||||
|
action: copyUrl,
|
||||||
|
}, {
|
||||||
|
type: 'a',
|
||||||
|
href: file.url,
|
||||||
|
target: '_blank',
|
||||||
|
text: i18n.ts.download,
|
||||||
|
icon: 'ti ti-download',
|
||||||
|
download: file.name,
|
||||||
|
}, null, {
|
||||||
|
text: i18n.ts.delete,
|
||||||
|
icon: 'ti ti-trash',
|
||||||
|
danger: true,
|
||||||
|
action: deleteFile,
|
||||||
|
}];
|
||||||
|
}
|
Loading…
Reference in a new issue