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>
<v-layout wrap>
<v-container class="Header">
<v-icon class="Menu" @click.stop="drawer = !drawer" dark>WMi-menu</v-icon>
<a :href="mainHref">
<v-icon class="Home" dark>WMi-Real-Estate</v-icon>
</a>
<v-layout wrap>
<v-container class="Header">
<v-icon class="Menu" @click.stop="drawer = !drawer" dark>WMi-menu</v-icon>
<a :href="mainHref">
<v-icon class="Home" dark>WMi-Real-Estate</v-icon>
</a>
<div class="Name caption"> {{ getAuthUser.name }} </div>
<div class="Time">
<div class="En Bold">{{ getCurrentTime }}</div>
<div class="Fa Thin">{{ new Date() | moment("dddd jDD jMMMM jYYYY") }}</div>
</div>
<!-- <div class="Notification" dark>
<div class="Time">
<div class="En Bold">{{ getCurrentTime }}</div>
<div class="Fa Thin">{{ new Date() | moment("dddd jDD jMMMM jYYYY") }}</div>
</div>
<!-- <div class="Notification" dark>
<wm-notifications></wm-notifications>
</div>-->
</v-container>
</div>-->
</v-container>
<v-navigation-drawer v-model="drawer" app temporary right width="320">
<v-list class="pa-1">
<v-navigation-drawer v-model="drawer" app temporary right width="420">
<v-list class="pa-1">
<div class="row user-info">
<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="Name Fa">{{ getAuthUser.name }}</div>
<div class="Role Fa">مدیریت</div>
</div>
</v-flex>
<v-flex lg3>
<a class="LogOut">
<v-tooltip bottom color="black" transition="slide-x-transition">
<a class="LogOut">
<v-tooltip bottom color="black" transition="slide-x-transition">
<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-icon dark>WMi-off-1</v-icon>
</v-btn>
</template>
<span>خروج از حساب کاربری</span>
</v-tooltip>
</a>
<span>خروج از حساب کاربری</span>
</v-tooltip>
</a>
</v-flex>
</div>
</v-list>
</v-list>
<v-list class="pt-0" dense>
<v-divider class="Divider"/>
<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))">
<wm-list-tile :TitleFa="item.titleFa" :TitleEn="item.titleEn" :icon="item.icon" :tileClass="item.tileClass"/>
</template>
</a>
</v-list>
</v-navigation-drawer>
</v-layout>
<v-list class="pt-0" dense>
<v-divider class="Divider"/>
<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))">
<wm-list-tile :TitleFa="item.titleFa" :TitleEn="item.titleEn" :icon="item.icon" :tileClass="item.tileClass"/>
</template>
</a>
</v-list>
<div class="footer">
<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>
<script>
import Tile from "@Global/components/Drawer/Tile";
import Notifications from "@Global/components/Drawer/Notifications";
import Routes from "@Global/utils/common/routes";
import { mapActions, mapGetters } from "vuex";
export default {
data() {
return {
fav: true,
menu: true,
message: false,
hints: true,
drawer: false,
Items: [
{ titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'user', permissionClass: null, href: '/user/profile' },
{
titleEn: " My Users ",
titleFa: " کاربران مجموعه ی من ",
icon: "users",
permissionClass: "User::index",
module: "core",
href: Routes.user(),
tileClass: 'red-theme',
},
{
titleEn: " Product Management ",
titleFa: " مدیریت محصولات ",
icon: "dropbox",
href: '/product/home',
tileClass: 'cyan-theme',
},
{
titleEn: " Blog Management ",
titleFa: " مدیریت خبرنامه ",
moduleName: "blog",
icon: "rss",
href: '/blog',
tileClass: 'orange-theme',
},
{
titleEn: " Portfolio Management ",
titleFa: " مدیریت نمونه کارها ",
moduleName: "portfolio",
icon: "art-gallery",
href: '/portfolio',
},
// {
// titleEn: " SMS Management ",
// titleFa: " مدیریت پیام های کوتاه ",
// icon: "comment-alt",
// permissionClass: "SMS::manage",
// href: '/sms/manage',
// }
],
user: { name: "" },
mainHref: Routes.main(),
};
},
components: {
"wm-list-tile": Tile,
"wm-notifications": Notifications
},
methods: {
...mapActions("auth", ["logout"]),
},
computed: {
...mapGetters("auth", ["getAuthUser"]),
...mapGetters("common", ["getCurrentTime"]),
...mapGetters("rolePermission", ["getModules"]),
import Tile from "@Global/components/Drawer/Tile";
import Notifications from "@Global/components/Drawer/Notifications";
import Routes from "@Global/utils/common/routes";
import { mapActions, mapGetters } from "vuex";
export default {
data() {
return {
fav: true,
menu: true,
message: false,
hints: true,
drawer: false,
Items: [
{ titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'user', permissionClass: null, href: '/user/dashboard' },
{
titleEn: " My Users ",
titleFa: " کاربران مجموعه ی من ",
icon: "users",
permissionClass: "User::index",
module: "core",
href: '/user/home',
tileClass: 'red-theme',
},
{
titleEn: " Product Management ",
titleFa: " مدیریت محصولات ",
icon: "dropbox",
href: '/product/home',
tileClass: 'cyan-theme',
},
{
titleEn: " Blog Management ",
titleFa: " مدیریت خبرنامه ",
moduleName: "blog",
icon: "rss",
href: '/blog',
tileClass: 'orange-theme',
},
{
titleEn: " Portfolio Management ",
titleFa: " مدیریت نمونه کارها ",
moduleName: "portfolio",
icon: "art-gallery",
href: '/portfolio',
},
// {
// titleEn: " SMS Management ",
// titleFa: " مدیریت پیام های کوتاه ",
// icon: "comment-alt",
// permissionClass: "SMS::manage",
// href: '/sms/manage',
// }
],
user: { name: "" },
mainHref: Routes.main(),
};
},
components: {
"wm-list-tile": Tile,
"wm-notifications": Notifications
},
methods: {
...mapActions("auth", ["logout"]),
},
computed: {
...mapGetters("auth", ["getAuthUser"]),
...mapGetters("common", ["getCurrentTime"]),
...mapGetters("rolePermission", ["getModules"]),
}
};
}
};
</script>
<style lang="scss" scoped>
.user-info .Title {
float: right;
}
.user-info .Avatar {
float: right;
width: 48px;
margin: 0px 10px;
}
.user-info .Title .Name {
font-size: 14px;
}
.user-info .Title {
float: right;
}
.user-info .Avatar {
float: right;
width: 48px;
margin: 0px 10px;
}
.user-info .Title .Name {
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 {
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;
}
.drawer {
position: fixed;
top: 0px;
left: -600px;
bottom: 0px;
background-color: white;
width: 600px;
.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;
}
.drawer.open {
left: 0px;
}
.v-application .caption {
font-family: iranyekan-regular!important;
}
.drawer {
position: fixed;
top: 0px;
left: -600px;
bottom: 0px;
background-color: white;
width: 600px;
}
.footer {
position: absolute;
bottom: 0px;
width: 420px;
padding-bottom: 10px;
text-align: center;
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;
}
.v-application .caption {
font-family: iranyekan-regular!important;
}
}
.footer .links .social-media {
padding-left: 10px;
}
.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>

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

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

Write Preview
Loading…
Cancel
Save