diff --git a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget.vue b/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget.vue index 01e0eb52303afd2edec6f1b0544e8ff6373f49aa..66bd8909b53546bcdafb07ff87bd7c73ed8094d6 100644 --- a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget.vue +++ b/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget.vue @@ -229,7 +229,6 @@ export default { :header-text="headerText" :toggle-text="toggleText" :no-results-text="$options.i18n.noMatchingResults" - positioning-strategy="fixed" :items="listItems" :selected="localSelectedItem" :reset-button-label="resetButton" diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue index 575de918f9add2c4b3cdba71721b4642f2096df2..6e9e53ce0335f9ac5f28af5fe5b852b86e653e26 100644 --- a/app/assets/javascripts/work_items/components/work_item_actions.vue +++ b/app/assets/javascripts/work_items/components/work_item_actions.vue @@ -483,7 +483,7 @@ export default { @action="handleDelete" > <template #list-item> - <span class="gl-font-bold gl-text-danger">{{ i18n.deleteWorkItem }}</span> + <span class="gl-text-danger">{{ i18n.deleteWorkItem }}</span> </template> </gl-disclosure-dropdown-item> </template> diff --git a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue index dc5f00d560349b831e2020e2a200bd69e7debf09..1c8212065cf56af1a81c729763bca163127ff301 100644 --- a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue +++ b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue @@ -182,7 +182,7 @@ export default { <div class="work-item-attributes-wrapper"> <template v-if="workItemAssignees"> <work-item-assignees - class="js-assignee gl-mb-5" + class="js-assignee work-item-attributes-item" :can-update="canUpdate" :full-path="fullPath" :work-item-id="workItem.id" @@ -200,7 +200,7 @@ export default { </template> <template v-if="workItemLabels"> <work-item-labels - class="js-labels gl-mb-5" + class="js-labels work-item-attributes-item" :can-update="canUpdate" :full-path="fullPath" :work-item-id="workItem.id" @@ -212,7 +212,7 @@ export default { </template> <template v-if="isWorkItemWeightEditable"> <work-item-weight - class="gl-mb-5" + class="work-item-attributes-item" :can-update="canUpdate" :weight="workItemWeight.weight" :work-item-id="workItem.id" @@ -223,6 +223,7 @@ export default { </template> <template v-if="workItemRolledupDates && showRolledupDates"> <work-item-rolledup-dates + class="work-item-attributes-item" :can-update="canUpdate" :full-path="fullPath" :due-date-is-fixed="workItemRolledupDates.dueDateIsFixed" @@ -238,7 +239,7 @@ export default { </template> <template v-if="workItemMilestone"> <work-item-milestone - class="js-milestone gl-mb-5" + class="js-milestone work-item-attributes-item" :full-path="fullPath" :work-item-id="workItem.id" :work-item-milestone="workItemMilestone.milestone" @@ -252,7 +253,7 @@ export default { </template> <template v-if="workItemIteration"> <work-item-iteration - class="gl-mb-5" + class="work-item-attributes-item" :full-path="fullPath" :iteration="workItemIteration.iteration" :can-update="canUpdate" @@ -267,6 +268,7 @@ export default { </template> <template v-if="workItemDueDate && !showRolledupDates"> <work-item-due-date + class="work-item-attributes-item" :can-update="canUpdate" :due-date="workItemDueDate.dueDate" :start-date="workItemDueDate.startDate" @@ -278,7 +280,7 @@ export default { </template> <template v-if="workItemProgress"> <work-item-progress - class="gl-mb-5" + class="work-item-attributes-item" :can-update="canUpdate" :progress="workItemProgress.progress" :work-item-id="workItem.id" @@ -288,7 +290,7 @@ export default { </template> <template v-if="workItemHealthStatus"> <work-item-health-status - class="gl-mb-5" + class="work-item-attributes-item" :work-item-id="workItem.id" :work-item-iid="workItem.iid" :work-item-type="workItemType" @@ -298,7 +300,7 @@ export default { </template> <template v-if="workItemColor"> <work-item-color - class="gl-mb-5" + class="work-item-attributes-item" :work-item="workItem" :full-path="fullPath" :can-update="canUpdate" @@ -307,7 +309,7 @@ export default { </template> <template v-if="workItemHierarchy && showParent"> <work-item-parent - class="gl-border-t gl-mb-5 gl-border-gray-50 gl-pt-5" + class="work-item-attributes-item" :can-update="canUpdate" :work-item-id="workItem.id" :work-item-type="workItemType" @@ -325,7 +327,7 @@ export default { /> <work-item-time-tracking v-if="workItemTimeTracking" - class="gl-border-t gl-mb-5 gl-border-gray-50 gl-pt-5" + class="work-item-attributes-item" :can-update="canUpdate" :time-estimate="workItemTimeTracking.timeEstimate" :timelogs="workItemTimeTracking.timelogs.nodes" @@ -345,7 +347,7 @@ export default { </template> <participants v-if="workItemParticipants.length" - class="gl-border-t gl-mb-5 gl-border-gray-50 gl-pt-5" + class="work-item-attributes-item" :participants="workItemParticipants" /> </div> diff --git a/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue b/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue index ed6345f580977a6580a7001eb5200cdc803c0645..9356112ae69a9dfa3900524188a4fda083e50652 100644 --- a/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue +++ b/app/assets/javascripts/work_items/components/work_item_development/work_item_development.vue @@ -138,51 +138,49 @@ export default { }; </script> <template> - <div> - <gl-loading-icon v-if="isLoading" class="gl-my-2" /> - <div v-if="shouldShowDevWidget" class="gl-border-t gl-mb-5 gl-border-gray-50 gl-pt-5"> - <div class="gl-flex gl-items-center gl-justify-between gl-gap-3"> - <h3 - class="gl-heading-5 !gl-mb-0 gl-flex gl-items-center gl-gap-2" - data-testid="dev-widget-label" - > - {{ $options.i18n.development }} - <gl-button - v-if="showAutoCloseInformation" - v-gl-tooltip - class="!gl-p-0 hover:!gl-bg-transparent" - category="tertiary" - :title="tooltipText" - :aria-label="tooltipText" - data-testid="more-information" - > - <gl-icon name="information-o" class="!gl-text-blue-500" /> - </gl-button> - </h3> + <gl-loading-icon v-if="isLoading" class="gl-my-2" /> + <div v-else-if="shouldShowDevWidget" class="work-item-attributes-item"> + <div class="gl-flex gl-items-center gl-justify-between gl-gap-3"> + <h3 + class="gl-heading-5 !gl-mb-0 gl-flex gl-items-center gl-gap-2" + data-testid="dev-widget-label" + > + {{ $options.i18n.development }} <gl-button - v-if="showAddButton" - v-gl-modal="$options.createMRModalId" - v-gl-tooltip.top + v-if="showAutoCloseInformation" + v-gl-tooltip + class="!gl-p-0 hover:!gl-bg-transparent" category="tertiary" - icon="plus" - size="small" - data-testid="add-item" - :title="__('Add branch or merge request')" - :aria-label="__('Add branch or merge request')" - /> - </div> - <template v-if="isRelatedDevelopmentListEmpty"> - <span v-if="!canUpdate" class="gl-text-secondary">{{ __('None') }}</span> - <template v-else> - <gl-button category="secondary" size="small" data-testid="create-mr-button">{{ - $options.i18n.createMergeRequest - }}</gl-button> - <gl-button category="tertiary" size="small" data-testid="create-branch-button">{{ - $options.i18n.createBranch - }}</gl-button> - </template> - </template> - <work-item-development-relationship-list v-else :work-item-dev-widget="workItemDevelopment" /> + :title="tooltipText" + :aria-label="tooltipText" + data-testid="more-information" + > + <gl-icon name="information-o" class="!gl-text-blue-500" /> + </gl-button> + </h3> + <gl-button + v-if="showAddButton" + v-gl-modal="$options.createMRModalId" + v-gl-tooltip.top + category="tertiary" + icon="plus" + size="small" + data-testid="add-item" + :title="__('Add branch or merge request')" + :aria-label="__('Add branch or merge request')" + /> </div> + <template v-if="isRelatedDevelopmentListEmpty"> + <span v-if="!canUpdate" class="gl-text-secondary">{{ __('None') }}</span> + <template v-else> + <gl-button category="secondary" size="small" data-testid="create-mr-button">{{ + $options.i18n.createMergeRequest + }}</gl-button> + <gl-button category="tertiary" size="small" data-testid="create-branch-button">{{ + $options.i18n.createBranch + }}</gl-button> + </template> + </template> + <work-item-development-relationship-list v-else :work-item-dev-widget="workItemDevelopment" /> </div> </template> diff --git a/app/assets/javascripts/work_items/components/work_item_due_date.vue b/app/assets/javascripts/work_items/components/work_item_due_date.vue index 27f80a5cafc5cf4d5f81e69a68619bef628b66eb..4f52a7bf648ea82adc65d121abebe4a1110e1b45 100644 --- a/app/assets/javascripts/work_items/components/work_item_due_date.vue +++ b/app/assets/javascripts/work_items/components/work_item_due_date.vue @@ -217,7 +217,7 @@ export default { </script> <template> - <section class="gl-pb-4" data-testid="work-item-start-due-dates"> + <section data-testid="work-item-start-due-dates"> <div class="gl-flex gl-items-center gl-gap-3"> <h3 :class="{ 'gl-sr-only': isEditing }" class="gl-heading-5 !gl-mb-0"> {{ $options.i18n.dates }} diff --git a/app/assets/javascripts/work_items/components/work_item_time_tracking.vue b/app/assets/javascripts/work_items/components/work_item_time_tracking.vue index 3d0b708a29f75636673c20781abaf1a8deecf31f..023ce117a2509826635bc076355b7eb17c803b67 100644 --- a/app/assets/javascripts/work_items/components/work_item_time_tracking.vue +++ b/app/assets/javascripts/work_items/components/work_item_time_tracking.vue @@ -125,12 +125,11 @@ export default { <div class="gl-flex gl-items-center gl-gap-2 gl-text-sm" data-testid="time-tracking-body"> <template v-if="totalTimeSpent || timeEstimate"> - <span class="gl-text-secondary">{{ s__('TimeTracking|Spent') }}</span> + <span class="gl-text-subtle">{{ s__('TimeTracking|Spent') }}</span> <gl-button v-if="canUpdate" v-gl-modal="'time-tracking-report'" v-gl-tooltip="s__('TimeTracking|View time tracking report')" - class="!gl-text-sm" variant="link" > {{ humanTotalTimeSpent }} @@ -145,12 +144,11 @@ export default { :value="timeRemainingPercent" :variant="progressBarVariant" /> - <span class="gl-text-secondary">{{ s__('TimeTracking|Estimate') }}</span> + <span class="gl-text-subtle">{{ s__('TimeTracking|Estimate') }}</span> <gl-button v-if="canUpdate" v-gl-modal="$options.setTimeEstimateModalId" v-gl-tooltip="s__('TimeTracking|Set estimate')" - class="!gl-text-sm" variant="link" > {{ humanTimeEstimate }} @@ -162,18 +160,18 @@ export default { <gl-button v-else-if="canUpdate" v-gl-modal="$options.setTimeEstimateModalId" - class="gl-ml-auto !gl-text-sm" + class="gl-ml-auto" variant="link" > {{ s__('TimeTracking|Add estimate') }} </gl-button> </template> - <span v-else-if="canUpdate" class="gl-text-secondary"> + <span v-else-if="canUpdate" class="gl-text-subtle"> <gl-sprintf :message="$options.i18n.addTimeTrackingMessage"> <template #estimate="{ content }"> <gl-button v-gl-modal="$options.setTimeEstimateModalId" - class="gl-align-baseline !gl-text-sm" + class="gl-align-baseline" variant="link" > {{ content }} @@ -182,7 +180,7 @@ export default { <template #timeSpent="{ content }"> <gl-button v-gl-modal="$options.createTimelogModalId" - class="gl-align-baseline !gl-text-sm" + class="gl-align-baseline" variant="link" > {{ content }} @@ -190,7 +188,7 @@ export default { </template> </gl-sprintf> </span> - <span v-else class="gl-text-secondary"> + <span v-else class="gl-text-subtle"> {{ __('No estimate or time spent') }} </span> </div> diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index db3c26f2691b6c8504c5a0e095b66cc83bc999b1..3fecc4e2fc69f1f2d1db9d680b1c99feedbb0b2d 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -235,7 +235,7 @@ z-index: 1; position: relative; padding: $gl-padding-4 0; - + &.opened { color: $green-500; } @@ -243,7 +243,7 @@ &.closed { color: $blue-500; } - + svg { vertical-align: baseline; } @@ -411,7 +411,8 @@ .issuable-sidebar-header { @include clearfix; padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5; - border-bottom: 1px solid $border-color; + @apply gl-border-b; + @apply gl-border-subtle; // This prevents the mess when resizing the sidebar // of elements repositioning themselves.. width: $right-sidebar-inner-width; @@ -506,7 +507,7 @@ top: calc(#{$calc-application-header-height} + #{$mr-sticky-header-height}); height: calc(#{$calc-application-viewport-height} - #{$mr-sticky-header-height} - var(--mr-review-bar-height)); position: sticky; - padding: 0 15px; + padding: 0 $gl-spacing-scale-3; margin-bottom: calc((#{$content-wrapper-padding} * -1) + var(--mr-review-bar-height)); overflow-y: auto; overscroll-behavior: contain; diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss index 598479e856ca997ff256ad80b7307910ef275a49..f067c1aa2c57ac360b8e9cac21b635ac5daa4f71 100644 --- a/app/assets/stylesheets/page_bundles/project.scss +++ b/app/assets/stylesheets/page_bundles/project.scss @@ -170,26 +170,19 @@ .project-page-layout-sidebar { order: 2; - overflow-x: clip; - margin-right: -$gl-padding-8; } .project-page-sidebar { position: sticky; top: calc(#{$calc-application-header-height} + #{$gl-spacing-scale-4}); - width: calc(100% + 100px); + width: 100%; height: calc( #{$calc-application-viewport-height} - #{$gl-spacing-scale-4} ); - padding-inline: $gl-padding-4; + padding-inline: $gl-spacing-scale-3; padding-block-end: $gl-spacing-scale-11; - overflow-y: scroll; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; - - .project-page-sidebar-block { - width: $right-sidebar-width - 1px; - } + overflow-y: auto; + overscroll-behavior: contain; .nav { > li { diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index 4a18009fff111baad53c7f488934cd5be20377d7..6b6f68a5f3d280ccdd7177377eaeb71a078526a2 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -2,7 +2,7 @@ @import './notes/system_notes_v2'; $work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important; -$work-item-overview-right-sidebar-width: 20rem; +$work-item-overview-right-sidebar-width: px-to-rem(290px); $work-item-sticky-header-height: 52px; $work-item-overview-gap-width: 2rem; @@ -62,6 +62,16 @@ $work-item-overview-gap-width: 2rem; .work-item-overview-right-sidebar { margin-top: $gl-spacing-scale-5; + + .work-item-attributes-item { + @apply gl-mb-4; + + &:not(:first-child) { + @apply gl-pt-4; + @apply gl-border-t; + @apply gl-border-subtle; + } + } } @include container-and-media("min-width: #{calc($breakpoint-md)}") { @@ -69,7 +79,7 @@ $work-item-overview-gap-width: 2rem; top: calc(#{$calc-application-header-height} + #{$work-item-sticky-header-height}); height: calc(#{$calc-application-viewport-height} - #{$work-item-sticky-header-height}); margin-bottom: calc(#{$content-wrapper-padding} * -1); - padding-inline: 0.5rem; + padding-inline: $gl-spacing-scale-3; position: sticky; overflow-y: auto; overflow-x: hidden; @@ -261,7 +271,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem; // stylelint-disable-next-line gitlab/no-gl-class .work-item-sidebar-dropdown .gl-new-dropdown-panel { width: 100% !important; - max-width: 19rem !important; + max-width: 17rem !important; } .container-limited { diff --git a/ee/app/assets/javascripts/work_items/components/work_item_rolledup_dates.vue b/ee/app/assets/javascripts/work_items/components/work_item_rolledup_dates.vue index 0f9125a84c281147f694b68f24a60227925c8dd0..77d723aa1ee74dbca90fbd93720bc4bcd9b3c7e3 100644 --- a/ee/app/assets/javascripts/work_items/components/work_item_rolledup_dates.vue +++ b/ee/app/assets/javascripts/work_items/components/work_item_rolledup_dates.vue @@ -349,7 +349,7 @@ export default { </script> <template> - <section class="gl-pb-4" data-testid="work-item-rolledup-dates"> + <section data-testid="work-item-rolledup-dates"> <div class="gl-flex gl-items-center gl-gap-3"> <h3 :class="{ 'gl-sr-only': isEditing }" class="gl-heading-5 !gl-mb-0"> {{ $options.i18n.dates }}