diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue | 46 |
1 files changed, 31 insertions, 15 deletions
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue index 2a999b908f9..ef31106b709 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue @@ -192,21 +192,33 @@ export default { </script> <template> - <div class="block alert-assignees"> - <div ref="assignees" class="sidebar-collapsed-icon" @click="$emit('toggle-sidebar')"> - <gl-icon name="user" :size="14" /> - <gl-loading-icon v-if="isUpdating" /> - </div> - <gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left"> - <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK"> - <template #assignees> - {{ userName }} - </template> - </gl-sprintf> - </gl-tooltip> + <div + class="alert-assignees gl-py-5 gl-w-70p" + :class="{ 'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100': !sidebarCollapsed }" + > + <template v-if="sidebarCollapsed"> + <div + ref="assignees" + class="gl-mb-6 gl-ml-6" + data-testid="assignees-icon" + @click="$emit('toggle-sidebar')" + > + <gl-icon name="user" /> + <gl-loading-icon v-if="isUpdating" /> + </div> + <gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left"> + <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK"> + <template #assignees> + {{ userName }} + </template> + </gl-sprintf> + </gl-tooltip> + </template> - <div class="hide-collapsed"> - <p class="title gl-display-flex gl-justify-content-space-between"> + <div v-else> + <p + class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between" + > {{ __('Assignee') }} <a v-if="isEditable" @@ -264,7 +276,11 @@ export default { </div> <gl-loading-icon v-if="isUpdating" :inline="true" /> - <div v-else-if="!isDropdownShowing" class="value gl-m-0" :class="{ 'no-value': !userName }"> + <div + v-else-if="!isDropdownShowing" + class="hide-collapsed value gl-m-0" + :class="{ 'no-value': !userName }" + > <div v-if="userName" class="gl-display-inline-flex gl-mt-2" data-testid="assigned-users"> <span class="gl-relative gl-mr-4"> <img |