@appscode/design-system 2.0.41-alpha.1 → 2.0.41-alpha.10
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/package.json +1 -1
- package/vue-components/styles/base/utilities/_colors.scss +4 -0
- package/vue-components/styles/base/utilities/_global.scss +4 -2
- package/vue-components/styles/base/utilities/_typography.scss +18 -1
- package/vue-components/styles/components/_button.scss +25 -22
- package/vue-components/styles/components/_table.scss +1 -1
- package/vue-components/styles/components/_terminal.scss +1 -1
- package/vue-components/styles/components/cards/_cluster.scss +5 -4
- package/vue-components/styles/components/cards/_monitoring.scss +1 -0
- package/vue-components/styles/components/cards/_vendor.scss +1 -1
- package/vue-components/styles/components/form-fields/_input.scss +5 -0
- package/vue-components/styles/components/header/_header.scss +1 -1
- package/vue-components/styles/theme/_appscode.scss +9 -24
- package/vue-components/styles/theme/_dark.scss +48 -0
- package/vue-components/v3/navbar/User.vue +71 -128
- package/vue-components/v3/notification/AlertBox.vue +1 -1
- package/vue-components/v3/sidebar/Steps.vue +1 -1
- package/vue-components/v3/table/InfoTable.vue +1 -1
package/package.json
CHANGED
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
--primary-saturation: 77%;
|
|
4
4
|
--primary-light: 40%;
|
|
5
5
|
}
|
|
6
|
+
:root {
|
|
7
|
+
--theme-mode: light;
|
|
8
|
+
}
|
|
6
9
|
|
|
7
10
|
// white and black
|
|
8
11
|
$white-100: hsl(0, 0%, 100%);
|
|
@@ -12,6 +15,7 @@ $black-100: hsl(0, 0%, 0%);
|
|
|
12
15
|
$primary-hue: var(--primary-hue);
|
|
13
16
|
$primary-saturation: var(--primary-saturation);
|
|
14
17
|
$primary-light: var(--primary-light);
|
|
18
|
+
$theme-mode: var(--theme-mode);
|
|
15
19
|
|
|
16
20
|
$primary-5: hsl($primary-hue, $primary-saturation, 5%);
|
|
17
21
|
$primary-10: hsl($primary-hue, $primary-saturation, 10%);
|
|
@@ -154,7 +154,7 @@ hr {
|
|
|
154
154
|
.is-dark-theme {
|
|
155
155
|
.toasted-container {
|
|
156
156
|
i.fa {
|
|
157
|
-
color:
|
|
157
|
+
color: $white-100 !important;
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
160
|
}
|
|
@@ -663,7 +663,7 @@ body:has(.has-info-content) {
|
|
|
663
663
|
margin-left: auto;
|
|
664
664
|
position: fixed;
|
|
665
665
|
right: 0;
|
|
666
|
-
background:
|
|
666
|
+
background: $white-100;
|
|
667
667
|
top: 0;
|
|
668
668
|
z-index: 99999;
|
|
669
669
|
box-shadow: -3px 2px 10px 3px rgba(0, 0, 0, 0.1);
|
|
@@ -675,6 +675,8 @@ body:has(.has-info-content) {
|
|
|
675
675
|
|
|
676
676
|
.tag:not(body) {
|
|
677
677
|
&.is-primary {
|
|
678
|
+
background-color: $ac-primary;
|
|
679
|
+
color: $white-100;
|
|
678
680
|
&.is-light {
|
|
679
681
|
color: $ac-primary;
|
|
680
682
|
background-color: $primary-95;
|
|
@@ -6,7 +6,7 @@ $font-paragraph: "Roboto", sans-serif;
|
|
|
6
6
|
|
|
7
7
|
html,
|
|
8
8
|
body {
|
|
9
|
-
background-color:
|
|
9
|
+
background-color: $white-100;
|
|
10
10
|
font-family: $font-paragraph;
|
|
11
11
|
font-weight: 400;
|
|
12
12
|
font-size: 13px;
|
|
@@ -87,6 +87,20 @@ h6 {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
+
.content {
|
|
91
|
+
h1,
|
|
92
|
+
h2,
|
|
93
|
+
h3,
|
|
94
|
+
h4,
|
|
95
|
+
h5,
|
|
96
|
+
h6 {
|
|
97
|
+
color: $color-heading;
|
|
98
|
+
}
|
|
99
|
+
p {
|
|
100
|
+
color: $color-text;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
90
104
|
a:not(.ac-button) {
|
|
91
105
|
font-family: $font-paragraph;
|
|
92
106
|
color: $ac-primary;
|
|
@@ -138,3 +152,6 @@ strong {
|
|
|
138
152
|
.material-icons {
|
|
139
153
|
font-size: 1em;
|
|
140
154
|
}
|
|
155
|
+
.has-text-primary {
|
|
156
|
+
color: $ac-primary;
|
|
157
|
+
}
|
|
@@ -1,38 +1,41 @@
|
|
|
1
1
|
.button {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
background-color: $primary-30;
|
|
6
|
-
}
|
|
7
|
-
&.is-outlined {
|
|
8
|
-
border-color: $ac-primary;
|
|
9
|
-
// background-color: $ac-primary;
|
|
10
|
-
color: $ac-primary;
|
|
11
|
-
&:hover {
|
|
12
|
-
border-color: $primary-30;
|
|
13
|
-
background-color: $ac-primary;
|
|
14
|
-
}
|
|
15
|
-
&.is-light {
|
|
16
|
-
background-color: $primary-95;
|
|
17
|
-
&:hover {
|
|
18
|
-
background-color: $ac-primary;
|
|
19
|
-
color: $white-100;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}
|
|
2
|
+
color: $color-text;
|
|
3
|
+
background-color: $white-100;
|
|
4
|
+
|
|
24
5
|
&.ac-button {
|
|
25
6
|
padding: 8px 16px;
|
|
26
7
|
font-weight: 500;
|
|
27
8
|
line-height: 1;
|
|
28
9
|
|
|
29
10
|
&.is-primary {
|
|
11
|
+
background-color: $ac-primary;
|
|
12
|
+
&:hover {
|
|
13
|
+
background-color: $primary-30;
|
|
14
|
+
}
|
|
30
15
|
&.is-light {
|
|
31
16
|
color: $ac-primary;
|
|
17
|
+
background-color: $primary-95;
|
|
18
|
+
&:hover {
|
|
19
|
+
background-color: $primary-90;
|
|
20
|
+
}
|
|
32
21
|
&:focus:not(:hover) {
|
|
33
22
|
color: inherit;
|
|
34
23
|
}
|
|
35
24
|
}
|
|
25
|
+
&:disabled:not(.is-light) {
|
|
26
|
+
background-color: $ac-primary;
|
|
27
|
+
border-color: $ac-primary;
|
|
28
|
+
}
|
|
29
|
+
&.is-outlined {
|
|
30
|
+
border-color: $ac-primary;
|
|
31
|
+
color: $ac-primary;
|
|
32
|
+
background-color: transparent;
|
|
33
|
+
&:hover {
|
|
34
|
+
border-color: $primary-30;
|
|
35
|
+
background-color: $ac-primary;
|
|
36
|
+
color: $white-100;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
36
39
|
}
|
|
37
40
|
&.is-warning {
|
|
38
41
|
&.is-light {
|
|
@@ -390,7 +390,7 @@
|
|
|
390
390
|
.table-inner-shadow {
|
|
391
391
|
border-radius: 0px;
|
|
392
392
|
background: $color-border;
|
|
393
|
-
box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px
|
|
393
|
+
box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px $white-100;
|
|
394
394
|
}
|
|
395
395
|
|
|
396
396
|
@keyframes expand {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
// cluster-card
|
|
2
|
+
|
|
2
3
|
.card-details.cluster {
|
|
3
4
|
border: 1px solid $color-border;
|
|
4
5
|
padding: 24px 20px;
|
|
@@ -42,10 +43,10 @@
|
|
|
42
43
|
h4 {
|
|
43
44
|
font-size: 18px;
|
|
44
45
|
line-height: 130%;
|
|
45
|
-
color:
|
|
46
|
+
color: $color-heading;
|
|
46
47
|
}
|
|
47
48
|
.icon {
|
|
48
|
-
color:
|
|
49
|
+
color: $color-text;
|
|
49
50
|
cursor: pointer;
|
|
50
51
|
position: relative;
|
|
51
52
|
z-index: 1;
|
|
@@ -84,11 +85,11 @@
|
|
|
84
85
|
|
|
85
86
|
span {
|
|
86
87
|
font-size: 11px;
|
|
87
|
-
color:
|
|
88
|
+
color: $color-label;
|
|
88
89
|
display: block;
|
|
89
90
|
}
|
|
90
91
|
strong {
|
|
91
|
-
color:
|
|
92
|
+
color: $color-heading;
|
|
92
93
|
font-size: 13px;
|
|
93
94
|
font-weight: 400;
|
|
94
95
|
}
|
|
@@ -516,6 +516,11 @@
|
|
|
516
516
|
border-color: $primary-30 !important;
|
|
517
517
|
}
|
|
518
518
|
|
|
519
|
+
.switch[type="checkbox"].is-primary:checked + label::before,
|
|
520
|
+
.switch[type="checkbox"].is-primary:checked + label:before {
|
|
521
|
+
background-color: $ac-primary;
|
|
522
|
+
}
|
|
523
|
+
|
|
519
524
|
.is-checkradio[type="checkbox"] + label::after,
|
|
520
525
|
.is-checkradio[type="checkbox"] + label:after {
|
|
521
526
|
border-width: 0.2rem;
|
|
@@ -1,28 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
$primary:
|
|
7
|
-
$primary-
|
|
8
|
-
$primary-
|
|
9
|
-
$primary-50: hsl($primary-hue, $primary-saturation, 50%);
|
|
10
|
-
$primary-60: hsl($primary-hue, $primary-saturation, 60%);
|
|
11
|
-
$primary-70: hsl($primary-hue, $primary-saturation, 70%);
|
|
12
|
-
$primary-80: hsl($primary-hue, $primary-saturation, 80%);
|
|
13
|
-
$primary-90: hsl($primary-hue, $primary-saturation, 90%);
|
|
14
|
-
$primary-93: hsl($primary-hue, $primary-saturation, 93%);
|
|
15
|
-
$primary-95: hsl($primary-hue, $primary-saturation, 95%);
|
|
16
|
-
$primary-97: hsl($primary-hue, $primary-saturation, 97%);
|
|
1
|
+
:root {
|
|
2
|
+
--primary-hue: 149;
|
|
3
|
+
--primary-saturation: 100%;
|
|
4
|
+
--primary-light: 30%;
|
|
5
|
+
}
|
|
6
|
+
$primary-hue: var(--primary-hue);
|
|
7
|
+
$primary-saturation: var(--primary-saturation);
|
|
8
|
+
$primary-light: var(--primary-light);
|
|
17
9
|
|
|
18
|
-
$primary
|
|
19
|
-
$primary-dark-grey: hsl($primary-hue, 30%, 10%);
|
|
10
|
+
$ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
|
|
20
11
|
|
|
21
|
-
$color-text: hsl($primary-hue, 10%, 35%);
|
|
22
|
-
$color-heading: hsl($primary-hue, 10%, 10%);
|
|
23
|
-
$color-label: hsl($primary-hue, 20%, 50%);
|
|
24
|
-
$color-link: hsl($primary-hue, 40%, 20%);
|
|
25
|
-
$color-border-light: hsl($primary-hue, 30%, 95%);
|
|
26
12
|
$color-border: hsl($primary-hue, 30%, 90%);
|
|
27
|
-
$color-border-dark: hsl($primary-hue, 10%, 80%);
|
|
28
13
|
$color-sidebar: hsl($primary-hue, $primary-saturation, 5%);
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// :root {
|
|
2
|
+
// --primary-hue: 208;
|
|
3
|
+
// --primary-saturation: 77%;
|
|
4
|
+
// --primary-light: 40%;
|
|
5
|
+
// }
|
|
6
|
+
// :root {
|
|
7
|
+
// --theme-mode: dark;
|
|
8
|
+
// }
|
|
9
|
+
// // primary color guides
|
|
10
|
+
// $primary-hue: var(--primary-hue);
|
|
11
|
+
// $primary-saturation: var(--primary-saturation);
|
|
12
|
+
// $primary-light: var(--primary-light);
|
|
13
|
+
// $theme-mode: var(--theme-mode);
|
|
14
|
+
|
|
15
|
+
// $primary-5: hsl($primary-hue, $primary-saturation, 95%);
|
|
16
|
+
// $primary-10: hsl($primary-hue, $primary-saturation, 90%);
|
|
17
|
+
// $primary-20: hsl($primary-hue, $primary-saturation, 80%);
|
|
18
|
+
// $primary-30: hsl($primary-hue, $primary-saturation, 70%);
|
|
19
|
+
// $primary-40: hsl($primary-hue, $primary-saturation, 60%);
|
|
20
|
+
// $ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
|
|
21
|
+
// $primary-50: hsl($primary-hue, $primary-saturation, 50%);
|
|
22
|
+
// $primary-60: hsl($primary-hue, $primary-saturation, 40%);
|
|
23
|
+
// $primary-70: hsl($primary-hue, $primary-saturation, 30%);
|
|
24
|
+
// $primary-80: hsl($primary-hue, $primary-saturation, 20%);
|
|
25
|
+
// $primary-90: hsl($primary-hue, $primary-saturation, 10%);
|
|
26
|
+
// $primary-93: hsl($primary-hue, $primary-saturation, 7%);
|
|
27
|
+
// $primary-95: hsl($primary-hue, $primary-saturation, 5%);
|
|
28
|
+
// $primary-97: hsl($primary-hue, $primary-saturation, 3%);
|
|
29
|
+
|
|
30
|
+
// $primary-light-grey: hsl($primary-hue, 30%, 20%);
|
|
31
|
+
// $primary-dark-grey: hsl($primary-hue, 30%, 90%);
|
|
32
|
+
|
|
33
|
+
// // white and black
|
|
34
|
+
// $white-100: hsl($primary-hue, 50%, 5%);
|
|
35
|
+
// $black-100: hsl(0, 0%, 90%);
|
|
36
|
+
|
|
37
|
+
// $color-text: hsl($primary-hue, 10%, 80%);
|
|
38
|
+
// $color-heading: hsl($primary-hue, 10%, 90%);
|
|
39
|
+
// $color-label: hsl($primary-hue, 20%, 50%);
|
|
40
|
+
// $color-link: hsl($primary-hue, 40%, 80%);
|
|
41
|
+
// $color-border-light: hsl($primary-hue, 30%, 20%);
|
|
42
|
+
// $color-border: hsl($primary-hue, 30%, 20%);
|
|
43
|
+
// $color-border-dark: hsl($primary-hue, 10%, 30%);
|
|
44
|
+
// $color-sidebar: hsl($primary-hue, $primary-saturation, 10%);
|
|
45
|
+
|
|
46
|
+
// .ac-left-sidebar .menu-list.ac-menu-list li a {
|
|
47
|
+
// color: $color-text;
|
|
48
|
+
// }
|
|
@@ -85,7 +85,8 @@ const setTheme = (val: string) => {
|
|
|
85
85
|
emit("set:theme", val);
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
-
const
|
|
88
|
+
const locationOrigin = window.location.origin;
|
|
89
|
+
const isDocsUi = window.location.pathname.startsWith("/docs/");
|
|
89
90
|
|
|
90
91
|
watch(dropDownStatus, (n) => {
|
|
91
92
|
if (n === "open") {
|
|
@@ -116,19 +117,11 @@ watch(dropDownStatus, (n) => {
|
|
|
116
117
|
<template #navbar-content>
|
|
117
118
|
<navbar-item-content class="navbar-dropdown-wrapper">
|
|
118
119
|
<div v-if="user.username" class="user-profile-wrapper">
|
|
119
|
-
<a
|
|
120
|
-
|
|
121
|
-
:title="user.username.toUpperCase()"
|
|
122
|
-
data-testid="user-profile-link"
|
|
123
|
-
class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
|
|
124
|
-
>
|
|
120
|
+
<a :href="`${serverDomain}/${user.username}`" :title="user.username.toUpperCase()"
|
|
121
|
+
data-testid="user-profile-link" class="line-break-anywhere is-ellipsis-1 has-text-weight-medium">
|
|
125
122
|
<div class="profile-area">
|
|
126
123
|
<div class="profile-photo">
|
|
127
|
-
<img
|
|
128
|
-
:src="user.avatar_url"
|
|
129
|
-
alt="User Photo"
|
|
130
|
-
class="width-32 height-32"
|
|
131
|
-
/>
|
|
124
|
+
<img :src="user.avatar_url" alt="User Photo" class="width-32 height-32" />
|
|
132
125
|
<button class="camera-icon"></button>
|
|
133
126
|
</div>
|
|
134
127
|
<div class="profile-info" style="width: calc(100% - 60px)">
|
|
@@ -136,142 +129,92 @@ watch(dropDownStatus, (n) => {
|
|
|
136
129
|
<p>
|
|
137
130
|
{{
|
|
138
131
|
user.isPersonalAccount || user.is_admin
|
|
139
|
-
|
|
140
|
-
|
|
132
|
+
? "Personal Account"
|
|
133
|
+
: "Organization"
|
|
141
134
|
}}
|
|
142
135
|
</p>
|
|
143
136
|
</div>
|
|
144
137
|
</div>
|
|
145
138
|
</a>
|
|
146
|
-
<transition-group
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
<a
|
|
153
|
-
v-if="user.isPersonalAccount"
|
|
154
|
-
data-testid="user-settings-link"
|
|
155
|
-
:href="`${serverDomain}/user/settings/`"
|
|
156
|
-
>
|
|
157
|
-
<span class="icon"><HeroiconsCog6Tooth /></span>
|
|
139
|
+
<transition-group name="list" tag="ul" class="list-items ac-scrollbar py-2">
|
|
140
|
+
<li key="settings" v-if="serverDomain !== locationOrigin || isDocsUi">
|
|
141
|
+
<a v-if="user.isPersonalAccount" data-testid="user-settings-link" :href="`${serverDomain}/user/settings/`">
|
|
142
|
+
<span class="icon">
|
|
143
|
+
<HeroiconsCog6Tooth />
|
|
144
|
+
</span>
|
|
158
145
|
<span>Settings</span>
|
|
159
146
|
</a>
|
|
160
|
-
<a
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
>
|
|
165
|
-
<span class="icon"><HeroiconsCog6Tooth /></span
|
|
166
|
-
><span>Settings</span>
|
|
147
|
+
<a v-else data-testid="user-settings-link" :href="`${serverDomain}/${user.username}/settings`">
|
|
148
|
+
<span class="icon">
|
|
149
|
+
<HeroiconsCog6Tooth />
|
|
150
|
+
</span><span>Settings</span>
|
|
167
151
|
</a>
|
|
168
152
|
</li>
|
|
169
153
|
<li key="settings-platform" v-else>
|
|
170
|
-
<NuxtLink
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
>
|
|
175
|
-
<span class="icon"><HeroiconsCog6Tooth /></span>
|
|
154
|
+
<NuxtLink v-if="user.isPersonalAccount" data-testid="user-settings-link" :to="`/user/settings/`">
|
|
155
|
+
<span class="icon">
|
|
156
|
+
<HeroiconsCog6Tooth />
|
|
157
|
+
</span>
|
|
176
158
|
<span>Settings</span>
|
|
177
159
|
</NuxtLink>
|
|
178
|
-
<NuxtLink
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
>
|
|
183
|
-
<span class="icon"><HeroiconsCog6Tooth /></span
|
|
184
|
-
><span>Settings</span>
|
|
160
|
+
<NuxtLink v-else data-testid="user-settings-link" :to="`/${user.username}/settings`">
|
|
161
|
+
<span class="icon">
|
|
162
|
+
<HeroiconsCog6Tooth />
|
|
163
|
+
</span><span>Settings</span>
|
|
185
164
|
</NuxtLink>
|
|
186
165
|
</li>
|
|
187
166
|
|
|
188
|
-
<li
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
key="switcher"
|
|
192
|
-
>
|
|
193
|
-
<a
|
|
194
|
-
class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
|
|
195
|
-
@click="toggleList()"
|
|
196
|
-
>
|
|
167
|
+
<li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
|
|
168
|
+
<a class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
|
|
169
|
+
@click="toggleList()">
|
|
197
170
|
<div class="is-flex gap-8">
|
|
198
|
-
<span class="icon"
|
|
199
|
-
|
|
171
|
+
<span class="icon">
|
|
172
|
+
<HeroiconsUserGroup />
|
|
173
|
+
</span><span>Switch Account</span>
|
|
200
174
|
</div>
|
|
201
|
-
<span
|
|
202
|
-
|
|
203
|
-
:class="`fa fa-angle-${
|
|
204
|
-
dropDownStatus === 'open' ? 'up' : 'down'
|
|
205
|
-
}`"
|
|
206
|
-
></i
|
|
207
|
-
></span>
|
|
175
|
+
<span><i :class="`fa fa-angle-${dropDownStatus === 'open' ? 'up' : 'down'
|
|
176
|
+
}`"></i></span>
|
|
208
177
|
</a>
|
|
209
|
-
<transition-group
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
<
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
<div
|
|
232
|
-
class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10"
|
|
233
|
-
>
|
|
234
|
-
<div class="org-info">
|
|
235
|
-
<strong
|
|
236
|
-
:title="org.username"
|
|
237
|
-
class="line-break-anywhere is-ellipsis-1"
|
|
238
|
-
>{{ org.username }}</strong
|
|
239
|
-
>
|
|
240
|
-
<p>
|
|
241
|
-
{{
|
|
242
|
-
org.isPersonalAccount
|
|
243
|
-
? "Personal Account"
|
|
244
|
-
: "Organization"
|
|
245
|
-
}}
|
|
246
|
-
</p>
|
|
247
|
-
</div>
|
|
248
|
-
<span
|
|
249
|
-
v-if="idx === 0"
|
|
250
|
-
class="material-icons font-size-18 ml-10 is-pulled-right"
|
|
251
|
-
>
|
|
252
|
-
<HeroiconsCheck />
|
|
253
|
-
</span>
|
|
254
|
-
</div>
|
|
255
|
-
</a>
|
|
256
|
-
</li>
|
|
257
|
-
</transition-group>
|
|
258
|
-
</li>
|
|
259
|
-
<li v-if="isLoggedinUserAdmin || user.is_admin" key="site-admin">
|
|
260
|
-
<a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
|
|
261
|
-
><span class="icon"><HeroiconsWrenchScrewdriver /></span
|
|
262
|
-
><span>Site Administration</span></a
|
|
263
|
-
>
|
|
264
|
-
</li>
|
|
265
|
-
<li key="signout" @click="$emit('on-logout')">
|
|
266
|
-
<a
|
|
267
|
-
data-testid="user-logout-link"
|
|
268
|
-
:href="`${accountsDomain}/user/logout`"
|
|
269
|
-
>
|
|
270
|
-
<span class="icon"><HeroiconsPower /></span>
|
|
271
|
-
<span>Sign out</span>
|
|
178
|
+
<transition-group name="list" tag="ul" class="ac-vscrollbar" ref="dropdownItems"
|
|
179
|
+
:style="{ maxHeight: dropDownSectionHeight }">
|
|
180
|
+
<li v-for="(org, idx) in formattedOrganizations" :key="org.username">
|
|
181
|
+
<a class="is-flex is-align-items-center" @click="onOrganizationClick(org.username)">
|
|
182
|
+
<div class="width-30 height-30 image">
|
|
183
|
+
<img :src="org.avatar_url" class="ac-user-profile is-rounded" alt="icon" />
|
|
184
|
+
</div>
|
|
185
|
+
<div class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10">
|
|
186
|
+
<div class="org-info">
|
|
187
|
+
<strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{ org.username }}</strong>
|
|
188
|
+
<p>
|
|
189
|
+
{{
|
|
190
|
+
org.isPersonalAccount
|
|
191
|
+
? "Personal Account"
|
|
192
|
+
: "Organization"
|
|
193
|
+
}}
|
|
194
|
+
</p>
|
|
195
|
+
</div>
|
|
196
|
+
<span v-if="idx === 0" class="material-icons font-size-18 ml-10 is-pulled-right">
|
|
197
|
+
<HeroiconsCheck />
|
|
198
|
+
</span>
|
|
199
|
+
</div>
|
|
272
200
|
</a>
|
|
273
201
|
</li>
|
|
274
|
-
|
|
202
|
+
</transition-group>
|
|
203
|
+
</li>
|
|
204
|
+
<li v-if="isLoggedinUserAdmin || user.is_admin" key="site-admin">
|
|
205
|
+
<a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"><span class="icon">
|
|
206
|
+
<HeroiconsWrenchScrewdriver />
|
|
207
|
+
</span><span>Site Administration</span></a>
|
|
208
|
+
</li>
|
|
209
|
+
<li key="signout" @click="$emit('on-logout')">
|
|
210
|
+
<a data-testid="user-logout-link" :href="`${accountsDomain}/user/logout`">
|
|
211
|
+
<span class="icon">
|
|
212
|
+
<HeroiconsPower />
|
|
213
|
+
</span>
|
|
214
|
+
<span>Sign out</span>
|
|
215
|
+
</a>
|
|
216
|
+
</li>
|
|
217
|
+
<!-- <li key="theme" v-if="showThemeMode">
|
|
275
218
|
<theme-mode @set:theme="setTheme" />
|
|
276
219
|
</li> -->
|
|
277
220
|
</transition-group>
|