@appscode/design-system 2.0.0 → 2.0.2
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
|
@@ -101,10 +101,10 @@ watch(
|
|
|
101
101
|
<header-item>
|
|
102
102
|
<ac-button
|
|
103
103
|
v-if="!isCloseOptionDisabled"
|
|
104
|
-
modifier-classes="is-
|
|
104
|
+
modifier-classes="is-white"
|
|
105
105
|
:icon-image="crossIcon"
|
|
106
|
-
@click.stop="destroyModal"
|
|
107
106
|
data-testid="modal-generic-close-icon"
|
|
107
|
+
@click.stop="destroyModal"
|
|
108
108
|
/>
|
|
109
109
|
</header-item>
|
|
110
110
|
</header-items>
|
|
@@ -152,6 +152,11 @@ watch(
|
|
|
152
152
|
left: 0;
|
|
153
153
|
top: 0;
|
|
154
154
|
z-index: 9999;
|
|
155
|
+
.ac-button {
|
|
156
|
+
&.is-white {
|
|
157
|
+
margin-right: -10px;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
155
160
|
|
|
156
161
|
&:after {
|
|
157
162
|
position: absolute;
|
|
@@ -14,13 +14,14 @@ interface FormatedOrgs extends User {
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
interface Props {
|
|
17
|
-
user:
|
|
17
|
+
user: FormatedOrgs;
|
|
18
18
|
serverDomain?: string;
|
|
19
19
|
accountsDomain?: string;
|
|
20
20
|
showAccountSwitcher?: boolean;
|
|
21
21
|
organizations?: Array<FormatedOrgs>;
|
|
22
22
|
showThemeMode?: boolean;
|
|
23
23
|
isPlatformDomain?: boolean;
|
|
24
|
+
isLoggedinUserAdmin?: boolean;
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
const props = withDefaults(defineProps<Props>(), {
|
|
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
30
31
|
organizations: () => [],
|
|
31
32
|
showThemeMode: false,
|
|
32
33
|
isPlatformDomain: false,
|
|
34
|
+
isLoggedinUserAdmin: false,
|
|
33
35
|
});
|
|
34
36
|
|
|
35
37
|
const emit = defineEmits(["set:theme", "on-logout", "activeorg$set"]);
|
|
@@ -83,6 +85,8 @@ const setTheme = (val: string) => {
|
|
|
83
85
|
emit("set:theme", val);
|
|
84
86
|
};
|
|
85
87
|
|
|
88
|
+
const pathName = window.location.origin;
|
|
89
|
+
|
|
86
90
|
watch(dropDownStatus, (n) => {
|
|
87
91
|
if (n === "open") {
|
|
88
92
|
nextTick(() => {
|
|
@@ -116,45 +120,71 @@ watch(dropDownStatus, (n) => {
|
|
|
116
120
|
class="user-profile-wrapper"
|
|
117
121
|
@mouseleave="onMouseLeave()"
|
|
118
122
|
>
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<
|
|
123
|
+
<a
|
|
124
|
+
:href="`${serverDomain}/${user.username}`"
|
|
125
|
+
:title="user.username.toUpperCase()"
|
|
126
|
+
data-testid="user-profile-link"
|
|
127
|
+
class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
|
|
128
|
+
>
|
|
129
|
+
<div class="profile-area">
|
|
130
|
+
<div class="profile-photo">
|
|
131
|
+
<img
|
|
132
|
+
:src="user.avatar_url"
|
|
133
|
+
alt="User Photo"
|
|
134
|
+
class="width-32 height-32"
|
|
135
|
+
/>
|
|
136
|
+
<button class="camera-icon"></button>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="profile-info" style="width: calc(100% - 60px)">
|
|
139
|
+
<strong> {{ user.username }} </strong>
|
|
140
|
+
<p>
|
|
141
|
+
{{
|
|
142
|
+
user.isPersonalAccount || user.is_admin
|
|
143
|
+
? "Personal Account"
|
|
144
|
+
: "Organization"
|
|
145
|
+
}}
|
|
146
|
+
</p>
|
|
147
|
+
</div>
|
|
127
148
|
</div>
|
|
128
|
-
|
|
149
|
+
</a>
|
|
150
|
+
<transition-group name="list" tag="ul" class="list-items py-2">
|
|
151
|
+
<li key="settings" v-if="serverDomain !== pathName">
|
|
129
152
|
<a
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
|
|
134
|
-
>{{ user.username }}</a
|
|
153
|
+
v-if="user.isPersonalAccount"
|
|
154
|
+
data-testid="user-settings-link"
|
|
155
|
+
:href="`${serverDomain}/user/settings/`"
|
|
135
156
|
>
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
<transition-group
|
|
140
|
-
name="list"
|
|
141
|
-
tag="ul"
|
|
142
|
-
class="list-items py-2 ac-scrollbar px-0"
|
|
143
|
-
>
|
|
144
|
-
<li key="settings">
|
|
157
|
+
<span class="icon"><HeroiconsCog6Tooth /></span>
|
|
158
|
+
<span>Settings</span>
|
|
159
|
+
</a>
|
|
145
160
|
<a
|
|
161
|
+
v-else
|
|
146
162
|
data-testid="user-settings-link"
|
|
147
|
-
:href="`${serverDomain}
|
|
148
|
-
><span class="icon"><HeroiconsCog6Tooth /></span
|
|
149
|
-
><span>Settings</span></a
|
|
163
|
+
:href="`${serverDomain}/${user.username}/settings`"
|
|
150
164
|
>
|
|
165
|
+
<span class="icon"><HeroiconsCog6Tooth /></span
|
|
166
|
+
><span>Settings</span>
|
|
167
|
+
</a>
|
|
151
168
|
</li>
|
|
152
|
-
<li
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
|
|
169
|
+
<li key="settings-platform" v-else>
|
|
170
|
+
<NuxtLink
|
|
171
|
+
v-if="user.isPersonalAccount"
|
|
172
|
+
data-testid="user-settings-link"
|
|
173
|
+
:to="`/user/settings/`"
|
|
156
174
|
>
|
|
175
|
+
<span class="icon"><HeroiconsCog6Tooth /></span>
|
|
176
|
+
<span>Settings</span>
|
|
177
|
+
</NuxtLink>
|
|
178
|
+
<NuxtLink
|
|
179
|
+
v-else
|
|
180
|
+
data-testid="user-settings-link"
|
|
181
|
+
:to="`/${user.username}/settings`"
|
|
182
|
+
>
|
|
183
|
+
<span class="icon"><HeroiconsCog6Tooth /></span
|
|
184
|
+
><span>Settings</span>
|
|
185
|
+
</NuxtLink>
|
|
157
186
|
</li>
|
|
187
|
+
|
|
158
188
|
<li
|
|
159
189
|
v-if="showAccountSwitcher"
|
|
160
190
|
:class="`is-${dropDownStatus}`"
|
|
@@ -226,6 +256,12 @@ watch(dropDownStatus, (n) => {
|
|
|
226
256
|
</li>
|
|
227
257
|
</transition-group>
|
|
228
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>
|
|
229
265
|
<li key="signout" @click="$emit('on-logout')">
|
|
230
266
|
<a
|
|
231
267
|
data-testid="user-logout-link"
|