@appscode/design-system 1.0.43-alpha.131 → 1.0.43-alpha.134
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
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<button class="camera-icon"></button>
|
|
16
16
|
</div>
|
|
17
17
|
<div class="profile-info">
|
|
18
|
-
<p>{{ user.username.toUpperCase() }}</p>
|
|
18
|
+
<p :title="user.username.toUpperCase()" class="is-ellipsis-1">{{ user.username.toUpperCase() }}</p>
|
|
19
19
|
<a :href="`mailto:${user.email}`"> {{ user.email }}</a>
|
|
20
20
|
</div>
|
|
21
21
|
</div>
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<li v-if="user.is_admin" key="site-admin">
|
|
27
27
|
<a :href="`${serverDomain}/admin`">Site Administration</a>
|
|
28
28
|
</li>
|
|
29
|
-
<li v-if="
|
|
29
|
+
<li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
|
|
30
30
|
<a class="
|
|
31
31
|
ac-dropdown-button
|
|
32
32
|
is-fullwidth
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"
|
|
76
76
|
>
|
|
77
77
|
<div class="org-info">
|
|
78
|
-
<strong>{{ org.username }}</strong>
|
|
78
|
+
<strong :title="org.username" class="is-ellipsis-1">{{ org.username }}</strong>
|
|
79
79
|
<p>
|
|
80
80
|
{{
|
|
81
81
|
org.isPersonalAccount
|
|
@@ -124,7 +124,7 @@ export default {
|
|
|
124
124
|
type: String,
|
|
125
125
|
default: "",
|
|
126
126
|
},
|
|
127
|
-
|
|
127
|
+
showAccountSwitcher: {
|
|
128
128
|
type: Boolean,
|
|
129
129
|
default: false,
|
|
130
130
|
},
|
|
@@ -47,6 +47,17 @@
|
|
|
47
47
|
"
|
|
48
48
|
>
|
|
49
49
|
{{ headerLabels[idx] }}
|
|
50
|
+
<span
|
|
51
|
+
v-if="
|
|
52
|
+
tableHeader.dashboard &&
|
|
53
|
+
tableHeader.dashboard.status &&
|
|
54
|
+
tableHeader.dashboard.status !== 'Success'
|
|
55
|
+
"
|
|
56
|
+
class="icon has-text-danger"
|
|
57
|
+
:title="tableHeader.dashboard && tableHeader.dashboard.message"
|
|
58
|
+
>
|
|
59
|
+
<i class="fa fa-exclamation-triangle" />
|
|
60
|
+
</span>
|
|
50
61
|
</th>
|
|
51
62
|
<th
|
|
52
63
|
ref="action-section"
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<img :src="user.avatar_url" alt="User Photo" />
|
|
8
8
|
</div>
|
|
9
9
|
</button>
|
|
10
|
-
<navbar-item-content>
|
|
10
|
+
<navbar-item-content class="navbar-dropdown-wrapper">
|
|
11
11
|
<div v-if="user.username" class="user-profile-wrapper">
|
|
12
12
|
<div class="profile-area">
|
|
13
13
|
<div class="profile-photo">
|
|
@@ -15,23 +15,98 @@
|
|
|
15
15
|
<button class="camera-icon"></button>
|
|
16
16
|
</div>
|
|
17
17
|
<div class="profile-info">
|
|
18
|
-
<p>{{ user.username.toUpperCase() }}</p>
|
|
18
|
+
<p :title="user.username.toUpperCase()" class="is-ellipsis-1">{{ user.username.toUpperCase() }}</p>
|
|
19
19
|
<a :href="`mailto:${user.email}`"> {{ user.email }}</a>
|
|
20
20
|
</div>
|
|
21
21
|
</div>
|
|
22
|
-
<ul>
|
|
23
|
-
<li>
|
|
22
|
+
<transition-group name="list" tag="ul">
|
|
23
|
+
<li key="settings">
|
|
24
24
|
<a :href="`${serverDomain}/user/settings/`">Settings</a>
|
|
25
25
|
</li>
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
<li v-if="user.is_admin" key="site-admin">
|
|
27
|
+
<a :href="`${serverDomain}/admin`">Site Administration</a>
|
|
28
|
+
</li>
|
|
29
|
+
<li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
|
|
30
|
+
<a class="
|
|
31
|
+
ac-dropdown-button
|
|
32
|
+
is-fullwidth
|
|
33
|
+
is-flex
|
|
34
|
+
is-justify-content-space-between
|
|
35
|
+
is-align-items-center
|
|
36
|
+
"
|
|
37
|
+
@click="toggleList()"
|
|
38
|
+
>
|
|
39
|
+
<span>Switch Account</span>
|
|
40
|
+
<span
|
|
41
|
+
><i
|
|
42
|
+
:class="`fa fa-angle-${
|
|
43
|
+
dropDownStatus === 'open' ? 'up' : 'down'
|
|
44
|
+
}`"
|
|
45
|
+
></i
|
|
46
|
+
></span>
|
|
47
|
+
</a>
|
|
48
|
+
<transition-group name="list" tag="ul"
|
|
49
|
+
class="ac-vscrollbar"
|
|
50
|
+
ref="dropdownItems"
|
|
51
|
+
:style="{ maxHeight: dropDownSectionHeight }"
|
|
52
|
+
>
|
|
53
|
+
<li
|
|
54
|
+
v-for="(org, idx) in formattedOrganizations"
|
|
55
|
+
:key="org.username"
|
|
56
|
+
>
|
|
57
|
+
<a
|
|
58
|
+
class="is-flex is-align-items-center"
|
|
59
|
+
@click="onOrganizationClick(org.username)"
|
|
60
|
+
>
|
|
61
|
+
<div class="width-30 height-30 image">
|
|
62
|
+
<img
|
|
63
|
+
:src="org.avatar_url"
|
|
64
|
+
class="ac-user-profile is-rounded"
|
|
65
|
+
alt="icon"
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
<div
|
|
69
|
+
class="
|
|
70
|
+
is-flex
|
|
71
|
+
is-align-items-center
|
|
72
|
+
is-justify-content-space-between
|
|
73
|
+
is-fullwidth
|
|
74
|
+
ml-10
|
|
75
|
+
"
|
|
76
|
+
>
|
|
77
|
+
<div class="org-info">
|
|
78
|
+
<strong :title="org.username" class="is-ellipsis-1">{{ org.username }}</strong>
|
|
79
|
+
<p>
|
|
80
|
+
{{
|
|
81
|
+
org.isPersonalAccount
|
|
82
|
+
? "Personal Account"
|
|
83
|
+
: "Organization"
|
|
84
|
+
}}
|
|
85
|
+
</p>
|
|
86
|
+
</div>
|
|
87
|
+
<span
|
|
88
|
+
v-if="idx === 0"
|
|
89
|
+
class="
|
|
90
|
+
material-icons-outlined
|
|
91
|
+
font-size-18
|
|
92
|
+
ml-10
|
|
93
|
+
is-pulled-right
|
|
94
|
+
"
|
|
95
|
+
>
|
|
96
|
+
check
|
|
97
|
+
</span>
|
|
98
|
+
</div>
|
|
99
|
+
</a>
|
|
100
|
+
</li>
|
|
101
|
+
</transition-group>
|
|
102
|
+
</li>
|
|
103
|
+
<li key="dashboard">
|
|
104
|
+
<a :href="`${serverDomain}/dashboard`"> Dashboard </a>
|
|
105
|
+
</li>
|
|
106
|
+
<li key="signout">
|
|
32
107
|
<a :href="`${serverDomain}/user/logout`"> Sign out </a>
|
|
33
108
|
</li>
|
|
34
|
-
</
|
|
109
|
+
</transition-group>
|
|
35
110
|
</div>
|
|
36
111
|
</navbar-item-content>
|
|
37
112
|
</navbar-item>
|
|
@@ -42,6 +117,7 @@ import { defineComponent, defineAsyncComponent } from "vue";
|
|
|
42
117
|
|
|
43
118
|
export default defineComponent({
|
|
44
119
|
props: {
|
|
120
|
+
// active user info
|
|
45
121
|
user: {
|
|
46
122
|
type: Object,
|
|
47
123
|
default: () => ({}),
|
|
@@ -50,6 +126,15 @@ export default defineComponent({
|
|
|
50
126
|
type: String,
|
|
51
127
|
default: "",
|
|
52
128
|
},
|
|
129
|
+
showAccountSwitcher: {
|
|
130
|
+
type: Boolean,
|
|
131
|
+
default: false,
|
|
132
|
+
},
|
|
133
|
+
// all available organization list including personal account
|
|
134
|
+
organizations: {
|
|
135
|
+
type: Array,
|
|
136
|
+
default: () => [],
|
|
137
|
+
},
|
|
53
138
|
},
|
|
54
139
|
|
|
55
140
|
components: {
|
|
@@ -60,5 +145,62 @@ export default defineComponent({
|
|
|
60
145
|
import("../../v2/navbar/NavbarItemContent.vue").then((module) => module.default)
|
|
61
146
|
),
|
|
62
147
|
},
|
|
148
|
+
|
|
149
|
+
computed: {
|
|
150
|
+
formattedOrganizations() {
|
|
151
|
+
let activeUser;
|
|
152
|
+
const filteredList = this.organizations.filter((item) => {
|
|
153
|
+
if (item.username === this.user.username) {
|
|
154
|
+
activeUser = item;
|
|
155
|
+
} else {
|
|
156
|
+
return true;
|
|
157
|
+
}
|
|
158
|
+
return false;
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
filteredList.unshift(activeUser);
|
|
162
|
+
|
|
163
|
+
return filteredList || [];
|
|
164
|
+
},
|
|
165
|
+
},
|
|
166
|
+
|
|
167
|
+
data() {
|
|
168
|
+
return {
|
|
169
|
+
dropDownStatus: "close",
|
|
170
|
+
dropDownSectionHeight: null,
|
|
171
|
+
};
|
|
172
|
+
},
|
|
173
|
+
|
|
174
|
+
methods: {
|
|
175
|
+
toggleList() {
|
|
176
|
+
this.dropDownStatus = this.dropDownStatus === "open" ? "close" : "open";
|
|
177
|
+
},
|
|
178
|
+
onOrganizationClick(orgName) {
|
|
179
|
+
this.$refs["dropdownItems"].$el.scrollTo(0, 0);
|
|
180
|
+
this.$emit("activeorg$set", orgName);
|
|
181
|
+
},
|
|
182
|
+
},
|
|
183
|
+
|
|
184
|
+
watch: {
|
|
185
|
+
dropDownStatus: {
|
|
186
|
+
immediate: true,
|
|
187
|
+
handler(n) {
|
|
188
|
+
if (n === "open") {
|
|
189
|
+
this.$nextTick(() => {
|
|
190
|
+
const dropDownUl = this.$refs["dropdownItems"];
|
|
191
|
+
if (dropDownUl)
|
|
192
|
+
this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
|
|
193
|
+
});
|
|
194
|
+
} else {
|
|
195
|
+
this.dropDownSectionHeight = null;
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
},
|
|
199
|
+
},
|
|
63
200
|
});
|
|
64
|
-
</script>
|
|
201
|
+
</script>
|
|
202
|
+
<style lang="scss" scoped>
|
|
203
|
+
.ac-vscrollbar {
|
|
204
|
+
overflow: auto !important;
|
|
205
|
+
}
|
|
206
|
+
</style>
|
|
@@ -41,6 +41,17 @@
|
|
|
41
41
|
@click.prevent="headerSortables[idx].enabled && emitSortEvent(idx)"
|
|
42
42
|
>
|
|
43
43
|
{{ headerLabels[idx] }}
|
|
44
|
+
<span
|
|
45
|
+
v-if="
|
|
46
|
+
tableHeader.dashboard &&
|
|
47
|
+
tableHeader.dashboard.status &&
|
|
48
|
+
tableHeader.dashboard.status !== 'Success'
|
|
49
|
+
"
|
|
50
|
+
:title="tableHeader.dashboard && tableHeader.dashboard.message"
|
|
51
|
+
class="icon has-text-danger"
|
|
52
|
+
>
|
|
53
|
+
<i class="fa fa-exclamation-triangle" />
|
|
54
|
+
</span>
|
|
44
55
|
</th>
|
|
45
56
|
<th
|
|
46
57
|
ref="action-section"
|