mirror of
https://github.com/45Drives/cockpit-navigator.git
synced 2025-07-28 16:14:25 +02:00
fix loading settings from fresh install
This commit is contained in:
joshuaboud
parent
e54b028e34
commit
11182d0cf2
@ -11,132 +11,134 @@
|
||||
@apply="showMenu = false"
|
||||
>
|
||||
<div class="flex flex-col gap-content items-start">
|
||||
<div class="inline-flex flex-col gap-content">
|
||||
<LabelledSwitch v-model="darkMode">Dark mode</LabelledSwitch>
|
||||
<LabelledSwitch v-model="settings.directoryView.showHidden">Show hidden files</LabelledSwitch>
|
||||
<LabelledSwitch
|
||||
v-model="booleanAnalogs.directoryView.view.bool"
|
||||
>List view</LabelledSwitch>
|
||||
<LabelledSwitch v-model="settings.directoryView.separateDirs">Separate directories while sorting</LabelledSwitch>
|
||||
</div>
|
||||
<div v-if="booleanAnalogs.directoryView.view.bool" class="self-stretch">
|
||||
<div>List view columns</div>
|
||||
<div
|
||||
class="flex justify-start text-sm rounded-lg divide-x divide-default border border-default shadow"
|
||||
>
|
||||
<div class="flex flex-col grow items-stretch">
|
||||
<div class="font-semibold px-2">Visible</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.mode"
|
||||
@click="settings.directoryView.cols.mode = !settings.directoryView.cols.mode"
|
||||
>
|
||||
Mode
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
<template v-if="settings.directoryView">
|
||||
<div class="inline-flex flex-col gap-content">
|
||||
<LabelledSwitch v-model="darkMode">Dark mode</LabelledSwitch>
|
||||
<LabelledSwitch v-model="settings.directoryView.showHidden">Show hidden files</LabelledSwitch>
|
||||
<LabelledSwitch v-model="booleanAnalogs.directoryView.view.bool">List view</LabelledSwitch>
|
||||
<LabelledSwitch
|
||||
v-model="settings.directoryView.separateDirs"
|
||||
>Separate directories while sorting</LabelledSwitch>
|
||||
</div>
|
||||
<div v-if="booleanAnalogs.directoryView.view.bool" class="self-stretch">
|
||||
<div>List view columns</div>
|
||||
<div
|
||||
class="flex justify-start text-sm rounded-lg divide-x divide-default border border-default shadow"
|
||||
>
|
||||
<div class="flex flex-col grow items-stretch">
|
||||
<div class="font-semibold px-2">Visible</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.mode"
|
||||
@click="settings.directoryView.cols.mode = !settings.directoryView.cols.mode"
|
||||
>
|
||||
Mode
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.owner"
|
||||
@click="settings.directoryView.cols.owner = !settings.directoryView.cols.owner"
|
||||
>
|
||||
Owner
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.group"
|
||||
@click="settings.directoryView.cols.group = !settings.directoryView.cols.group"
|
||||
>
|
||||
Group
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.size"
|
||||
@click="settings.directoryView.cols.size = !settings.directoryView.cols.size"
|
||||
>
|
||||
Size
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.ctime"
|
||||
@click="settings.directoryView.cols.ctime = !settings.directoryView.cols.ctime"
|
||||
>
|
||||
Created
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.mtime"
|
||||
@click="settings.directoryView.cols.mtime = !settings.directoryView.cols.mtime"
|
||||
>
|
||||
Modified
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.atime"
|
||||
@click="settings.directoryView.cols.atime = !settings.directoryView.cols.atime"
|
||||
>
|
||||
Accessed
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.owner"
|
||||
@click="settings.directoryView.cols.owner = !settings.directoryView.cols.owner"
|
||||
>
|
||||
Owner
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.group"
|
||||
@click="settings.directoryView.cols.group = !settings.directoryView.cols.group"
|
||||
>
|
||||
Group
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.size"
|
||||
@click="settings.directoryView.cols.size = !settings.directoryView.cols.size"
|
||||
>
|
||||
Size
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.ctime"
|
||||
@click="settings.directoryView.cols.ctime = !settings.directoryView.cols.ctime"
|
||||
>
|
||||
Created
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.mtime"
|
||||
@click="settings.directoryView.cols.mtime = !settings.directoryView.cols.mtime"
|
||||
>
|
||||
Modified
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2"
|
||||
v-if="settings.directoryView.cols.atime"
|
||||
@click="settings.directoryView.cols.atime = !settings.directoryView.cols.atime"
|
||||
>
|
||||
Accessed
|
||||
<ChevronRightIcon class="size-icon-sm icon-default" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col grow text-right items-stretch">
|
||||
<div class="font-semibold px-2">Hidden</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.mode"
|
||||
@click="settings.directoryView.cols.mode = !settings.directoryView.cols.mode"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Mode
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.owner"
|
||||
@click="settings.directoryView.cols.owner = !settings.directoryView.cols.owner"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Owner
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.group"
|
||||
@click="settings.directoryView.cols.group = !settings.directoryView.cols.group"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Group
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.size"
|
||||
@click="settings.directoryView.cols.size = !settings.directoryView.cols.size"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Size
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.ctime"
|
||||
@click="settings.directoryView.cols.ctime = !settings.directoryView.cols.ctime"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Created
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.mtime"
|
||||
@click="settings.directoryView.cols.mtime = !settings.directoryView.cols.mtime"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Modified
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.atime"
|
||||
@click="settings.directoryView.cols.atime = !settings.directoryView.cols.atime"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Accessed
|
||||
<div class="flex flex-col grow text-right items-stretch">
|
||||
<div class="font-semibold px-2">Hidden</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.mode"
|
||||
@click="settings.directoryView.cols.mode = !settings.directoryView.cols.mode"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Mode
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.owner"
|
||||
@click="settings.directoryView.cols.owner = !settings.directoryView.cols.owner"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Owner
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.group"
|
||||
@click="settings.directoryView.cols.group = !settings.directoryView.cols.group"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Group
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.size"
|
||||
@click="settings.directoryView.cols.size = !settings.directoryView.cols.size"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Size
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.ctime"
|
||||
@click="settings.directoryView.cols.ctime = !settings.directoryView.cols.ctime"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Created
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.mtime"
|
||||
@click="settings.directoryView.cols.mtime = !settings.directoryView.cols.mtime"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Modified
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg hover:bg-accent cursor-pointer flex flex-row gap-1 items-center px-2 justify-end"
|
||||
v-if="!settings.directoryView.cols.atime"
|
||||
@click="settings.directoryView.cols.atime = !settings.directoryView.cols.atime"
|
||||
>
|
||||
<ChevronLeftIcon class="size-icon-sm icon-default" />Accessed
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</ModalPopup>
|
||||
</template>
|
||||
@ -191,17 +193,17 @@ export default {
|
||||
...storedSettings,
|
||||
directoryView: {
|
||||
...defaultSettings.directoryView,
|
||||
...storedSettings.directoryView,
|
||||
...(storedSettings.directoryView ?? {}),
|
||||
cols: {
|
||||
...defaultSettings.directoryView.cols,
|
||||
...storedSettings.directoryView.cols,
|
||||
...(storedSettings.directoryView?.cols ?? {}),
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
watch(settings, () => {
|
||||
localStorage.setItem(settingsStorageKey, JSON.stringify(settings));
|
||||
booleanAnalogs.directoryView.view.bool = settings.directoryView.view === booleanAnalogs.directoryView.view.trueValue;
|
||||
booleanAnalogs.directoryView.view.bool = settings.directoryView?.view === booleanAnalogs.directoryView.view.trueValue;
|
||||
}, { immediate: true });
|
||||
|
||||
watch(booleanAnalogs, () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user