chore(client): tweak style

This commit is contained in:
syuilo 2022-07-15 19:15:23 +09:00
parent 47186c0fff
commit 92792719bd
2 changed files with 33 additions and 31 deletions

View File

@ -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;
* { * {

View File

@ -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);
} }