Commit e04db427 authored by Phil Hughes's avatar Phil Hughes

Label description in tooltip

Clicking label adds that label to the filtered by
parent e00b56d0
...@@ -35,7 +35,7 @@ $(function () { ...@@ -35,7 +35,7 @@ $(function () {
const boards = resp.json(); const boards = resp.json();
boards.forEach((board) => { boards.forEach((board) => {
const list = BoardsStore.new(board, false); const list = BoardsStore.addList(board);
if (list.type === 'done') { if (list.type === 'done') {
list.position = 9999999; list.position = 9999999;
......
...@@ -45,7 +45,6 @@ ...@@ -45,7 +45,6 @@
group: 'boards', group: 'boards',
draggable: '.is-draggable', draggable: '.is-draggable',
handle: '.js-board-handle', handle: '.js-board-handle',
filter: '.board-delete',
onUpdate: function (e) { onUpdate: function (e) {
BoardsStore.moveList(e.oldIndex, e.newIndex); BoardsStore.moveList(e.oldIndex, e.newIndex);
} }
......
(() => {
const BoardCard = Vue.extend({
props: {
issue: Object,
issueLinkBase: String,
disabled: Boolean
},
methods: {
filterByLabel: function (label, $event) {
const labelIndex = BoardsStore.state.filters['label_name'].indexOf(label.title);
// $($event.target).tooltip('hide');
if (labelIndex === -1) {
BoardsStore.state.filters['label_name'].push(label.title);
} else {
BoardsStore.state.filters['label_name'].splice(labelIndex, 1);
}
BoardsStore.updateFiltersUrl();
}
}
});
Vue.component('board-card', BoardCard);
})();
(() => { (() => {
const BoardDelete = Vue.extend({ const BoardDelete = Vue.extend({
props: { props: {
boardId: Number list: Object
}, },
methods: { methods: {
deleteBoard: function () { deleteBoard: function () {
$(this.$el).tooltip('destroy'); $(this.$el).tooltip('destroy');
if (confirm('Are you sure you want to delete this list?')) { if (confirm('Are you sure you want to delete this list?')) {
BoardsStore.removeList(this.boardId); this.list.destroy();
} }
} }
} }
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
fallbackClass: 'is-dragging', fallbackClass: 'is-dragging',
fallbackOnBody: true, fallbackOnBody: true,
ghostClass: 'is-ghost', ghostClass: 'is-ghost',
filter: '.has-tooltip',
scrollSensitivity: 50, scrollSensitivity: 50,
scrollSpeed: 10, scrollSpeed: 10,
onStart: function () { onStart: function () {
......
...@@ -3,5 +3,6 @@ class Label { ...@@ -3,5 +3,6 @@ class Label {
this.id = obj.id; this.id = obj.id;
this.title = obj.title; this.title = obj.title;
this.color = obj.color; this.color = obj.color;
this.description = obj.description;
} }
} }
...@@ -33,6 +33,11 @@ class List { ...@@ -33,6 +33,11 @@ class List {
destroy () { destroy () {
if (this.type !== 'blank') { if (this.type !== 'blank') {
BoardsStore.state.lists = _.reject(BoardsStore.state.lists, (list) => {
return list.id === this.id;
});
BoardsStore.updateNewListDropdown();
gl.boardService.destroyList(this.id); gl.boardService.destroyList(this.id);
} }
} }
......
...@@ -11,13 +11,16 @@ ...@@ -11,13 +11,16 @@
label_name: gl.utils.getParameterValues('label_name[]') label_name: gl.utils.getParameterValues('label_name[]')
}; };
}, },
new: function (board, persist = true) { addList: function (listObj) {
const doneList = this.findList('type', 'done'), const list = new List(listObj);
backlogList = this.findList('type', 'backlog'),
list = new List(board);
this.state.lists.push(list); this.state.lists.push(list);
if (persist) { return list;
},
new: function (listObj) {
const list = this.addList(listObj),
backlogList = this.findList('type', 'backlog');
list list
.save() .save()
.then(function () { .then(function () {
...@@ -26,38 +29,33 @@ ...@@ -26,38 +29,33 @@
_.each(list.issues, backlogList.removeIssue.bind(backlogList)); _.each(list.issues, backlogList.removeIssue.bind(backlogList));
}); });
this.removeBlankState(); this.removeBlankState();
}
return list;
}, },
updateNewListDropdown: function () { updateNewListDropdown: function () {
const data = $('.js-new-board-list').data('glDropdown').renderedData; const data = $('.js-new-board-list').data('glDropdown').renderedData;
if (data) {
$('.js-new-board-list').data('glDropdown').renderData(data); $('.js-new-board-list').data('glDropdown').renderData(data);
}
}, },
shouldAddBlankState: function () { shouldAddBlankState: function () {
// Decide whether to add the blank state // Decide whether to add the blank state
let addBlankState = _.find(this.state.lists, function (list) { return !_.find(this.state.lists, function (list) {
return list.type === 'backlog' || list.type === 'done'; return list.type === 'backlog' || list.type === 'done';
}); });
return !addBlankState;
}, },
addBlankState: function () { addBlankState: function () {
const addBlankState = this.shouldAddBlankState();
if (this.welcomeIsHidden() || this.disabled) return; if (this.welcomeIsHidden() || this.disabled) return;
if (addBlankState) { if (this.shouldAddBlankState()) {
this.new({ this.addList({
id: 'blank', id: 'blank',
list_type: 'blank', list_type: 'blank',
title: 'Welcome to your Issue Board!', title: 'Welcome to your Issue Board!',
position: 0 position: 0
}, false); });
} }
}, },
removeBlankState: function () { removeBlankState: function () {
if (this.welcomeIsHidden()) return;
this.removeList('blank'); this.removeList('blank');
$.cookie('issue_board_welcome_hidden', 'true', { $.cookie('issue_board_welcome_hidden', 'true', {
...@@ -72,13 +70,9 @@ ...@@ -72,13 +70,9 @@
if (!list) return; if (!list) return;
list.destroy(); this.state.lists = _.reject(this.state.lists, (list) => {
this.state.lists = _.reject(this.state.lists, function (list) {
return list.id === id; return list.id === id;
}); });
this.updateNewListDropdown();
}, },
moveList: function (oldIndex, newIndex) { moveList: function (oldIndex, newIndex) {
if (oldIndex === newIndex) return; if (oldIndex === newIndex) return;
......
...@@ -250,6 +250,11 @@ ...@@ -250,6 +250,11 @@
a { a {
cursor: pointer; cursor: pointer;
} }
.label {
border: 0;
outline: 0;
}
} }
.card-title { .card-title {
......
...@@ -6,12 +6,14 @@ ...@@ -6,12 +6,14 @@
.board{ ":class" => "{ 'is-draggable': !isPreset }" } .board{ ":class" => "{ 'is-draggable': !isPreset }" }
.board-inner .board-inner
%header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" } %header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
%h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': !disabled }" } %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !isPreset) }" }
{{ list.title }} {{ list.title }}
%span.pull-right{ "v-if" => "list.type !== 'blank'" } %span.pull-right{ "v-if" => "list.type !== 'blank'" }
{{ list.issues.length }} {{ list.issues.length }}
- if current_user - if current_user
%board-delete{ "inline-template" => true, "v-if" => "!isPreset", ":board-id" => "list.id" } %board-delete{ "inline-template" => true,
"v-if" => "!isPreset",
":list" => "list" }
%button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click" => "deleteBoard" } %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click" => "deleteBoard" }
= icon("trash") = icon("trash")
.board-inner-container.board-search-container{ "v-if" => "list.canSearch()" } .board-inner-container.board-search-container{ "v-if" => "list.canSearch()" }
......
%li.card{ ":data-issue" => "issue.id", %board-card{ "inline-template" => true,
"v-for" => "issue in issues | orderBy 'id' -1", "v-for" => "issue in issues | orderBy 'id' -1",
"track-by" => "id", ":issue" => "issue",
":issue-link-base" => "issueLinkBase",
":disabled" => "disabled",
"track-by" => "id" }
%li.card{ ":data-issue" => "issue.id",
":class" => "{ 'user-can-drag': !disabled }" } ":class" => "{ 'user-can-drag': !disabled }" }
%h4.card-title %h4.card-title
%a{ ":href" => "issueLinkBase + '/' + issue.id", %a{ ":href" => "issueLinkBase + '/' + issue.id",
...@@ -10,8 +14,11 @@ ...@@ -10,8 +14,11 @@
%span.card-number %span.card-number
= precede '#' do = precede '#' do
{{ issue.id }} {{ issue.id }}
%span.label.color-label{ "v-for" => "label in issue.labels", %button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
":style" => "{ backgroundColor: label.color, color: label.textColor }" } type: "button",
"@click" => "filterByLabel(label, $event)",
":style" => "{ backgroundColor: label.color, color: label.textColor }",
":title" => "label.description" }
{{ label.title }} {{ label.title }}
%a.has-tooltip{ ":href" => "'/u/' + issue.assignee.username", %a.has-tooltip{ ":href" => "'/u/' + issue.assignee.username",
":title" => "'Assigned to ' + issue.assignee.name", ":title" => "'Assigned to ' + issue.assignee.name",
......
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