alireza_hassani
/
willaengine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:side bar

Browse Source
product
Alireza Hassani 4 years ago
parent 479712e7a8
commit fa14529fb2
2 changed files with 371 additions and 286 deletions
Show Stats Download Patch File Download Diff File

450
resources/js/Global/components/Drawer/SideBar.vue
Unescape View File

@ -1,221 +1,297 @@
<template> <template>
<v-layout wrap> <v-layout wrap>
<v-container class="Header"> <v-container class="Header">
<v-icon class="Menu" @click.stop="drawer = !drawer" dark>WMi-menu</v-icon> <v-icon class="Menu" @click.stop="drawer = !drawer" dark>WMi-menu</v-icon>
<a :href="mainHref"> <a :href="mainHref">
<v-icon class="Home" dark>WMi-Real-Estate</v-icon> <v-icon class="Home" dark>WMi-Real-Estate</v-icon>
</a> </a>
<div class="Name caption"> {{ getAuthUser.name }} </div> <div class="Name caption"> {{ getAuthUser.name }} </div>
<div class="Time"> <div class="Time">
<div class="En Bold">{{ getCurrentTime }}</div> <div class="En Bold">{{ getCurrentTime }}</div>
<div class="Fa Thin">{{ new Date() | moment("dddd jDD jMMMM jYYYY") }}</div> <div class="Fa Thin">{{ new Date() | moment("dddd jDD jMMMM jYYYY") }}</div>
</div> </div>
<!-- <div class="Notification" dark> <!-- <div class="Notification" dark>
<wm-notifications></wm-notifications> <wm-notifications></wm-notifications>
</div>--> </div>-->
</v-container> </v-container>
<v-navigation-drawer v-model="drawer" app temporary right width="320"> <v-navigation-drawer v-model="drawer" app temporary right width="420">
<v-list class="pa-1"> <v-list class="pa-1">
<div class="row user-info"> <div class="row user-info">
<v-flex lg9 class="pa-3"> <v-flex lg9 class="pa-3">
<img class="Avatar" :src="$_getPath()+'images/Global/Misc/Avatar.png'" /> <img class="Avatar" :src="$_getPath()+'images/Global/Misc/Avatar.png'" />
<div class="Title"> <div class="Title">
<div class="Name Fa">{{ getAuthUser.name }}</div> <div class="Name Fa">{{ getAuthUser.name }}</div>
<div class="Role Fa">مدیریت</div> <div class="Role Fa">مدیریت</div>
</div> </div>
</v-flex> </v-flex>
<v-flex lg3> <v-flex lg3>
<a class="LogOut"> <a class="LogOut">
<v-tooltip bottom color="black" transition="slide-x-transition"> <v-tooltip bottom color="black" transition="slide-x-transition">
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-btn class="mt-4" small @click.native.stop="logout" slot="activator" outlined fab color="black" dark v-on="on"> <v-btn class="mt-4" small @click.native.stop="logout" slot="activator" outlined fab color="black" dark v-on="on">
<v-icon dark>WMi-off-1</v-icon> <v-icon dark>WMi-off-1</v-icon>
</v-btn> </v-btn>
</template> </template>
<span>خروج از حساب کاربری</span> <span>خروج از حساب کاربری</span>
</v-tooltip> </v-tooltip>
</a> </a>
</v-flex> </v-flex>
</div> </div>
</v-list> </v-list>
<v-list class="pt-0" dense> <v-list class="pt-0" dense>
<v-divider class="Divider"/> <v-divider class="Divider"/>
<a :href="item.href" v-for="(item, key) in Items" :key="key"> <a :href="item.href" v-for="(item, key) in Items" :key="key">
<template v-if="(!item.permissionClass || $_can(item.permissionClass, false, item.module)) && ($_hasModule(item.moduleName, true))"> <template v-if="(!item.permissionClass || $_can(item.permissionClass, false, item.module)) && ($_hasModule(item.moduleName, true))">
<wm-list-tile :TitleFa="item.titleFa" :TitleEn="item.titleEn" :icon="item.icon" :tileClass="item.tileClass"/> <wm-list-tile :TitleFa="item.titleFa" :TitleEn="item.titleEn" :icon="item.icon" :tileClass="item.tileClass"/>
</template> </template>
</a> </a>
</v-list> </v-list>
</v-navigation-drawer> <div class="footer">
</v-layout> <div class="flex-justified-space-between links">
<div class="flex-justified-right texts">
<a href="https://www.willaarts.ir/ContactUs" class="WM-Link"> تماس با ما </a>
<a href="https://www.willaarts.ir/AboutUs" class="WM-Link"> درباره ی ما </a>
<a href="https://www.willaarts.ir/FAQ" class="WM-Link"> سوالات متداول </a>
</div>
<div class="social-media flex-justified-left">
<a href="https://www.aparat.com/WillaArts" class="WM-Link"> <v-icon>WMi-aparat</v-icon> </a>
<a href="https://www.instagram.com/willaarts.ir/" class="WM-Link"> <v-icon>WMi-instagram-2</v-icon> </a>
<a href="https://www.linkedin.com/in/willaartsgroup/" class="WM-Link"> <v-icon>WMi-linkedin-1</v-icon> </a>
</div>
</div>
<a href="https://www.willaarts.ir/ContactUs" class="WM-Link">
<div class="flex-justified-center water-mark">
<v-icon class="text--32">WMi-willa-engine</v-icon>
<div class="text-right">
<div class="Fa"> قدرت گرفته از سیستم ویـــــلااِنجین </div>
<div class="En"> Powered By WillaEngine IMS </div>
</div>
</div>
</a>
</div>
</v-navigation-drawer>
</v-layout>
</template> </template>
<script> <script>
import Tile from "@Global/components/Drawer/Tile"; import Tile from "@Global/components/Drawer/Tile";
import Notifications from "@Global/components/Drawer/Notifications"; import Notifications from "@Global/components/Drawer/Notifications";
import Routes from "@Global/utils/common/routes"; import Routes from "@Global/utils/common/routes";
import { mapActions, mapGetters } from "vuex"; import { mapActions, mapGetters } from "vuex";
export default { export default {
data() { data() {
return { return {
fav: true, fav: true,
menu: true, menu: true,
message: false, message: false,
hints: true, hints: true,
drawer: false, drawer: false,
Items: [ Items: [
{ titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'user', permissionClass: null, href: '/user/profile' }, { titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'user', permissionClass: null, href: '/user/dashboard' },
{ {
titleEn: " My Users ", titleEn: " My Users ",
titleFa: " کاربران مجموعه ی من ", titleFa: " کاربران مجموعه ی من ",
icon: "users", icon: "users",
permissionClass: "User::index", permissionClass: "User::index",
module: "core", module: "core",
href: Routes.user(), href: '/user/home',
tileClass: 'red-theme', tileClass: 'red-theme',
}, },
{ {
titleEn: " Product Management ", titleEn: " Product Management ",
titleFa: " مدیریت محصولات ", titleFa: " مدیریت محصولات ",
icon: "dropbox", icon: "dropbox",
href: '/product/home', href: '/product/home',
tileClass: 'cyan-theme', tileClass: 'cyan-theme',
}, },
{ {
titleEn: " Blog Management ", titleEn: " Blog Management ",
titleFa: " مدیریت خبرنامه ", titleFa: " مدیریت خبرنامه ",
moduleName: "blog", moduleName: "blog",
icon: "rss", icon: "rss",
href: '/blog', href: '/blog',
tileClass: 'orange-theme', tileClass: 'orange-theme',
}, },
{ {
titleEn: " Portfolio Management ", titleEn: " Portfolio Management ",
titleFa: " مدیریت نمونه کارها ", titleFa: " مدیریت نمونه کارها ",
moduleName: "portfolio", moduleName: "portfolio",
icon: "art-gallery", icon: "art-gallery",
href: '/portfolio', href: '/portfolio',
}, },
// { // {
// titleEn: " SMS Management ", // titleEn: " SMS Management ",
// titleFa: " مدیریت پیام های کوتاه ", // titleFa: " مدیریت پیام های کوتاه ",
// icon: "comment-alt", // icon: "comment-alt",
// permissionClass: "SMS::manage", // permissionClass: "SMS::manage",
// href: '/sms/manage', // href: '/sms/manage',
// } // }
], ],
user: { name: "" }, user: { name: "" },
mainHref: Routes.main(), mainHref: Routes.main(),
}; };
}, },
components: { components: {
"wm-list-tile": Tile, "wm-list-tile": Tile,
"wm-notifications": Notifications "wm-notifications": Notifications
}, },
methods: { methods: {
...mapActions("auth", ["logout"]), ...mapActions("auth", ["logout"]),
}, },
computed: { computed: {
...mapGetters("auth", ["getAuthUser"]), ...mapGetters("auth", ["getAuthUser"]),
...mapGetters("common", ["getCurrentTime"]), ...mapGetters("common", ["getCurrentTime"]),
...mapGetters("rolePermission", ["getModules"]), ...mapGetters("rolePermission", ["getModules"]),
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.user-info .Title { .user-info .Title {
float: right; float: right;
} }
.user-info .Avatar { .user-info .Avatar {
float: right; float: right;
width: 48px; width: 48px;
margin: 0px 10px; margin: 0px 10px;
} }
.user-info .Title .Name { .user-info .Title .Name {
font-size: 14px; font-size: 14px;
} }
.Header .Menu {
position: absolute;
right: 20px;
top: 20px;
}
.Header .Home {
position: absolute;
right: 50px;
top: 20px;
}
.Header .Name {
position: absolute;
right: 80px;
top: 20px;
color: #fff;
line-height: 18px;
}
.Notification {
position: absolute;
left: 20px;
top: 20px;
}
.Divider {
margin: 0px;
}
.Name {
font-size: 16px;
}
.Role {
font-size: 14px;
color: #aaaaaa;
}
.Time {
text-align: center;
color: #fff;
}
.Time .En {
font-size: 22px;
}
.Time .Fa {
font-size: 14px;
margin-top: -5px;
}
.Header {
padding-bottom: 0px;
}
.LogOut {
position: absolute;
left: 10px;
}
.drawer-trigger {
position: fixed;
top: 0px;
padding: 40px;
background-color: white;
left: 400px;
}
.drawer-trigger.active {
color: red;
}
.Header .Menu { .drawer {
position: absolute; position: fixed;
right: 20px; top: 0px;
top: 20px; left: -600px;
} bottom: 0px;
.Header .Home { background-color: white;
position: absolute; width: 600px;
right: 50px;
top: 20px;
}
.Header .Name {
position: absolute;
right: 80px;
top: 20px;
color: #fff;
line-height: 18px;
}
.Notification { }
position: absolute;
left: 20px;
top: 20px;
}
.Divider {
margin: 0px;
}
.Name {
font-size: 16px;
}
.Role {
font-size: 14px;
color: #aaaaaa;
}
.Time {
text-align: center;
color: #fff;
}
.Time .En {
font-size: 22px;
}
.Time .Fa {
font-size: 14px;
margin-top: -5px;
}
.Header {
padding-bottom: 0px;
}
.LogOut {
position: absolute;
left: 10px;
}
.drawer-trigger {
position: fixed;
top: 0px;
padding: 40px;
background-color: white;
left: 400px;
}
.drawer-trigger.active { .drawer.open {
color: red; left: 0px;
} }
.v-application .caption {
font-family: iranyekan-regular!important;
}
.drawer { .footer {
position: fixed; position: absolute;
top: 0px; bottom: 0px;
left: -600px; width: 420px;
bottom: 0px; padding-bottom: 10px;
background-color: white; text-align: center;
width: 600px; padding-left: 20px;
} }
.footer .water-mark {
}
.footer .links {
width: 420px;
border-bottom: 1px solid #eeeeee;
padding-bottom: 10px;
margin: auto;
}
.footer .links .texts a {
font-size: 14px;
color: #9e9e9e;
margin-right: 20px;
transition: 0.2s;
.drawer.open { }
left: 0px; .footer .links .social-media {
} padding-left: 10px;
.v-application .caption { }
font-family: iranyekan-regular!important; .footer .links .social-media a {
} margin-right: 5px;
transition: 0.2s;
}
.footer .links .social-media a .v-icon {
color: #9e9e9e;
font-size: 16px;
}
.footer .links a:hover, .footer .links .social-media a:hover .v-icon {
color: #000;
}
.footer .water-mark .v-icon {
font-size: 50px;
color: #000;
}
.footer .water-mark .Fa {
font-size: 16px;
}
.footer .water-mark .En {
font-size: 8px;
text-transform: uppercase;
letter-spacing: 4px;
margin-right: -4px;
}
</style> </style>

207
resources/js/Global/components/Drawer/Tile.vue
Unescape View File

@ -1,116 +1,125 @@
<template> <template>
<div class="Tile" :class="tileClass"> <div class="Tile" :class="tileClass">
<i v-if="icon" class="pre-icon" :class="'WMi-'+icon"/> <div class="flex-justified-right">
<div class="Title"> <i v-if="icon" class="pre-icon" :class="'WMi-'+icon"/>
<div class="TitleFa Fa">{{ TitleFa }}</div> <div class="Title">
<div class="TitleEn En">{{ TitleEn }}</div> <div class="TitleFa Fa">{{ TitleFa }}</div>
<div class="TitleEn En">{{ TitleEn }}</div>
</div>
</div> </div>
<v-icon v-if="hasDetail" class="post-icon">WMi-left-open </v-icon> <v-icon v-if="hasDetail" class="post-icon">WMi-left-open </v-icon>
<!-- <i v-if="hasDetail" class="WMi-left-open post-icon"></i> --> <!-- <i v-if="hasDetail" class="WMi-left-open post-icon"></i> -->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
TitleFa : {default: ' عنوان بخش '}, TitleFa : {default: ' عنوان بخش '},
TitleEn : {default: ' Section Title '}, TitleEn : {default: ' Section Title '},
icon : {default: null}, icon : {default: null},
hasDetail: {default: true}, hasDetail: {default: true},
tileClass: {default: ''} tileClass: {default: ''}
} }
} }
</script> </script>
<style scoped> <style scoped>
.Tile { .Tile {
padding: 1em; padding: 0.4em;
padding-right: 20px; padding-right: 20px;
cursor: pointer; cursor: pointer;
display: -webkit-inline-flex; display: -webkit-inline-flex;
width: 100%; width: 100%;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-transition: color 1000ms; -webkit-transition: color 1000ms;
transition: color 1000ms; transition: color 1000ms;
color: #383838; color: #383838;
text-align: right; text-align: right;
} }
.Tile:before { .Tile:before {
content: ""; content: "";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: var(--color-black); background: var(--color-black);
-webkit-transform: scaleX(0); -webkit-transform: scaleX(0);
transform: scaleX(0); transform: scaleX(0);
-webkit-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%; transform-origin: 100% 50%;
-webkit-transition-property: transform; -webkit-transition-property: transform;
transition-property: transform; transition-property: transform;
-webkit-transition: 300ms cubic-bezier(1, 0, 0, 1); -webkit-transition: 300ms cubic-bezier(1, 0, 0, 1);
transition: 300ms cubic-bezier(1, 0, 0, 1); transition: 300ms cubic-bezier(1, 0, 0, 1);
} }
.Tile.orange-theme:before { .Tile.orange-theme:before {
background: var(--color-orange); background: var(--color-orange);
} }
.Tile.red-theme:before { .Tile.red-theme:before {
background: var(--color-red); background: var(--color-red);
} }
.Tile.cyan-theme:before { .Tile.cyan-theme:before {
background: var(--color-cyan); background: var(--color-cyan);
} }
.Tile.orange-theme .pre-icon { .Tile.orange-theme .pre-icon {
color: var(--color-orange); color: var(--color-orange);
} }
.Tile.red-theme .pre-icon { .Tile.red-theme .pre-icon {
color: var(--color-red); color: var(--color-red);
} }
.Tile.cyan-theme .pre-icon { .Tile.cyan-theme .pre-icon {
color: var(--color-cyan); color: var(--color-cyan);
} }
.Tile:hover:before { .Tile:hover:before {
-webkit-transform: scaleX(1); -webkit-transform: scaleX(1);
transform: scaleX(1); transform: scaleX(1);
} }
.Tile:hover, .Tile:hover .post-icon, .Tile:hover .pre-icon, .Tile:hover .TitleEn {
color: #fff;
}
.Tile .pre-icon {
padding-left: 5px;
font-size: 35px;
opacity: 0.2;
}
.Tile .Title {
padding-left: 10px;
margin-right:-30px;
}
.Tile .TitleFa { .Tile .pre-icon {
font-size: 16px; padding-left: 5px;
line-height: 22px; margin-top: 5px;
} font-size: 35px;
.Tile .TitleEn { opacity: 1;
letter-spacing: 3px; transition: 300ms cubic-bezier(1, 0, 0, 1);
line-height: 20px; }
font-size: 10px; .Tile .Title {
color: #a29da9; padding-left: 10px;
margin-right: 0px;
transition: 300ms cubic-bezier(1, 0, 0, 1);
}
} .Tile .TitleFa {
.Tile .post-icon::before { font-size: 18px;
margin-top: 0px; line-height: 22px;
} color: #000;
transition: 300ms cubic-bezier(1, 0, 0, 1);
}
.Tile .TitleEn {
letter-spacing: 3px;
line-height: 20px;
font-size: 10px;
color: #a0a0a0;
text-transform: uppercase;
transition: 300ms cubic-bezier(1, 0, 0, 1);
}
.Tile:hover, .Tile:hover .post-icon, .Tile:hover .pre-icon, .Tile:hover .TitleEn, .Tile:hover .TitleFa {
color: #fff;
}
.Tile .post-icon::before {
margin-top: 0px;
}
.post-icon { .post-icon {
font-size: 24px !important; font-size: 24px !important;
margin-right: auto; margin-right: auto;
color: #888; color: #888;
} }
.Tile:hover .post-icon { .Tile:hover .post-icon {
transform: translateX(-4px); transform: translateX(-4px);
} }
</style> </style>

Write Preview
Loading…
Cancel
Save