Commit 45fbe13f authored by nwindis's avatar nwindis
Browse files

refactor: refactor TogglePanels

parent 46847dc7
Pipeline #197090 passed with stages
in 5 minutes and 8 seconds
......@@ -30,7 +30,7 @@
<q-space />
<ToggleIndex
<TogglePanels
v-if="config.headers.toggle"
:panels="panels"
/>
......@@ -46,7 +46,7 @@ import Infobar from '@/components/infobar.vue';
import Language from '@/components/language.vue';
import Navbar from '@/components/navbar.vue';
import Softwareinfo from '@/components/softwareinfo.vue';
import ToggleIndex from '@/components/togglebar/toggleIndex.vue';
import TogglePanels from '@/components/togglebar/togglePanels.vue';
export default {
name: 'Header',
......@@ -56,7 +56,7 @@ export default {
Language,
Navbar,
Softwareinfo,
ToggleIndex,
TogglePanels,
},
props: {
collectiontitle: {
......
<template>
<div>
<q-btn-dropdown
v-if="$q.screen.width < 1200"
:dropdown-icon="fasCaretDown"
outline
flat
size="12px"
padding="xs"
class="button__dropdown q-px-sm"
:class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
:label="$t('showHidePanels')"
>
<slot />
</q-btn-dropdown>
<div
v-else
class="row"
>
<slot />
</div>
</div>
</template>
<script>
import { fasCaretDown } from '@quasar/extras/fontawesome-v5';
export default {
// keep icon from reactivity
created() {
this.fasCaretDown = fasCaretDown;
},
};
</script>
<template>
<ToggleFilter>
<div>
<q-btn-dropdown
v-if="$q.screen.width < 1200"
:dropdown-icon="fasCaretDown"
outline
flat
size="12px"
padding="xs"
class="button__dropdown q-px-sm"
:class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
:label="$t('showHidePanels')"
>
<q-list
v-for="(p, i) in panels"
:key="`toggle${i}`"
>
<q-item
v-if="p.toggle"
clickable
padding="xs"
:title="handleToggleTitle(i)"
@click="() => handleStatusPanel(i)"
>
<q-item-section>
<q-item-label>
<q-icon
class="q-pr-xs"
size="xs"
:color="$q.dark.isActive ? 'bg-black' : 'accent'"
:name="renderCheckIcon(i)"
/>
{{ $t(p.panel_label).toUpperCase() }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-list>
<q-item
v-if="toggleCounter"
v-close-popup
clickable
padding="xs"
:title="$t('defaultView')"
@click="()=> handleStatusPanel(-1, true)"
>
<q-item-section>
<q-item-label>
<q-icon
class="q-pr-xs"
size="xs"
:color="$q.dark.isActive ? 'white' : 'accent'"
:name="fasUndo"
/>
{{ $t('Reset').toUpperCase() }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<div
v-for="(p, i) in panels"
:key="`toggle${i}`"
v-if="$q.screen.width > 1199"
class="row"
>
<div
v-for="(p, i) in panels"
:key="`toggle${i}`"
>
<q-btn
v-if="p.toggle"
v-close-popup
clickable
flat
size="12px"
padding="xs"
class="q-px-sm"
:title="handleToggleTitle(i)"
@click="() => handleStatusPanel(i)"
>
<q-icon
class="q-pr-xs"
size="16px"
:color="$q.dark.isActive ? 'bg-black' : 'accent'"
:name="renderCheckIcon(i)"
/>
{{ $t(p.panel_label).toUpperCase() }}
</q-btn>
</div>
<q-btn
v-if="p.toggle"
v-if="toggleCounter"
v-close-popup
clickable
flat
size="12px"
padding="xs"
class="q-px-sm"
:title="handleToggleTitle(i)"
@click="() => handleStatusPanel(i)"
:title="$t('defaultView')"
@click="()=> handleStatusPanel(-1, true)"
>
<q-icon
class="q-pr-xs"
size="16px"
:color="$q.dark.isActive ? 'bg-black' : 'accent'"
:name="renderCheckIcon(i)"
:color="$q.dark.isActive ? 'white' : 'accent'"
:name="fasUndo"
/>
{{ $t(p.panel_label).toUpperCase() }}
{{ $t('Reset').toUpperCase() }}
</q-btn>
</div>
<q-btn
v-if="toggleCounter"
v-close-popup
clickable
flat
size="12px"
padding="xs"
class="q-px-sm"
:title="$t('defaultView')"
@click="()=> handleStatusPanel(-1, true)"
>
<q-icon
class="q-pr-xs"
size="16px"
:color="$q.dark.isActive ? 'white' : 'accent'"
:name="fasUndo"
/>
{{ $t('Reset').toUpperCase() }}
</q-btn>
</ToggleFilter>
</div>
</template>
<script>
......@@ -52,15 +116,11 @@ import {
fasUndo,
fasCircle,
fasCheckCircle,
fasCaretDown,
} from '@quasar/extras/fontawesome-v5';
import ToggleFilter from '@/components/togglebar/toggleFilter.vue';
export default {
name: 'ToggleIndex',
components: {
ToggleFilter,
},
name: 'TogglePanels',
props: {
panels: {
type: Array,
......@@ -77,6 +137,7 @@ export default {
this.fasCheckCircle = fasCheckCircle;
this.fasCircle = fasCircle;
this.fasUndo = fasUndo;
this.fasCaretDown = fasCaretDown;
},
methods: {
// show checkbox icon depending on the current status
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment