diff options
Diffstat (limited to 'app/assets/javascripts/work_items/components/work_item_detail.vue')
| -rw-r--r-- | app/assets/javascripts/work_items/components/work_item_detail.vue | 114 |
1 files changed, 70 insertions, 44 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue index c8ea2a12038..45d3aa564a5 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail.vue @@ -50,7 +50,6 @@ import WorkItemDescription from './work_item_description.vue'; import WorkItemNotes from './work_item_notes.vue'; import WorkItemDetailModal from './work_item_detail_modal.vue'; import WorkItemAwardEmoji from './work_item_award_emoji.vue'; -import WorkItemStateToggleButton from './work_item_state_toggle_button.vue'; import WorkItemRelationships from './work_item_relationships/work_item_relationships.vue'; import WorkItemTypeIcon from './work_item_type_icon.vue'; @@ -61,7 +60,6 @@ export default { }, isLoggedIn: isLoggedIn(), components: { - WorkItemStateToggleButton, GlAlert, GlButton, GlLoadingIcon, @@ -274,6 +272,18 @@ export default { showWorkItemLinkedItems() { return this.hasLinkedWorkItems && this.workItemLinkedItems; }, + titleClassHeader() { + return { + 'gl-sm-display-none!': this.parentWorkItem, + 'gl-w-full': !this.parentWorkItem, + }; + }, + titleClassComponent() { + return { + 'gl-sm-display-block!': !this.parentWorkItem, + 'gl-display-none gl-sm-display-block!': this.parentWorkItem, + }; + }, }, mounted() { if (this.modalWorkItemIid) { @@ -409,7 +419,20 @@ export default { </gl-skeleton-loader> </div> <template v-else> - <div class="gl-display-flex gl-align-items-center"> + <div class="gl-sm-display-none! gl-display-flex"> + <gl-button + v-if="isModal" + class="gl-ml-auto" + category="tertiary" + data-testid="work-item-close" + icon="close" + :aria-label="__('Close')" + @click="$emit('close')" + /> + </div> + <div + class="gl-display-block gl-sm-display-flex! gl-align-items-flex-start gl-flex-direction-column gl-sm-flex-direction-row gl-gap-3 gl-pt-3" + > <ul v-if="parentWorkItem" class="list-unstyled gl-display-flex gl-min-w-0 gl-mr-auto gl-mb-0 gl-z-index-0" @@ -440,53 +463,55 @@ export default { </li> </ul> <div - v-else-if="!error && !workItemLoading" - class="gl-mr-auto" + v-if="!error && !workItemLoading" + :class="titleClassHeader" data-testid="work-item-type" > - <work-item-type-icon - :work-item-icon-name="workItemIconName" + <work-item-title + v-if="workItem.title" + ref="title" + class="gl-sm-display-block!" + :work-item-id="workItem.id" + :work-item-title="workItem.title" :work-item-type="workItemType" - show-text + :work-item-parent-id="workItemParentId" + :can-update="canUpdate" + @error="updateError = $event" + /> + </div> + <div class="detail-page-header-actions gl-display-flex gl-align-self-start gl-gap-3"> + <work-item-todos + v-if="showWorkItemCurrentUserTodos" + :work-item-id="workItem.id" + :work-item-iid="workItemIid" + :work-item-fullpath="projectFullPath" + :current-user-todos="currentUserTodos" + @error="updateError = $event" + /> + <work-item-actions + :full-path="fullPath" + :work-item-id="workItem.id" + :subscribed-to-notifications="workItemNotificationsSubscribed" + :work-item-type="workItemType" + :work-item-type-id="workItemTypeId" + :can-delete="canDelete" + :can-update="canUpdate" + :is-confidential="workItem.confidential" + :is-parent-confidential="parentWorkItemConfidentiality" + :work-item-reference="workItem.reference" + :work-item-create-note-email="workItem.createNoteEmail" + :is-modal="isModal" + :work-item-state="workItem.state" + :work-item-parent-id="workItemParentId" + @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })" + @toggleWorkItemConfidentiality="toggleConfidentiality" + @error="updateError = $event" + @promotedToObjective="$emit('promotedToObjective', workItemIid)" /> - {{ workItemBreadcrumbReference }} </div> - <work-item-state-toggle-button - v-if="canUpdate" - :work-item-id="workItem.id" - :work-item-state="workItem.state" - :work-item-parent-id="workItemParentId" - :work-item-type="workItemType" - @error="updateError = $event" - /> - <work-item-todos - v-if="showWorkItemCurrentUserTodos" - :work-item-id="workItem.id" - :work-item-iid="workItemIid" - :work-item-fullpath="projectFullPath" - :current-user-todos="currentUserTodos" - @error="updateError = $event" - /> - <work-item-actions - :full-path="fullPath" - :work-item-id="workItem.id" - :subscribed-to-notifications="workItemNotificationsSubscribed" - :work-item-type="workItemType" - :work-item-type-id="workItemTypeId" - :can-delete="canDelete" - :can-update="canUpdate" - :is-confidential="workItem.confidential" - :is-parent-confidential="parentWorkItemConfidentiality" - :work-item-reference="workItem.reference" - :work-item-create-note-email="workItem.createNoteEmail" - :is-modal="isModal" - @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })" - @toggleWorkItemConfidentiality="toggleConfidentiality" - @error="updateError = $event" - @promotedToObjective="$emit('promotedToObjective', workItemIid)" - /> <gl-button v-if="isModal" + class="gl-display-none gl-sm-display-block!" category="tertiary" data-testid="work-item-close" icon="close" @@ -496,8 +521,9 @@ export default { </div> <div> <work-item-title - v-if="workItem.title" + v-if="workItem.title && parentWorkItem" ref="title" + :class="titleClassComponent" :work-item-id="workItem.id" :work-item-title="workItem.title" :work-item-type="workItemType" |