Commit 4dd3f4ea authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '334129-epic-board-sidebar-design-tweaks' into 'master'

Boards sidebar design tweaks

See merge request gitlab-org/gitlab!65297
parents f728fe61 241af67c
......@@ -87,6 +87,7 @@ export default {
v-bind="$attrs"
:open="isSidebarOpen"
class="boards-sidebar gl-absolute"
variant="sidebar"
@close="handleClose"
>
<template #title>
......
......@@ -87,7 +87,7 @@ export default {
<div>
<header
v-show="showHeader"
class="gl-display-flex gl-justify-content-space-between gl-align-items-flex-start gl-mb-3"
class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-mb-2"
>
<span class="gl-vertical-align-middle">
<slot name="title">
......@@ -97,7 +97,8 @@ export default {
</span>
<gl-button
v-if="canUpdate"
variant="link"
category="tertiary"
size="small"
class="gl-text-gray-900! gl-ml-5 js-sidebar-dropdown-toggle edit-link"
data-testid="edit-button"
@click="toggle"
......
......@@ -50,7 +50,7 @@ export default {
<gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
<a
v-if="editable"
class="js-sidebar-dropdown-toggle edit-link float-right"
class="js-sidebar-dropdown-toggle edit-link btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary float-right"
href="#"
data-test-id="edit-link"
data-track-event="click_edit_button"
......
......@@ -90,7 +90,7 @@ export default {
{{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
<a
v-if="isEditable"
class="float-right lock-edit"
class="float-right lock-edit btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary gl-mr-n2"
href="#"
data-testid="edit-link"
data-track-event="click_edit_button"
......
......@@ -33,6 +33,11 @@ export default {
required: false,
default: true,
},
lazy: {
type: Boolean,
required: false,
default: true,
},
},
data() {
return {
......@@ -95,7 +100,7 @@ export default {
<gl-loading-icon v-if="loading" size="sm" />
<span v-else data-testid="collapsed-count"> {{ participantCount }} </span>
</div>
<div v-if="showParticipantLabel" class="title hide-collapsed gl-mb-2">
<div v-if="showParticipantLabel" class="title hide-collapsed gl-mb-2 gl-line-height-20">
<gl-loading-icon v-if="loading" size="sm" :inline="true" />
{{ participantLabel }}
</div>
......@@ -107,7 +112,7 @@ export default {
>
<a :href="participant.web_url || participant.webUrl" class="author-link">
<user-avatar-image
:lazy="true"
:lazy="lazy"
:img-src="participant.avatar_url || participant.avatarUrl"
:size="24"
:tooltip-text="participant.name"
......
......@@ -64,6 +64,7 @@ export default {
:loading="isLoading"
:participants="participants"
:number-of-less-participants="7"
:lazy="false"
class="block participants"
/>
</template>
......@@ -38,7 +38,7 @@ export default {
<gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
<a
v-if="editable"
class="js-sidebar-dropdown-toggle edit-link float-right"
class="js-sidebar-dropdown-toggle edit-link btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary float-right"
href="#"
data-track-event="click_edit_button"
data-track-label="right_sidebar"
......
......@@ -132,8 +132,9 @@ export default {
<slot name="collapsed-right"></slot>
<gl-button
v-if="canUpdate && !initialLoading && canEdit"
variant="link"
class="gl-text-gray-900! gl-hover-text-blue-800! gl-ml-auto hide-collapsed"
category="tertiary"
size="small"
class="gl-text-gray-900! gl-ml-auto hide-collapsed gl-mr-n2"
data-testid="edit-button"
:data-track-event="tracking.event"
:data-track-label="tracking.label"
......
......@@ -28,8 +28,9 @@ export default {
<template v-if="allowLabelEdit">
<gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
<gl-button
variant="link"
class="float-right gl-text-gray-900! gl-hover-text-blue-800! js-sidebar-dropdown-toggle"
category="tertiary"
size="small"
class="float-right gl-text-gray-900! js-sidebar-dropdown-toggle gl-mr-n2"
data-qa-selector="labels_edit_button"
@click="toggleDropdownContents"
>
......
......@@ -28,8 +28,9 @@ export default {
<template v-if="allowLabelEdit">
<gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
<gl-button
variant="link"
class="float-right js-sidebar-dropdown-toggle"
category="tertiary"
size="small"
class="float-right js-sidebar-dropdown-toggle gl-mr-n2"
data-qa-selector="labels_edit_button"
@click="toggleDropdownContents"
>{{ __('Edit') }}</gl-button
......
......@@ -237,3 +237,7 @@
@include side-panel-toggle;
border-bottom: 1px solid $border-color;
}
.edit-link {
margin-right: -$gl-spacing-scale-2;
}
......@@ -476,6 +476,10 @@
.gl-drawer-header {
align-items: flex-start;
}
.labels-select-wrapper.is-embedded .labels-select-wrapper.is-embedded {
width: auto;
}
}
.board-header-collapsed-info-icon:hover {
......
......@@ -197,6 +197,10 @@
margin-bottom: -$gl-spacing-scale-3;
}
.gl-mr-n2 {
margin-right: -$gl-spacing-scale-2;
}
// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1408
$gl-line-height-42: px-to-rem(42px);
......
......@@ -55,6 +55,7 @@ export default {
v-bind="$attrs"
class="boards-sidebar gl-absolute"
:open="isSidebarOpen"
variant="sidebar"
@close="handleClose"
>
<template #title>
......
......@@ -156,10 +156,10 @@ export default {
<template>
<div :class="blockClass" class="block date">
<collapsed-calendar-icon :text="collapsedText" class="sidebar-collapsed-icon" />
<div class="title">
<div class="title gl-mb-2">
{{ label }}
<gl-loading-icon v-if="dateSaveInProgress" size="sm" :inline="true" />
<div class="float-right d-flex">
<div class="float-right gl-display-flex gl-align-items-center">
<gl-icon
ref="epicDatePopover"
name="question-o"
......@@ -181,8 +181,9 @@ export default {
<gl-button
v-show="canUpdate && !editing"
ref="editButton"
variant="link"
class="btn-sidebar-action"
category="tertiary"
size="small"
class="btn-sidebar-action gl-mr-n2"
@click="startEditing"
>
{{ __('Edit') }}
......
......@@ -73,7 +73,7 @@ export default {
<gl-tooltip :target="() => $refs.sidebarIcon" placement="left" boundary="viewport">
<span v-html="tooltipText"></span>
</gl-tooltip>
<div class="title hide-collapsed">{{ __('Ancestors') }}</div>
<div class="title hide-collapsed gl-mb-2">{{ __('Ancestors') }}</div>
<ul v-if="!isFetching && ancestors.length" class="vertical-timeline hide-collapsed">
<li v-for="(ancestor, id) in ancestors" :key="id" class="vertical-timeline-row d-flex">
......@@ -87,7 +87,7 @@ export default {
</ul>
<div v-if="!isFetching && !ancestors.length" class="value hide-collapsed">
<span class="no-value">{{ __('None') }}</span>
<span class="no-value gl-text-gray-500">{{ __('None') }}</span>
</div>
<gl-loading-icon v-if="isFetching" size="sm" />
......
......@@ -165,8 +165,9 @@ export default {
>
<gl-button
ref="editButton"
variant="link"
class="edit-link btn-link-hover gl-text-gray-900! gl-hover-text-blue-800!"
category="tertiary"
size="small"
class="edit-link btn-link-hover gl-text-gray-900!"
:disabled="!isOpen"
@click.stop="toggleFormDropdown"
@keydown.esc="hideDropdown"
......
......@@ -162,7 +162,7 @@ export default {
/>
<a
v-if="editable"
class="float-right edit-link js-weight-edit-link"
class="float-right edit-link btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary js-weight-edit-link"
data-qa-selector="edit_weight_link"
href="#"
@click.prevent="onEditClick(!shouldShowEditField)"
......
......@@ -25,7 +25,7 @@
}
}
.labels-select-dropdown-contents {
.labels-select-wrapper.is-embedded {
@include gl-left-0;
@include gl-shadow-x0-y2-b4-s0;
......
......@@ -61,6 +61,7 @@ exports[`Design management design index page renders design index 1`] = `
<participants-stub
class="gl-mb-4"
lazy="true"
numberoflessparticipants="7"
participants="[object Object]"
/>
......@@ -221,6 +222,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
<participants-stub
class="gl-mb-4"
lazy="true"
numberoflessparticipants="7"
participants="[object Object]"
/>
......
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