Commit df5c943e authored by dindigala's avatar dindigala
Browse files

refactor: moved drop-down logic to same component

parent 4fdd5ea0
Pipeline #188314 passed with stages
in 3 minutes and 32 seconds
<template>
<div>
<q-btn-dropdown
v-if="$q.screen.width > 10"
:dropdown-icon="dropicon"
flat
:class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
label="Show/Hide Panels"
>
<slot />
</q-btn-dropdown>
<div
v-else
class="without-dropdown"
>
<slot />
</div>
</div>
</template>
<script>
import { fasCaretDown } from '@quasar/extras/fontawesome-v5';
export default {
computed: {
dropicon() {
return fasCaretDown;
},
},
};
</script>
<template>
<div class="q-d-flex">
<ToggleFilter>
<q-list class="toggle-list">
<q-btn-dropdown
v-if="$q.screen.width > 10"
flat
:dropdown-icon="fasCaretDown"
:class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
label="Show/Hide Panels"
>
<q-list>
<div
v-for="(p, i) in panels"
:key="`toggle${i}`"
......@@ -39,7 +45,7 @@
{{ 'RESET' }}
</q-item>
</q-list>
</ToggleFilter>
</q-btn-dropdown>
<!-- <PanelsPosition :panelboxes="panels" /> -->
</div>
......@@ -47,19 +53,18 @@
<script>
import {
fasUndo,
fasCaretDown,
fasCircle,
fasCheckCircle,
fasUndo,
} from '@quasar/extras/fontawesome-v5';
// import PanelsPosition from '@/components/togglebar/panelsposition';
import ToggleFilter from '@/components/togglebar/toggleFilter.vue';
export default {
name: 'ToggleIndex',
components: {
// PanelsPosition,
ToggleFilter,
},
props: {
panels: {
......@@ -69,6 +74,7 @@ export default {
},
created() {
// mount the fonts
this.fasCaretDown = fasCaretDown;
this.fasCheckCircle = fasCheckCircle;
this.fasCircle = fasCircle;
this.fasUndo = fasUndo;
......
Supports Markdown
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