diff options
author | Dennis Tang <dtang@gitlab.com> | 2019-03-26 00:03:48 +0000 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2019-06-24 13:05:21 +0200 |
commit | 7a4b15214a64478adad96bca1d4d63cc1755abfc (patch) | |
tree | f859e22c6222bb699a409ebced5f69267cd0abc8 /app/assets/javascripts/groups/components/group_item.vue | |
parent | 88c8d177f835983a0a47796529906c69376d159d (diff) | |
download | gitlab-ce-7a4b15214a64478adad96bca1d4d63cc1755abfc.tar.gz |
Improve group list UI
This updates the groups list UI to match the style of the project list:
- New layout
- Improve loading state when loading group children
- Larger, responsive text
- Icon and text colors changed to secondary
- Smaller button sizes
- Content list description colors were standardized to body text
Diffstat (limited to 'app/assets/javascripts/groups/components/group_item.vue')
-rw-r--r-- | app/assets/javascripts/groups/components/group_item.vue | 77 |
1 files changed, 53 insertions, 24 deletions
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index d5130cd331d..9909f437fc8 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -1,12 +1,15 @@ <script> +import { GlLoadingIcon } from '@gitlab/ui'; import { visitUrl } from '../../lib/utils/url_utility'; import tooltip from '../../vue_shared/directives/tooltip'; import identicon from '../../vue_shared/components/identicon.vue'; import eventHub from '../event_hub'; +import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '../constants'; import itemCaret from './item_caret.vue'; import itemTypeIcon from './item_type_icon.vue'; import itemStats from './item_stats.vue'; +import itemStatsValue from './item_stats_value.vue'; import itemActions from './item_actions.vue'; export default { @@ -14,10 +17,12 @@ export default { tooltip, }, components: { + GlLoadingIcon, identicon, itemCaret, itemTypeIcon, itemStats, + itemStatsValue, itemActions, }, props: { @@ -57,6 +62,12 @@ export default { isGroup() { return this.group.type === 'group'; }, + visibilityIcon() { + return VISIBILITY_TYPE_ICON[this.group.visibility]; + }, + visibilityTooltip() { + return GROUP_VISIBILITY_TYPE[this.group.visibility]; + }, }, methods: { onClickRowGroup(e) { @@ -80,43 +91,61 @@ export default { <li :id="groupDomId" :class="rowClass" class="group-row" @click.stop="onClickRowGroup"> <div :class="{ 'project-row-contents': !isGroup }" - class="group-row-contents d-flex justify-content-end align-items-center" + class="group-row-contents d-flex align-items-center" > <div class="folder-toggle-wrap append-right-4 d-flex align-items-center"> <item-caret :is-group-open="group.isOpen" /> <item-type-icon :item-type="group.type" :is-group-open="group.isOpen" /> </div> + <gl-loading-icon + v-if="group.isChildrenLoading" + size="md" + class="d-none d-sm-inline-flex flex-shrink-0 append-right-10" + /> <div - :class="{ 'content-loading': group.isChildrenLoading }" - class="avatar-container rect-avatar s24 d-none d-sm-flex" + :class="{ 'd-sm-flex': !group.isChildrenLoading }" + class="avatar-container rect-avatar s32 d-none flex-grow-0 flex-shrink-0 " > <a :href="group.relativePath" class="no-expand"> - <img v-if="hasAvatar" :src="group.avatarUrl" class="avatar s24" /> - <identicon v-else :entity-id="group.id" :entity-name="group.name" size-class="s24" /> + <img v-if="hasAvatar" :src="group.avatarUrl" class="avatar s32" /> + <identicon v-else :entity-id="group.id" :entity-name="group.name" size-class="s32" /> </a> </div> - <div class="group-text flex-grow"> - <div class="title namespace-title append-right-8"> - <a - v-tooltip - :href="group.relativePath" - :title="group.fullName" - class="no-expand" - data-placement="bottom" - >{{ - // ending bracket must be by closing tag to prevent - // link hover text-decoration from over-extending - group.name - }}</a - > - <span v-if="group.permission" class="user-access-role"> {{ group.permission }} </span> + <div class="group-text-container d-flex flex-fill align-items-center"> + <div class="group-text flex-grow-1 flex-shrink-1"> + <div class="d-flex align-items-center flex-wrap title namespace-title append-right-8"> + <a + v-tooltip + :href="group.relativePath" + :title="group.fullName" + class="no-expand prepend-top-8 append-right-8" + data-placement="bottom" + >{{ + // ending bracket must be by closing tag to prevent + // link hover text-decoration from over-extending + group.name + }}</a + > + <item-stats-value + :icon-name="visibilityIcon" + :title="visibilityTooltip" + css-class="item-visibility d-inline-flex align-items-center prepend-top-8 append-right-4" + /> + <span v-if="group.permission" class="user-access-role prepend-top-8"> + {{ group.permission }} + </span> + </div> + <div v-if="group.description" class="description"> + <span v-html="group.description"> </span> + </div> </div> - <div v-if="group.description" class="description"> - <span v-html="group.description"> </span> + <div + class="metadata align-items-md-center d-flex flex-grow-1 flex-shrink-0 flex-wrap justify-content-md-between" + > + <item-actions v-if="isGroup" :group="group" :parent-group="parentGroup" /> + <item-stats :item="group" class="group-stats prepend-top-2 d-none d-md-flex" /> </div> </div> - <item-stats :item="group" class="group-stats prepend-top-2" /> - <item-actions v-if="isGroup" :group="group" :parent-group="parentGroup" /> </div> <group-folder v-if="group.isOpen && hasChildren" |