@appscode/design-system 2.2.16 → 2.2.17
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
|
@@ -59,29 +59,45 @@ function handleIsActiveChange(isActive: string) {
|
|
|
59
59
|
</svg>
|
|
60
60
|
</template>
|
|
61
61
|
<template #navbar-content>
|
|
62
|
-
<
|
|
63
|
-
<
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
67
|
-
<
|
|
68
|
-
<
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
62
|
+
<transition>
|
|
63
|
+
<div v-if="showDrawer">
|
|
64
|
+
<navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
|
|
65
|
+
<ul class="ac-scrollbar p-0 app-drawer">
|
|
66
|
+
<li v-for="app in apps" :key="app.url">
|
|
67
|
+
<a :href="app.url">
|
|
68
|
+
<article class="media">
|
|
69
|
+
<figure class="media-left">
|
|
70
|
+
<p class="image">
|
|
71
|
+
<img :src="app.icon_url" />
|
|
72
|
+
</p>
|
|
73
|
+
</figure>
|
|
74
|
+
<div class="media-content">
|
|
75
|
+
<div class="content">
|
|
76
|
+
<p>
|
|
77
|
+
<strong>{{ app.title }}</strong>
|
|
78
|
+
<span>{{ app.sub_title }}</span>
|
|
79
|
+
</p>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</article>
|
|
83
|
+
</a>
|
|
84
|
+
</li>
|
|
85
|
+
</ul>
|
|
86
|
+
</navbar-item-content>
|
|
87
|
+
</div>
|
|
88
|
+
</transition>
|
|
85
89
|
</template>
|
|
86
90
|
</navbar-item>
|
|
87
91
|
</template>
|
|
92
|
+
|
|
93
|
+
<style scoped>
|
|
94
|
+
.v-enter-active,
|
|
95
|
+
.v-leave-active {
|
|
96
|
+
transition: opacity 0.5s ease;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.v-enter-from,
|
|
100
|
+
.v-leave-to {
|
|
101
|
+
opacity: 0;
|
|
102
|
+
}
|
|
103
|
+
</style>
|
|
@@ -49,38 +49,52 @@ function handleIsActiveChange(isActive: string | any[]) {
|
|
|
49
49
|
</template>
|
|
50
50
|
|
|
51
51
|
<template #navbar-content>
|
|
52
|
-
<
|
|
53
|
-
<div
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<div class="notification-body ac-scrollbar p-0">
|
|
60
|
-
<a v-for="data in notifications" href="#" class="single-notification" :key="data.id">
|
|
61
|
-
<!-- <span class="round-icon">Z</span> -->
|
|
62
|
-
<div class="notification-content">
|
|
63
|
-
<h6>{{ data.msg }}</h6>
|
|
64
|
-
<p>{{ data.status }}</p>
|
|
52
|
+
<transition>
|
|
53
|
+
<div v-if="showNotification">
|
|
54
|
+
<navbar-item-content class="navbar-dropdown-wrapper" style="width: 320px; right: -30px">
|
|
55
|
+
<div class="dropdown-inner">
|
|
56
|
+
<div class="notification-header">
|
|
57
|
+
<h5>Notification</h5>
|
|
58
|
+
<span>{{ notifications.length }}</span>
|
|
65
59
|
</div>
|
|
66
|
-
<span>{{ notificationTime(data.time) }}</span>
|
|
67
|
-
</a>
|
|
68
60
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
61
|
+
<div class="notification-body ac-scrollbar p-0">
|
|
62
|
+
<a v-for="data in notifications" href="#" class="single-notification" :key="data.id">
|
|
63
|
+
<!-- <span class="round-icon">Z</span> -->
|
|
64
|
+
<div class="notification-content">
|
|
65
|
+
<h6>{{ data.msg }}</h6>
|
|
66
|
+
<p>{{ data.status }}</p>
|
|
67
|
+
</div>
|
|
68
|
+
<span>{{ notificationTime(data.time) }}</span>
|
|
69
|
+
</a>
|
|
70
|
+
|
|
71
|
+
<a v-if="!notifications.length" href="#" class="single-notification">
|
|
72
|
+
<!-- <span class="round-icon">Y</span> -->
|
|
73
|
+
<div class="notification-content">
|
|
74
|
+
<h6>No New Notification</h6>
|
|
75
|
+
<p></p>
|
|
76
|
+
</div>
|
|
77
|
+
<span> </span>
|
|
78
|
+
</a>
|
|
74
79
|
</div>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</navbar-item-content>
|
|
78
82
|
</div>
|
|
79
|
-
</
|
|
83
|
+
</transition>
|
|
80
84
|
</template>
|
|
81
85
|
</navbar-item>
|
|
82
86
|
</template>
|
|
83
87
|
|
|
84
88
|
<style lang="scss" scoped>
|
|
85
89
|
@import "../../../vue-components/styles/components/navbar/notification";
|
|
90
|
+
|
|
91
|
+
.v-enter-active,
|
|
92
|
+
.v-leave-active {
|
|
93
|
+
transition: opacity 0.5s ease;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.v-enter-from,
|
|
97
|
+
.v-leave-to {
|
|
98
|
+
opacity: 0;
|
|
99
|
+
}
|
|
86
100
|
</style>
|
|
@@ -112,113 +112,129 @@ function handleIsActiveChange(isActive: string) {
|
|
|
112
112
|
</button> -->
|
|
113
113
|
|
|
114
114
|
<template #navbar-content>
|
|
115
|
-
<
|
|
116
|
-
<div v-if="
|
|
117
|
-
<
|
|
118
|
-
|
|
119
|
-
:title="user.username.toUpperCase()"
|
|
120
|
-
data-testid="user-profile-link"
|
|
121
|
-
class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
|
|
122
|
-
>
|
|
123
|
-
<div class="profile-area">
|
|
124
|
-
<div class="profile-photo">
|
|
125
|
-
<img :src="user.avatar_url" alt="User Photo" class="width-32 height-32" />
|
|
126
|
-
<button class="camera-icon"></button>
|
|
127
|
-
</div>
|
|
128
|
-
<div class="profile-info" style="width: calc(100% - 60px)">
|
|
129
|
-
<strong> {{ user.username }} </strong>
|
|
130
|
-
<p>
|
|
131
|
-
{{ user.isPersonalAccount || user.is_admin ? "Personal Account" : "Organization" }}
|
|
132
|
-
</p>
|
|
133
|
-
</div>
|
|
134
|
-
</div>
|
|
135
|
-
</a>
|
|
136
|
-
<transition-group name="list" tag="ul" class="list-items ac-scrollbar py-2">
|
|
137
|
-
<li key="settings" v-if="serverDomain !== locationOrigin || isDocsUi">
|
|
138
|
-
<a
|
|
139
|
-
v-if="user.isPersonalAccount"
|
|
140
|
-
data-testid="user-settings-link"
|
|
141
|
-
:href="`${serverDomain}/user/settings/`"
|
|
142
|
-
>
|
|
143
|
-
<span class="icon">
|
|
144
|
-
<HeroiconsCog6Tooth />
|
|
145
|
-
</span>
|
|
146
|
-
<span>Settings</span>
|
|
147
|
-
</a>
|
|
148
|
-
<a v-else data-testid="user-settings-link" :href="`${serverDomain}/${user.username}/settings`">
|
|
149
|
-
<span class="icon"> <HeroiconsCog6Tooth /> </span><span>Settings</span>
|
|
150
|
-
</a>
|
|
151
|
-
</li>
|
|
152
|
-
<li key="settings-platform" v-else>
|
|
153
|
-
<NuxtLink v-if="user.isPersonalAccount" data-testid="user-settings-link" :to="`/user/settings/`">
|
|
154
|
-
<span class="icon">
|
|
155
|
-
<HeroiconsCog6Tooth />
|
|
156
|
-
</span>
|
|
157
|
-
<span>Settings</span>
|
|
158
|
-
</NuxtLink>
|
|
159
|
-
<NuxtLink v-else data-testid="user-settings-link" :to="`/${user.username}/settings`">
|
|
160
|
-
<span class="icon"> <HeroiconsCog6Tooth /> </span><span>Settings</span>
|
|
161
|
-
</NuxtLink>
|
|
162
|
-
</li>
|
|
163
|
-
|
|
164
|
-
<li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
|
|
115
|
+
<transition>
|
|
116
|
+
<div v-if="showUserDropdown">
|
|
117
|
+
<navbar-item-content class="navbar-dropdown-wrapper">
|
|
118
|
+
<div v-if="user.username" class="user-profile-wrapper">
|
|
165
119
|
<a
|
|
166
|
-
|
|
167
|
-
|
|
120
|
+
:href="`${serverDomain}/${user.username}`"
|
|
121
|
+
:title="user.username.toUpperCase()"
|
|
122
|
+
data-testid="user-profile-link"
|
|
123
|
+
class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
|
|
168
124
|
>
|
|
169
|
-
<div class="
|
|
170
|
-
<
|
|
125
|
+
<div class="profile-area">
|
|
126
|
+
<div class="profile-photo">
|
|
127
|
+
<img :src="user.avatar_url" alt="User Photo" class="width-32 height-32" />
|
|
128
|
+
<button class="camera-icon"></button>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="profile-info" style="width: calc(100% - 60px)">
|
|
131
|
+
<strong> {{ user.username }} </strong>
|
|
132
|
+
<p>
|
|
133
|
+
{{ user.isPersonalAccount || user.is_admin ? "Personal Account" : "Organization" }}
|
|
134
|
+
</p>
|
|
135
|
+
</div>
|
|
171
136
|
</div>
|
|
172
|
-
<span><i :class="`fa fa-angle-${dropDownStatus === 'open' ? 'up' : 'down'}`"></i></span>
|
|
173
137
|
</a>
|
|
174
|
-
<transition-group
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
138
|
+
<transition-group name="list" tag="ul" class="list-items ac-scrollbar py-2">
|
|
139
|
+
<li key="settings" v-if="serverDomain !== locationOrigin || isDocsUi">
|
|
140
|
+
<a
|
|
141
|
+
v-if="user.isPersonalAccount"
|
|
142
|
+
data-testid="user-settings-link"
|
|
143
|
+
:href="`${serverDomain}/user/settings/`"
|
|
144
|
+
>
|
|
145
|
+
<span class="icon">
|
|
146
|
+
<HeroiconsCog6Tooth />
|
|
147
|
+
</span>
|
|
148
|
+
<span>Settings</span>
|
|
149
|
+
</a>
|
|
150
|
+
<a v-else data-testid="user-settings-link" :href="`${serverDomain}/${user.username}/settings`">
|
|
151
|
+
<span class="icon"> <HeroiconsCog6Tooth /> </span><span>Settings</span>
|
|
152
|
+
</a>
|
|
153
|
+
</li>
|
|
154
|
+
<li key="settings-platform" v-else>
|
|
155
|
+
<NuxtLink v-if="user.isPersonalAccount" data-testid="user-settings-link" :to="`/user/settings/`">
|
|
156
|
+
<span class="icon">
|
|
157
|
+
<HeroiconsCog6Tooth />
|
|
158
|
+
</span>
|
|
159
|
+
<span>Settings</span>
|
|
160
|
+
</NuxtLink>
|
|
161
|
+
<NuxtLink v-else data-testid="user-settings-link" :to="`/${user.username}/settings`">
|
|
162
|
+
<span class="icon"> <HeroiconsCog6Tooth /> </span><span>Settings</span>
|
|
163
|
+
</NuxtLink>
|
|
164
|
+
</li>
|
|
165
|
+
|
|
166
|
+
<li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
|
|
167
|
+
<a
|
|
168
|
+
class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
|
|
169
|
+
@click="toggleList()"
|
|
170
|
+
>
|
|
171
|
+
<div class="is-flex gap-8">
|
|
172
|
+
<span class="icon"> <HeroiconsUserGroup /> </span><span>Switch Account</span>
|
|
198
173
|
</div>
|
|
174
|
+
<span><i :class="`fa fa-angle-${dropDownStatus === 'open' ? 'up' : 'down'}`"></i></span>
|
|
199
175
|
</a>
|
|
176
|
+
<transition-group
|
|
177
|
+
name="list"
|
|
178
|
+
tag="ul"
|
|
179
|
+
class="ac-vscrollbar"
|
|
180
|
+
ref="dropdownItems"
|
|
181
|
+
:style="{ maxHeight: dropDownSectionHeight }"
|
|
182
|
+
>
|
|
183
|
+
<li v-for="(org, idx) in formattedOrganizations" :key="org.username">
|
|
184
|
+
<a class="is-flex is-align-items-center" @click="onOrganizationClick(org.username)">
|
|
185
|
+
<div class="width-30 height-30 image">
|
|
186
|
+
<img :src="org.avatar_url" class="ac-user-profile is-rounded" alt="icon" />
|
|
187
|
+
</div>
|
|
188
|
+
<div class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10">
|
|
189
|
+
<div class="org-info">
|
|
190
|
+
<strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{
|
|
191
|
+
org.username
|
|
192
|
+
}}</strong>
|
|
193
|
+
<p>
|
|
194
|
+
{{ org.isPersonalAccount ? "Personal Account" : "Organization" }}
|
|
195
|
+
</p>
|
|
196
|
+
</div>
|
|
197
|
+
<span v-if="idx === 0" class="material-icons font-size-18 ml-10 is-pulled-right">
|
|
198
|
+
<HeroiconsCheck />
|
|
199
|
+
</span>
|
|
200
|
+
</div>
|
|
201
|
+
</a>
|
|
202
|
+
</li>
|
|
203
|
+
</transition-group>
|
|
200
204
|
</li>
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
</li>
|
|
216
|
-
<!-- <li key="theme" v-if="showThemeMode">
|
|
205
|
+
<li v-if="isLoggedinUserAdmin || user.is_admin" key="site-admin">
|
|
206
|
+
<a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
|
|
207
|
+
><span class="icon"> <HeroiconsWrenchScrewdriver /> </span><span>Site Administration</span></a
|
|
208
|
+
>
|
|
209
|
+
</li>
|
|
210
|
+
<li key="signout" @click="$emit('on-logout')">
|
|
211
|
+
<a data-testid="user-logout-link" :href="`${accountsDomain}/user/logout`">
|
|
212
|
+
<span class="icon">
|
|
213
|
+
<HeroiconsPower />
|
|
214
|
+
</span>
|
|
215
|
+
<span>Sign out</span>
|
|
216
|
+
</a>
|
|
217
|
+
</li>
|
|
218
|
+
<!-- <li key="theme" v-if="showThemeMode">
|
|
217
219
|
<theme-mode @set:theme="setTheme" />
|
|
218
220
|
</li> -->
|
|
219
|
-
|
|
221
|
+
</transition-group>
|
|
222
|
+
</div>
|
|
223
|
+
</navbar-item-content>
|
|
220
224
|
</div>
|
|
221
|
-
</
|
|
225
|
+
</transition>
|
|
222
226
|
</template>
|
|
223
227
|
</navbar-item>
|
|
224
228
|
</template>
|
|
229
|
+
|
|
230
|
+
<style scoped>
|
|
231
|
+
.v-enter-active,
|
|
232
|
+
.v-leave-active {
|
|
233
|
+
transition: opacity 0.5s ease;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.v-enter-from,
|
|
237
|
+
.v-leave-to {
|
|
238
|
+
opacity: 0;
|
|
239
|
+
}
|
|
240
|
+
</style>
|