summaryrefslogtreecommitdiff
path: root/app/assets/javascripts
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r--app/assets/javascripts/groups/components/group_item.vue77
-rw-r--r--app/assets/javascripts/groups/components/item_actions.vue28
-rw-r--r--app/assets/javascripts/groups/components/item_caret.vue2
-rw-r--r--app/assets/javascripts/groups/components/item_stats.vue8
-rw-r--r--app/assets/javascripts/groups/components/item_type_icon.vue2
5 files changed, 70 insertions, 47 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"
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index a7995865c77..cafd22731b1 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -44,31 +44,31 @@ export default {
</script>
<template>
- <div class="controls">
+ <div class="controls d-flex justify-content-end">
<a
- v-if="group.canEdit"
+ v-if="group.canLeave"
v-tooltip
- :href="group.editPath"
- :title="editBtnTitle"
- :aria-label="editBtnTitle"
+ :href="group.leavePath"
+ :title="leaveBtnTitle"
+ :aria-label="leaveBtnTitle"
data-container="body"
data-placement="bottom"
- class="edit-group btn no-expand"
+ class="leave-group btn btn-xs no-expand"
+ @click.prevent="onLeaveGroup"
>
- <icon name="settings" />
+ <icon name="leave" css-classes="position-top-0" />
</a>
<a
- v-if="group.canLeave"
+ v-if="group.canEdit"
v-tooltip
- :href="group.leavePath"
- :title="leaveBtnTitle"
- :aria-label="leaveBtnTitle"
+ :href="group.editPath"
+ :title="editBtnTitle"
+ :aria-label="editBtnTitle"
data-container="body"
data-placement="bottom"
- class="leave-group btn no-expand"
- @click.prevent="onLeaveGroup"
+ class="edit-group btn btn-xs no-expand"
>
- <icon name="leave" />
+ <icon name="settings" css-classes="position-top-0" />
</a>
</div>
</template>
diff --git a/app/assets/javascripts/groups/components/item_caret.vue b/app/assets/javascripts/groups/components/item_caret.vue
index 43b9607ea8e..18ea4819878 100644
--- a/app/assets/javascripts/groups/components/item_caret.vue
+++ b/app/assets/javascripts/groups/components/item_caret.vue
@@ -21,5 +21,5 @@ export default {
</script>
<template>
- <span class="folder-caret"> <icon :size="12" :name="iconClass" /> </span>
+ <span class="folder-caret append-right-4"> <icon :size="10" :name="iconClass" /> </span>
</template>
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index bc6851ea2bf..734a9a89c72 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -48,7 +48,7 @@ export default {
:title="__('Subgroups')"
:value="item.subgroupCount"
css-class="number-subgroups"
- icon-name="folder"
+ icon-name="folder-o"
/>
<item-stats-value
v-if="isGroup"
@@ -70,12 +70,6 @@ export default {
css-class="project-stars"
icon-name="star"
/>
- <item-stats-value
- :icon-name="visibilityIcon"
- :title="visibilityTooltip"
- css-class="item-visibility"
- tooltip-placement="left"
- />
<div v-if="isProject" class="last-updated">
<time-ago-tooltip :time="item.updatedAt" tooltip-placement="bottom" />
</div>
diff --git a/app/assets/javascripts/groups/components/item_type_icon.vue b/app/assets/javascripts/groups/components/item_type_icon.vue
index e1ebd03cb5f..ae69fbd7bde 100644
--- a/app/assets/javascripts/groups/components/item_type_icon.vue
+++ b/app/assets/javascripts/groups/components/item_type_icon.vue
@@ -20,7 +20,7 @@ export default {
computed: {
iconClass() {
if (this.itemType === ITEM_TYPE.GROUP) {
- return this.isGroupOpen ? 'folder-open' : 'folder';
+ return this.isGroupOpen ? 'folder-open' : 'folder-o';
}
return 'bookmark';
},