@appscode/design-system 1.1.0-beta.65 → 1.1.0-beta.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base/utilities/_layouts.scss +0 -138
- package/package.json +1 -1
- package/vue-components/v3/navbar/Navbar.vue +0 -159
- package/vue-components/v3/navbar/User.vue +28 -10
- package/vue-components/v3/sidebar/Sidebar.vue +1 -1
- package/vue-components/v3/sidebar/SidebarBody.vue +9 -2
- package/vue-components/v3/sidebar/SidebarHeader.vue +6 -2
- package/vue-components/text.vue +0 -1
|
@@ -8,141 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
&.is-fullwidth {
|
|
10
10
|
grid-template-columns: auto !important;
|
|
11
|
-
|
|
12
|
-
// &.has-info-content {
|
|
13
|
-
// grid-template-columns: 250px calc(100% - 540px) 250px;
|
|
14
|
-
// }
|
|
15
11
|
}
|
|
16
12
|
|
|
17
|
-
// &.has-info-content {
|
|
18
|
-
// grid-template-columns: 250px calc(100% - 540px) 250px;
|
|
19
|
-
|
|
20
|
-
// .ac-system-content {
|
|
21
|
-
// &.pr-15 {
|
|
22
|
-
// padding-right: 0 !important;
|
|
23
|
-
// }
|
|
24
|
-
// }
|
|
25
|
-
// }
|
|
26
|
-
|
|
27
|
-
// &.in-ui-builder {
|
|
28
|
-
// grid-template-columns: calc(100% - 250px) 250px !important;
|
|
29
|
-
// }
|
|
30
|
-
|
|
31
|
-
// &.has-ui-builder {
|
|
32
|
-
// grid-template-columns: 70px calc(100% - 70px);
|
|
33
|
-
// grid-gap: 0;
|
|
34
|
-
|
|
35
|
-
// .inner-header {
|
|
36
|
-
// position: sticky;
|
|
37
|
-
// top: 100px;
|
|
38
|
-
// background-color: $white-100;
|
|
39
|
-
// z-index: 997;
|
|
40
|
-
// }
|
|
41
|
-
|
|
42
|
-
// .ac-system-content {
|
|
43
|
-
// &.pr-15 {
|
|
44
|
-
// padding-right: 0 !important;
|
|
45
|
-
// }
|
|
46
|
-
|
|
47
|
-
// .ac-terminal {
|
|
48
|
-
// width: calc(100% - 290px);
|
|
49
|
-
// left: 289px;
|
|
50
|
-
// }
|
|
51
|
-
// }
|
|
52
|
-
|
|
53
|
-
// // .ac-system-left-sidebar.is-expanded {
|
|
54
|
-
// // z-index: 998;
|
|
55
|
-
// // }
|
|
56
|
-
|
|
57
|
-
// // &.expanded-sidebar {
|
|
58
|
-
// // grid-gap: 0px;
|
|
59
|
-
// // z-index: 9;
|
|
60
|
-
// // grid-template-columns: 250px calc(100% - 250px);
|
|
61
|
-
|
|
62
|
-
// // .is-fullwidth {
|
|
63
|
-
// // .ac-system-content {
|
|
64
|
-
// // padding-left: 0;
|
|
65
|
-
// // }
|
|
66
|
-
// // }
|
|
67
|
-
// // }
|
|
68
|
-
|
|
69
|
-
// // .is-fullwidth {
|
|
70
|
-
// // grid-template-columns: auto;
|
|
71
|
-
|
|
72
|
-
// // &.has-info-content {
|
|
73
|
-
// // grid-template-columns: calc(100% - 260px) 240px;
|
|
74
|
-
// // }
|
|
75
|
-
|
|
76
|
-
// // .ac-system-content {
|
|
77
|
-
// // padding-left: 20px;
|
|
78
|
-
// // }
|
|
79
|
-
// // }
|
|
80
|
-
|
|
81
|
-
// // .ac-system-body {
|
|
82
|
-
// // padding-top: 0;
|
|
83
|
-
// // grid-template-columns: 220px calc(100% - 440px) 220px;
|
|
84
|
-
|
|
85
|
-
// // .ac-system-left-sidebar {
|
|
86
|
-
// // // border-right: none !important;
|
|
87
|
-
// // // height: calc(100vh - 60px);
|
|
88
|
-
|
|
89
|
-
// // .ac-left-sidebar-wrapper {
|
|
90
|
-
// // position: fixed;
|
|
91
|
-
// // top: 140px;
|
|
92
|
-
// // width: 219px;
|
|
93
|
-
// // border-right: 1px solid $primary-90;
|
|
94
|
-
// // height: 100%;
|
|
95
|
-
|
|
96
|
-
// // ul.menu-list-wrapper {
|
|
97
|
-
// // padding-top: 10px;
|
|
98
|
-
// // }
|
|
99
|
-
// // }
|
|
100
|
-
// // }
|
|
101
|
-
// // }
|
|
102
|
-
// }
|
|
103
|
-
|
|
104
|
-
// &.has-deploy-flow {
|
|
105
|
-
// grid-template-columns: 65% 35%;
|
|
106
|
-
// }
|
|
107
|
-
|
|
108
|
-
// .ac-system-left-sidebar {
|
|
109
|
-
// // border-right: 1px solid $primary-90;
|
|
110
|
-
// // box-shadow: none;
|
|
111
|
-
|
|
112
|
-
// &.is-expanded {
|
|
113
|
-
// z-index: 998;
|
|
114
|
-
|
|
115
|
-
// .ac-product-logo {
|
|
116
|
-
// width: 250px !important;
|
|
117
|
-
// justify-content: flex-start !important;
|
|
118
|
-
// }
|
|
119
|
-
|
|
120
|
-
// .menu-list {
|
|
121
|
-
// box-shadow: 2px -1px 8px rgba(26, 80, 151, 0.16);
|
|
122
|
-
|
|
123
|
-
// &.ac-menu-list {
|
|
124
|
-
// width: 250px !important;
|
|
125
|
-
// background-color: $white-100;
|
|
126
|
-
|
|
127
|
-
// li {
|
|
128
|
-
// a {
|
|
129
|
-
// strong {
|
|
130
|
-
// display: block !important;
|
|
131
|
-
// }
|
|
132
|
-
// }
|
|
133
|
-
|
|
134
|
-
// ul {
|
|
135
|
-
// li {
|
|
136
|
-
// a {
|
|
137
|
-
// padding-left: 50px !important;
|
|
138
|
-
// }
|
|
139
|
-
// }
|
|
140
|
-
// }
|
|
141
|
-
// }
|
|
142
|
-
// }
|
|
143
|
-
// }
|
|
144
|
-
// }
|
|
145
|
-
// }
|
|
146
13
|
}
|
|
147
14
|
// sidebar collapsed
|
|
148
15
|
.sidebar-collapsed {
|
|
@@ -150,8 +17,3 @@
|
|
|
150
17
|
grid-template-columns: 60px calc(100% - 60px);
|
|
151
18
|
}
|
|
152
19
|
}
|
|
153
|
-
// .ac-system-body {
|
|
154
|
-
// &.is-preview-step {
|
|
155
|
-
// grid-template-columns: calc(100% - 250px) 250px !important;
|
|
156
|
-
// }
|
|
157
|
-
// }
|
package/package.json
CHANGED
|
@@ -98,75 +98,9 @@ withDefaults(defineProps<Props>(), {
|
|
|
98
98
|
align-items: center;
|
|
99
99
|
justify-content: flex-end;
|
|
100
100
|
|
|
101
|
-
// .ac-organizations {
|
|
102
|
-
// margin: 0;
|
|
103
|
-
|
|
104
|
-
// .ac-nav-button {
|
|
105
|
-
// border: none;
|
|
106
|
-
// margin: 0;
|
|
107
|
-
// padding: 0;
|
|
108
|
-
// margin-right: 15px;
|
|
109
|
-
// width: 26px;
|
|
110
|
-
// height: 26px;
|
|
111
|
-
// border-radius: 50%;
|
|
112
|
-
// overflow: hidden;
|
|
113
|
-
// border: 2px solid $white-100;
|
|
114
|
-
|
|
115
|
-
// &:last-child {
|
|
116
|
-
// margin-right: 0;
|
|
117
|
-
// position: relative;
|
|
118
|
-
// z-index: 1;
|
|
119
|
-
|
|
120
|
-
// .more-items {
|
|
121
|
-
// text-align: center;
|
|
122
|
-
// color: $white-100;
|
|
123
|
-
// z-index: 99;
|
|
124
|
-
// position: absolute;
|
|
125
|
-
// font-size: 11px;
|
|
126
|
-
// font-weight: 500;
|
|
127
|
-
// }
|
|
128
|
-
|
|
129
|
-
// &::after {
|
|
130
|
-
// position: absolute;
|
|
131
|
-
// content: "";
|
|
132
|
-
// left: 0;
|
|
133
|
-
// top: 0;
|
|
134
|
-
// width: 100%;
|
|
135
|
-
// height: 100%;
|
|
136
|
-
// background-color: $primary-5;
|
|
137
|
-
// opacity: 0.2;
|
|
138
|
-
// z-index: 1;
|
|
139
|
-
// }
|
|
140
|
-
// }
|
|
141
|
-
// }
|
|
142
|
-
// }
|
|
143
|
-
|
|
144
101
|
.ac-menu-item {
|
|
145
102
|
position: relative;
|
|
146
103
|
z-index: 1;
|
|
147
|
-
|
|
148
|
-
// width: 30px;
|
|
149
|
-
// height: 30px;
|
|
150
|
-
// border-radius: 50%;
|
|
151
|
-
// .ac-nav-button:not(.ac-profile-button) {
|
|
152
|
-
// &:after {
|
|
153
|
-
// content: "";
|
|
154
|
-
// border-radius: 50%;
|
|
155
|
-
// width: 30px;
|
|
156
|
-
// height: 30px;
|
|
157
|
-
// position: absolute;
|
|
158
|
-
// z-index: -1;
|
|
159
|
-
// left: 50%;
|
|
160
|
-
// transition: 0.3s ease-in-out;
|
|
161
|
-
// margin-left: -15px;
|
|
162
|
-
// }
|
|
163
|
-
|
|
164
|
-
// &:hover {
|
|
165
|
-
// &:after {
|
|
166
|
-
// background-color: rgba(255, 255, 255, 0.2) !important;
|
|
167
|
-
// }
|
|
168
|
-
// }
|
|
169
|
-
// }
|
|
170
104
|
}
|
|
171
105
|
}
|
|
172
106
|
}
|
|
@@ -179,95 +113,12 @@ withDefaults(defineProps<Props>(), {
|
|
|
179
113
|
}
|
|
180
114
|
}
|
|
181
115
|
}
|
|
182
|
-
// start dark theme
|
|
183
|
-
.is-dark-theme {
|
|
184
|
-
body {
|
|
185
|
-
.ac-navbar-area {
|
|
186
|
-
background-color: var(--dark-bg-light);
|
|
187
|
-
--ac-white: #ffffff;
|
|
188
|
-
--ac-white-lighter: #f1f1f1;
|
|
189
|
-
|
|
190
|
-
.ac-navbar {
|
|
191
|
-
.search-item {
|
|
192
|
-
background-color: rgba(0, 0, 0, 0.2);
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.ac-navbar-menu {
|
|
196
|
-
.ac-menu-item {
|
|
197
|
-
.quick-access {
|
|
198
|
-
--ac-white: var(--dark-bg-light);
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.ac-menu-content {
|
|
202
|
-
// &.theme-choice {
|
|
203
|
-
// background-color: var(--dark-bg-light);
|
|
204
|
-
// }
|
|
205
|
-
|
|
206
|
-
background-color: var(--dark-bg-light);
|
|
207
|
-
|
|
208
|
-
ul {
|
|
209
|
-
background-color: var(--dark-bg-light);
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
&::after {
|
|
213
|
-
--ac-white: var(--dark-bg-light);
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
.user-profile-wrapper {
|
|
217
|
-
--ac-white: var(--dark-bg-light);
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
// end dark theme code
|
|
228
116
|
|
|
229
117
|
/****************************************
|
|
230
118
|
Responsive Classes
|
|
231
119
|
*****************************************/
|
|
232
120
|
// Extra small devices (portrait phones, less than 576px)
|
|
233
121
|
@media (max-width: 575.98px) {
|
|
234
|
-
// .ac-navbar-area {
|
|
235
|
-
// .ac-navbar {
|
|
236
|
-
// grid-template-columns: 60px 30px auto;
|
|
237
|
-
|
|
238
|
-
// .ac-navbar-brand {
|
|
239
|
-
// max-width: 40px;
|
|
240
|
-
|
|
241
|
-
// a {
|
|
242
|
-
// display: block;
|
|
243
|
-
// }
|
|
244
|
-
// }
|
|
245
|
-
|
|
246
|
-
// .search-item {
|
|
247
|
-
// display: inline-block;
|
|
248
|
-
|
|
249
|
-
// input {
|
|
250
|
-
// display: none;
|
|
251
|
-
// }
|
|
252
|
-
// }
|
|
253
|
-
|
|
254
|
-
// .ac-navbar-menu {
|
|
255
|
-
// .ac-menu-item {
|
|
256
|
-
// .ac-nav-button {
|
|
257
|
-
// margin-left: 0px;
|
|
258
|
-
|
|
259
|
-
// &.ac-profile-button {
|
|
260
|
-
// margin-left: 0px;
|
|
261
|
-
|
|
262
|
-
// strong {
|
|
263
|
-
// display: none;
|
|
264
|
-
// }
|
|
265
|
-
// }
|
|
266
|
-
// }
|
|
267
|
-
// }
|
|
268
|
-
// }
|
|
269
|
-
// }
|
|
270
|
-
// }
|
|
271
122
|
}
|
|
272
123
|
|
|
273
124
|
// Small devices (landscape phones, 576px and up)
|
|
@@ -276,20 +127,10 @@ Responsive Classes
|
|
|
276
127
|
|
|
277
128
|
// Medium devices (tablets, 768px and up)
|
|
278
129
|
@media (min-width: 768px) and (max-width: 991.98px) {
|
|
279
|
-
// .ac-navbar-area {
|
|
280
|
-
// .ac-navbar {
|
|
281
|
-
// grid-template-columns: 250px auto auto;
|
|
282
|
-
// }
|
|
283
|
-
// }
|
|
284
130
|
}
|
|
285
131
|
|
|
286
132
|
// Large devices (desktops, 992px and up)
|
|
287
133
|
@media (min-width: 992px) and (max-width: 1199.98px) {
|
|
288
|
-
// .ac-navbar-area {
|
|
289
|
-
// .ac-navbar {
|
|
290
|
-
// grid-template-columns: 270px auto auto;
|
|
291
|
-
// }
|
|
292
|
-
// }
|
|
293
134
|
}
|
|
294
135
|
|
|
295
136
|
// Extra large devices (large desktops, 1200px and up)
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { defineAsyncComponent, ref, watch, computed, nextTick } from "vue";
|
|
3
|
+
import HeroiconsCog6Tooth from "~icons/heroicons/cog-6-tooth";
|
|
4
|
+
import HeroiconsWrenchScrewdriver from "~icons/heroicons/wrench-screwdriver";
|
|
5
|
+
import HeroiconsUserGroup from "~icons/heroicons/user-group";
|
|
6
|
+
import HeroiconsChartPie from "~icons/heroicons/chart-pie";
|
|
7
|
+
import HeroiconsPower from "~icons/heroicons/power";
|
|
8
|
+
import HeroiconsCheck from "~icons/heroicons/check";
|
|
9
|
+
|
|
3
10
|
import type { User } from "../../types/user";
|
|
4
11
|
|
|
5
12
|
interface FormatedOrgs extends User {
|
|
@@ -129,17 +136,19 @@ watch(dropDownStatus, (n) => {
|
|
|
129
136
|
<a :href="`mailto:${user.email}`"> {{ user.email }}</a>
|
|
130
137
|
</div>
|
|
131
138
|
</div>
|
|
132
|
-
<transition-group name="list" tag="ul" class="list-items">
|
|
139
|
+
<transition-group name="list" tag="ul" class="list-items py-2">
|
|
133
140
|
<li key="settings">
|
|
134
141
|
<a
|
|
135
142
|
data-testid="user-settings-link"
|
|
136
143
|
:href="`${serverDomain}/user/settings/`"
|
|
137
|
-
|
|
144
|
+
><span class="icon"><HeroiconsCog6Tooth /></span
|
|
145
|
+
><span>Settings</span></a
|
|
138
146
|
>
|
|
139
147
|
</li>
|
|
140
148
|
<li v-if="user.is_admin" key="site-admin">
|
|
141
149
|
<a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
|
|
142
|
-
|
|
150
|
+
><span class="icon"><HeroiconsWrenchScrewdriver /></span
|
|
151
|
+
><span>Site Administration</span></a
|
|
143
152
|
>
|
|
144
153
|
</li>
|
|
145
154
|
<li
|
|
@@ -151,7 +160,10 @@ watch(dropDownStatus, (n) => {
|
|
|
151
160
|
class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
|
|
152
161
|
@click="toggleList()"
|
|
153
162
|
>
|
|
154
|
-
<
|
|
163
|
+
<div class="is-flex gap-8">
|
|
164
|
+
<span class="icon"><HeroiconsUserGroup /></span
|
|
165
|
+
><span>Switch Account</span>
|
|
166
|
+
</div>
|
|
155
167
|
<span
|
|
156
168
|
><i
|
|
157
169
|
:class="`fa fa-angle-${
|
|
@@ -203,7 +215,7 @@ watch(dropDownStatus, (n) => {
|
|
|
203
215
|
v-if="idx === 0"
|
|
204
216
|
class="material-icons font-size-18 ml-10 is-pulled-right"
|
|
205
217
|
>
|
|
206
|
-
|
|
218
|
+
<HeroiconsCheck />
|
|
207
219
|
</span>
|
|
208
220
|
</div>
|
|
209
221
|
</a>
|
|
@@ -216,14 +228,16 @@ watch(dropDownStatus, (n) => {
|
|
|
216
228
|
to="/dashboard"
|
|
217
229
|
data-testid="user-dashboard-link"
|
|
218
230
|
>
|
|
219
|
-
|
|
231
|
+
<span class="icon"><HeroiconsChartPie /></span>
|
|
232
|
+
<span> Dashboard</span>
|
|
220
233
|
</router-link>
|
|
221
234
|
<a
|
|
222
235
|
v-else
|
|
223
236
|
:href="`${serverDomain}/dashboard`"
|
|
224
237
|
data-testid="user-dashboard-link"
|
|
225
238
|
>
|
|
226
|
-
|
|
239
|
+
<span class="icon"><HeroiconsChartPie /></span>
|
|
240
|
+
<span> Dashboard</span>
|
|
227
241
|
</a>
|
|
228
242
|
</li>
|
|
229
243
|
<li key="signout" @click="$emit('on-logout')">
|
|
@@ -231,12 +245,13 @@ watch(dropDownStatus, (n) => {
|
|
|
231
245
|
data-testid="user-logout-link"
|
|
232
246
|
:href="`${accountsDomain}/user/logout`"
|
|
233
247
|
>
|
|
234
|
-
|
|
248
|
+
<span class="icon"><HeroiconsPower /></span>
|
|
249
|
+
<span>Sign out</span>
|
|
235
250
|
</a>
|
|
236
251
|
</li>
|
|
237
|
-
<li key="theme" v-if="showThemeMode">
|
|
252
|
+
<!-- <li key="theme" v-if="showThemeMode">
|
|
238
253
|
<theme-mode @set:theme="setTheme" />
|
|
239
|
-
</li>
|
|
254
|
+
</li> -->
|
|
240
255
|
</transition-group>
|
|
241
256
|
</div>
|
|
242
257
|
</navbar-item-content>
|
|
@@ -352,6 +367,9 @@ watch(dropDownStatus, (n) => {
|
|
|
352
367
|
display: block;
|
|
353
368
|
color: $primary-10;
|
|
354
369
|
transition: 0.3s;
|
|
370
|
+
display: flex;
|
|
371
|
+
align-items: center;
|
|
372
|
+
gap: 8px;
|
|
355
373
|
|
|
356
374
|
&:hover {
|
|
357
375
|
background-color: $primary-97;
|
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
<script setup lang="ts"
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
defineEmits(["hover"]);
|
|
3
|
+
</script>
|
|
2
4
|
|
|
3
5
|
<template>
|
|
4
|
-
<ul
|
|
6
|
+
<ul
|
|
7
|
+
class="menu-list ac-menu-list"
|
|
8
|
+
data-testid="cluster-sidebar-menu-list"
|
|
9
|
+
@mouseenter="$emit('hover', true)"
|
|
10
|
+
@mouseleave="$emit('hover', false)"
|
|
11
|
+
>
|
|
5
12
|
<slot />
|
|
6
13
|
</ul>
|
|
7
14
|
</template>
|
|
@@ -18,7 +18,11 @@ withDefaults(defineProps<Props>(), {
|
|
|
18
18
|
<template>
|
|
19
19
|
<div class="sidebar-header">
|
|
20
20
|
<!-- hamburger icon -->
|
|
21
|
-
<div
|
|
21
|
+
<div
|
|
22
|
+
class="icon hamburger-icon mr-16"
|
|
23
|
+
data-testid="sidebar-menu-button"
|
|
24
|
+
@click="$emit('toggleSidebar')"
|
|
25
|
+
>
|
|
22
26
|
<svg
|
|
23
27
|
width="18"
|
|
24
28
|
height="18"
|
|
@@ -60,7 +64,7 @@ withDefaults(defineProps<Props>(), {
|
|
|
60
64
|
</template>
|
|
61
65
|
|
|
62
66
|
<style lang="scss" scoped>
|
|
63
|
-
.sidebar-collapsed .ac-left-sidebar-wrapper {
|
|
67
|
+
.sidebar-collapsed:not(.is-hoverable) .ac-left-sidebar-wrapper {
|
|
64
68
|
.brand-logo {
|
|
65
69
|
display: none !important;
|
|
66
70
|
}
|
package/vue-components/text.vue
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts"></script>
|