Skip to content

Commit f84df4d

Browse files
daniwebdevdaniwebdev
committed
update context menu
1 parent 39b5c30 commit f84df4d

File tree

10 files changed

+203
-116
lines changed

10 files changed

+203
-116
lines changed

‎resources/src/assets/scss/_contextmenu.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.context-menu {
2+
@apply bg-white rounded;
3+
@apply dark:bg-gray-900 dark:text-gray-400;
4+
width: 150px;
5+
z-index: 1000;
6+
position: absolute;
7+
left: -9999px;
8+
top: -9999px;
9+
ul {
10+
li {
11+
@apply border-b text-xs p-2 hover:bg-gray-300 dark:border-gray-800;
12+
cursor: pointer;
13+
&:hover {
14+
@apply dark:bg-gray-700;
15+
}
16+
&:first-child {
17+
@apply rounded-t;
18+
}
19+
&:last-child {
20+
@apply border-none rounded-b;
21+
}
22+
span {
23+
@apply ml-2;
24+
}
25+
}
26+
}
27+
}

‎resources/src/assets/scss/index.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@
1414

1515
/* Utils */
1616
@import "./tooltip";
17+
@import "./contextmenu";
1718

1819
/* Body */
1920

2021
body {
2122
font-family: 'Poppins', sans-serif;
23+
user-select: none;
2224
}
2325

2426

