alihan/dozzle-monitoring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved logout button to sidebar and fix default width sidebar. (#1942)

Browse Source 
* Moved logout button to sidebar and fix default width sidebar.

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

* Fix logout url. Save collapse to localstorage.

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

* Clear code.

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

* Update logout button if collapse

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

* Fix dark mode for collapse button. Update toolbar. Remove localstorage.

* Fix collapse auto-import

* Remove collapse from settings

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>
This commit is contained in:
Dmitry Mazurov
2022-11-08 22:45:11 +03:00
committed by GitHub
parent fbe34d7377
commit 54eca89c4e
4 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/components/SideMenu.vue
View File

@@ -8,20 +8,29 @@
</svg>
</router-link>
</div>
<div class="column is-narrow has-text-right px-1">
<button class="button is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
</div>
<div class="columns is-marginless">
<div class="column is-narrow py-0 pl-0 pr-1">
<button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
<span class="icon">
<mdi-light-magnify />
</span>
</button>
</div>
<div class="column is-narrow has-text-right px-0">
<router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded">
<div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
<router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded is-small">
<span class="icon">
<mdi-light-cog />
</span>
</router-link>
</div>
<div class="column is-narrow py-0 px-0" v-if="secured">
<a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
<span class="icon">
<mdi-light-logout />
</span>
</a>
</div>
</div>
<p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
<ul class="menu-list is-hidden-mobile" v-if="ready">
@@ -58,6 +67,7 @@
<script lang="ts" setup>
import type { Container } from "@/types/Container";
const { base, secured } = config;
const store = useContainerStore();
const { activeContainers, visibleContainers, ready } = storeToRefs(store);

1
assets/composables/settings.ts
View File

@@ -70,6 +70,7 @@ const softWrap = computed({
});
export {
collapseNav,
softWrap,
hourStyle,
lightTheme,

11
assets/layouts/default.vue
View File

@@ -25,8 +25,8 @@
</pane>
</splitpanes>
<button
@click="collapseNav = !collapseNav"
class="button is-rounded"
@click="collapse"
class="button is-small is-rounded"
:class="{ collapsed: collapseNav }"
id="hide-nav"
v-if="!isMobile"
@@ -47,7 +47,6 @@ import { Splitpanes, Pane } from "splitpanes";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
const collapseNav = ref(false);
const { oruga } = useProgrammatic();
const { authorizationNeeded } = config;
@@ -74,6 +73,9 @@ function showFuzzySearch() {
active: true,
});
}
function collapse() {
collapseNav.value = !collapseNav.value;
}
function onResized(e: any) {
if (e.length == 2) {
menuWidth.value = e[0].size;
@@ -112,7 +114,8 @@ function onResized(e: any) {
left: -40px;
width: 60px;
padding-left: 40px;
background: rgba(0, 0, 0, 0.95);
color: var(--text-strong-color);
background: var(--scheme-main);
&:hover {
left: -25px;

12
assets/pages/index.vue
View File

@@ -1,13 +1,9 @@
<template>
<div>
<section class="hero is-small mt-4">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column is-narrow" v-if="secured">
<a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
</div>
</div>
<section class="is-small mt-1" v-if="secured && isMobile">
<div class="container">
<div class="ml-1">
<a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
</div>
</div>
</section>