chore(client): tweak style
This commit is contained in:
parent
47186c0fff
commit
92792719bd
|
@ -26,7 +26,8 @@
|
||||||
</div>
|
</div>
|
||||||
<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
|
<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
|
||||||
</nav>
|
</nav>
|
||||||
<div ref="main" class="main"
|
<div
|
||||||
|
ref="main" class="main"
|
||||||
:class="{ uploading: uploadings.length > 0, fetching }"
|
:class="{ uploading: uploadings.length > 0, fetching }"
|
||||||
@dragover.prevent.stop="onDragover"
|
@dragover.prevent.stop="onDragover"
|
||||||
@dragenter="onDragenter"
|
@dragenter="onDragenter"
|
||||||
|
@ -142,7 +143,7 @@ const isDragSource = ref(false);
|
||||||
const fetching = ref(true);
|
const fetching = ref(true);
|
||||||
|
|
||||||
const ilFilesObserver = new IntersectionObserver(
|
const ilFilesObserver = new IntersectionObserver(
|
||||||
(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles()
|
(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(folder, () => emit('cd', folder.value));
|
watch(folder, () => emit('cd', folder.value));
|
||||||
|
@ -232,7 +233,7 @@ function onDrop(ev: DragEvent): any {
|
||||||
removeFile(file.id);
|
removeFile(file.id);
|
||||||
os.api('drive/files/update', {
|
os.api('drive/files/update', {
|
||||||
fileId: file.id,
|
fileId: file.id,
|
||||||
folderId: folder.value ? folder.value.id : null
|
folderId: folder.value ? folder.value.id : null,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//#endregion
|
//#endregion
|
||||||
|
@ -248,7 +249,7 @@ function onDrop(ev: DragEvent): any {
|
||||||
removeFolder(droppedFolder.id);
|
removeFolder(droppedFolder.id);
|
||||||
os.api('drive/folders/update', {
|
os.api('drive/folders/update', {
|
||||||
folderId: droppedFolder.id,
|
folderId: droppedFolder.id,
|
||||||
parentId: folder.value ? folder.value.id : null
|
parentId: folder.value ? folder.value.id : null,
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
// noop
|
// noop
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
|
@ -256,13 +257,13 @@ function onDrop(ev: DragEvent): any {
|
||||||
case 'detected-circular-definition':
|
case 'detected-circular-definition':
|
||||||
os.alert({
|
os.alert({
|
||||||
title: i18n.ts.unableToProcess,
|
title: i18n.ts.unableToProcess,
|
||||||
text: i18n.ts.circularReferenceFolder
|
text: i18n.ts.circularReferenceFolder,
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
os.alert({
|
os.alert({
|
||||||
type: 'error',
|
type: 'error',
|
||||||
text: i18n.ts.somethingHappened
|
text: i18n.ts.somethingHappened,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -278,17 +279,17 @@ function urlUpload() {
|
||||||
os.inputText({
|
os.inputText({
|
||||||
title: i18n.ts.uploadFromUrl,
|
title: i18n.ts.uploadFromUrl,
|
||||||
type: 'url',
|
type: 'url',
|
||||||
placeholder: i18n.ts.uploadFromUrlDescription
|
placeholder: i18n.ts.uploadFromUrlDescription,
|
||||||
}).then(({ canceled, result: url }) => {
|
}).then(({ canceled, result: url }) => {
|
||||||
if (canceled || !url) return;
|
if (canceled || !url) return;
|
||||||
os.api('drive/files/upload-from-url', {
|
os.api('drive/files/upload-from-url', {
|
||||||
url: url,
|
url: url,
|
||||||
folderId: folder.value ? folder.value.id : undefined
|
folderId: folder.value ? folder.value.id : undefined,
|
||||||
});
|
});
|
||||||
|
|
||||||
os.alert({
|
os.alert({
|
||||||
title: i18n.ts.uploadFromUrlRequested,
|
title: i18n.ts.uploadFromUrlRequested,
|
||||||
text: i18n.ts.uploadFromUrlMayTakeTime
|
text: i18n.ts.uploadFromUrlMayTakeTime,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -296,12 +297,12 @@ function urlUpload() {
|
||||||
function createFolder() {
|
function createFolder() {
|
||||||
os.inputText({
|
os.inputText({
|
||||||
title: i18n.ts.createFolder,
|
title: i18n.ts.createFolder,
|
||||||
placeholder: i18n.ts.folderName
|
placeholder: i18n.ts.folderName,
|
||||||
}).then(({ canceled, result: name }) => {
|
}).then(({ canceled, result: name }) => {
|
||||||
if (canceled) return;
|
if (canceled) return;
|
||||||
os.api('drive/folders/create', {
|
os.api('drive/folders/create', {
|
||||||
name: name,
|
name: name,
|
||||||
parentId: folder.value ? folder.value.id : undefined
|
parentId: folder.value ? folder.value.id : undefined,
|
||||||
}).then(createdFolder => {
|
}).then(createdFolder => {
|
||||||
addFolder(createdFolder, true);
|
addFolder(createdFolder, true);
|
||||||
});
|
});
|
||||||
|
@ -312,12 +313,12 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
|
||||||
os.inputText({
|
os.inputText({
|
||||||
title: i18n.ts.renameFolder,
|
title: i18n.ts.renameFolder,
|
||||||
placeholder: i18n.ts.inputNewFolderName,
|
placeholder: i18n.ts.inputNewFolderName,
|
||||||
default: folderToRename.name
|
default: folderToRename.name,
|
||||||
}).then(({ canceled, result: name }) => {
|
}).then(({ canceled, result: name }) => {
|
||||||
if (canceled) return;
|
if (canceled) return;
|
||||||
os.api('drive/folders/update', {
|
os.api('drive/folders/update', {
|
||||||
folderId: folderToRename.id,
|
folderId: folderToRename.id,
|
||||||
name: name
|
name: name,
|
||||||
}).then(updatedFolder => {
|
}).then(updatedFolder => {
|
||||||
// FIXME: 画面を更新するために自分自身に移動
|
// FIXME: 画面を更新するために自分自身に移動
|
||||||
move(updatedFolder);
|
move(updatedFolder);
|
||||||
|
@ -327,7 +328,7 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
|
||||||
|
|
||||||
function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
|
function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
|
||||||
os.api('drive/folders/delete', {
|
os.api('drive/folders/delete', {
|
||||||
folderId: folderToDelete.id
|
folderId: folderToDelete.id,
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
// 削除時に親フォルダに移動
|
// 削除時に親フォルダに移動
|
||||||
move(folderToDelete.parentId);
|
move(folderToDelete.parentId);
|
||||||
|
@ -337,15 +338,15 @@ function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
|
||||||
os.alert({
|
os.alert({
|
||||||
type: 'error',
|
type: 'error',
|
||||||
title: i18n.ts.unableToDelete,
|
title: i18n.ts.unableToDelete,
|
||||||
text: i18n.ts.hasChildFilesOrFolders
|
text: i18n.ts.hasChildFilesOrFolders,
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
os.alert({
|
os.alert({
|
||||||
type: 'error',
|
type: 'error',
|
||||||
text: i18n.ts.unableToDelete
|
text: i18n.ts.unableToDelete,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -411,7 +412,7 @@ function move(target?: Misskey.entities.DriveFolder) {
|
||||||
fetching.value = true;
|
fetching.value = true;
|
||||||
|
|
||||||
os.api('drive/folders/show', {
|
os.api('drive/folders/show', {
|
||||||
folderId: target
|
folderId: target,
|
||||||
}).then(folderToMove => {
|
}).then(folderToMove => {
|
||||||
folder.value = folderToMove;
|
folder.value = folderToMove;
|
||||||
hierarchyFolders.value = [];
|
hierarchyFolders.value = [];
|
||||||
|
@ -510,7 +511,7 @@ async function fetch() {
|
||||||
|
|
||||||
const foldersPromise = os.api('drive/folders', {
|
const foldersPromise = os.api('drive/folders', {
|
||||||
folderId: folder.value ? folder.value.id : null,
|
folderId: folder.value ? folder.value.id : null,
|
||||||
limit: foldersMax + 1
|
limit: foldersMax + 1,
|
||||||
}).then(fetchedFolders => {
|
}).then(fetchedFolders => {
|
||||||
if (fetchedFolders.length === foldersMax + 1) {
|
if (fetchedFolders.length === foldersMax + 1) {
|
||||||
moreFolders.value = true;
|
moreFolders.value = true;
|
||||||
|
@ -522,7 +523,7 @@ async function fetch() {
|
||||||
const filesPromise = os.api('drive/files', {
|
const filesPromise = os.api('drive/files', {
|
||||||
folderId: folder.value ? folder.value.id : null,
|
folderId: folder.value ? folder.value.id : null,
|
||||||
type: props.type,
|
type: props.type,
|
||||||
limit: filesMax + 1
|
limit: filesMax + 1,
|
||||||
}).then(fetchedFiles => {
|
}).then(fetchedFiles => {
|
||||||
if (fetchedFiles.length === filesMax + 1) {
|
if (fetchedFiles.length === filesMax + 1) {
|
||||||
moreFiles.value = true;
|
moreFiles.value = true;
|
||||||
|
@ -549,7 +550,7 @@ function fetchMoreFiles() {
|
||||||
folderId: folder.value ? folder.value.id : null,
|
folderId: folder.value ? folder.value.id : null,
|
||||||
type: props.type,
|
type: props.type,
|
||||||
untilId: files.value[files.value.length - 1].id,
|
untilId: files.value[files.value.length - 1].id,
|
||||||
limit: max + 1
|
limit: max + 1,
|
||||||
}).then(files => {
|
}).then(files => {
|
||||||
if (files.length === max + 1) {
|
if (files.length === max + 1) {
|
||||||
moreFiles.value = true;
|
moreFiles.value = true;
|
||||||
|
@ -569,30 +570,30 @@ function getMenu() {
|
||||||
ref: keepOriginal,
|
ref: keepOriginal,
|
||||||
}, null, {
|
}, null, {
|
||||||
text: i18n.ts.addFile,
|
text: i18n.ts.addFile,
|
||||||
type: 'label'
|
type: 'label',
|
||||||
}, {
|
}, {
|
||||||
text: i18n.ts.upload,
|
text: i18n.ts.upload,
|
||||||
icon: 'fas fa-upload',
|
icon: 'fas fa-upload',
|
||||||
action: () => { selectLocalFile(); }
|
action: () => { selectLocalFile(); },
|
||||||
}, {
|
}, {
|
||||||
text: i18n.ts.fromUrl,
|
text: i18n.ts.fromUrl,
|
||||||
icon: 'fas fa-link',
|
icon: 'fas fa-link',
|
||||||
action: () => { urlUpload(); }
|
action: () => { urlUpload(); },
|
||||||
}, null, {
|
}, null, {
|
||||||
text: folder.value ? folder.value.name : i18n.ts.drive,
|
text: folder.value ? folder.value.name : i18n.ts.drive,
|
||||||
type: 'label'
|
type: 'label',
|
||||||
}, folder.value ? {
|
}, folder.value ? {
|
||||||
text: i18n.ts.renameFolder,
|
text: i18n.ts.renameFolder,
|
||||||
icon: 'fas fa-i-cursor',
|
icon: 'fas fa-i-cursor',
|
||||||
action: () => { renameFolder(folder.value); }
|
action: () => { renameFolder(folder.value); },
|
||||||
} : undefined, folder.value ? {
|
} : undefined, folder.value ? {
|
||||||
text: i18n.ts.deleteFolder,
|
text: i18n.ts.deleteFolder,
|
||||||
icon: 'fas fa-trash-alt',
|
icon: 'fas fa-trash-alt',
|
||||||
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); }
|
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
|
||||||
} : undefined, {
|
} : undefined, {
|
||||||
text: i18n.ts.createFolder,
|
text: i18n.ts.createFolder,
|
||||||
icon: 'fas fa-folder-plus',
|
icon: 'fas fa-folder-plus',
|
||||||
action: () => { createFolder(); }
|
action: () => { createFolder(); },
|
||||||
}];
|
}];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -662,14 +663,14 @@ onBeforeUnmount(() => {
|
||||||
> .path {
|
> .path {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
line-height: 50px;
|
line-height: 42px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
line-height: 50px;
|
line-height: 42px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
|
|
@ -98,7 +98,7 @@ defineExpose({
|
||||||
}
|
}
|
||||||
|
|
||||||
> .header {
|
> .header {
|
||||||
$height: 58px;
|
$height: 46px;
|
||||||
$height-narrow: 42px;
|
$height-narrow: 42px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
@ -138,6 +138,7 @@ defineExpose({
|
||||||
}
|
}
|
||||||
|
|
||||||
> .body {
|
> .body {
|
||||||
|
flex: 1;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue