diff options
Diffstat (limited to 'app/assets/javascripts/work_items/components')
4 files changed, 34 insertions, 10 deletions
diff --git a/app/assets/javascripts/work_items/components/item_state.vue b/app/assets/javascripts/work_items/components/item_state.vue index 0b6c1a75bb2..69670d3471c 100644 --- a/app/assets/javascripts/work_items/components/item_state.vue +++ b/app/assets/javascripts/work_items/components/item_state.vue @@ -49,14 +49,28 @@ export default { </script> <template> - <gl-form-group :label="$options.i18n.status" :label-for="$options.labelId"> + <gl-form-group + :label="$options.i18n.status" + :label-for="$options.labelId" + label-cols="3" + label-cols-lg="2" + label-class="gl-pb-0!" + class="gl-align-items-center" + > <gl-form-select :id="$options.labelId" :value="state" :options="$options.states" :disabled="loading" - class="gl-w-auto" + class="gl-w-auto hide-select-decoration" @change="setState" /> </gl-form-group> </template> + +<style> +.hide-select-decoration:not(:focus, :hover) { + background-image: none; + box-shadow: none; +} +</style> diff --git a/app/assets/javascripts/work_items/components/item_title.vue b/app/assets/javascripts/work_items/components/item_title.vue index 232510b108d..ce2fa158596 100644 --- a/app/assets/javascripts/work_items/components/item_title.vue +++ b/app/assets/javascripts/work_items/components/item_title.vue @@ -40,18 +40,18 @@ export default { <template> <h2 - class="gl-font-weight-normal gl-sm-font-weight-bold gl-my-5 gl-display-inline-block" + class="gl-font-weight-normal gl-sm-font-weight-bold gl-my-5 gl-w-full" :class="{ 'gl-cursor-not-allowed': disabled }" aria-labelledby="item-title" > - <span + <div id="item-title" ref="titleEl" role="textbox" :aria-label="__('Title')" :data-placeholder="placeholder" :contenteditable="!disabled" - class="gl-pseudo-placeholder" + class="gl-pseudo-placeholder gl-px-4 gl-py-3 gl-ml-n4 gl-border gl-border-white gl-hover-border-gray-200 gl-rounded-base" @blur="handleBlur" @keyup="handleInput" @keydown.enter.exact="handleSubmit" @@ -59,7 +59,8 @@ export default { @keydown.meta.u.prevent @keydown.ctrl.b.prevent @keydown.meta.b.prevent - >{{ title }}</span > + {{ title }} + </div> </h2> </template> 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 d9e92ead86c..da8fe222b6a 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail.vue @@ -115,7 +115,7 @@ export default { </gl-skeleton-loader> </div> <template v-else> - <div class="gl-display-flex"> + <div class="gl-display-flex gl-align-items-start"> <work-item-title :work-item-id="workItem.id" :work-item-title="workItem.title" @@ -127,7 +127,7 @@ export default { <work-item-actions :work-item-id="workItem.id" :can-delete="canDelete" - class="gl-ml-auto gl-mt-5" + class="gl-ml-auto gl-mt-6" @deleteWorkItem="$emit('deleteWorkItem')" @error="error = $event" /> diff --git a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue index 425b8290d44..d1c8022ac57 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue @@ -98,7 +98,15 @@ export default { </script> <template> - <gl-modal ref="modal" hide-footer size="lg" modal-id="work-item-detail-modal" @hide="closeModal"> + <gl-modal + ref="modal" + hide-footer + size="lg" + modal-id="work-item-detail-modal" + header-class="gl-p-0 gl-pb-2!" + body-class="gl-pb-6!" + @hide="closeModal" + > <gl-alert v-if="error" variant="danger" @dismiss="error = false"> {{ error }} </gl-alert> @@ -106,6 +114,7 @@ export default { <work-item-detail :work-item-parent-id="issueGid" :work-item-id="workItemId" + class="gl-p-5 gl-mt-n3" @deleteWorkItem="deleteWorkItem" /> </gl-modal> @@ -114,7 +123,7 @@ export default { <style> /* hide the existing modal header */ -#work-item-detail-modal .modal-header { +#work-item-detail-modal .modal-header * { display: none; } </style> |