heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

tweak drive-cleaner

This commit is contained in:
syuilo 2023-03-20 13:20:21 +09:00
parent 32c60c774c
commit 3d6aaa7aaa
3 changed files with 164 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
packages/frontend/src/components/MkDrive.file.vue
View File

@ -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>

171
packages/frontend/src/pages/settings/drive-cleaner.vue
View File

@ -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
View 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,
}];
}