viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit d75967ec20805438e82113bc2a5dc985f16e4f11

Authored by Neeraj Sharma
1 parent 603a067025
Exists in master and in 3 other branches amber-development, development, ui-design

implemented changes and page header toolbar funcatinallity

Showing 2 changed files with 10 additions and 3 deletions   Show diff stats
src/components/pageHeader/AppDrawer.vue
Diff comments   View file @d75967e
1 <template> 1 <template>
2 <v-navigation-drawer 2 <v-navigation-drawer
3 id="appDrawer" 3 id="appDrawer"
4 :mini-variant.sync="mini" 4 :mini-variant.sync="mini"
5 fixed 5 fixed
6 :dark="$vuetify.dark" 6 :dark="$vuetify.dark"
7 app 7 app
8 v-model="drawer" 8 v-model="drawer"
9 width="260" 9 width="260"
10 > 10 >
11 <v-toolbar color="grey lighten" > 11 <v-toolbar style="background:#39b982" >
12 <!-- <img v-bind:src="computeLogo" height="30" class="imgLogo" alt="ana"> --> 12 <!-- <img v-bind:src="computeLogo" height="30" class="imgLogo" alt="ana"> -->
13 <h4 class="white--text my-3 ml-4">School-Managament</h4> 13 <h4 class="white--text my-3 ml-4">School-Managament</h4>
14 <v-toolbar-title class="ml-0 pl-3"> 14 <v-toolbar-title class="ml-0 pl-3">
15 </v-toolbar-title> 15 </v-toolbar-title>
16 </v-toolbar> 16 </v-toolbar>
17 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings"> 17 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
18 <v-list dense expand> 18 <v-list dense expand>
19 <template v-for="(item, i) in menus"> 19 <template v-for="(item, i) in menus">
20 <!--group with subitems--> 20 <!--group with subitems-->
21 <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action"> 21 <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action">
22 <v-list-tile slot="activator" ripple="ripple"> 22 <v-list-tile slot="activator" ripple="ripple">
23 <v-list-tile-content> 23 <v-list-tile-content>
24 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 24 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
25 </v-list-tile-content> 25 </v-list-tile-content>
26 </v-list-tile> 26 </v-list-tile>
27 <template v-for="(subItem, i) in item.items"> 27 <template v-for="(subItem, i) in item.items">
28 <!--sub group--> 28 <!--sub group-->
29 <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group"> 29 <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group">
30 <v-list-tile slot="activator" ripple="ripple"> 30 <v-list-tile slot="activator" ripple="ripple">
31 <v-list-tile-content> 31 <v-list-tile-content>
32 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 32 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
33 </v-list-tile-content> 33 </v-list-tile-content>
34 </v-list-tile> 34 </v-list-tile>
35 <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple"> 35 <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple">
36 <v-list-tile-content> 36 <v-list-tile-content>
37 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 37 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
38 </v-list-tile-content> 38 </v-list-tile-content>
39 </v-list-tile> 39 </v-list-tile>
40 </v-list-group> 40 </v-list-group>
41 <!--child item--> 41 <!--child item-->
42 <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple"> 42 <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple">
43 <v-list-tile-content> 43 <v-list-tile-content>
44 <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title> 44 <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title>
45 </v-list-tile-content> 45 </v-list-tile-content>
46 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 46 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
47 <v-list-tile-action v-if="subItem.action"> 47 <v-list-tile-action v-if="subItem.action">
48 <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon> 48 <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon>
49 </v-list-tile-action> 49 </v-list-tile-action>
50 </v-list-tile> 50 </v-list-tile>
51 </template> 51 </template>
52 </v-list-group> 52 </v-list-group>
53 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 53 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
54 <v-divider v-else-if="item.divider" :key="i"></v-divider> 54 <v-divider v-else-if="item.divider" :key="i"></v-divider>
55 <!--top-level link--> 55 <!--top-level link-->
56 <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name"> 56 <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name">
57 <v-list-tile-action v-if="item.icon"> 57 <v-list-tile-action v-if="item.icon">
58 <v-icon>{{ item.icon }}</v-icon> 58 <v-icon>{{ item.icon }}</v-icon>
59 </v-list-tile-action> 59 </v-list-tile-action>
60 <v-list-tile-content> 60 <v-list-tile-content>
61 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 61 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
62 </v-list-tile-content> 62 </v-list-tile-content>
63 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 63 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
64 <v-list-tile-action v-if="item.subAction"> 64 <v-list-tile-action v-if="item.subAction">
65 <v-icon class="success--text">{{ item.subAction }}</v-icon> 65 <v-icon class="success--text">{{ item.subAction }}</v-icon>
66 </v-list-tile-action> 66 </v-list-tile-action>
67 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 67 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
68 </v-list-tile> 68 </v-list-tile>
69 </template> 69 </template>
70 </v-list> 70 </v-list>
71 </vue-perfect-scrollbar> 71 </vue-perfect-scrollbar>
72 </v-navigation-drawer> 72 </v-navigation-drawer>
73 </template> 73 </template>
74 <script> 74 <script>
75 import menu from '@/api/menu'; 75 import menu from '@/api/menu';
76 import VuePerfectScrollbar from 'vue-perfect-scrollbar'; 76 import VuePerfectScrollbar from 'vue-perfect-scrollbar';
77 export default { 77 export default {
78 name: 'app-drawer', 78 name: 'app-drawer',
79 components: { 79 components: {
80 VuePerfectScrollbar, 80 VuePerfectScrollbar,
81 }, 81 },
82 props: { 82 props: {
83 expanded: { 83 expanded: {
84 type: Boolean, 84 type: Boolean,
85 default: true 85 default: true
86 }, 86 },
87 }, 87 },
88 data: () => ({ 88 data: () => ({
89 mini: false, 89 mini: false,
90 drawer: true, 90 drawer: true,
91 menus: menu, 91 menus: menu,
92 scrollSettings: { 92 scrollSettings: {
93 maxScrollbarLength: 160 93 maxScrollbarLength: 160
94 } 94 }
95 }), 95 }),
96 computed: { 96 computed: {
97 computeGroupActive () { 97 computeGroupActive () {
98 return true; 98 return true;
99 }, 99 },
100 // computeLogo () { 100 // computeLogo () {
101 // return '/static/ana@2x.png'; 101 // return '/static/ana@2x.png';
102 // }, 102 // },
103 103
104 sideToolbarColor () { 104 sideToolbarColor () {
105 return this.$vuetify.options.extra.sideNav; 105 return this.$vuetify.options.extra.sideNav;
106 } 106 }
107 }, 107 },
108 created () { 108 created () {
109 window.getApp.$on('APP_DRAWER_TOGGLED', () => { 109 window.getApp.$on('APP_DRAWER_TOGGLED', () => {
110 this.drawer = (!this.drawer); 110 this.drawer = (!this.drawer);
111 }); 111 });
112 }, 112 },
113 113
114 114
115 methods: { 115 methods: {
116 genChildTarget (item, subItem) { 116 genChildTarget (item, subItem) {
117 if (subItem.href) return; 117 if (subItem.href) return;
118 if (subItem.component) { 118 if (subItem.component) {
119 return { 119 return {
120 name: subItem.component, 120 name: subItem.component,
121 }; 121 };
122 } 122 }
123 return { name: `${item.group}/${(subItem.name)}` }; 123 return { name: `${item.group}/${(subItem.name)}` };
124 }, 124 },
125 } 125 }
126 }; 126 };
127 </script> 127 </script>
128 128
129 129
130 <style lang="stylus"> 130 <style lang="stylus">
131 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl'; 131 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
132 132
133 #appDrawer 133 #appDrawer
134 overflow: hidden 134 overflow: hidden
135 .drawer-menu--scroll 135 .drawer-menu--scroll
136 height: calc(100vh - 48px) 136 height: calc(100vh - 48px)
137 overflow: auto 137 overflow: auto
138 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 138 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
139 height: 60px; 139 height: 60px;
140 font-size:17px; 140 font-size:17px;
141 } 141 }
142 .v-list__tile__action { 142 .v-list__tile__action {
143 min-width:36px; 143 min-width:36px;
144 } 144 }
145 .v-list__tile.primary--text { 145 .v-list__tile.primary--text {
146 color:black !important; 146 color:black !important;
147 border-left: 4px solid black; 147 border-left: 4px solid black;
148 border-radius: 4px; 148 border-radius: 4px;
149 } 149 }
150 @media screen and (max-width: 420px) { 150 @media screen and (max-width: 420px) {
151 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 151 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
152 font-size: 14px; 152 font-size: 14px;
153 } 153 }
154 .imgLogo{ 154 .imgLogo{
155 height: 22px; 155 height: 22px;
156 width: 62px; 156 width: 62px;
157 } 157 }
158 } 158 }
159 </style> 159 </style>
160
161
162 <style scoped>
163 .theme--light .v-icon, .application .theme--light.v-icon {
164 color: #39b982;
165 }
166 </style>
167
160 168
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @d75967e
1 <template> 1 <template>
2 <v-toolbar 2 <v-toolbar
3 color="grey" 3 class="fixcolors"
4 fixed 4 fixed
5 app 5 app
6 > 6 >
7 <v-toolbar-title class="ml-0 pl-3"> 7 <v-toolbar-title class="ml-0 pl-3">
8 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 8 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
9 </v-toolbar-title> 9 </v-toolbar-title>
10 <v-spacer></v-spacer> 10 <v-spacer></v-spacer>
11 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 11 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
12 <v-btn icon large flat slot="activator"> 12 <v-btn icon large flat slot="activator">
13 <v-avatar size="40px"> 13 <v-avatar size="40px">
14 <img src="/static/icon/user.png"/> 14 <img src="/static/icon/user.png"/>
15 </v-avatar> 15 </v-avatar>
16 </v-btn> 16 </v-btn>
17 <v-list class="pa-0"> 17 <v-list class="pa-0">
18 <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index"> 18 <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index">
19 <v-list-tile-action v-if="item.icon"> 19 <v-list-tile-action v-if="item.icon">
20 <v-icon>{{ item.icon }}</v-icon> 20 <v-icon>{{ item.icon }}</v-icon>
21 </v-list-tile-action> 21 </v-list-tile-action>
22 <v-list-tile-content> 22 <v-list-tile-content>
23 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 23 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
24 </v-list-tile-content> 24 </v-list-tile-content>
25 </v-list-tile> 25 </v-list-tile>
26 </v-list> 26 </v-list>
27 </v-menu> 27 </v-menu>
28 </v-toolbar> 28 </v-toolbar>
29 </template> 29 </template>
30 <script> 30 <script>
31 import Util from "@/util"; 31 import Util from "@/util";
32 export default { 32 export default {
33 search: "", 33 search: "",
34 name: "app-toolbar", 34 name: "app-toolbar",
35 data: () => ({ 35 data: () => ({
36 search: "", 36 search: "",
37 userName:'', 37 userName:'',
38 items: [ 38 items: [
39 { 39 {
40 // icon: 'account_circle', 40 // icon: 'account_circle',
41 href: "/changepassword", 41 href: "/changepassword",
42 title: "Change Password", 42 title: "Change Password",
43 click: e => { 43 click: e => {
44 console.log(e); 44 console.log(e);
45 } 45 }
46 }, 46 },
47 // { 47 // {
48 // icon: 'settings', 48 // icon: 'settings',
49 // href: '#', 49 // href: '#',
50 // title: 'Settings', 50 // title: 'Settings',
51 // click: (e) => { 51 // click: (e) => {
52 // console.log(e); 52 // console.log(e);
53 // } 53 // }
54 // }, 54 // },
55 { 55 {
56 // icon: 'fullscreen_exit', 56 // icon: 'fullscreen_exit',
57 href: "#", 57 href: "#",
58 title: "Logout", 58 title: "Logout",
59 click: e => { 59 click: e => {
60 window.getApp.$emit("APP_LOGOUT"); 60 window.getApp.$emit("APP_LOGOUT");
61 // this.$store.dispatch("setToken", null);
62 } 61 }
63 } 62 }
64 ] 63 ]
65 }), 64 }),
66 computed: { 65 computed: {
67 toolbarColor() { 66 toolbarColor() {
68 return this.$vuetify.options.extra.mainNav; 67 return this.$vuetify.options.extra.mainNav;
69 } 68 }
70 }, 69 },
71 methods: { 70 methods: {
72 handleDrawerToggle() { 71 handleDrawerToggle() {
73 window.getApp.$emit("APP_DRAWER_TOGGLED"); 72 window.getApp.$emit("APP_DRAWER_TOGGLED");
74 }, 73 },
75 handleFullScreen() { 74 handleFullScreen() {
76 Util.toggleFullScreen(); 75 Util.toggleFullScreen();
77 } 76 }
78 }, 77 },
79 }; 78 };
80 </script> 79 </script>
81 <style> 80 <style>
82 .v-icon{ 81 .v-icon{
83 font-size:30px; 82 font-size:30px;
84 } 83 }
85 @media screen and (min-width: 1270px){ 84 @media screen and (min-width: 1270px){
86 .hide{ 85 .hide{
87 display: none; 86 display: none;
88 } 87 }
89 /* } 88 /* }
90 @media screen and (max-width: 962px) { 89 @media screen and (max-width: 962px) {
91 .imglogo{ 90 .imglogo{
92 position: absolute; 91 position: absolute;
93 top: 13px; 92 top: 13px;
94 left: 13px !important; 93 left: 13px !important;
95 width: 70px; 94 width: 70px;
96 height: 24px; 95 height: 24px;
97 } */ 96 } */
98 } 97 }
99 @media screen and (max-width: 420px){ 98 @media screen and (max-width: 420px){
100 .v-list__tile { 99 .v-list__tile {
101 font-size:14px; 100 font-size:14px;
102 padding: 0 10px; 101 padding: 0 10px;
103 } 102 }
104 .name{ 103 .name{
105 font-size:15px; 104 font-size:15px;
106 } 105 }
107 } 106 }
108 </style> 107 </style>
109 108