Headless drawer for designer
parent
64316a1f3e
commit
d15023e1f0
|
@ -10,4 +10,8 @@
|
|||
.btn-design-outlined {
|
||||
@apply px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
@apply h-8 w-8 rounded-full inline-flex justify-center items-center hover:bg-surface-100 dark:hover:bg-surface-800 text-zinc-500 dark:text-zinc-400 transition-colors duration-200;
|
||||
}
|
||||
}
|
|
@ -1,18 +1,32 @@
|
|||
<template>
|
||||
<Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide" :dt="drawerTokens">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button v-if="$appState.designer.activeView !== 'dashboard'" variant="text" severity="secondary" rounded type="button" icon="pi pi-chevron-left" @click="openDashboard" />
|
||||
<span class="font-bold text-xl">{{ viewTitle }}</span>
|
||||
<template #container="{ closeCallback }">
|
||||
<div class="flex items-center justify-between p-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<button v-if="$appState.designer.activeView !== 'dashboard'" type="button" @click="openDashboard" class="icon-btn">
|
||||
<i class="pi pi-chevron-left" />
|
||||
</button>
|
||||
<span class="font-bold text-xl">{{ viewTitle }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" @click="toggleDarkMode" class="icon-btn">
|
||||
<i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
|
||||
</button>
|
||||
<button type="button" @click="closeCallback" class="icon-btn">
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<DesignDashboard v-if="$appState.designer.activeView === 'dashboard'" />
|
||||
<DesignCreateTheme v-else-if="$appState.designer.activeView === 'create_theme'" />
|
||||
<DesignEditor v-else-if="$appState.designer.activeView === 'editor'" :deferred="deferredTabs" />
|
||||
<div class="flex-auto overflow-auto pb-5 px-5">
|
||||
<DesignDashboard v-if="$appState.designer.activeView === 'dashboard'" />
|
||||
<DesignCreateTheme v-else-if="$appState.designer.activeView === 'create_theme'" />
|
||||
<DesignEditor v-else-if="$appState.designer.activeView === 'editor'" :deferred="deferredTabs" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" />
|
||||
<div class="p-5">
|
||||
<DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" />
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
<ConfirmDialog group="designer"></ConfirmDialog>
|
||||
|
@ -177,6 +191,9 @@ export default {
|
|||
this.$appState.designer.theme.preset.semantic.primary = this.$appState.designer.theme.preset.primitive.emerald;
|
||||
this.$appState.designer.theme.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.slate };
|
||||
this.$appState.designer.theme.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.zinc };
|
||||
},
|
||||
toggleDarkMode() {
|
||||
EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
Loading…
Reference in New Issue