yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

🎨

Browse source
This commit is contained in:
syuilo 2024-10-20 16:38:27 +09:00
parent 1d106b3ae8
commit 041c9caf31
1 changed files with 38 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
packages/frontend/src/components/MkDrive.vue
View file

@ -30,16 +30,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span> <span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
<span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span> <span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span>
</div> </div>
<div :class="$style.navSort">
<MkSelect v-model="sortModeSelect">
<option value="+createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+size">{{ i18n.ts.size }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-size">{{ i18n.ts.size }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+name">{{ i18n.ts.name }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-name">{{ i18n.ts.name }} ({{ i18n.ts.ascendingOrder }})</option>
</MkSelect>
</div>
<button class="_button" :class="$style.navMenu" @click="showMenu"><i class="ti ti-dots"></i></button> <button class="_button" :class="$style.navMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
</nav> </nav>
<div <div
@ -110,7 +100,6 @@ import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, shallowRef, wat
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import MkButton from './MkButton.vue'; import MkButton from './MkButton.vue';
import type { MenuItem } from '@/types/menu.js'; import type { MenuItem } from '@/types/menu.js';
import MkSelect from '@/components/MkSelect.vue';
import XNavFolder from '@/components/MkDrive.navFolder.vue'; import XNavFolder from '@/components/MkDrive.navFolder.vue';
import XFolder from '@/components/MkDrive.folder.vue'; import XFolder from '@/components/MkDrive.folder.vue';
import XFile from '@/components/MkDrive.file.vue'; import XFile from '@/components/MkDrive.file.vue';
@ -660,6 +649,43 @@ function getMenu() {
type: 'label', type: 'label',
}); });
menu.push({
type: 'parent',
text: i18n.ts.sort,
icon: 'ti ti-arrows-sort',
children: [{
text: `${i18n.ts.registeredDate} (${i18n.ts.descendingOrder})`,
icon: 'ti ti-sort-descending-letters',
action: () => { sortModeSelect.value = '+createdAt'; },
active: sortModeSelect.value === '+createdAt',
}, {
text: `${i18n.ts.registeredDate} (${i18n.ts.ascendingOrder})`,
icon: 'ti ti-sort-ascending-letters',
action: () => { sortModeSelect.value = '-createdAt'; },
active: sortModeSelect.value === '-createdAt',
}, {
text: `${i18n.ts.size} (${i18n.ts.descendingOrder})`,
icon: 'ti ti-sort-descending-letters',
action: () => { sortModeSelect.value = '+size'; },
active: sortModeSelect.value === '+size',
}, {
text: `${i18n.ts.size} (${i18n.ts.ascendingOrder})`,
icon: 'ti ti-sort-ascending-letters',
action: () => { sortModeSelect.value = '-size'; },
active: sortModeSelect.value === '-size',
}, {
text: `${i18n.ts.name} (${i18n.ts.descendingOrder})`,
icon: 'ti ti-sort-descending-letters',
action: () => { sortModeSelect.value = '+name'; },
active: sortModeSelect.value === '+name',
}, {
text: `${i18n.ts.name} (${i18n.ts.ascendingOrder})`,
icon: 'ti ti-sort-ascending-letters',
action: () => { sortModeSelect.value = '-name'; },
active: sortModeSelect.value === '-name',
}],
});
if (folder.value) { if (folder.value) {
menu.push({ menu.push({
text: i18n.ts.renameFolder, text: i18n.ts.renameFolder,
@ -778,13 +804,8 @@ onBeforeUnmount(() => {
} }
} }
.navSort {
display: inline-block;
margin-left: auto;
padding: 0 12px;
}
.navMenu { .navMenu {
margin-left: auto;
padding: 0 12px; padding: 0 12px;
} }