First Committ
This commit is contained in:
Paolo Arena
129
src/layouts/menuone/menuOne.scss
Executable file
129
src/layouts/menuone/menuOne.scss
Executable file
@@ -0,0 +1,129 @@
|
||||
.q-list-header {
|
||||
min-height: 12px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.menu-hr {
|
||||
border-color: #dedede;
|
||||
height: 0.5px;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
color: #027be3;
|
||||
background-color: #dadada !important;
|
||||
border-right: 2px solid #027be3;
|
||||
}
|
||||
|
||||
.list-label:first-child {
|
||||
line-height: 20px;
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
/*
|
||||
.menu-enter-active, .scale-enter {
|
||||
-webkit-animation: moveFromTopFade .5s ease both;
|
||||
animation: moveFromTopFade .5s ease both;
|
||||
}
|
||||
|
||||
.menu-leave-to, .scale-leave-active {
|
||||
-webkit-animation: moveToBottom .5s ease both;
|
||||
animation: moveToBottom .5s ease both;
|
||||
}
|
||||
*/
|
||||
|
||||
.router-link-active {
|
||||
color: #027be3;
|
||||
background-color: #dadada !important;
|
||||
border-right: 2px solid #027be3;
|
||||
}
|
||||
|
||||
.router-link-active .item-primary {
|
||||
color: #027be3;
|
||||
}
|
||||
|
||||
.menu_freccina {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
display: inline-block;
|
||||
padding: 0 0px 0px 0px;
|
||||
-webkit-transform: rotate(-180deg);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.my-menu, .my-menu > i{
|
||||
min-height: 40px;
|
||||
min-width: 26px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.my-menu-small, .my-menu-small > i{
|
||||
min-height: 40px;
|
||||
min-width: 26px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.isAdmin {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.isSocioResidente {
|
||||
color: darkgreen;
|
||||
}
|
||||
|
||||
.isCalendar {
|
||||
color: #fff241;
|
||||
}
|
||||
|
||||
.isManager {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.isTutor {
|
||||
color: #201a80;
|
||||
}
|
||||
|
||||
.my-menu-icon{
|
||||
min-width: 2px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.my-menu-icon > i{
|
||||
min-width: 26px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.clexpansion{
|
||||
min-width: 0px !important;
|
||||
}
|
||||
|
||||
.my-menu-active {
|
||||
background-color: rgba(174, 189, 241, 0.71);
|
||||
}
|
||||
|
||||
.my-menu-separat > i{
|
||||
min-width: 26px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.my-menu-icon-none > i{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clicon img, .clicon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.q-item__section--avatar{
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.q-item__section--side{
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
.imgicon img {
|
||||
font-size: 2.5rem !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
88
src/layouts/menuone/menuOne.ts
Executable file
88
src/layouts/menuone/menuOne.ts
Executable file
@@ -0,0 +1,88 @@
|
||||
import { IListRoutes } from '@src/model'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { computed, defineComponent, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MenuOne',
|
||||
props: {
|
||||
clBase: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'my-menu',
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const route = useRoute()
|
||||
|
||||
const path = computed(() => route.path)
|
||||
|
||||
function getmenu(): any {
|
||||
const globalStore = useGlobalStore()
|
||||
return globalStore.getmenu
|
||||
}
|
||||
|
||||
function setParentVisibilityBasedOnRoute(parent: any) {
|
||||
parent.routes.forEach((item: any) => {
|
||||
if (path.value === item.path) {
|
||||
parent.show = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(path, (to: string, from: string) => {
|
||||
Object.keys(getmenu()).forEach((parentName: any) => {
|
||||
// @ts-ignore
|
||||
setParentVisibilityBasedOnRoute(getmenu[parentName])
|
||||
})
|
||||
})
|
||||
|
||||
function isfinishLoading() {
|
||||
const globalStore = useGlobalStore()
|
||||
return globalStore.finishLoading
|
||||
}
|
||||
|
||||
/* function replaceUnderlineToSpace(text: string) {
|
||||
while (text.indexOf('_') !== -1) {
|
||||
text = text.replace('_', ' ')
|
||||
}
|
||||
return text
|
||||
} */
|
||||
|
||||
function getroute(elem: IListRoutes) {
|
||||
if (elem.idelem) {
|
||||
return tools.getUrlByTipoProj(elem.urlroute ? elem.urlroute : '') + elem.idelem
|
||||
}
|
||||
return elem.path
|
||||
}
|
||||
|
||||
function getmymenuclass(elem: IListRoutes) {
|
||||
let menu: string = props.clBase
|
||||
|
||||
if (elem.color) {
|
||||
menu += ` ${elem.color}`
|
||||
} else {
|
||||
if (elem.onlyAdmin) menu += ' isAdmin'
|
||||
if (elem.onlyManager) menu += ' isManager'
|
||||
if (elem.onlySocioResidente) menu += ' isSocioResidente'
|
||||
if (elem.onlyConsiglio) menu += ' isConsiglio'
|
||||
if (elem.onlyDepartment) menu += ' isDepartment'
|
||||
if (elem.onlyTutor) menu += ' isTutor'
|
||||
if (elem.onlyEditor) menu += ' isEditor'
|
||||
}
|
||||
|
||||
if (elem.extraclass) menu += ` ${elem.extraclass}`
|
||||
|
||||
return menu
|
||||
}
|
||||
|
||||
return {
|
||||
getmenu,
|
||||
isfinishLoading,
|
||||
getmymenuclass,
|
||||
getroute,
|
||||
}
|
||||
},
|
||||
})
|
||||
156
src/layouts/menuone/menuOne.vue
Executable file
156
src/layouts/menuone/menuOne.vue
Executable file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="no-border" v-if="isfinishLoading">
|
||||
<q-list class="rounded-borders text-primary">
|
||||
<template v-for="ind1 in getmenu" :key="ind1">
|
||||
<!--<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>-->
|
||||
<div v-for="(myitemmenu, ind2) in static_data.routes" :key="ind2">
|
||||
<div v-if="myitemmenu.active">
|
||||
<div v-if="!!myitemmenu.routes2 && myitemmenu.inmenu && tools.visumenu(myitemmenu)">
|
||||
<span v-if="myitemmenu.isseparator">
|
||||
<q-separator></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
|
||||
<q-expansion-item
|
||||
:header-inset-level="myitemmenu.level_parent"
|
||||
:content-inset-level="myitemmenu.level_parent"
|
||||
:label="tools.getLabelByItem(myitemmenu, mythis)"
|
||||
:icon="myitemmenu.materialIcon"
|
||||
expand-icon-class="my-menu-separat"
|
||||
:header-class="getmymenuclass(myitemmenu)"
|
||||
active-class="my-menu-active">
|
||||
|
||||
<div v-for="(child2, index) in myitemmenu.routes2" :key="index">
|
||||
<div v-if="child2.active && tools.visumenu(child2)">
|
||||
<span v-if="child2.isseparator">
|
||||
<q-separator></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
<q-expansion-item
|
||||
v-if="!child2.routes2"
|
||||
:to="getroute(child2)"
|
||||
:header-inset-level="child2.level_child"
|
||||
:duration="300"
|
||||
:icon="child2.materialIcon"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-icon-none"
|
||||
:class="`item item-link drawer-closer cursor-pointer ` + clBaseint"
|
||||
:label="tools.getLabelByItem(child2, mythis)">
|
||||
|
||||
<template v-slot:header>
|
||||
<q-item-section avatar>
|
||||
|
||||
<q-avatar v-if="child2.img">
|
||||
<div :icon="`img:`+child2.img" class="imgicon" font-size="2rem"></div>
|
||||
</q-avatar>
|
||||
<div v-else>
|
||||
<q-avatar
|
||||
:icon="child2.materialIcon" color="primary" class="clicon"
|
||||
text-color="white">
|
||||
</q-avatar>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
{{ tools.getLabelByItem(child2, mythis) }}
|
||||
</q-item-section>
|
||||
|
||||
</template>
|
||||
|
||||
<div v-for="(child3, index) in child2.routes2" :key="index">
|
||||
<q-expansion-item
|
||||
v-if="!!child2.routes2 && child3.active"
|
||||
:to="getroute(child3)"
|
||||
:header-inset-level="child3.level_child"
|
||||
:duration="300"
|
||||
:icon="child3.materialIcon"
|
||||
:expand-icon="child3.icon"
|
||||
expand-icon-class="my-menu-separat"
|
||||
active-class="my-menu-active"
|
||||
:class="`item item-link drawer-closer cursor-pointer ` + clBaseint"
|
||||
:label="tools.getLabelByItem(child3, mythis)">
|
||||
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
v-else
|
||||
:header-inset-level="child2.level_parent"
|
||||
:content-inset-level="child2.level_parent"
|
||||
:label="tools.getLabelByItem(child2, mythis)"
|
||||
:icon="child2.materialIcon"
|
||||
expand-icon-class="my-menu-separat"
|
||||
:header-class="getmymenuclass(child2)"
|
||||
active-class="my-menu-active">
|
||||
<div v-for="(child3, index) in child2.routes2" :key="index">
|
||||
<div v-if="child3.active">
|
||||
<q-expansion-item
|
||||
:to="getroute(child3)"
|
||||
:header-inset-level="child3.level_child"
|
||||
:duration="300"
|
||||
:icon="child3.materialIcon"
|
||||
active-class="my-menu-active"
|
||||
expand-icon-class="my-menu-icon-none"
|
||||
:class="`item item-link drawer-closer cursor-pointer ` + clBaseint"
|
||||
:label="tools.getLabelByItem(child3, mythis)">
|
||||
<div v-for="(child4, index) in child3.routes2" :key="index">
|
||||
<q-expansion-item
|
||||
v-if="!!child3.routes2 && child3.active"
|
||||
:key="index"
|
||||
:to="getroute(child4)"
|
||||
:header-inset-level="child4.level_child"
|
||||
:duration="300"
|
||||
:icon="child4.materialIcon"
|
||||
:expand-icon="child4.icon"
|
||||
expand-icon-class="my-menu-separat"
|
||||
active-class="my-menu-active"
|
||||
:class="`item item-link drawer-closer cursor-pointer ` + clBaseint"
|
||||
:label="tools.getLabelByItem(child4, mythis)">
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="myitemmenu.inmenu && !myitemmenu.submenu && tools.visumenu(myitemmenu)">
|
||||
<q-slide-transition :duration=200>
|
||||
<div v-show="true">
|
||||
<span v-if="myitemmenu.isseparator">
|
||||
<q-separator inset></q-separator>
|
||||
</span>
|
||||
<span v-else>
|
||||
<q-expansion-item
|
||||
:to="getroute(myitemmenu)"
|
||||
:header-inset-level="myitemmenu.level_parent"
|
||||
:content-inset-level="myitemmenu.level_parent"
|
||||
:label="tools.getLabelByItem(myitemmenu, mythis)"
|
||||
:icon="myitemmenu.materialIcon"
|
||||
expand-icon="none"
|
||||
:header-class="clBaseint"
|
||||
active-class="my-menu-active">
|
||||
</q-expansion-item>
|
||||
</span>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./menuOne.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './menuOne.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user