@appscode/design-system 1.0.43-alpha.133 → 1.0.43-alpha.136

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/vue-components/v2/navbar/User.vue +14 -5
  3. package/vue-components/v2/table/Table.vue +0 -10
  4. package/vue-components/v3/navbar/User.vue +14 -5
  5. package/vue-components/v3/table/Table.vue +0 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.0.43-alpha.133",
3
+ "version": "1.0.43-alpha.136",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/v2/navbar/User.vue CHANGED
@@ -8,14 +8,14 @@
8
8
  </div>
9
9
  </button>
10
10
  <navbar-item-content class="navbar-dropdown-wrapper">
11
- <div v-if="user.username" class="user-profile-wrapper">
11
+ <div v-if="user.username" class="user-profile-wrapper" @mouseleave="onMouseLeave">
12
12
  <div class="profile-area">
13
13
  <div class="profile-photo">
14
- <img :src="user.avatar_url" alt="User Photo" />
14
+ <img :src="user.avatar_url" alt="User Photo" class="width-50 height-50" />
15
15
  <button class="camera-icon"></button>
16
16
  </div>
17
- <div class="profile-info">
18
- <p :title="user.username.toUpperCase()" class="is-ellipsis-1">{{ user.username.toUpperCase() }}</p>
17
+ <div class="profile-info" style="width: calc(100% - 60px);">
18
+ <p :title="user.username.toUpperCase()" class="line-break-anywhere is-ellipsis-1">{{ user.username.toUpperCase() }}</p>
19
19
  <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
20
20
  </div>
21
21
  </div>
@@ -75,7 +75,7 @@
75
75
  "
76
76
  >
77
77
  <div class="org-info">
78
- <strong :title="org.username" class="is-ellipsis-1">{{ org.username }}</strong>
78
+ <strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{ org.username }}</strong>
79
79
  <p>
80
80
  {{
81
81
  org.isPersonalAccount
@@ -168,11 +168,17 @@ export default {
168
168
  methods: {
169
169
  toggleList() {
170
170
  this.dropDownStatus = this.dropDownStatus === "open" ? "close" : "open";
171
+ this.$nextTick(() => {
172
+ this.$refs["dropdownItems"].$el.scrollTo(0, 0);
173
+ });
171
174
  },
172
175
  onOrganizationClick(orgName) {
173
176
  this.$refs["dropdownItems"].$el.scrollTo(0, 0);
174
177
  this.$emit("activeorg$set", orgName);
175
178
  },
179
+ onMouseLeave() {
180
+ this.dropDownStatus = "close";
181
+ }
176
182
  },
177
183
 
178
184
  watch: {
@@ -197,4 +203,7 @@ export default {
197
203
  .ac-vscrollbar {
198
204
  overflow: auto !important;
199
205
  }
206
+ .line-break-anywhere {
207
+ line-break: anywhere;
208
+ }
200
209
  </style>
package/vue-components/v2/table/Table.vue CHANGED
@@ -45,18 +45,8 @@
45
45
  headerSortables[idx].enabled &&
46
46
  emitSortEvent(idx)
47
47
  "
48
- :title="tableHeader.dashboard && tableHeader.dashboard.message"
49
48
  >
50
49
  {{ headerLabels[idx] }}
51
- <span
52
- v-if="
53
- tableHeader.dashboard &&
54
- tableHeader.dashboard.status !== 'Success'
55
- "
56
- class="icon has-text-danger"
57
- >
58
- <i class="fa fa-exclamation-triangle" />
59
- </span>
60
50
  </th>
61
51
  <th
62
52
  ref="action-section"
package/vue-components/v3/navbar/User.vue CHANGED
@@ -8,14 +8,14 @@
8
8
  </div>
9
9
  </button>
10
10
  <navbar-item-content class="navbar-dropdown-wrapper">
11
- <div v-if="user.username" class="user-profile-wrapper">
11
+ <div v-if="user.username" class="user-profile-wrapper" @mouseleave="onMouseLeave">
12
12
  <div class="profile-area">
13
13
  <div class="profile-photo">
14
- <img :src="user.avatar_url" alt="User Photo" />
14
+ <img :src="user.avatar_url" alt="User Photo" class="width-50 height-50" />
15
15
  <button class="camera-icon"></button>
16
16
  </div>
17
- <div class="profile-info">
18
- <p :title="user.username.toUpperCase()" class="is-ellipsis-1">{{ user.username.toUpperCase() }}</p>
17
+ <div class="profile-info" style="width: calc(100% - 60px);">
18
+ <p :title="user.username.toUpperCase()" class="line-break-anywhere is-ellipsis-1">{{ user.username.toUpperCase() }}</p>
19
19
  <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
20
20
  </div>
21
21
  </div>
@@ -75,7 +75,7 @@
75
75
  "
76
76
  >
77
77
  <div class="org-info">
78
- <strong :title="org.username" class="is-ellipsis-1">{{ org.username }}</strong>
78
+ <strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{ org.username }}</strong>
79
79
  <p>
80
80
  {{
81
81
  org.isPersonalAccount
@@ -174,11 +174,17 @@ export default defineComponent({
174
174
  methods: {
175
175
  toggleList() {
176
176
  this.dropDownStatus = this.dropDownStatus === "open" ? "close" : "open";
177
+ this.$nextTick(() => {
178
+ this.$refs["dropdownItems"].$el.scrollTo(0, 0);
179
+ });
177
180
  },
178
181
  onOrganizationClick(orgName) {
179
182
  this.$refs["dropdownItems"].$el.scrollTo(0, 0);
180
183
  this.$emit("activeorg$set", orgName);
181
184
  },
185
+ onMouseLeave() {
186
+ this.dropDownStatus = "close";
187
+ }
182
188
  },
183
189
 
184
190
  watch: {
@@ -203,4 +209,7 @@ export default defineComponent({
203
209
  .ac-vscrollbar {
204
210
  overflow: auto !important;
205
211
  }
212
+ .line-break-anywhere {
213
+ line-break: anywhere;
214
+ }
206
215
  </style>
package/vue-components/v3/table/Table.vue CHANGED
@@ -41,16 +41,6 @@
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 !== 'Success'
48
- "
49
- :title="tableHeader.dashboard && tableHeader.dashboard.message"
50
- class="icon has-text-danger"
51
- >
52
- <i class="fa fa-exclamation-triangle" />
53
- </span>
54
44
  </th>
55
45
  <th
56
46
  ref="action-section"