This commit is contained in:
mattyatea 2023-10-06 00:13:37 +09:00
parent a0927c5353
commit 12d56d69bb
3 changed files with 277 additions and 297 deletions

View File

@ -4,290 +4,258 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div
:class="[$style.root, { [$style.isSelected]: isSelected },{[$style.isSelected]: isMultiSelect}]"
draggable="true"
:title="title"
@click="onClick"
@pointerdown="startLongPress(file)"
@pointerup="endLongPress"
@contextmenu.stop="onContextmenu"
@dragstart="onDragstart"
@dragend="onDragend"
>
<div style="pointer-events: none;">
<div v-if="$i?.avatarId == file.id" :class="[$style.label]">
<img :class="$style.labelImg" src="/client-assets/label.svg"/>
<p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
</div>
<div v-if="$i?.bannerId == file.id" :class="[$style.label]">
<img :class="$style.labelImg" src="/client-assets/label.svg"/>
<p :class="$style.labelText">{{ i18n.ts.banner }}</p>
</div>
<div v-if="file.isSensitive" :class="[$style.label, $style.red]">
<img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
<p :class="$style.labelText">{{ i18n.ts.sensitive }}</p>
</div>
<div
:class="[$style.root, { [$style.isSelected]: isSelected || isSelectedFile }]"
draggable="true"
:title="title"
@click="onClick"
@contextmenu.stop="onContextmenu"
@dragstart="onDragstart"
@dragend="onDragend"
>
<div style="pointer-events: none;">
<div v-if="$i?.avatarId == file.id" :class="[$style.label]">
<img :class="$style.labelImg" src="/client-assets/label.svg"/>
<p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
</div>
<div v-if="$i?.bannerId == file.id" :class="[$style.label]">
<img :class="$style.labelImg" src="/client-assets/label.svg"/>
<p :class="$style.labelText">{{ i18n.ts.banner }}</p>
</div>
<div v-if="file.isSensitive" :class="[$style.label, $style.red]">
<img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
<p :class="$style.labelText">{{ i18n.ts.sensitive }}</p>
</div>
<MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
<MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
<p :class="$style.name">
<span>{{
file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name
}}</span>
<span v-if="file.name.lastIndexOf('.') != -1"
style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span>
</p>
</div>
</div>
<p :class="$style.name">
<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name }}</span>
<span v-if="file.name.lastIndexOf('.') != -1" style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span>
</p>
</div>
</div>
</template>
<script lang="ts" setup>
import {computed, ref, watch} from 'vue';
import { computed, ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import bytes from '@/filters/bytes.js';
import * as os from '@/os.js';
import {i18n} from '@/i18n.js';
import {$i} from '@/account.js';
import {getDriveFileMenu, getDriveFileMultiMenu} from '@/scripts/get-drive-file-menu.js';
const isLongPressing = ref(false);
let longPressTimeout = null;
import {defaultStore} from '@/store.js'
function startLongPress() {
isLongPressing.value = true;
longPressTimeout = setTimeout(() => {
if (isLongPressing) {
}
}, 800); // 1
}
import { i18n } from '@/i18n.js';
import { $i } from '@/account.js';
import { getDriveFileMenu, getDriveMultiFileMenu } from '@/scripts/get-drive-file-menu.js';
import { isTouchUsing } from '@/scripts/touch.js';
function endLongPress() {
isLongPressing.value = false;
clearTimeout(longPressTimeout);
}
const isMultiSelect = ref(false);
const props = withDefaults(defineProps<{
file: Misskey.entities.DriveFile;
folder: Misskey.entities.DriveFolder | null;
isSelected?: boolean;
selectMode?: boolean;
multipleselect?;
isLongPressing?;
file: Misskey.entities.DriveFile;
folder: Misskey.entities.DriveFolder | null;
isSelected?: boolean;
selectMode?: boolean;
SelectFiles?: string[];
}>(), {
isSelected: false,
selectMode: false,
isSelected: false,
selectMode: false,
});
const emit = defineEmits<{
(ev: 'chosen', r: Misskey.entities.DriveFile): void;
(ev: 'dragstart'): void;
(ev: 'dragend'): void;
(ev: 'chosen', r: Misskey.entities.DriveFile): void;
(ev: 'dragstart'): void;
(ev: 'dragend'): void;
}>();
const isDragging = ref(false);
const isSelectedFile = ref(false);
const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
watch(props.multipleselect, () => {
isMultiSelect.value = !!props.multipleselect.some(item => item.id === props.file.id);
watch(props.SelectFiles, () => {
const index = props.SelectFiles.findIndex(item => item.id === props.file.id);
isSelectedFile.value = index !== -1;
});
function onClick(ev: MouseEvent) {
if (props.selectMode) {
emit('chosen', props.file);
} else if (ev.shiftKey && ev.button === 2 || isMultiSelect.value ) {
os.popupMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
}
else if (!ev.shiftKey) {
console.log('onclick');
if (props.selectMode) {
emit('chosen', props.file);
} else if (!ev.shiftKey && !isTouchUsing && !isSelectedFile.value) {
os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
} else if (!ev.shiftKey && isSelectedFile.value && props.SelectFiles.length === 0) {
os.popupMenu(getDriveMultiFileMenu(props.SelectFiles), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
} else if (isTouchUsing && !isSelectedFile.value && props.SelectFiles.length === 0) {
os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
}
}
}
}
function device() {
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
return 'mobile';
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
return 'tablet';
}else{
return 'desktop';
}
}
function onContextmenu(ev: MouseEvent) {
if (!ev.shiftKey && !isMultiSelect.value) {
os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
} else if (ev.shiftKey && props.multipleselect.length > 0 && ev.button === 2) {
os.contextMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), ev);
} else if(device()=== "desktop"){
os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
}
if (props.isLongPressing){
isMultiSelect.value = !isMultiSelect.value
}
console.log('oncontext');
if (!isTouchUsing) {
if (!ev.shiftKey && !isSelectedFile.value) {
os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
} else if (isSelectedFile.value) {
os.contextMenu(getDriveMultiFileMenu(props.SelectFiles), ev);
}
}
}
function onDragstart(ev: DragEvent) {
if (ev.dataTransfer) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
}
isDragging.value = true;
emit('dragstart');
if (ev.dataTransfer) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
}
isDragging.value = true;
console.log(isDragging.value)
emit('dragstart');
}
function onDragend() {
isDragging.value = false;
emit('dragend');
isDragging.value = false;
emit('dragend');
}
</script>
<style lang="scss" module>
.root {
position: relative;
padding: 8px 0 0 0;
min-height: 180px;
border-radius: 8px;
cursor: pointer;
position: relative;
padding: 8px 0 0 0;
min-height: 180px;
border-radius: 8px;
cursor: pointer;
&:hover {
background: rgba(#000, 0.05);
&:hover {
background: rgba(#000, 0.05);
> .label {
&:before,
&:after {
background: #0b65a5;
}
> .label {
&:before,
&:after {
background: #0b65a5;
}
&.red {
&:before,
&:after {
background: #c12113;
}
}
}
}
&.red {
&:before,
&:after {
background: #c12113;
}
}
}
}
&:active {
background: rgba(#000, 0.1);
&:active {
background: rgba(#000, 0.1);
> .label {
&:before,
&:after {
background: #0b588c;
}
> .label {
&:before,
&:after {
background: #0b588c;
}
&.red {
&:before,
&:after {
background: #ce2212;
}
}
}
}
&.red {
&:before,
&:after {
background: #ce2212;
}
}
}
}
&.isSelected {
background: var(--accent);
&.isSelected {
background: var(--accent);
&:hover {
background: var(--accentLighten);
}
&:hover {
background: var(--accentLighten);
}
&:active {
background: var(--accentDarken);
}
&:active {
background: var(--accentDarken);
}
> .label {
&:before,
&:after {
display: none;
}
}
> .label {
&:before,
&:after {
display: none;
}
}
> .name {
color: #fff;
}
> .name {
color: #fff;
}
> .thumbnail {
color: #fff;
}
}
> .thumbnail {
color: #fff;
}
}
}
.label {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
&:before,
&:after {
content: "";
display: block;
position: absolute;
z-index: 1;
background: #0c7ac9;
}
&:before,
&:after {
content: "";
display: block;
position: absolute;
z-index: 1;
background: #0c7ac9;
}
&:before {
top: 0;
left: 57px;
width: 28px;
height: 8px;
}
&:before {
top: 0;
left: 57px;
width: 28px;
height: 8px;
}
&:after {
top: 57px;
left: 0;
width: 8px;
height: 28px;
}
&:after {
top: 57px;
left: 0;
width: 8px;
height: 28px;
}
&.red {
&:before,
&:after {
background: #c12113;
}
}
&.red {
&:before,
&:after {
background: #c12113;
}
}
}
.labelImg {
position: absolute;
z-index: 2;
top: 0;
left: 0;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.labelText {
position: absolute;
z-index: 3;
top: 19px;
left: -28px;
width: 120px;
margin: 0;
text-align: center;
line-height: 28px;
color: #fff;
transform: rotate(-45deg);
position: absolute;
z-index: 3;
top: 19px;
left: -28px;
width: 120px;
margin: 0;
text-align: center;
line-height: 28px;
color: #fff;
transform: rotate(-45deg);
}
.thumbnail {
width: 110px;
height: 110px;
margin: auto;
width: 110px;
height: 110px;
margin: auto;
}
.name {
display: block;
margin: 4px 0 0 0;
font-size: 0.8em;
text-align: center;
word-break: break-all;
color: var(--fg);
overflow: hidden;
display: block;
margin: 4px 0 0 0;
font-size: 0.8em;
text-align: center;
word-break: break-all;
color: var(--fg);
overflow: hidden;
}
</style>

View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.root">
<div :class="$style.root" @scroll="handleScroll">
<nav :class="$style.nav">
<div :class="$style.navPath" @contextmenu.prevent.stop="() => {}">
<XNavFolder
@ -14,7 +14,6 @@ SPDX-License-Identifier: AGPL-3.0-only
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
:multipleselect="multipleselect"
/>
<template v-for="f in hierarchyFolders">
<span :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@ -26,7 +25,6 @@ SPDX-License-Identifier: AGPL-3.0-only
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
:multipleselect="multipleselect"
/>
</template>
<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@ -53,7 +51,6 @@ SPDX-License-Identifier: AGPL-3.0-only
:folder="f"
:selectMode="select === 'folder'"
:isSelected="selectedFolders.some(x => x.id === f.id)"
:multipleselect="multipleselect"
@chosen="chooseFolder"
@move="move"
@upload="upload"
@ -76,15 +73,15 @@ SPDX-License-Identifier: AGPL-3.0-only
:folder="folder"
:selectMode="select === 'file'"
:isSelected="selectedFiles.some(x => x.id === file.id)"
:SelectFiles="SelectFiles"
@chosen="chooseFile"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
@pointerdown="startLongPress(file)"
@pointerup="endLongPress"
@click.shift.left.exact="selectClick(file)"
@click.ctrl.left.exact="selectClick(file)"
:multipleselect="multipleselect"
:isLongPressing="isLongPressing"
@pointerdown="startLongPress(file)"
@pointerup="endLongPress"
@pointermove="debounceEvent"
@pointercancel="debounceEvent"
@click.shift.left.exact="multipleSelect(file)"
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
@ -116,7 +113,7 @@ import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
import { uploadFile, uploads } from '@/scripts/upload.js';
import { claimAchievement } from '@/scripts/achievements.js';
import { isTouchUsing } from '@/scripts/touch.js';
const props = withDefaults(defineProps<{
initialFolder?: Misskey.entities.DriveFolder;
type?: string;
@ -127,24 +124,6 @@ const props = withDefaults(defineProps<{
select: null,
});
const isLongPressing = ref(false);
let longPressTimeout = null;
function startLongPress(file) {
isLongPressing.value = true;
longPressTimeout = setTimeout(() => {
if (isLongPressing) {
selectClick(file)
}
}, 800); // 1
}
function endLongPress() {
isLongPressing.value = false;
clearTimeout(longPressTimeout);
}
const emit = defineEmits<{
(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
@ -167,7 +146,11 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
const uploadings = uploads;
const connection = useStream().useChannel('drive');
const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // $ref使
let multipleselect = ref([]);
const SelectFiles = ref([]);
const isLongPressing = ref(false);
let longPressTimeout = null;
const isScrolling = ref(false); //
//
const draghover = ref(false);
@ -186,6 +169,47 @@ watch(folder, () => emit('cd', folder.value));
function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
addFile(file, true);
}
let timeout;
const debounceEvent = (event) => {
if (isTouchUsing && SelectFiles.value.length === 0) {
clearTimeout(timeout);
timeout = setTimeout(() => {
isLongPressing.value = false;
}, 900);
}else{
clearTimeout(timeout);
timeout = setTimeout(() => {
isLongPressing.value = false;
}, 80);
}
};
function startLongPress(file) {
console.log(SelectFiles.value.length)
if (isTouchUsing && SelectFiles.value.length === 0) {
isLongPressing.value = true;
longPressTimeout = setTimeout(() => {
if (isLongPressing.value) {
multipleSelect(file);
}
}, 1000);
}else{
isLongPressing.value = true;
longPressTimeout = setTimeout(() => {
if (isLongPressing.value) {
multipleSelect(file);
}
}, 100);
}
}
function endLongPress() {
if (isTouchUsing) {
isLongPressing.value = false;
clearTimeout(longPressTimeout);
}
}
function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
const current = folder.value ? folder.value.id : null;
@ -195,18 +219,7 @@ function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
addFile(file, true);
}
}
function selectClick(file) {
const index = multipleselect.value.findIndex(item => item.id === file.id);
if (index !== -1) {
// File is already selected, so remove it
multipleselect.value.splice(index, 1);
} else {
// File is not selected, so add it
multipleselect.value.push(file);
}
}
function onStreamDriveFileDeleted(fileId: string) {
removeFile(fileId);
}
@ -214,7 +227,14 @@ function onStreamDriveFileDeleted(fileId: string) {
function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
addFolder(createdFolder, true);
}
function multipleSelect(file) {
const index = SelectFiles.value.findIndex(item => item.id === file.id);
if (index !== -1) {
SelectFiles.value.splice(index, 1);
} else {
SelectFiles.value.push(file);
}
}
function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
const current = folder.value ? folder.value.id : null;
if (current !== updatedFolder.parentId) {
@ -443,7 +463,6 @@ function chooseFile(file: Misskey.entities.DriveFile) {
emit('change-selection', [file]);
}
}
}
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
@ -466,7 +485,6 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
}
function move(target?: Misskey.entities.DriveFolder) {
multipleselect.value = []
if (!target) {
goRoot();
return;
@ -531,17 +549,11 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
const index = multipleselect.value.findIndex(item => item.id === file.id);
if (index !== -1) {
// File is already selected, so remove it
multipleselect.value.splice(index, 1);
}
}
function removeFile(file: Misskey.entities.DriveFile | string) {
const fileId = typeof file === 'object' ? file.id : file;
files.value = files.value.filter(f => f.id !== fileId);
multipleselect.value = multipleselect.value.filter(a => a.id !== fileId)
}
function appendFile(file: Misskey.entities.DriveFile) {
@ -691,12 +703,10 @@ function getMenu() {
}
function showMenu(ev: MouseEvent) {
multipleselect.value = []
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
}
const contents = ref(null);
function onContextmenu(ev: MouseEvent) {
multipleselect.value = []
os.contextMenu(getMenu(), ev);
}
@ -733,6 +743,7 @@ onBeforeUnmount(() => {
connection.dispose();
ilFilesObserver.disconnect();
});
</script>
<style lang="scss" module>

View File

@ -39,10 +39,10 @@ function describe(file: Misskey.entities.DriveFile) {
}, 'closed');
}
function toggleSensitive(file: Misskey.entities.DriveFile , isSensitive?) {
function toggleSensitive(file: Misskey.entities.DriveFile) {
os.api('drive/files/update', {
fileId: file.id,
isSensitive: isSensitive !== null ? isSensitive : !file.isSensitive
isSensitive: !file.isSensitive,
}).catch(err => {
os.alert({
type: 'error',
@ -72,16 +72,30 @@ async function deleteFile(file: Misskey.entities.DriveFile) {
fileId: file.id,
});
}
async function deleteSelectFile(files) {
async function MultideleteFile(files: Misskey.entities.DriveFile[] | null) {
const { canceled } = await os.confirm({
type: 'warning',
text: files.length+'つのファイルをまとめて削除しますか?',
text: i18n.t('driveMultiFileDeleteConfirm', { name: files.length }),
});
if (canceled) return;
files.forEach((e) => {
files.forEach((e)=>{
os.api('drive/files/delete', {
fileId: e.id,
});
})
}
function isSensitive(files: Misskey.entities.DriveFile[] | null ,sensitive:boolean) {
files.forEach((e)=>{
os.api('drive/files/update', {
fileId: e.id,
isSensitive: sensitive,
}).catch(err => {
os.alert({
type: 'error',
title: i18n.ts.error,
text: err.message,
});
});
})
@ -144,35 +158,22 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
return menu;
}
export function getDriveFileMultiMenu(file, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
export function getDriveMultiFileMenu(files: string[] & boolean): MenuItem[] {
let menu;
menu = [{
text: i18n.ts.unmarkAsSensitive,
text: i18n.ts.unmarkAsSensitive,
icon: 'ti ti-eye',
action: () => {file.forEach((e) => toggleSensitive(e,false))}
action: () => isSensitive(files,false),
},{
text: i18n.ts.markAsSensitive,
icon: 'ti ti-eye-exclamation',
action: () => {file.forEach((e) => toggleSensitive(e,true))}
,
},{
icon: 'ti ti-eye-exclamation',
action: () => isSensitive(files,true),
}, {
text: i18n.ts.delete,
icon: 'ti ti-trash',
danger: true,
action: () => deleteSelectFile(file),
action: () => MultideleteFile(files),
}];
if (defaultStore.state.devMode) {
menu = menu.concat([null, {
icon: 'ti ti-id',
text: i18n.ts.copyFileId,
action: () => {
copyToClipboard(file.id);
},
}]);
}
return menu;
}