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

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">
<h5>Scale</h5>
<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">
<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>
<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>
<template v-if="!minimal">
<h5>Menu Type</h5>
<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>
</div>
<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>
</div>
</template>
@@ -29,17 +29,17 @@
<h5>Input Style</h5>
<div class="flex">
<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>
</div>
<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>
</div>
</div>
<h5>Ripple Effect</h5>
<InputSwitch v-model="appConfig.ripple.value"></InputSwitch>
<InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
</template>
<h5>Bootstrap</h5>
@@ -244,12 +244,12 @@
<script setup>
import { ref } from 'vue';
import { useThemeService } from '@/composables/theme';
import { useLayoutService } from '@/composables/layoutService';
const scales = ref([12, 13, 14, 15, 16]);
const visible = ref(false);
const { changeThemeSettings, setScale, appConfig } = useThemeService();
const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
const onConfigButtonClick = () => {
visible.value = !visible.value;
@@ -259,7 +259,7 @@ const onChangeTheme = (theme, mode) => {
const elementId = 'theme-css';
const linkElement = document.getElementById(elementId);
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('href', newThemeUrl);
cloneLinkElement.addEventListener('load', () => {
@@ -272,17 +272,17 @@ const onChangeTheme = (theme, mode) => {
};
const decrementScale = () => {
setScale(appConfig.scale.value - 1);
setScale(layoutConfig.scale.value - 1);
applyScale();
};
const incrementScale = () => {
setScale(appConfig.scale.value + 1);
console.log(appConfig.scale);
setScale(layoutConfig.scale.value + 1);
console.log(layoutConfig.scale);
applyScale();
};
const applyScale = () => {
document.documentElement.style.fontSize = appConfig.scale.value + 'px';
document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
};
</script>