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