Label description in tooltip
Clicking label adds that label to the filtered by
This commit is contained in:
parent
e00b56d048
commit
e04db427f1
|
@ -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 @@
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
(() => {
|
||||||
|
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);
|
||||||
|
})();
|
|
@ -1,14 +1,14 @@
|
||||||
(() => {
|
(() => {
|
||||||
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 @@
|
||||||
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 {
|
||||||
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 {
|
||||||
|
|
||||||
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,53 +11,51 @@
|
||||||
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) {
|
|
||||||
list
|
|
||||||
.save()
|
|
||||||
.then(function () {
|
|
||||||
// Remove any new issues from the backlog
|
|
||||||
// as they will be visible in the new list
|
|
||||||
_.each(list.issues, backlogList.removeIssue.bind(backlogList));
|
|
||||||
});
|
|
||||||
this.removeBlankState();
|
|
||||||
}
|
|
||||||
|
|
||||||
return list;
|
return list;
|
||||||
},
|
},
|
||||||
|
new: function (listObj) {
|
||||||
|
const list = this.addList(listObj),
|
||||||
|
backlogList = this.findList('type', 'backlog');
|
||||||
|
|
||||||
|
list
|
||||||
|
.save()
|
||||||
|
.then(function () {
|
||||||
|
// Remove any new issues from the backlog
|
||||||
|
// as they will be visible in the new list
|
||||||
|
_.each(list.issues, backlogList.removeIssue.bind(backlogList));
|
||||||
|
});
|
||||||
|
this.removeBlankState();
|
||||||
|
},
|
||||||
updateNewListDropdown: function () {
|
updateNewListDropdown: function () {
|
||||||
const data = $('.js-new-board-list').data('glDropdown').renderedData;
|
const data = $('.js-new-board-list').data('glDropdown').renderedData;
|
||||||
$('.js-new-board-list').data('glDropdown').renderData(data);
|
|
||||||
|
if (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 @@
|
||||||
|
|
||||||
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 @@
|
||||||
a {
|
a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
|
|
|
@ -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()" }
|
||||||
|
|
|
@ -1,19 +1,26 @@
|
||||||
%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",
|
||||||
":class" => "{ 'user-can-drag': !disabled }" }
|
":issue-link-base" => "issueLinkBase",
|
||||||
%h4.card-title
|
":disabled" => "disabled",
|
||||||
%a{ ":href" => "issueLinkBase + '/' + issue.id",
|
"track-by" => "id" }
|
||||||
":title" => "issue.title" }
|
%li.card{ ":data-issue" => "issue.id",
|
||||||
{{ issue.title }}
|
":class" => "{ 'user-can-drag': !disabled }" }
|
||||||
.card-footer
|
%h4.card-title
|
||||||
%span.card-number
|
%a{ ":href" => "issueLinkBase + '/' + issue.id",
|
||||||
= precede '#' do
|
":title" => "issue.title" }
|
||||||
{{ issue.id }}
|
{{ issue.title }}
|
||||||
%span.label.color-label{ "v-for" => "label in issue.labels",
|
.card-footer
|
||||||
":style" => "{ backgroundColor: label.color, color: label.textColor }" }
|
%span.card-number
|
||||||
{{ label.title }}
|
= precede '#' do
|
||||||
%a.has-tooltip{ ":href" => "'/u/' + issue.assignee.username",
|
{{ issue.id }}
|
||||||
":title" => "'Assigned to ' + issue.assignee.name",
|
%button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
|
||||||
"v-if" => "issue.assignee" }
|
type: "button",
|
||||||
%img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }
|
"@click" => "filterByLabel(label, $event)",
|
||||||
|
":style" => "{ backgroundColor: label.color, color: label.textColor }",
|
||||||
|
":title" => "label.description" }
|
||||||
|
{{ label.title }}
|
||||||
|
%a.has-tooltip{ ":href" => "'/u/' + issue.assignee.username",
|
||||||
|
":title" => "'Assigned to ' + issue.assignee.name",
|
||||||
|
"v-if" => "issue.assignee" }
|
||||||
|
%img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }
|
||||||
|
|
Loading…
Reference in New Issue