Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layoutService label changes. AppLayout fixes

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-03 01:06:33 +03:00
parent 8ddf9d47bf
commit e0fb57a255
5 changed files with 75 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/composables/theme.js → src/composables/layoutService.js
View File

@@ -1,6 +1,6 @@
import { toRefs, reactive } from 'vue'; import { toRefs, reactive, watch, ref, computed } from 'vue';
const appConfig = reactive({ const layoutConfig = reactive({
ripple: false, ripple: false,
darkTheme: false, darkTheme: false,
inputStyle: 'outlined', inputStyle: 'outlined',
@@ -18,35 +18,29 @@ const layoutState = reactive({
menuHoverActive: false menuHoverActive: false
}); });
export function useThemeService () { export function useLayoutService () {
const changeThemeSettings = (theme, darkTheme) => { const changeThemeSettings = (theme, darkTheme) => {
appConfig.theme = theme; layoutConfig.theme = theme;
appConfig.darkTheme = darkTheme; layoutConfig.darkTheme = darkTheme;
}; };
const setScale = scale => { const setScale = scale => {
appConfig.scale = scale; layoutConfig.scale = scale;
}; };
const onMenuToggle = () => { const onMenuToggle = () => {
debugger; if (layoutConfig.menuMode === 'overlay') {
if (appConfig.menuMode === 'overlay') {
layoutState.overlayMenuActive = !layoutState.overlayMenuActive; layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
/* if (layoutState.overlayMenuActive) {
this.overlayOpen.next(null);
} */
} }
if (window.innerWidth > 991) { if (window.innerWidth > 991) {
layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive; layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
} else { } else {
layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive; layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
/* if (this.state.staticMenuMobileActive) {
this.overlayOpen.next(null);
} */
} }
}; };
return { appConfig: toRefs(appConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle }; const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive };
} }

30
src/layout/AppConfig.vue
View File

@@ -6,21 +6,21 @@
<Sidebar v-model:visible="visible" position="right" :transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'" class="layout-config-sidebar w-20rem"> <Sidebar v-model:visible="visible" position="right" :transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'" class="layout-config-sidebar w-20rem">
<h5>Scale</h5> <h5>Scale</h5>
<div class="flex align-items-center"> <div class="flex align-items-center">
<Button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="appConfig.scale.value === scales[0]"></Button> <Button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="layoutConfig.scale.value === scales[0]"></Button>
<div class="flex gap-2 align-items-center"> <div class="flex gap-2 align-items-center">
<i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === appConfig.scale.value }"></i> <i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === layoutConfig.scale.value }"></i>
</div> </div>
<Button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="appConfig.scale.value === scales[scales.length - 1]"></Button> <Button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="layoutConfig.scale.value === scales[scales.length - 1]"></Button>
</div> </div>
<template v-if="!minimal"> <template v-if="!minimal">
<h5>Menu Type</h5> <h5>Menu Type</h5>
<div class="field-radiobutton"> <div class="field-radiobutton">
<RadioButton name="menuMode" value="static" v-model="appConfig.menuMode.value" inputId="mode1"></RadioButton> <RadioButton name="menuMode" value="static" v-model="layoutConfig.menuMode.value" inputId="mode1"></RadioButton>
<label for="mode1">Static</label> <label for="mode1">Static</label>
</div> </div>
<div class="field-radiobutton"> <div class="field-radiobutton">
<RadioButton name="menuMode" value="overlay" v-model="appConfig.menuMode.value" inputId="mode2"></RadioButton> <RadioButton name="menuMode" value="overlay" v-model="layoutConfig.menuMode.value" inputId="mode2"></RadioButton>
<label for="mode2">Overlay</label> <label for="mode2">Overlay</label>
</div> </div>
</template> </template>
@@ -29,17 +29,17 @@
<h5>Input Style</h5> <h5>Input Style</h5>
<div class="flex"> <div class="flex">
<div class="field-radiobutton flex-1"> <div class="field-radiobutton flex-1">
<RadioButton name="inputStyle" value="outlined" v-model="appConfig.inputStyle.value" inputId="outlined_input"></RadioButton> <RadioButton name="inputStyle" value="outlined" v-model="layoutConfig.inputStyle.value" inputId="outlined_input"></RadioButton>
<label for="outlined_input">Outlined</label> <label for="outlined_input">Outlined</label>
</div> </div>
<div class="field-radiobutton flex-1"> <div class="field-radiobutton flex-1">
<RadioButton name="inputStyle" value="filled" v-model="appConfig.inputStyle.value" inputId="filled_input"></RadioButton> <RadioButton name="inputStyle" value="filled" v-model="layoutConfig.inputStyle.value" inputId="filled_input"></RadioButton>
<label for="filled_input">Filled</label> <label for="filled_input">Filled</label>
</div> </div>
</div> </div>
<h5>Ripple Effect</h5> <h5>Ripple Effect</h5>
<InputSwitch v-model="appConfig.ripple.value"></InputSwitch> <InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
</template> </template>
<h5>Bootstrap</h5> <h5>Bootstrap</h5>
@@ -244,12 +244,12 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useThemeService } from '@/composables/theme'; import { useLayoutService } from '@/composables/layoutService';
const scales = ref([12, 13, 14, 15, 16]); const scales = ref([12, 13, 14, 15, 16]);
const visible = ref(false); const visible = ref(false);
const { changeThemeSettings, setScale, appConfig } = useThemeService(); const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
const onConfigButtonClick = () => { const onConfigButtonClick = () => {
visible.value = !visible.value; visible.value = !visible.value;
@@ -259,7 +259,7 @@ const onChangeTheme = (theme, mode) => {
const elementId = 'theme-css'; const elementId = 'theme-css';
const linkElement = document.getElementById(elementId); const linkElement = document.getElementById(elementId);
const cloneLinkElement = linkElement.cloneNode(true); const cloneLinkElement = linkElement.cloneNode(true);
const newThemeUrl = linkElement.getAttribute('href').replace(appConfig.theme.value, theme); const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
cloneLinkElement.setAttribute('id', elementId + '-clone'); cloneLinkElement.setAttribute('id', elementId + '-clone');
cloneLinkElement.setAttribute('href', newThemeUrl); cloneLinkElement.setAttribute('href', newThemeUrl);
cloneLinkElement.addEventListener('load', () => { cloneLinkElement.addEventListener('load', () => {
@@ -272,17 +272,17 @@ const onChangeTheme = (theme, mode) => {
}; };
const decrementScale = () => { const decrementScale = () => {
setScale(appConfig.scale.value - 1); setScale(layoutConfig.scale.value - 1);
applyScale(); applyScale();
}; };
const incrementScale = () => { const incrementScale = () => {
setScale(appConfig.scale.value + 1); setScale(layoutConfig.scale.value + 1);
console.log(appConfig.scale); console.log(layoutConfig.scale);
applyScale(); applyScale();
}; };
const applyScale = () => { const applyScale = () => {
document.documentElement.style.fontSize = appConfig.scale.value + 'px'; document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
}; };
</script> </script>

6
src/layout/AppFooter.vue
View File

@@ -7,12 +7,12 @@
</template> </template>
<script setup> <script setup>
import { useThemeService } from '@/composables/theme'; import { useLayoutService } from '@/composables/layoutService';
const { appConfig } = useThemeService(); const { layoutConfig } = useLayoutService();
const logoUrl = () => { const logoUrl = () => {
return new URL(`/src/assets/layout/images/${appConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href; return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

54
src/layout/AppLayout.vue
View File

@@ -16,29 +16,63 @@
</template> </template>
<script setup> <script setup>
import { computed } from 'vue'; import { computed, watch, ref, onMounted } from 'vue';
import AppTopbar from './AppTopbar.vue'; import AppTopbar from './AppTopbar.vue';
import AppFooter from './AppFooter.vue'; import AppFooter from './AppFooter.vue';
import AppSidebar from './AppSidebar.vue'; import AppSidebar from './AppSidebar.vue';
import AppConfig from './AppConfig.vue'; import AppConfig from './AppConfig.vue';
import { useLayoutService } from '@/composables/layoutService';
import { useThemeService } from '@/composables/theme'; const { onMenuToggle, layoutConfig, layoutState, isSidebarActive } = useLayoutService();
const { appConfig, layoutState } = useThemeService(); const outsideClickListener = ref(null);
const sidebarActive = ref(false);
watch(isSidebarActive, (newVal) => {
if (newVal) {
bindOutsideClickListener();
} else {
unbindOutsideClickListener();
}
});
const containerClass = computed(() => { const containerClass = computed(() => {
return { return {
'layout-theme-light': appConfig.darkTheme.value === 'light', 'layout-theme-light': layoutConfig.darkTheme.value === 'light',
'layout-theme-dark': appConfig.darkTheme.value === 'dark', 'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
'layout-overlay': appConfig.menuMode.value === 'overlay', 'layout-overlay': layoutConfig.menuMode.value === 'overlay',
'layout-static': appConfig.menuMode.value === 'static', 'layout-static': layoutConfig.menuMode.value === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && appConfig.menuMode.value === 'static', 'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
'layout-overlay-active': layoutState.overlayMenuActive.value, 'layout-overlay-active': layoutState.overlayMenuActive.value,
'layout-mobile-active': layoutState.staticMenuMobileActive.value, 'layout-mobile-active': layoutState.staticMenuMobileActive.value,
'p-input-filled': appConfig.inputStyle.value === 'filled', 'p-input-filled': layoutConfig.inputStyle.value === 'filled',
'p-ripple-disabled': !appConfig.ripple.value 'p-ripple-disabled': !layoutConfig.ripple.value
}; };
}); });
const bindOutsideClickListener = () => {
if (!outsideClickListener.value) {
outsideClickListener.value = (event) => {
if (isOutsideClicked(event)) {
layoutState.overlayMenuActive.value = false;
layoutState.staticMenuMobileActive.value = false;
layoutState.menuHoverActive.value = false;
}
};
document.addEventListener('click', outsideClickListener.value);
}
};
const unbindOutsideClickListener = () => {
if (outsideClickListener.value) {
document.removeEventListener('click', outsideClickListener);
outsideClickListener.value = null;
}
};
const isOutsideClicked = (event) => {
const sidebarEl = document.querySelector('.layout-sidebar');
const topbarEl = document.querySelector('.layout-menu-button');
return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
};
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

6
src/layout/AppTopbar.vue
View File

@@ -31,12 +31,12 @@
</template> </template>
<script setup> <script setup>
import { useThemeService } from '@/composables/theme'; import { useLayoutService } from '@/composables/layoutService';
const { appConfig, onMenuToggle } = useThemeService(); const { layoutConfig, onMenuToggle } = useLayoutService();
const logoUrl = () => { const logoUrl = () => {
return new URL(`/src/assets/layout/images/${appConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href; return new URL(`/src/assets/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
}; };
</script> </script>