Commit 506afd5f authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'boards-stylelint' into 'master'

Fix stylelint rules in boards.scss

Closes #59895

See merge request gitlab-org/gitlab-ce!27458
parents 3b483ed3 86d4aec8
...@@ -60,11 +60,15 @@ export default { ...@@ -60,11 +60,15 @@ export default {
</script> </script>
<template> <template>
<div class="board-blank-state"> <div class="board-blank-state p-3">
<p>Add the following default lists to your Issue Board with one click:</p> <p>Add the following default lists to your Issue Board with one click:</p>
<ul class="board-blank-state-list"> <ul class="list-unstyled board-blank-state-list">
<li v-for="(label, index) in predefinedLabels" :key="index"> <li v-for="(label, index) in predefinedLabels" :key="index">
<span :style="{ backgroundColor: label.color }" class="label-color"> </span> <span
:style="{ backgroundColor: label.color }"
class="label-color position-relative d-inline-block rounded"
>
</span>
{{ label.title }} {{ label.title }}
</li> </li>
</ul> </ul>
......
...@@ -83,7 +83,7 @@ export default { ...@@ -83,7 +83,7 @@ export default {
}" }"
:index="index" :index="index"
:data-issue-id="issue.id" :data-issue-id="issue.id"
class="board-card" class="board-card position-relative p-3 rounded"
@mousedown="mouseDown" @mousedown="mouseDown"
@mousemove="mouseMove" @mousemove="mouseMove"
@mouseup="showIssue($event)" @mouseup="showIssue($event)"
......
...@@ -221,7 +221,10 @@ export default { ...@@ -221,7 +221,10 @@ export default {
</script> </script>
<template> <template>
<div class="board-list-component"> <div
:class="{ 'd-none': !list.isExpanded, 'd-flex flex-column': list.isExpanded }"
class="board-list-component position-relative h-100"
>
<div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues"> <div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues">
<gl-loading-icon /> <gl-loading-icon />
</div> </div>
...@@ -236,7 +239,7 @@ export default { ...@@ -236,7 +239,7 @@ export default {
:data-board="list.id" :data-board="list.id"
:data-board-type="list.type" :data-board-type="list.type"
:class="{ 'is-smaller': showIssueForm }" :class="{ 'is-smaller': showIssueForm }"
class="board-list js-board-list" class="board-list w-100 h-100 list-unstyled mb-0 p-1 js-board-list"
> >
<board-card <board-card
v-for="(issue, index) in issues" v-for="(issue, index) in issues"
......
...@@ -95,7 +95,7 @@ export default { ...@@ -95,7 +95,7 @@ export default {
<template> <template>
<div class="board-new-issue-form"> <div class="board-new-issue-form">
<div class="board-card"> <div class="board-card position-relative p-3 rounded">
<form @submit="submit($event)"> <form @submit="submit($event)">
<div v-if="error" class="flash-container"> <div v-if="error" class="flash-container">
<div class="flash-alert">An error occurred. Please try again.</div> <div class="flash-alert">An error occurred. Please try again.</div>
......
...@@ -173,7 +173,7 @@ export default { ...@@ -173,7 +173,7 @@ export default {
</script> </script>
<template> <template>
<div> <div>
<div class="board-card-header"> <div class="d-flex board-card-header">
<h4 class="board-card-title append-bottom-0 prepend-top-0"> <h4 class="board-card-title append-bottom-0 prepend-top-0">
<icon <icon
v-if="issue.confidential" v-if="issue.confidential"
...@@ -214,11 +214,11 @@ export default { ...@@ -214,11 +214,11 @@ export default {
</div> </div>
<div class="board-card-footer d-flex justify-content-between align-items-end"> <div class="board-card-footer d-flex justify-content-between align-items-end">
<div <div
class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container" class="d-flex align-items-start flex-wrap-reverse board-card-number-container overflow-hidden js-board-card-number-container"
> >
<span <span
v-if="issue.referencePath" v-if="issue.referencePath"
class="board-card-number d-flex append-right-8 prepend-top-8" class="board-card-number overflow-hidden d-flex append-right-8 prepend-top-8"
> >
<tooltip-on-truncate <tooltip-on-truncate
v-if="issueReferencePath" v-if="issueReferencePath"
...@@ -235,7 +235,7 @@ export default { ...@@ -235,7 +235,7 @@ export default {
/> />
</span> </span>
</div> </div>
<div class="board-card-assignee"> <div class="board-card-assignee d-flex">
<user-avatar-link <user-avatar-link
v-for="(assignee, index) in issue.assignees" v-for="(assignee, index) in issue.assignees"
v-if="shouldRenderAssignee(index)" v-if="shouldRenderAssignee(index)"
......
...@@ -82,7 +82,11 @@ export default { ...@@ -82,7 +82,11 @@ export default {
<template> <template>
<span> <span>
<span ref="issueDueDate" :class="cssClass" class="board-card-info card-number"> <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number">
<icon :class="{ 'text-danger': isPastDue, 'board-card-info-icon': true }" name="calendar" /> <icon
:class="{ 'text-danger': isPastDue }"
class="board-card-info-icon align-top"
name="calendar"
/>
<time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{ <time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
body body
}}</time> }}</time>
......
...@@ -28,7 +28,7 @@ export default { ...@@ -28,7 +28,7 @@ export default {
<template> <template>
<span> <span>
<span ref="issueTimeEstimate" class="board-card-info card-number"> <span ref="issueTimeEstimate" class="board-card-info card-number">
<icon name="hourglass" css-classes="board-card-info-icon" /><time <icon name="hourglass" css-classes="board-card-info-icon align-top" /><time
class="board-card-info-text" class="board-card-info-text"
>{{ timeEstimate }}</time >{{ timeEstimate }}</time
> >
......
...@@ -42,8 +42,8 @@ export default { ...@@ -42,8 +42,8 @@ export default {
</script> </script>
<template> <template>
<section class="empty-state"> <section class="empty-state d-flex mt-0 h-100">
<div class="row"> <div class="row w-100 my-auto mx-0">
<div class="col-12 col-md-6 order-md-last"> <div class="col-12 col-md-6 order-md-last">
<aside class="svg-content d-none d-md-block"><img :src="emptyStateSvg" /></aside> <aside class="svg-content d-none d-md-block"><img :src="emptyStateSvg" /></aside>
</div> </div>
......
...@@ -50,8 +50,8 @@ export default { ...@@ -50,8 +50,8 @@ export default {
</script> </script>
<template> <template>
<div> <div>
<header class="add-issues-header form-actions"> <header class="add-issues-header border-top-0 form-actions">
<h2> <h2 class="m-0">
Add issues Add issues
<button <button
type="button" type="button"
...@@ -65,7 +65,7 @@ export default { ...@@ -65,7 +65,7 @@ export default {
</h2> </h2>
</header> </header>
<modal-tabs v-if="!loading && issuesCount > 0" /> <modal-tabs v-if="!loading && issuesCount > 0" />
<div v-if="showSearch" class="add-issues-search append-bottom-10"> <div v-if="showSearch" class="d-flex append-bottom-10">
<modal-filters :store="filter" /> <modal-filters :store="filter" />
<button <button
ref="selectAllBtn" ref="selectAllBtn"
......
...@@ -143,8 +143,11 @@ export default { ...@@ -143,8 +143,11 @@ export default {
}; };
</script> </script>
<template> <template>
<div v-if="showAddIssuesModal" class="add-issues-modal"> <div
<div class="add-issues-container"> v-if="showAddIssuesModal"
class="add-issues-modal d-flex position-fixed position-top-0 position-bottom-0 position-left-0 position-right-0 h-100"
>
<div class="add-issues-container d-flex flex-column m-auto rounded">
<modal-header <modal-header
:project-id="projectId" :project-id="projectId"
:milestone-path="milestonePath" :milestone-path="milestonePath"
...@@ -161,8 +164,10 @@ export default { ...@@ -161,8 +164,10 @@ export default {
:new-issue-path="newIssuePath" :new-issue-path="newIssuePath"
:empty-state-svg="emptyStateSvg" :empty-state-svg="emptyStateSvg"
/> />
<section v-if="loading || filterLoading" class="add-issues-list text-center"> <section v-if="loading || filterLoading" class="add-issues-list d-flex h-100 text-center">
<div class="add-issues-list-loading"><gl-loading-icon /></div> <div class="add-issues-list-loading w-100 align-self-center">
<gl-loading-icon size="md" />
</div>
</section> </section>
<modal-footer /> <modal-footer />
</div> </div>
......
...@@ -117,7 +117,7 @@ export default { ...@@ -117,7 +117,7 @@ export default {
}; };
</script> </script>
<template> <template>
<section ref="list" class="add-issues-list add-issues-list-columns"> <section ref="list" class="add-issues-list add-issues-list-columns d-flex h-100">
<div <div
v-if="issuesCount > 0 && issues.length === 0" v-if="issuesCount > 0 && issues.length === 0"
class="empty-state add-issues-empty-state-filter text-center" class="empty-state add-issues-empty-state-filter text-center"
...@@ -129,7 +129,7 @@ export default { ...@@ -129,7 +129,7 @@ export default {
<div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent"> <div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent">
<div <div
:class="{ 'is-active': issue.selected }" :class="{ 'is-active': issue.selected }"
class="board-card" class="board-card position-relative p-3 rounded"
@click="toggleIssue($event, issue)" @click="toggleIssue($event, issue)"
> >
<issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" /> <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" />
......
[v-cloak] {
display: none;
}
.user-can-drag { .user-can-drag {
cursor: grab; cursor: grab;
} }
...@@ -40,35 +36,15 @@ ...@@ -40,35 +36,15 @@
margin: 0 8px 10px; margin: 0 8px 10px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid $dropdown-divider-bg; border-bottom: 1px solid $dropdown-divider-bg;
> p {
margin: 0;
font-size: 14px;
}
} }
.issue-boards-page { .issue-boards-page {
.content-wrapper { .content-wrapper {
padding-bottom: 0; padding-bottom: 0;
} }
.issues-details-filters {
display: flex;
}
.filter-form {
width: 100%;
}
}
.board-extra-actions {
font-size: 0;
white-space: nowrap;
} }
.boards-app { .boards-app {
position: relative;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
transition: width $sidebar-transition-duration; transition: width $sidebar-transition-duration;
width: 100%; width: 100%;
...@@ -79,17 +55,9 @@ ...@@ -79,17 +55,9 @@
} }
} }
.boards-app-loading {
width: 100%;
font-size: 34px;
}
.boards-list { .boards-list {
height: calc(100vh - #{$issue-board-list-difference-xs}); height: calc(100vh - #{$issue-board-list-difference-xs});
width: 100%;
padding: $gl-padding ($gl-padding / 2);
overflow-x: scroll; overflow-x: scroll;
white-space: nowrap;
min-height: 200px; min-height: 200px;
@include media-breakpoint-only(sm) { @include media-breakpoint-only(sm) {
...@@ -114,13 +82,7 @@ ...@@ -114,13 +82,7 @@
} }
.board { .board {
display: inline-block;
width: calc(85vw - 15px); width: calc(85vw - 15px);
height: 100%;
padding-right: ($gl-padding / 2);
padding-left: ($gl-padding / 2);
white-space: normal;
vertical-align: top;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
width: 400px; width: 400px;
...@@ -135,23 +97,7 @@ ...@@ -135,23 +97,7 @@
&.is-collapsed { &.is-collapsed {
width: 50px; width: 50px;
.board-header {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
button {
display: none;
}
}
.board-title { .board-title {
padding: 0;
border-bottom: 0;
justify-content: center;
> span { > span {
width: 100%; width: 100%;
margin-top: -12px; margin-top: -12px;
...@@ -167,34 +113,16 @@ ...@@ -167,34 +113,16 @@
left: 50%; left: 50%;
margin-left: -10px; margin-left: -10px;
} }
.board-list-component,
.issue-count-badge {
display: none;
}
}
&:not(.is-collapsed) {
.board-list-component {
display: flex;
flex-direction: column;
}
} }
} }
.board-inner { .board-inner {
position: relative;
height: 100%;
font-size: $issue-boards-font-size; font-size: $issue-boards-font-size;
background: $gray-light; background: $gray-light;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius-default;
flex: 1;
} }
.board-header { .board-header {
position: relative;
&.has-border::before { &.has-border::before {
border-top: 3px solid; border-top: 3px solid;
border-color: inherit; border-color: inherit;
...@@ -219,18 +147,9 @@ ...@@ -219,18 +147,9 @@
} }
} }
.board-inner-container {
border-bottom: 1px solid $border-color;
padding: $gl-padding;
}
.board-title { .board-title {
margin: 0;
padding: $gl-padding-8 $gl-padding;
font-size: 1em; font-size: 1em;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
display: flex;
align-items: center;
} }
.board-title-text { .board-title-text {
...@@ -239,10 +158,8 @@ ...@@ -239,10 +158,8 @@
.board-delete { .board-delete {
margin-right: 10px; margin-right: 10px;
padding: 0;
color: $gray-darkest; color: $gray-darkest;
background-color: transparent; background-color: transparent;
border: 0;
outline: 0; outline: 0;
&:hover { &:hover {
...@@ -252,7 +169,6 @@ ...@@ -252,7 +169,6 @@
.board-blank-state, .board-blank-state,
.board-promotion-state { .board-promotion-state {
padding: $gl-padding;
background-color: $white-light; background-color: $white-light;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
...@@ -260,35 +176,23 @@ ...@@ -260,35 +176,23 @@
} }
.board-blank-state-list { .board-blank-state-list {
list-style: none;
> li:not(:last-child) { > li:not(:last-child) {
margin-bottom: 8px; margin-bottom: 8px;
} }
.label-color { .label-color {
position: relative;
top: 2px; top: 2px;
display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 3px; margin-right: 3px;
border-radius: $border-radius-default;
} }
} }
.board-list-component { .board-list-component {
position: relative;
flex: 1;
min-height: 0; // firefox fix min-height: 0; // firefox fix
} }
.board-list { .board-list {
height: 100%;
width: 100%;
margin-bottom: 0;
padding: $gl-padding-4;
list-style: none;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
...@@ -299,13 +203,9 @@ ...@@ -299,13 +203,9 @@
} }
.board-card { .board-card {
position: relative;
padding: $gl-padding;
background: $white-light; background: $white-light;
border-radius: $border-radius-default;
border: 1px solid $gray-200; border: 1px solid $gray-200;
box-shadow: 0 1px 2px $issue-boards-card-shadow; box-shadow: 0 1px 2px $issue-boards-card-shadow;
list-style: none;
line-height: $gl-padding; line-height: $gl-padding;
&:not(:last-child) { &:not(:last-child) {
...@@ -333,10 +233,6 @@ ...@@ -333,10 +233,6 @@
} }
} }
svg {
vertical-align: top;
}
.confidential-icon { .confidential-icon {
color: $orange-600; color: $orange-600;
cursor: help; cursor: help;
...@@ -360,12 +256,7 @@ ...@@ -360,12 +256,7 @@
} }
} }
.board-card-header {
display: flex;
}
.board-card-assignee { .board-card-assignee {
display: flex;
margin-top: -$gl-padding-4; margin-top: -$gl-padding-4;
margin-bottom: -$gl-padding-4; margin-bottom: -$gl-padding-4;
...@@ -425,34 +316,16 @@ ...@@ -425,34 +316,16 @@
.board-card-number { .board-card-number {
font-size: $gl-font-size-xs; font-size: $gl-font-size-xs;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
overflow: hidden;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
font-size: $label-font-size; font-size: $label-font-size;
} }
} }
.board-card-number-container {
overflow: hidden;
}
.issue-boards-search {
width: 395px;
.form-control {
display: inline-block;
width: 210px;
}
}
.board-list-count { .board-list-count {
padding: 10px 0; padding: 10px 0;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
font-size: 13px; font-size: 13px;
> .fa {
margin-right: 5px;
}
} }
.board-new-issue-form { .board-new-issue-form {
...@@ -460,16 +333,9 @@ ...@@ -460,16 +333,9 @@
margin: 5px; margin: 5px;
} }
.page-with-contextual-sidebar.layout-page .issue-boards-sidebar { .issue-boards-sidebar {
.issuable-sidebar-header {
position: relative;
}
.gutter-toggle { .gutter-toggle {
position: absolute;
top: 0;
bottom: 15px; bottom: 15px;
right: 0;
width: 22px; width: 22px;
color: $gray-darkest; color: $gray-darkest;
...@@ -489,10 +355,6 @@ ...@@ -489,10 +355,6 @@
.issuable-header-text { .issuable-header-text {
@include overflow-break-word(); @include overflow-break-word();
padding-right: 35px; padding-right: 35px;
> strong {
font-weight: $gl-font-weight-bold;
}
} }
} }
...@@ -511,44 +373,25 @@ ...@@ -511,44 +373,25 @@
} }
.add-issues-modal { .add-issues-modal {
display: flex;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba($black, 0.3); background-color: rgba($black, 0.3);
z-index: 9999; z-index: 9999;
} }
.add-issues-container { .add-issues-container {
display: flex;
flex-direction: column;
width: 90vw; width: 90vw;
height: 85vh; height: 85vh;
max-width: 1100px; max-width: 1100px;
min-height: 500px; min-height: 500px;
margin: auto;
padding: 25px 15px 0; padding: 25px 15px 0;
background-color: $white-light; background-color: $white-light;
border-radius: $border-radius-default;
box-shadow: 0 2px 12px rgba($black, 0.5); box-shadow: 0 2px 12px rgba($black, 0.5);
.empty-state { .empty-state {
display: flex;
flex: 1;
margin-top: 0;
&.add-issues-empty-state-filter { &.add-issues-empty-state-filter {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
> .row {
width: 100%;
margin: auto 0;
}
.svg-content { .svg-content {
margin-top: -40px; margin-top: -40px;
} }
...@@ -557,25 +400,15 @@ ...@@ -557,25 +400,15 @@
.add-issues-header { .add-issues-header {
margin: -25px -15px -5px; margin: -25px -15px -5px;
border-top: 0;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
border-top-right-radius: $border-radius-default; border-top-right-radius: $border-radius-default;
border-top-left-radius: $border-radius-default; border-top-left-radius: $border-radius-default;
> h2 { > h2 {
margin: 0;
font-size: 18px; font-size: 18px;
} }
} }
.add-issues-search {
display: flex;
.issues-filters {
flex: 1;
}
}
.add-issues-list-column { .add-issues-list-column {
width: 100%; width: 100%;
...@@ -589,8 +422,6 @@ ...@@ -589,8 +422,6 @@
} }
.add-issues-list { .add-issues-list {
display: flex;
flex: 1;
padding-top: 3px; padding-top: 3px;
margin-left: -$gl-vert-padding; margin-left: -$gl-vert-padding;
margin-right: -$gl-vert-padding; margin-right: -$gl-vert-padding;
...@@ -607,14 +438,6 @@ ...@@ -607,14 +438,6 @@
} }
} }
.add-issues-list-loading {
align-self: center;
width: 100%;
padding-left: $gl-vert-padding;
padding-right: $gl-vert-padding;
font-size: 35px;
}
.add-issues-footer { .add-issues-footer {
margin: auto -15px 0; margin: auto -15px 0;
padding-left: 15px; padding-left: 15px;
...@@ -642,27 +465,6 @@ ...@@ -642,27 +465,6 @@
border-radius: 50%; border-radius: 50%;
} }
.modal-filters {
display: flex;
> .dropdown {
display: none;
margin-right: 10px;
@include media-breakpoint-up(sm) {
display: block;
}
}
.dropdown-menu-toggle {
width: 100px;
@include media-breakpoint-up(md) {
width: 140px;
}
}
}
.board-card-info { .board-card-info {
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
white-space: nowrap; white-space: nowrap;
......
...@@ -13,14 +13,14 @@ ...@@ -13,14 +13,14 @@
%script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal, show_sorting_dropdown: false %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal, show_sorting_dropdown: false
%script#js-board-promotion{ type: "text/x-template" }= render_if_exists "shared/promotions/promote_issue_board" %script#js-board-promotion{ type: "text/x-template" }= render_if_exists "shared/promotions/promote_issue_board"
#board-app.boards-app{ "v-cloak" => true, data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" } #board-app.boards-app.position-relative{ "v-cloak" => "true", data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
.d-none.d-sm-none.d-md-block .d-none.d-sm-none.d-md-block
= render 'shared/issuable/search_bar', type: :boards, board: board = render 'shared/issuable/search_bar', type: :boards, board: board
.boards-list .boards-list.w-100.py-3.px-2.text-nowrap
.boards-app-loading.text-center{ "v-if" => "loading" } .boards-app-loading.w-100.text-center{ "v-if" => "loading" }
= icon("spinner spin") = icon("spinner spin 2x")
%board{ "v-cloak" => true, %board{ "v-cloak" => "true",
"v-for" => "list in state.lists", "v-for" => "list in state.lists",
"ref" => "board", "ref" => "board",
":list" => "list", ":list" => "list",
......
.board{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }', .board.d-inline-block.h-100.px-2.align-top.ws-normal{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
":data-id" => "list.id" } ":data-id" => "list.id" }
.board-inner.d-flex.flex-column .board-inner.d-flex.flex-column.position-relative.h-100.rounded
%header.board-header{ ":class" => '{ "has-border": list.label && list.label.color }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", "@click" => "toggleExpanded($event)" } %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color, "position-relative": list.isExpanded, "position-absolute position-top-0 position-left-0 w-100 h-100": !list.isExpanded }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", "@click" => "toggleExpanded($event)" }
%h3.board-title.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset) }' } %h3.board-title.m-0.d-flex.align-items-center.py-2.px-3.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset), "p-0 border-bottom-0 justify-content-center": !list.isExpanded }' }
%i.fa.fa-fw.board-title-expandable-toggle{ "v-if": "list.isExpandable", %i.fa.fa-fw.board-title-expandable-toggle{ "v-if": "list.isExpandable",
":class": "{ \"fa-caret-down\": list.isExpanded, \"fa-caret-right\": !list.isExpanded }", ":class": "{ \"fa-caret-down\": list.isExpanded, \"fa-caret-right\": !list.isExpanded }",
"aria-hidden": "true" } "aria-hidden": "true" }
...@@ -31,9 +31,9 @@ ...@@ -31,9 +31,9 @@
%board-delete{ "inline-template" => true, %board-delete{ "inline-template" => true,
":list" => "list", ":list" => "list",
"v-if" => "!list.preset && list.id" } "v-if" => "!list.preset && list.id" }
%button.board-delete.has-tooltip.float-right{ type: "button", title: _("Delete list"), "aria-label" => _("Delete list"), data: { placement: "bottom" }, "@click.stop" => "deleteBoard" } %button.board-delete.p-0.border-0.has-tooltip.float-right{ type: "button", title: _("Delete list"), ":class": "{ 'd-none': !list.isExpanded }", "aria-label" => _("Delete list"), data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
= icon("trash") = icon("trash")
.issue-count-badge.text-secondary{ "v-if" => 'list.type !== "blank" && list.type !== "promotion"', ":title": "counterTooltip", "v-tooltip": true, data: { placement: "top" } } .issue-count-badge.text-secondary{ "v-if" => 'list.type !== "blank" && list.type !== "promotion"', ":title": "counterTooltip", ":class": "{ 'd-none': !list.isExpanded }", "v-tooltip": true, data: { placement: "top" } }
%span.issue-count-badge-count %span.issue-count-badge-count
%icon.mr-1{ name: "issues" } %icon.mr-1{ name: "issues" }
{{ list.issuesSize }} {{ list.issuesSize }}
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
%button.issue-count-badge-add-button.btn.btn-sm.btn-default.ml-1.has-tooltip.js-no-trigger-collapse{ type: "button", %button.issue-count-badge-add-button.btn.btn-sm.btn-default.ml-1.has-tooltip.js-no-trigger-collapse{ type: "button",
"@click" => "showNewIssueForm", "@click" => "showNewIssueForm",
"v-if" => "isNewIssueShown", "v-if" => "isNewIssueShown",
":class": "{ 'd-none': !list.isExpanded }",
"aria-label" => _("New issue"), "aria-label" => _("New issue"),
"title" => _("New issue"), "title" => _("New issue"),
data: { placement: "top", container: "body" } } data: { placement: "top", container: "body" } }
......
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
%transition{ name: "boards-sidebar-slide" } %transition{ name: "boards-sidebar-slide" }
%aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" } %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
.issuable-sidebar .issuable-sidebar
.block.issuable-sidebar-header .block.issuable-sidebar-header.position-relative
%span.issuable-header-text.hide-collapsed.float-left %span.issuable-header-text.hide-collapsed.float-left
%strong %strong.bold
{{ issue.title }} {{ issue.title }}
%br/ %br/
%span %span
= render_if_exists "shared/boards/components/sidebar/issue_project_path" = render_if_exists "shared/boards/components/sidebar/issue_project_path"
= precede "#" do = precede "#" do
{{ issue.iid }} {{ issue.iid }}
%a.gutter-toggle.float-right{ role: "button", %a.gutter-toggle.position-absolute.position-top-0.position-right-0{ role: "button",
href: "#", href: "#",
"@click.prevent" => "closeSidebar", "@click.prevent" => "closeSidebar",
"aria-label" => "Toggle sidebar" } "aria-label" => "Toggle sidebar" }
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
= dropdown_title(title) = dropdown_title(title)
- if show_boards_content - if show_boards_content
.issue-board-dropdown-content .issue-board-dropdown-content
%p %p.m-0
= content_title = content_title
= dropdown_filter(filter_placeholder) = dropdown_filter(filter_placeholder)
= dropdown_content = dropdown_content
......
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
- block_css_class = type != :boards_modal ? 'row-content-block second-block' : '' - block_css_class = type != :boards_modal ? 'row-content-block second-block' : ''
- user_can_admin_list = board && can?(current_user, :admin_list, board.parent) - user_can_admin_list = board && can?(current_user, :admin_list, board.parent)
.issues-filters .issues-filters{ class: ("w-100" if type == :boards_modal) }
.issues-details-filters.filtered-search-block{ class: block_css_class, "v-pre" => type == :boards_modal } .issues-details-filters.filtered-search-block.d-flex{ class: block_css_class, "v-pre" => type == :boards_modal }
- if type == :boards - if type == :boards
= render_if_exists "shared/boards/switcher", board: board = render_if_exists "shared/boards/switcher", board: board
= form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form' do = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form w-100' do
- if params[:search].present? - if params[:search].present?
= hidden_field_tag :search, params[:search] = hidden_field_tag :search, params[:search]
- if @can_bulk_update - if @can_bulk_update
......
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