Skip to content

Commit 7f2903a

Browse files
GruceGruce
committed
Navbar improvements
1 parent fe3d63d commit 7f2903a

File tree

7 files changed

+146
-69
lines changed

7 files changed

+146
-69
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "enab",
3-
"version": "1.5.2",
3+
"version": "1.5.3",
44
"description": "Enab System",
55
"main": "./dist/main/index.js",
66
"scripts": {

‎src/main/BrowserWinHandler.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default class BrowserWinHandler {
7777
}
7878
)
7979

80-
this.browserWindow.maximize();
80+
// this.browserWindow.maximize();
8181
this.browserWindow.setMenu(null);
8282

8383
// this.browserWindow.webContents.openDevTools()

‎src/main/mainWindow.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import BrowserWinHandler from './BrowserWinHandler'
44
const winHandler = new BrowserWinHandler({
55
height: 600,
66
width: 1000,
7-
frame: false
7+
frame: false,
8+
minHeight:800,
9+
minWidth:1400,
810
})
911

1012
winHandler.onCreated(_browserWindow => {

‎src/renderer/assets/scss/style.scss‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -344,16 +344,54 @@ input[type=checkbox]:checked+[data-chakra-component="CControlBox"]>*, input[type
344344
}
345345
}
346346

347-
348-
.logo-big{
349-
// -webkit-animation: hue 3s infinite;
350-
}
351-
352347
@-webkit-keyframes hue {
353348
0%, 100% {
354349
-webkit-filter: invert(0%) sepia(28%) saturate(5695%) hue-rotate(242deg) brightness(100%) contrast(132%);
355350
}
356351
50% {
357352
-webkit-filter: invert(18%) sepia(28%) saturate(5695%) hue-rotate(242deg) brightness(92%) contrast(132%);
358353
}
354+
}
355+
356+
357+
.text-danger-h{
358+
&:hover {
359+
@extend .text-danger;
360+
}
361+
}
362+
363+
.text-info-h{
364+
&:hover {
365+
@extend .text-info;
366+
}
367+
}
368+
369+
.text-primary-h{
370+
&:hover {
371+
@extend .text-primary;
372+
}
373+
}
374+
375+
.text-dark-h{
376+
&:hover {
377+
@extend .text-dark;
378+
}
379+
}
380+
381+
.text-light-h{
382+
&:hover {
383+
@extend .text-light;
384+
}
385+
}
386+
387+
.text-secondary-h{
388+
&:hover {
389+
@extend .text-secondary;
390+
}
391+
}
392+
393+
.text-warning-h{
394+
&:hover {
395+
@extend .text-warning;
396+
}
359397
}

‎src/renderer/assets/scss/variables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,5 @@ $b-1: $t-3;
3939
$input-border-radius: $r-2;
4040

4141
$btn-border-radius: $r-2;
42+
43+

‎src/renderer/components/supermarket/Navbar.vue‎

Lines changed: 90 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,55 @@
11
<template>
22
<div>
3-
<div class="position-absolute" style="top: 0%; left: 0%; width: 100%;z-index:1">
3+
<div class="position-absolute" style="top: 0%; left: 0%; width: 100%;z-index:1;">
44
<div class="navbar p-2">
55
<div class="row w-100">
66
<div class="col-6 d-flex align-items-center">
7-
<ul class="nav nav-pills mr-5">
8-
<li class="nav-item">
9-
<nuxt-link to="/supermarket" :class="{ 'active' : $nuxt.$route.path === '/supermarket'}" class="nav-link py-1 px-2">
7+
<div class="mr-1 group-links p-1 r-1 mr-5">
8+
<nuxt-link :to="nav.link" v-for="nav in navs" :key="nav.title">
9+
<span :class="{ 'active' : $nuxt.$route.path === nav.link}" class="badge py-2 px-3 pointer mx-1">
10+
<i class="fas" :class="nav.icon"></i>
11+
<span v-if="$nuxt.$route.path === nav.link">
12+
{{ nav.title }}
13+
</span>
14+
</span>
15+
</nuxt-link>
16+
<!-- <nuxt-link to="/supermarket">
17+
<span :class="{ 'active' : $nuxt.$route.path === '/supermarket'}" class="badge py-2 px-3 pointer">
1018
<i class="fas fa-home"></i>
11-
</nuxt-link>
12-
</li>
13-
<li class="nav-item">
14-
<nuxt-link to="/supermarket/new-order" :class="{ 'active' : $nuxt.$route.path === '/supermarket/new-order'}" class="nav-link py-1 px-3">
19+
</span>
20+
</nuxt-link>
21+
22+
<nuxt-link to="/supermarket/new-order">
23+
<span :class="{ 'active' : $nuxt.$route.path === '/supermarket/new-order'}" class="badge py-2 px-3 pointer">
1524
<i class="fas fa-cash-register"></i>
16-
</nuxt-link>
17-
</li>
18-
<li class="nav-item">
19-
<nuxt-link to="/supermarket/control" :class="{ 'active' : $nuxt.$route.path === '/supermarket/control'}" class="nav-link py-1 px-3">
25+
</span>
26+
</nuxt-link>
27+
28+
<nuxt-link to="/supermarket/control">
29+
<span :class="{ 'active' : $nuxt.$route.path === '/supermarket/control'}" class="badge py-2 px-3 pointer">
2030
<i class="fas fa-list-ul"></i>
21-
</nuxt-link>
22-
</li>
23-
<li class="nav-item">
24-
<nuxt-link to="/supermarket/analytics" :class="{ 'active' : $nuxt.$route.path === '/supermarket/analytics'}" class="nav-link py-1 px-3">
31+
</span>
32+
</nuxt-link>
33+
34+
<nuxt-link to="/supermarket/analytics">
35+
<span :class="{ 'active' : $nuxt.$route.path === '/supermarket/analytics'}" class="badge py-2 px-3 pointer">
2536
<i class="fas fa-chart-pie"></i>
26-
</nuxt-link>
27-
</li>
28-
<li class="nav-item">
29-
<nuxt-link to="/supermarket/services" :class="{ 'active' : $nuxt.$route.path === '/supermarket/services'}" class="nav-link py-1 px-3">
37+
</span>
38+
</nuxt-link>
39+
40+
<nuxt-link to="/supermarket/services">
41+
<span :class="{ 'active' : $nuxt.$route.path === '/supermarket/services'}" class="badge py-2 px-3 pointer">
3042
<i class="fas fa-cubes"></i>
31-
</nuxt-link>
32-
</li>
33-
<li class="nav-item">
34-
<nuxt-link to="/supermarket/settings" :class="{ 'active' : $nuxt.$route.path === '/supermarket/settings'}" class="nav-link py-1 px-3">
43+
</span>
44+
</nuxt-link>
45+
46+
<nuxt-link to="/supermarket/settings">
47+
<span :class="{ 'active' : $nuxt.$route.path === '/supermarket/settings'}" class="badge py-2 px-3 pointer">
3548
<i class="fas fa-cog"></i>
36-
</nuxt-link>
37-
</li>
38-
</ul>
49+
</span>
50+
</nuxt-link> -->
51+
</div>
52+
3953
</div>
4054
<div class="col-6">
4155
<div dir="ltr" class="text-white ml-3 d-flex align-items-center">
@@ -56,39 +70,33 @@
5670

5771
</div>
5872

59-
<div class="mr-1">
73+
<div class="mr-1 group-links p-1 r-1">
6074
<nuxt-link to="/credits">
61-
<div :class="$auth.user.points <= 0 ? 'text-danger' : 'text-light'" v-b-tooltip.hover.bottom title="شحن رصيد" class="badge py-2 px-3 pointer btn-icon-label">
62-
<span class="btn-inner--icon">
63-
<i class="fas fa-credit-card"></i>
64-
</span>
65-
<span class="btn-inner--text">
66-
{{ $auth.user.points }} نقطة
67-
</span>
68-
</div>
75+
<span :class="$auth.user.points <= 0 ? 'text-danger' : 'text-light'" v-b-tooltip.hover.bottom title="شحن رصيد" class="badge py-2 px-3 pointer">
76+
{{ $auth.user.points }} نقطة
77+
</span>
6978
</nuxt-link>
70-
</div>
7179

72-
<div class="mr-1">
73-
<div @click="toggleMenu" v-b-tooltip.hover.bottom title="القائمة" class="badge py-2 px-3 pointer btn-icon-label">
74-
<span class="btn-inner--icon">
75-
<i class="fas fa-bars"></i>
76-
</span>
77-
<span class="btn-inner--text">
78-
{{ $auth.user.name }}
79-
</span>
80-
</div>
80+
<span @click="toggleMenu" v-b-tooltip.hover.bottom title="القائمة" class="badge pointer py-2 px-3 text-warning-h">
81+
{{ $auth.user.name }}
82+
</span>
8183
</div>
8284

83-
<div class="mr-1">
85+
<!-- <div class="mr-1">
8486
<nuxt-link to="/" v-b-tooltip.hover.bottom title="الذهاب الى الخدمات" class="badge py-2 px-3 pointer btn-icon-label text-light">
8587
<i class="fas fa-arrow-left"></i>
8688
</nuxt-link>
87-
</div>
89+
</div> -->
8890

89-
<div class="mr-1">
90-
<span @click="exit" v-b-tooltip.hover.bottom title="الخروج من النظام" class="badge py-2 px-3 pointer btn-icon-label text-danger">
91-
<i class="fas fa-times"></i>
91+
<div class="mr-3 group-links p-1 r-1">
92+
<span @click="minimize" v-b-tooltip.hover.bottom title="تصغير" class="badge py-2 px-3 pointer">
93+
<i class="fas fa-window-minimize"></i>
94+
</span>
95+
<span @click="maximize" v-b-tooltip.hover.bottom title="تكبير" class="badge py-2 px-3 pointer">
96+
<i class="fas fa-window-maximize"></i>
97+
</span>
98+
<span @click="exit" v-b-tooltip.hover.bottom title="الخروج من النظام" class="badge py-2 px-3 pointer text-danger-h">
99+
<i class="fas fa-window-close"></i>
92100
</span>
93101
</div>
94102
</div>
@@ -103,6 +111,7 @@
103111
<script>
104112
import { mapMutations, mapGetters, mapActions, mapState } from "vuex";
105113
const { remote, ipcRenderer } = require("electron");
114+
var win = remote.BrowserWindow.getFocusedWindow();
106115
107116
export default {
108117
computed: {
@@ -114,12 +123,26 @@ export default {
114123
data() {
115124
return {
116125
datetime: "",
126+
navs: [
127+
{ title: "الصفحة الرئيسية", link: "/supermarket", icon: "fa-home" },
128+
{ title: "طلب جديد", link: "/supermarket/new-order", icon: "fa-cash-register" },
129+
{ title: "التحكم", link: "/supermarket/control", icon: "fa-list-ul" },
130+
{ title: "التحليلات", link: "/supermarket/analytics", icon: "fa-chart-pie" },
131+
{ title: "الخدمات", link: "/supermarket/services", icon: "fa-cubes" },
132+
{ title: "الإعدادات", link: "/supermarket/settings", icon: "fa-cog" },
133+
],
117134
};
118135
},
119136
created() {
120137
// setInterval(this.getNow, 1000);
121138
},
122139
methods: {
140+
maximize() {
141+
win.maximize();
142+
},
143+
minimize() {
144+
win.minimize();
145+
},
123146
exit() {
124147
this.$dialog
125148
.confirm("هل انت متأكد من إغلاق النظام؟", {
@@ -158,6 +181,10 @@ export default {
158181
</script>
159182

160183
<style lang="scss" scoped>
184+
div {
185+
-webkit-user-select: none;
186+
-webkit-app-region: drag;
187+
}
161188
.navbar {
162189
background: rgb(0, 0, 0);
163190
background: linear-gradient(
@@ -166,7 +193,7 @@ export default {
166193
rgba(0, 0, 0, 0.35) 50%,
167194
rgba(0, 0, 0, 0.5) 100%
168195
);
169-
transition: .15s ease-in-out;
196+
transition: 0.15s ease-in-out;
170197
}
171198
.nav-pills .nav-link.active,
172199
.nav-pills .show > .nav-link {
@@ -178,9 +205,9 @@ export default {
178205
.nav-pills .nav-link,
179206
.nav-pills > .nav-link {
180207
color: #ffffff;
181-
transition: .3s;
208+
transition: 0.3s;
182209
margin: 0 1px;
183-
&:hover{
210+
&:hover {
184211
background-color: $tb-1;
185212
}
186213
}
@@ -196,8 +223,16 @@ export default {
196223
.btn-icon-label {
197224
transition: 0.2s ease-in;
198225
background: $tb-1 !important;
199-
&:hover {
226+
.pointer:hover {
200227
background: $tb-2 !important;
201228
}
202229
}
230+
231+
.active {
232+
background: $tb-2 !important;
233+
}
234+
235+
.group-links {
236+
@extend .btn-icon-label;
237+
}
203238
</style>

‎src/renderer/pages/index.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="container mt-6">
2+
<div class="mx-5 mt-6">
33
<MainUserInformation />
44
<MainBusinesses />
55
</div>
@@ -10,15 +10,15 @@ import { mapMutations, mapGetters, mapActions, mapState } from "vuex";
1010
1111
export default {
1212
created() {
13-
this.selectBusinesses(this.$auth.user.businesses)
13+
this.selectBusinesses(this.$auth.user.businesses);
1414
},
1515
methods: {
1616
signout() {
1717
this.$auth.logout();
1818
this.$router.push("/");
1919
},
2020
...mapMutations({
21-
selectBusinesses: 'business/selectBusinesses'
21+
selectBusinesses: "business/selectBusinesses",
2222
}),
2323
},
2424
};
@@ -33,10 +33,10 @@ h1 {
3333
max-height: calc(100vh - 21rem) !important;
3434
}
3535
36-
.clickable{
37-
transition: .2s ease-out;
36+
.clickable {
37+
transition: 0.2s ease-out;
3838
border-radius: $r-2;
39-
&:hover{
39+
&:hover {
4040
background: $tb-2;
4141
}
4242
}

0 commit comments

Comments
 (0)