Skip to content

G
gitlab-ce
Commit a1e20551 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch 'epic-health-cosmetic-changes' into 'master' 

Cosmetic changes for Epic Health Status

See merge request gitlab-org/gitlab!29234
parents eaefbc5f 74594148
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 26 deletions
app/assets/javascripts/main.js
View file @ a1e20551
......@@ -298,6 +298,18 @@ document.addEventListener('DOMContentLoaded', () => {
if ($gutterIcon.hasClass('fa-angle-double-right')) {
$sidebarGutterToggle.trigger('click');
}
const sidebarGutterVueToggleEl = document.querySelector('.js-sidebar-vue-toggle');
// Sidebar has an icon which corresponds to collapsing the sidebar
// only then trigger the click.
if (sidebarGutterVueToggleEl) {
const collapseIcon = sidebarGutterVueToggleEl.querySelector('i.fa-angle-double-right');
if (collapseIcon) {
collapseIcon.click();
}
}
}
});
......
app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
View file @ a1e20551
......@@ -37,7 +37,7 @@ export default {
:title="tooltipLabel"
:class="cssClasses"
type="button"
class="btn btn-blank gutter-toggle btn-sidebar-action"
class="btn btn-blank gutter-toggle btn-sidebar-action js-sidebar-vue-toggle"
data-container="body"
data-placement="left"
data-boundary="viewport"
......
app/assets/stylesheets/components/related_items_list.scss
View file @ a1e20551
......@@ -73,6 +73,11 @@ $item-weight-max-width: 48px;
.issue-token-state-icon-closed {
display: none;
}
.sortable-link {
color: $gray-900;
font-weight: normal;
}
}
.item-path-id .path-id-text,
......@@ -249,6 +254,12 @@ $item-weight-max-width: 48px;
line-height: 0;
}
@include media-breakpoint-down(xs) {
.btn-sm.dropdown-toggle-split {
max-width: 40px;
}
}
@include media-breakpoint-up(sm) {
.item-info-area {
flex-basis: 100%;
......@@ -296,10 +307,6 @@ $item-weight-max-width: 48px;
.item-meta {
.item-meta-child {
flex-basis: unset;
~ .item-assignees {
margin-left: $gl-padding-4;
}
}
}
......@@ -353,7 +360,7 @@ $item-weight-max-width: 48px;
}
.item-title-wrapper {
max-width: calc(100% - 440px);
max-width: calc(100% - 500px);
}
.item-info-area {
......@@ -407,7 +414,7 @@ $item-weight-max-width: 48px;
}
}
@media only screen and (min-width: 1400px) {
@media only screen and (min-width: 1500px) {
.card-header,
.item-body {
.health-label-short {
......@@ -419,7 +426,9 @@ $item-weight-max-width: 48px;
}
}
.item-body .item-title-wrapper {
max-width: calc(100% - 570px);
.item-body {
.item-title-wrapper {
max-width: calc(100% - 640px);
}
}
}
ee/app/assets/javascripts/related_items_tree/components/epic_health_status.vue
View file @ a1e20551
......@@ -39,8 +39,10 @@ export default {
{{ healthStatus.issuesOnTrack }}
</span></span
>
<span class="ml-1 mr-2 text-secondary health-label-long">{{ __('issues on track') }}</span>
<span class="ml-1 mr-2 text-secondary text-truncate health-label-short">{{
<span class="ml-1 mr-1 mr-md-2 text-secondary health-label-long">{{
__('issues on track')
}}</span>
<span class="ml-1 mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
__('on track')
}}</span>
......@@ -49,10 +51,10 @@ export default {
{{ healthStatus.issuesNeedingAttention }}
</span></span
>
<span class="ml-1 mr-2 text-secondary health-label-long">{{
<span class="ml-1 mr-1 mr-md-2 text-secondary health-label-long">{{
__('issues need attention')
}}</span>
<span class="ml-1 mr-2 text-secondary text-truncate health-label-short">{{
<span class="ml-1 mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
__('need attention')
}}</span>
......
ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue
View file @ a1e20551
......@@ -159,7 +159,7 @@ export default {
<related-items-tree-header :class="{ 'border-bottom-0': itemsFetchResultEmpty }">
<issue-actions-split-button
slot="issueActions"
class="ml-1"
class="ml-0 ml-sm-1"
@showAddIssueForm="handleShowAddIssueForm"
@showCreateIssueForm="handleShowCreateIssueForm"
/>
......
ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue
View file @ a1e20551
......@@ -48,8 +48,8 @@ export default {
</script>
<template>
<div class="card-header d-flex px-2">
<div class="d-inline-flex flex-grow-1 lh-100 align-middle">
<div class="card-header d-flex px-2 flex-column flex-sm-row">
<div class="d-inline-flex flex-grow-1 lh-100 align-middle mb-2 mb-sm-0">
<gl-tooltip :target="() => $refs.countBadge">
<p v-if="allowSubEpics" class="font-weight-bold m-0">
{{ __('Epics') }} &#8226;
......@@ -74,7 +74,7 @@ export default {
</span>
</p>
</gl-tooltip>
<div ref="countBadge" class="issue-count-badge text-secondary">
<div ref="countBadge" class="issue-count-badge text-secondary p-0 pr-2">
<span v-if="allowSubEpics" class="d-inline-flex align-items-center">
<gl-icon name="epic" class="mr-1" />
{{ totalEpicsCount }}
......@@ -88,11 +88,11 @@ export default {
</div>
<epic-health-status v-if="healthStatus" :health-status="healthStatus" />
</div>
<div class="d-inline-flex js-button-container">
<div class="d-inline-flex flex-column flex-sm-row js-button-container">
<template v-if="parentItem.userPermissions.adminEpic">
<epic-actions-split-button
v-if="allowSubEpics"
class="qa-add-epics-button"
class="qa-add-epics-button mb-2 mb-sm-0"
@showAddEpicForm="showAddEpicForm"
@showCreateEpicForm="showCreateEpicForm"
/>
......
ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue
View file @ a1e20551
......@@ -149,7 +149,7 @@ export default {
>
<div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
<div class="d-flex flex-column flex-grow-1 item-title-wrapper">
<div class="item-title d-flex align-items-center mb-1 mb-xl-0">
<div class="item-title d-flex align-items-center mb-2 mb-xl-0">
<gl-icon
ref="stateIconMd"
:class="stateIconClass"
......@@ -172,7 +172,14 @@ export default {
name="eye-slash"
class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
/>
<gl-link :href="computedPath" class="sortable-link">{{ item.title }}</gl-link>
<gl-link
v-gl-tooltip.hover
:aria-label="item.title"
:title="item.title"
:href="computedPath"
class="sortable-link"
>{{ item.title }}</gl-link
>
</div>
</div>
......@@ -222,9 +229,7 @@ export default {
<issue-health-status v-else-if="isIssue" :health-status="item.healthStatus" />
</div>
<div
class="item-meta-child d-flex align-items-center order-0 flex-wrap mt-2 mt-md-0 flex-xl-nowrap"
>
<div class="item-meta-child d-flex align-items-center order-0 flex-wrap flex-xl-nowrap">
<!-- This bullet is for Milestone -->
<span v-if="item.healthStatus && hasMilestone" class="bullet-separator mr-2"
>&bull;</span
......@@ -276,7 +281,7 @@ export default {
<item-assignees
v-if="hasAssignees"
:assignees="item.assignees"
class="item-assignees d-inline-flex align-items-center align-self-end mr-2 mt-2 mt-md-0 mt-xl-0 mr-xl-1 mb-md-0 order-2 flex-xl-grow-0"
class="item-assignees d-inline-flex align-items-center align-self-end mr-2 mr-xl-1 mb-md-0 order-2 flex-xl-grow-0"
/>
</div>
<gl-deprecated-button
......
ee/app/assets/stylesheets/components/related_items_tree.scss
View file @ a1e20551
......@@ -49,7 +49,7 @@
}
.tree-item-noexpand {
margin-left: $gl-sidebar-padding;
margin-left: $gl-sidebar-padding - 2;
}
.loading-icon {
......
ee/changelogs/unreleased/epic-health-cosmetic-changes.yml 0 → 100644
View file @ a1e20551
---
title: Cosmetic changes for Epic Health Status
merge_request: 29234
author:
type: changed
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7