tyler.durden/cockpit-navigator
1
0
Fork 0
mirror of https://github.com/45Drives/cockpit-navigator.git synced 2025-07-30 09:05:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

add quick settings buttons in footer

Browse Source
This commit is contained in:
joshuaboud 2022-06-13 17:36:44 -03:00
parent 85ace035f2
commit dc2ba8e724
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
3 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
navigator/src/App.vue
View File

@ -4,7 +4,9 @@
<div class="flex flex-row items-center px-4 py-2">
<div class="text-sm" v-html="routerViewFooterText"></div>
<div class="grow" />
<SettingsMenu />
<div id="footer-buttons" class="flex flex-row-reverse gap-buttons">
<SettingsMenu />
</div>
</div>
</div>
<Notifications :notificationFIFO="notificationFIFO" ref="notifications" />
@ -21,6 +23,9 @@ const props = defineProps({ notificationFIFO: FIFO });
const providesValid = ref(false);
const darkMode = ref(false);
provide('darkModeInjectionKey', darkMode);
const notifications = ref();
provide(notificationsInjectionKey, notifications);

23
navigator/src/components/IconToggle.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<button @click="$emit('update:modelValue', modelValue === trueValue ? falseValue: trueValue)">
<slot :value="modelValue === trueValue">
</slot>
</button>
</template>
<script>
export default {
props: {
modelValue: Boolean,
trueValue: {
required: false,
default: true,
},
falseValue: {
required: false,
default: false,
},
},
}
</script>

28
navigator/src/views/Browser.vue
View File

@ -73,16 +73,30 @@
</div>
</div>
</div>
<Teleport to="#footer-buttons">
<IconToggle v-model="darkMode" v-slot="{ value }">
<MoonIcon v-if="value" class="size-icon icon-default" />
<SunIcon v-else class="size-icon icon-default" />
</IconToggle>
<IconToggle v-model="settings.directoryView.showHidden" v-slot="{ value }">
<EyeIcon v-if="value" class="size-icon icon-default" />
<EyeOffIcon v-else class="size-icon icon-default" />
</IconToggle>
<IconToggle v-model="settings.directoryView.view" trueValue="list" falseValue="grid" v-slot="{ value }">
<ViewListIcon v-if="value" class="size-icon icon-default" />
<ViewGridIcon v-else class="size-icon icon-default" />
</IconToggle>
</Teleport>
</template>
<script>
import { inject, ref, reactive, watch, nextTick } from 'vue';
import { useRoute, useRouter } from "vue-router";
import DirectoryView from "../components/DirectoryView.vue";
import { useSpawn, errorString, errorStringHTML, canonicalPath } from '@45drives/cockpit-helpers';
import PathBreadCrumbs from '../components/PathBreadCrumbs.vue';
import { notificationsInjectionKey, pathHistoryInjectionKey, lastPathStorageKey, settingsInjectionKey } from '../keys';
import { ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, RefreshIcon, ChevronDownIcon, SearchIcon } from '@heroicons/vue/solid';
import { ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, RefreshIcon, ChevronDownIcon, SearchIcon, SunIcon, MoonIcon, EyeIcon, EyeOffIcon, ViewListIcon, ViewGridIcon } from '@heroicons/vue/solid';
import IconToggle from '../components/IconToggle.vue';
const encodePartial = (string) =>
encodeURIComponent(string)
@ -94,6 +108,7 @@ const encodePartial = (string) =>
export default {
setup() {
const darkMode = inject('darkModeInjectionKey');
const settings = inject(settingsInjectionKey);
const notifications = inject(notificationsInjectionKey);
const route = useRoute();
@ -180,6 +195,8 @@ export default {
return {
cockpit,
console,
darkMode,
settings,
pathHistory,
directoryViewRef,
searchFilterStr,
@ -203,6 +220,13 @@ export default {
RefreshIcon,
ChevronDownIcon,
SearchIcon,
IconToggle,
SunIcon,
MoonIcon,
EyeIcon,
EyeOffIcon,
ViewListIcon,
ViewGridIcon,
},
emits: [
'updateFooterText'