johan/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

client: reposition drive search toggle

Browse source
This commit is contained in:
Johann150 2023-03-29 19:02:22 +02:00
parent e9f68e65b7
commit 7a0c2acdf6
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/client/src/components/drive.vue
View file

@ -24,7 +24,8 @@
<span v-if="folder != null" class="separator"><i class="fas fa-angle-right"></i></span>
<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
</div>
<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
<button :class="{ menu: true, _button: true, showSearch }" @click="showSearch = !showSearch" v-tooltip="i18n.ts.search"><i class="fas fa-search"></i></button>
<button class="_button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
</nav>
<div
ref="main" class="main"
@ -35,10 +36,7 @@
@drop.prevent.stop="onDrop"
@contextmenu.stop="onContextmenu"
>
<FormFolder>
<template #icon><i class="fas fa-search"></i></template>
<template #label>{{ i18n.ts.search }}</template>
<div class="search" v-show="showSearch">
<FormInput v-model="searchName" :debounce="true" :spellcheck="false">
<template #label>{{ i18n.ts.name }}</template>
<template #prefix><i class="fas fa-filter"></i></template>
@ -52,7 +50,7 @@
<option value="+name">{{ i18n.ts.name }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-name">{{ i18n.ts.name }} ({{ i18n.ts.ascendingOrder }})</option>
</FormSelect>
</FormFolder>
</div>
<MkPagination
ref="paginationElem"
:pagination="pagination"
@ -142,6 +140,7 @@ let selected = $ref<Array<foundkey.entities.DriveFile | foundkey.entities.DriveF
let keepOriginal = $ref<boolean>(defaultStore.state.keepOriginalUploading);
let searchName = $ref<string>('');
let sort = $ref<undefined | string>(undefined);
let showSearch = $ref(false);
// ドロップされようとしているか
let draghover = $ref(false);
@ -636,6 +635,10 @@ onBeforeUnmount(() => {
margin-left: auto;
padding: 0 12px;
}
> .showSearch {
color: var(--accent);
}
}
> .main {
@ -651,6 +654,10 @@ onBeforeUnmount(() => {
height: calc(100% - 38px - 100px);
}
.search {
margin-bottom: var(--margin);
}
.contents {
display: grid;
grid-template-columns: repeat(5, 1fr);