‎resources/src/renderer/components/navigations/BottomNavigation.vue

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
<template>
22
<!-- Footer -->
33
<div class="bottom-navigation">
4-
<div>
5-
<i class="fa fa-link" aria-hidden="true"></i> {{ current_path }}
4+
<div class="bottom-navigation-left">
5+
<span>
6+
<i class="fa fa-link" aria-hidden="true"></i> {{ current_path }}
7+
</span>
8+
<span>
9+
<i class="fa fa-laptop" aria-hidden="true"></i> 129.0.10.1
10+
</span>
611
</div>
12+
13+
14+
715
<div class="flex flex-row side-right">
816
<div class="clock">
917
<i class="fas fa-clock" aria-hidden="true"></i>
@@ -45,9 +53,6 @@ export default {
4553
var hours = time.getHours().toString().padStart(2, '0');
4654
var minutes = time.getMinutes();
4755
var seconds = time.getSeconds().toString().padStart(2, '0');
48-
// var ampm = hours >= 12 ? 'PM' : 'AM';
49-
// hours = hours % 12;
50-
// hours = hours ? hours : 12;
5156
minutes = minutes < 10 ? '0' + minutes : minutes;
5257
5358
clock.innerHTML = hours + ':' + minutes + ':' + seconds;
@@ -57,5 +62,13 @@ export default {
5762
</script>
5863

5964
<style lang="scss">
65+
.bottom-navigation-left {
66+
span {
67+
margin-right: 20px;
6068
69+
&:last-child {
70+
margin-right: 0;
71+
}
72+
}
73+
}
6174
</style>

‎resources/src/renderer/components/navigations/TopNavigation.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
</div>
9090

9191
<div v-if="is_browser" class="pr-2 text-sm">Logout</div>
92+
9293
</div>
9394
</nav>
9495

‎resources/src/renderer/components/partial/DataGrid.vue

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<template>
2+
<div class="main-control" v-if="$slots.actions">
3+
<slot name="actions"></slot>
4+
</div>
5+
26
<div class="table-header">
37
<div
48
v-for="(col, i) in columnDefs"
@@ -13,9 +17,9 @@
1317
</div>
1418
</div>
1519

16-
<div class="table-body scrollbar">
20+
<div class="table-body scrollbar" :class="{'without-action': !$slots.actions}">
1721
<div
18-
class="table-row context"
22+
class="table-row"
1923
:data="JSON.stringify(build_data(columnDefs, items))"
2024
v-for="(items, index) in datasets"
2125
:key="'d-grid_' + index"
@@ -38,6 +42,7 @@
3842
</template>
3943

4044
<script>
45+
4146
export default {
4247
props: {
4348
columnDefs: {
@@ -61,6 +66,8 @@ export default {
6166
return output;
6267
},
6368
},
69+
70+
6471
};
6572
</script>
6673

@@ -114,6 +121,11 @@ $table-header-height: 40px;
114121
width: calc(100vw - $side-nav-width);
115122
overflow-y: scroll;
116123
height: calc($main-height - $table-header-height - $top-control-height);
124+
125+
&.without-action {
126+
height: calc($main-height - $table-header-height) !important;
127+
}
128+
117129
.table-row {
118130
display: flex;
119131
cursor: pointer;

‎resources/src/renderer/layouts/AppHome.vue

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -36,43 +36,10 @@
3636

3737
</template>
3838

39-
<style lang="scss">
40-
41-
42-
.context-menu {
43-
@apply bg-white rounded;
44-
@apply dark:bg-gray-900 dark:text-gray-400;
45-
width: 150px;
46-
z-index: 1000;
47-
position: absolute;
48-
left: -9999px;
49-
top: -9999px;
50-
51-
ul {
52-
li {
53-
@apply border-b text-xs p-2 hover:bg-gray-300 dark:border-gray-800 ;
54-
cursor: pointer;
55-
&:hover {
56-
@apply dark:bg-gray-700;
57-
}
58-
&:first-child {
59-
@apply rounded-t ;
60-
}
61-
&:last-child {
62-
@apply border-none rounded-b ;
63-
}
64-
span {
65-
@apply ml-2;
66-
}
67-
}
68-
}
69-
}
70-
</style>
7139
<script>
7240
import TopNavigation from '@/renderer/components/navigations/TopNavigation.vue'
7341
import SideNavigation from '@/renderer/components/navigations/SideNavigation.vue'
7442
import BottomNavigation from '@/renderer/components/navigations/BottomNavigation.vue'
75-
import {initContextMenu} from '@/utils/common.js';
7643
7744
export default {
7845
name: 'AppHome',
@@ -89,14 +56,15 @@ export default {
8956
},
9057
9158
mounted() {
92-
initContextMenu();
59+
// initContextMenu();
9360
9461
this.$store.commit('toggleDarkMode', localStorage.getItem("darkMode") == "true");
9562
},
63+
9664
updated() {
97-
initContextMenu();
65+
// initContextMenu();
9866
},
9967
10068
10169
}
102-
</script>
70+
</script>

‎resources/src/renderer/layouts/AuthLayout.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
<i class="fa fa-times" aria-hidden="true"></i>
1010
</div>
1111
</div>
12-
<slot/>
12+
13+
<slot></slot>
14+
1315
</div>
1416
</template>
1517

‎resources/src/renderer/views/employees/indexPage.vue

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,68 @@
11
<template>
22
<div>
3-
<div class="main-control">
4-
<router-link :to="{name: 'employee.form'}" class="btn btn-primary">
5-
<i class="fa fa-plus" aria-hidden="true"></i>
6-
New
7-
</router-link>
8-
<button>
9-
<i class="fas fa-file-import" aria-hidden="true"></i>
10-
Import
11-
</button>
12-
<button>
13-
<i class="fas fa-file-export" aria-hidden="true"></i>
14-
Export
15-
</button>
16-
<button>
17-
<i class="fas fa-sync" aria-hidden="true"></i>
18-
Mutation
19-
</button>
20-
</div>
21-
22-
<data-grid :columnDefs="columnDefs" :datasets="datasets" :withActionSpace="true"></data-grid>
3+
<data-grid
4+
:columnDefs="columnDefs"
5+
:datasets="datasets"
6+
:withActionSpace="true"
7+
>
8+
<template v-slot:actions>
9+
<router-link :to="{ name: 'employee.form' }" class="btn btn-primary">
10+
<i class="fa fa-plus" aria-hidden="true"></i>
11+
New
12+
</router-link>
13+
<button>
14+
<i class="fas fa-file-import" aria-hidden="true"></i>
15+
Import
16+
</button>
17+
<button>
18+
<i class="fas fa-file-export" aria-hidden="true"></i>
19+
Export
20+
</button>
21+
<button>
22+
<i class="fas fa-sync" aria-hidden="true"></i>
23+
Mutation
24+
</button>
25+
</template>
26+
</data-grid>
2327
</div>
2428
</template>
2529

2630
<script>
27-
import DataGrid from '@/renderer/components/partial/DataGrid.vue'
31+
import DataGrid from "@/renderer/components/partial/DataGrid.vue";
2832
export default {
2933
components: {
30-
DataGrid
34+
DataGrid,
3135
},
3236
data() {
3337
return {
3438
columnDefs: [
3539
{
36-
headerName: 'Nama Lengkap',
37-
field: 'name',
40+
headerName: "Nama Lengkap",
41+
field: "name",
3842
sortable: true,
3943
filter: true,
4044
},
4145
{
42-
headerName: 'Jabatan',
43-
field: 'position',
46+
headerName: "Jabatan",
47+
field: "position",
4448
width: 200,
4549
sortable: true,
4650
filter: true,
4751
},
4852
{
49-
headerName: 'Status',
50-
field: 'status',
53+
headerName: "Status",
54+
field: "status",
5155
width: 200,
5256
sortable: true,
5357
filter: true,
5458
},
5559
],
56-
datasets: [
57-
58-
]
59-
}
60-
},
61-
computed: {
62-
60+
datasets: [],
61+
};
6362
},
63+
computed: {},
6464
created() {
65-
this.$store.commit('set_title', 'Employee');
65+
this.$store.commit("set_title", "Employee");
6666
6767
this.add_data_set();
6868
},
@@ -73,24 +73,24 @@ export default {
7373
// return Array.from({ length: (from - start) }, (v, k) => k + start);
7474
},
7575
add_data_set() {
76-
this.range(1,20).forEach((i) => {
77-
this.datasets.push( [
78-
{
79-
data: "Emp " + i,
80-
},
81-
{
82-
data: "IT Development",
83-
},
84-
{
85-
data: "Aktif",
86-
},
87-
])
88-
})
89-
}
90-
}
91-
}
76+
this.range(1, 20).forEach((i) => {
77+
this.datasets.push([
78+
{
79+
data: "Emp " + i,
80+
},
81+
{
82+
data: "IT Development",
83+
},
84+
{
85+
data: "Aktif",
86+
},
87+
]);
88+
});
89+
},
90+
},
91+
};
9292
</script>
9393

9494
<style lang="scss">
95-
@import "./style.scss";
95+
@import "./style.scss";
9696
</style>

0 commit comments

Comments
 (0)