Commit 0ebce632 authored by Martin Hanzel's avatar Martin Hanzel 🐈

Apply code review suggestions

Apply code review suggestions
parent ce805dc7
Pipeline #67959760 passed with stages
in 77 minutes and 43 seconds
import $ from 'jquery';
import Sortable from 'sortablejs';
import Vue from 'vue';
import { n__ } from '~/locale';
import { n__, s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import Tooltip from '~/vue_shared/directives/tooltip';
import AccessorUtilities from '../../lib/utils/accessor';
......@@ -54,6 +54,9 @@ export default Vue.extend({
const { issuesSize } = this.list;
return `${n__('%d issue', '%d issues', issuesSize)}`;
},
caretTooltip() {
return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
},
isNewIssueShown() {
return (
this.list.type === 'backlog' ||
......
......@@ -92,12 +92,7 @@
width: 400px;
}
.board-title-collapse {
margin-left: -10px;
}
.board-title-expand,
.board-title-collapse {
.board-title-caret {
cursor: pointer;
border-radius: 4px;
padding: 4px;
......@@ -108,6 +103,12 @@
}
}
&:not(.is-collapsed) {
.board-title-caret {
margin: 0 8px 0 -10px;
}
}
&.is-collapsed {
width: 50px;
......@@ -117,6 +118,10 @@
padding: 10px 0;
}
.board-title-caret {
margin-top: 1px;
}
.board-title-text {
flex-grow: 0;
......
......@@ -4,23 +4,14 @@
%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) }" }
%h3.board-title.m-0.d-flex.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset), "border-bottom-0": !list.isExpanded }' }
-# We need two caret elements because they have different texts and Bootstrap tooltips aren't reactive in Vue
.board-title-collapse.no-drag.mr-2.has-tooltip{ "v-if": "list.isExpandable && list.isExpanded",
.board-title-caret.no-drag{ "v-if": "list.isExpandable",
"aria-hidden": "true",
"aria-label": _("Collapse"),
title: _("Collapse"),
key: "collapse",
":aria-label": "caretTooltip",
":title": "caretTooltip",
"v-tooltip": "",
data: { placement: "bottom" },
"@click": "toggleExpanded" }
= icon("caret-right", { class: "fa-fw" })
.board-title-expand.no-drag.has-tooltip{ "v-if": "list.isExpandable && !list.isExpanded",
"aria-hidden": "true",
"aria-label": _("Expand"),
title: _("Expand"),
key: "expand",
data: { placement: "bottom" },
"@click": "toggleExpanded" }
= icon("caret-down", { class: "fa-fw" })
%i.fa.fa-fw{ ":class": '{ "fa-caret-right": list.isExpanded, "fa-caret-down": !list.isExpanded }' }
= render_if_exists "shared/boards/components/list_milestone"
%a.user-avatar-link.js-no-trigger{ "v-if": "list.type === \"assignee\"", ":href": "list.assignee.path" }
......
......@@ -1515,6 +1515,12 @@ msgstr ""
msgid "Boards"
msgstr ""
msgid "Boards|Collapse"
msgstr ""
msgid "Boards|Expand"
msgstr ""
msgid "Branch %{branchName} was not found in this project's repository."
msgstr ""
......
......@@ -53,24 +53,19 @@ describe('Board component', () => {
expect(vm.$el.classList.contains('is-expandable')).toBe(true);
});
it('board is expandable when list type is closed', done => {
vm.list.type = 'closed';
Vue.nextTick(() => {
expect(vm.$el.classList.contains('is-expandable')).toBe(true);
done();
});
it('board is expandable when list type is closed', () => {
// eslint-disable-next-line no-undef
expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true);
});
it('board is expandable when list type is label', done => {
vm.list.type = 'label';
Vue.nextTick(() => {
expect(vm.$el.classList.contains('is-expandable')).toBe(true);
it('board is expandable when list type is label', () => {
// eslint-disable-next-line no-undef
expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true);
});
done();
});
it('board is not expandable when list type is blank', () => {
// eslint-disable-next-line no-undef
expect(new List({ id: 1, list_type: 'blank' }).isExpandable).toBe(false);
});
it('does not collapse when clicking header', done => {
......@@ -89,7 +84,7 @@ describe('Board component', () => {
Vue.nextTick()
.then(() => {
vm.$el.querySelector('.board-title-collapse').click();
vm.$el.querySelector('.board-title-caret').click();
})
.then(() => {
expect(vm.$el.classList.contains('is-collapsed')).toBe(true);
......@@ -99,13 +94,17 @@ describe('Board component', () => {
});
it('expands when clicking the expand icon', done => {
vm.$el.querySelector('.board-title-expand').click();
Vue.nextTick(() => {
expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
vm.list.isExpanded = false;
done();
});
Vue.nextTick()
.then(() => {
vm.$el.querySelector('.board-title-caret').click();
})
.then(() => {
expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
done();
})
.catch(done.fail);
});
it('is expanded when created', () => {
......
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