chore(client): tweak deck ui
This commit is contained in:
syuilo
parent
57e533a5ef
commit
a3a9b7fbd3
@ -1762,6 +1762,8 @@ _deck:
|
||||
stackLeft: "左に重ねる"
|
||||
popRight: "右に出す"
|
||||
profile: "プロファイル"
|
||||
newProfile: "新規プロファイル"
|
||||
deleteProfile: "プロファイルを削除"
|
||||
introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう！"
|
||||
introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
|
||||
widgetsIntroduction: "カラムのメニューから、「ウィジェットの編集」を選択してウィジェットを追加してください"
|
||||
|
||||
@ -9,8 +9,6 @@
|
||||
<option value="left">{{ i18n.ts.left }}</option>
|
||||
<option value="center">{{ i18n.ts.center }}</option>
|
||||
</FormRadios>
|
||||
|
||||
<FormLink class="_formBlock" @click="setProfile">{{ i18n.ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -29,18 +27,6 @@ import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
|
||||
const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
|
||||
const columnAlign = computed(deckStore.makeGetterSetter('columnAlign'));
|
||||
const profile = computed(deckStore.makeGetterSetter('profile'));
|
||||
|
||||
async function setProfile() {
|
||||
const { canceled, result: name } = await os.inputText({
|
||||
title: i18n.ts._deck.profile,
|
||||
allowEmpty: false,
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
profile.value = name;
|
||||
unisonReload();
|
||||
}
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
|
||||
@ -33,8 +33,16 @@
|
||||
<div>{{ i18n.ts._deck.introduction2 }}</div>
|
||||
</div>
|
||||
<div class="sideMenu">
|
||||
<button v-tooltip.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
|
||||
<button v-tooltip.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="fas fa-cog"></i></button>
|
||||
<div class="top">
|
||||
<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="fas fa-caret-down"></i></button>
|
||||
<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="fas fa-trash-can"></i></button>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="fas fa-cog"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,7 +75,7 @@
|
||||
import { computed, defineAsyncComponent, onMounted, provide, ref, watch } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-store';
|
||||
import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store';
|
||||
import DeckColumnCore from '@/ui/deck/column-core.vue';
|
||||
import XSidebar from '@/ui/_common_/navbar.vue';
|
||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||
@ -78,6 +86,7 @@ import { navbarItemDef } from '@/navbar';
|
||||
import { $i } from '@/account';
|
||||
import { i18n } from '@/i18n';
|
||||
import { mainRouter } from '@/router';
|
||||
import { unisonReload } from '@/scripts/unison-reload';
|
||||
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
||||
|
||||
mainRouter.navHook = (path): boolean => {
|
||||
@ -168,6 +177,51 @@ loadDeck();
|
||||
function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
|
||||
// TODO??
|
||||
}
|
||||
|
||||
function changeProfile(ev: MouseEvent) {
|
||||
const items = ref([{
|
||||
text: deckStore.state.profile,
|
||||
active: true.valueOf,
|
||||
}]);
|
||||
getProfiles().then(profiles => {
|
||||
items.value = [{
|
||||
text: deckStore.state.profile,
|
||||
active: true.valueOf,
|
||||
}, ...(profiles.filter(k => k !== deckStore.state.profile).map(k => ({
|
||||
text: k,
|
||||
action: () => {
|
||||
deckStore.set('profile', k);
|
||||
unisonReload();
|
||||
},
|
||||
}))), null, {
|
||||
text: i18n.ts._deck.newProfile,
|
||||
icon: 'fas fa-plus',
|
||||
action: async () => {
|
||||
const { canceled, result: name } = await os.inputText({
|
||||
title: i18n.ts._deck.profile,
|
||||
allowEmpty: false,
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
deckStore.set('profile', name);
|
||||
unisonReload();
|
||||
},
|
||||
}];
|
||||
});
|
||||
os.popupMenu(items, ev.currentTarget ?? ev.target);
|
||||
}
|
||||
|
||||
async function deleteProfile() {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.t('deleteAreYouSure', { x: deckStore.state.profile }),
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
deleteProfile_(deckStore.state.profile);
|
||||
deckStore.set('profile', 'default');
|
||||
unisonReload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -271,9 +325,25 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
|
||||
> .button {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
> .top, > .middle, > .bottom {
|
||||
> .button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .top {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
> .middle {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
> .bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,18 +72,8 @@ export const loadDeck = async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
deckStore.set('columns', [{
|
||||
id: 'a',
|
||||
type: 'main',
|
||||
name: i18n.ts._deck._columns.main,
|
||||
width: 350,
|
||||
}, {
|
||||
id: 'b',
|
||||
type: 'notifications',
|
||||
name: i18n.ts._deck._columns.notifications,
|
||||
width: 330,
|
||||
}]);
|
||||
deckStore.set('layout', [['a'], ['b']]);
|
||||
deckStore.set('columns', []);
|
||||
deckStore.set('layout', []);
|
||||
return;
|
||||
}
|
||||
throw err;
|
||||
@ -105,6 +95,19 @@ export const saveDeck = throttle(1000, () => {
|
||||
});
|
||||
});
|
||||
|
||||
export async function getProfiles(): Promise<string[]> {
|
||||
return await api('i/registry/keys', {
|
||||
scope: ['client', 'deck', 'profiles'],
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteProfile(key: string): Promise<void> {
|
||||
return await api('i/registry/remove', {
|
||||
scope: ['client', 'deck', 'profiles'],
|
||||
key: key,
|
||||
});
|
||||
}
|
||||
|
||||
export function addColumn(column: Column) {
|
||||
if (column.name === undefined) column.name = null;
|
||||
deckStore.push('columns', column);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user