454 lines
13 KiB
Vue
454 lines
13 KiB
Vue
<template>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 col-md-3 my-tabs">
|
|
<nav class="popUp-tab__menu">
|
|
<div
|
|
class="nav nav-tabs flex-md-wrap flex-nowrap"
|
|
id="nav-tab"
|
|
role="tablist"
|
|
>
|
|
<template v-if="!isGuest">
|
|
<label class="label-settings d-none d-md-flex"
|
|
>تنظیمات کاربری</label
|
|
>
|
|
<a
|
|
@click="setTab(1)"
|
|
class="nav-item align-items-start"
|
|
:class="{ active: localMenuId == 1 }"
|
|
id="nav-myAccount-tab"
|
|
data-bs-toggle="tab"
|
|
href="#nav-myAccount"
|
|
role="tab"
|
|
aria-controls="nav-myAccount"
|
|
aria-selected="true"
|
|
><span v-tooltip="'مشخصات'" class="d-flex align-items-center">
|
|
<svg class="icon icon-portal-roles ms-2 d-none d-md-flex">
|
|
<use xlink:href="#icon-Group-7932"></use>
|
|
</svg>
|
|
<span class="">مشخصات</span>
|
|
</span>
|
|
</a>
|
|
<a
|
|
@click="setTab(2)"
|
|
class="nav-item align-items-start"
|
|
:class="{ active: localMenuId == 2 }"
|
|
id="nav-changepass-tab"
|
|
data-bs-toggle="tab"
|
|
href="#nav-changepass"
|
|
role="tab"
|
|
aria-controls="nav-changepass"
|
|
aria-selected="false"
|
|
>
|
|
<span v-tooltip="'تغییر رمز'" class="d-flex align-items-center">
|
|
<svg class="icon icon-lock ms-3 d-none d-md-flex">
|
|
<use xlink:href="#icon-lock"></use>
|
|
</svg>
|
|
<span class="">تغییر رمز</span>
|
|
</span>
|
|
</a>
|
|
</template>
|
|
<label class="label-settings d-none d-md-flex">تنظیمات ظاهری</label>
|
|
<a
|
|
@click="setTab(3)"
|
|
class="nav-item align-items-start"
|
|
:class="{ active: localMenuId == 3 }"
|
|
id="nav-myAccount-tab"
|
|
data-bs-toggle="tab"
|
|
href="#nav-myAccount"
|
|
role="tab"
|
|
aria-controls="nav-myAccount"
|
|
aria-selected="false"
|
|
><span v-tooltip="'قالب'" class="d-flex align-items-center">
|
|
<svg class="icon icon-portal-roles ms-3 d-none d-md-flex">
|
|
<use xlink:href="#icon-portal-roles"></use>
|
|
</svg>
|
|
<span class="">قالب</span>
|
|
</span>
|
|
</a>
|
|
<a
|
|
@click="setTab(4)"
|
|
class="nav-item align-items-start"
|
|
:class="{ active: localMenuId == 4 }"
|
|
id="nav-myEntitySetting-tab"
|
|
data-bs-toggle="tab"
|
|
href="#nav-myEntitySetting"
|
|
role="tab"
|
|
aria-controls="nav-myEntitySetting"
|
|
aria-selected="true"
|
|
><span v-tooltip="'نمایش متن'" class="d-flex align-items-center">
|
|
<svg class="icon icon-doc-outline ms-3 d-none d-md-flex">
|
|
<use xlink:href="#icon-doc-outline"></use>
|
|
</svg>
|
|
<span class="">نمایش متن</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="col-12 col-md-9 main-section">
|
|
<!-- <template v-if="currentTab == 1"
|
|
><My-Account :currentTab="currentTab"></My-Account
|
|
></template>
|
|
|
|
<template v-if="currentTab == 2">
|
|
<Reset-Password :currentTab="currentTab"></Reset-Password>
|
|
</template>
|
|
<template v-if="currentTab == 3">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<label>حالت نمایش:</label>
|
|
<label class="switch-name me-3">
|
|
<input
|
|
@change="setTheme"
|
|
v-model="lightMode"
|
|
true-value="1"
|
|
false-value="0"
|
|
type="checkbox"
|
|
class="checkbox"
|
|
/>
|
|
<div class="back"></div>
|
|
<svg class="icon icon-moon moon">
|
|
<use xlink:href="#icon-moon"></use>
|
|
</svg>
|
|
<svg class="icon icon-sun sun">
|
|
<use xlink:href="#icon-sun"></use>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
<div class="mb-5">
|
|
<div>
|
|
<div class="header-progress"></div>
|
|
<div class="progress-main" style="">
|
|
<div class="progress-div">
|
|
<label class="">اندازه فونت متن:</label>
|
|
<div class="d-flex align-items-center">
|
|
<span>{{ rangeMin }} پیکسل</span>
|
|
<input
|
|
class="progress mx-3"
|
|
type="range"
|
|
:min="rangeMin"
|
|
:max="rangeMax"
|
|
step="0.5"
|
|
v-model="progress"
|
|
@input="changeFontSize"
|
|
style="width: 70%"
|
|
/>
|
|
<span>{{ rangeMax }} پیکسل</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-block d-sm-flex align-items-center text-size">
|
|
<p :style="fontSize">متن نمونه جهت تست اندازه قلم.</p>
|
|
<span class="font-label me-auto">
|
|
{{ progress ?? localDefaultFont }} پیکسل
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<span class="alert alert-warning">
|
|
جهت ثبت تغییرات، دکمه ذخیره را کلیک نمایید.
|
|
</span>
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<a @click="updateSettings()" class="button" data-dismiss="modal">{{
|
|
$t("Save")
|
|
}}</a>
|
|
</div>
|
|
</template>
|
|
<template v-if="currentTab == 4"
|
|
><myEntitySetting></myEntitySetting
|
|
></template> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import settingsMixin from "~/mixins/settingsMixin.js";
|
|
|
|
import settingsApi from "~/apis/settingsApi.js";
|
|
import { mapActions, mapState } from "pinia";
|
|
import { useCommonStore } from "~/stores/commonStore";
|
|
import { useAuthStore } from "~/stores/authStore";
|
|
|
|
// import MyAccount from "@pages/settings/pages/MyAccount.vue";
|
|
// import MyEntitySetting from "@pages/settings/pages/MyEntitySetting.vue";
|
|
// import ResetPassword from "@pages/settings/pages/ResetPassword.vue";
|
|
|
|
export default {
|
|
// mixins: [settingsMixin],
|
|
|
|
props: {
|
|
menuId: {
|
|
default: 1,
|
|
},
|
|
},
|
|
beforeMount() {
|
|
this.httpService = useNuxtApp()["$http"];
|
|
},
|
|
mounted() {
|
|
// const htmlElement = document.querySelector("html");
|
|
// const computedStyle = window.getComputedStyle(htmlElement);
|
|
// const htmlFontSize = computedStyle.getPropertyValue("font-size");
|
|
|
|
// برای اولین بار که تگ html مقداری نداره، یه مقدار پیش فرض به عنوان قلم پیش فرض کاربر انتخاب میکنیم.
|
|
// let fzWithoutPx = htmlFontSize.split("px")[0];
|
|
// this.localDefaultFont = fzWithoutPx;
|
|
// this.progress = fzWithoutPx;
|
|
const htmlElm = document.querySelector("html");
|
|
const computedStyle = getComputedStyle(htmlElm);
|
|
const fontSize = computedStyle.fontSize;
|
|
const fontSizeNumber = parseFloat(fontSize);
|
|
|
|
this.localDefaultFont = this.fontDataGetter?.defaultFont ?? fontSizeNumber;
|
|
this.progress = this.fontDataGetter?.newFont;
|
|
this.lightMode = this.fontDataGetter?.lightMode ?? "1";
|
|
if (this.isGuest) this.localMenuId = 3;
|
|
this.setTab(this.localMenuId);
|
|
},
|
|
data() {
|
|
return {
|
|
currentTab: 1,
|
|
progress: "",
|
|
localDefaultFont: null,
|
|
lightMode: "1",
|
|
localMenuId: this.menuId,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(useCommonStore, ["fontDataGetter", "currentUser", "isGuest"]),
|
|
fontSize() {
|
|
let size = this.progress ?? this.localDefaultFont;
|
|
return {
|
|
fontSize: size + "px",
|
|
};
|
|
},
|
|
rangeMin() {
|
|
return 8;
|
|
|
|
// try {
|
|
|
|
// let defaultFontSize = 8;
|
|
// if(this.localDefaultFont)
|
|
// defaultFontSize = parseInt(this.localDefaultFont.split("px")[0]);
|
|
|
|
// if (this.fontDataGetter?.defaultFont)
|
|
// //return parseInt(this.fontDataGetter?.defaultFont) - 8 ;
|
|
// return 10;
|
|
|
|
// return defaultFontSize - 8;
|
|
// } catch (err) {
|
|
// return this.localDefaultFont - 8;
|
|
// }
|
|
},
|
|
rangeMax() {
|
|
return 30;
|
|
|
|
// try {
|
|
// let defaultFontSize = 8;
|
|
// if(this.localDefaultFont)
|
|
// defaultFontSize = parseInt(this.localDefaultFont.split("px")[0]);
|
|
// if (this.fontDataGetter?.defaultFont)
|
|
// return parseInt(this.fontDataGetter?.defaultFont) + 8;
|
|
// return defaultFontSize + 8;
|
|
// } catch (err) {
|
|
// return this.localDefaultFont + 8;
|
|
// }
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions(useCommonStore, ["fontDataSetter"]),
|
|
setTheme() {
|
|
const htmlElm = document.querySelector("html");
|
|
if (this.lightMode == "1") {
|
|
htmlElm.style.removeProperty("filter");
|
|
} else {
|
|
htmlElm.style.filter = "hue-rotate(180deg) invert(1)";
|
|
}
|
|
},
|
|
settingHtmlFontSize(fontData) {
|
|
const htmlElm = document.querySelector("html");
|
|
htmlElm.style.fontSize = fontData.newFont;
|
|
this.fontDataSetter(fontData);
|
|
|
|
this.localDefaultFont = fontData.defaultFont;
|
|
this.progress = fontData.newFont;
|
|
},
|
|
setTab(tab) {
|
|
this.currentTab = tab;
|
|
},
|
|
changeFontSize() {
|
|
// const htmlElm = document.querySelector("html");
|
|
// htmlElm.style.fontSize = this.progress + "px";
|
|
},
|
|
updateSettings() {
|
|
let payload = {
|
|
ui_last_state: {
|
|
newFont: this.progress,
|
|
defaultFont:
|
|
this.fontDataGetter?.defaultFont ?? this.localDefaultFont,
|
|
lightMode: this.lightMode,
|
|
},
|
|
};
|
|
let url = repoUrl() + settingsApi.user.setKey_object;
|
|
url = url.replace("{{key}}", "ui_last_state");
|
|
|
|
this.httpService.postRequest(url, payload).then((res) => {
|
|
this.fontDataSetter(payload.ui_last_state);
|
|
|
|
this.mySwalToast({
|
|
title: res.message,
|
|
});
|
|
});
|
|
},
|
|
},
|
|
// components: {
|
|
// MyAccount,
|
|
// MyEntitySetting,
|
|
// ResetPassword,
|
|
// },
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.popUp-tab__menu a {
|
|
display: flex;
|
|
-webkit-box-orient: vertical !important;
|
|
-webkit-box-direction: normal !important;
|
|
-ms-flex-direction: column !important;
|
|
flex-direction: column !important;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
padding-right: 10px;
|
|
border-radius: 0;
|
|
width: 100%;
|
|
border: unset;
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
color: #444444;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 1em;
|
|
padding-left: 10px;
|
|
-webkit-transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
&.active {
|
|
background-color: #e8fcff;
|
|
}
|
|
&:hover {
|
|
background-color: #e8fcff;
|
|
}
|
|
}
|
|
.label-settings {
|
|
color: #96a5b5;
|
|
margin: 1em 0;
|
|
}
|
|
.nav-tabs {
|
|
border-bottom: unset !important;
|
|
}
|
|
|
|
// سوئیچ حالت شب و روز
|
|
.switch-name {
|
|
--dark-sky: #000000;
|
|
--moon: #ffd365;
|
|
--light-sky: #35d5e5;
|
|
--sun: #ffed89;
|
|
display: inline-block;
|
|
position: relative;
|
|
border-radius: 5em;
|
|
cursor: pointer;
|
|
width: 60px;
|
|
height: 30px;
|
|
overflow: hidden;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
.switch-name .back {
|
|
background-color: var(--dark-sky);
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
transition: 0.5s ease-in-out;
|
|
}
|
|
|
|
.switch-name .checkbox {
|
|
opacity: 0;
|
|
}
|
|
|
|
.switch-name .checkbox:checked ~ .back {
|
|
background-color: var(--light-sky);
|
|
}
|
|
|
|
.switch-name .checkbox:checked ~ .moon {
|
|
transform: translate(100%) rotate(180deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
.switch-name .checkbox:checked ~ .sun {
|
|
transform: translate(100%) rotate(180deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
.switch-name .moon {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
padding: 0.3em;
|
|
fill: var(--moon);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.switch-name .sun {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
padding: 0.3em;
|
|
fill: var(--sun);
|
|
transition: 0.5s;
|
|
opacity: 0;
|
|
}
|
|
.nav-item {
|
|
white-space: nowrap;
|
|
}
|
|
.text-size {
|
|
height: 5em;
|
|
}
|
|
// 1600px
|
|
@media screen and (max-width: 100em) {
|
|
}
|
|
// 1399px
|
|
@media screen and (max-width: 87.499em) {
|
|
}
|
|
|
|
// 991px
|
|
@media screen and (max-width: 61.998em) {
|
|
}
|
|
|
|
// 767px
|
|
@media screen and (max-width: 47.938em) {
|
|
.my-tabs {
|
|
border-bottom: 1px solid rgb(222, 226, 230);
|
|
}
|
|
}
|
|
@media screen and (min-width: 47.938em) {
|
|
.my-tabs {
|
|
border-left: 1px solid rgb(222, 226, 230);
|
|
}
|
|
}
|
|
|
|
// 575px
|
|
@media screen and (max-width: 35.938em) {
|
|
.main-section {
|
|
height: 18em;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
// end
|
|
</style>
|