kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Label description in tooltip 

Clicking label adds that label to the filtered by
This commit is contained in:
Phil Hughes 2016-08-08 14:30:38 +01:00
parent e00b56d048
commit e04db427f1
11 changed files with 93 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/boards/boards_bundle.js.es6
View File

@ -35,7 +35,7 @@ $(function () {
const boards = resp.json();
boards.forEach((board) => {
const list = BoardsStore.new(board, false);
const list = BoardsStore.addList(board);
if (list.type === 'done') {
list.position = 9999999;

1
app/assets/javascripts/boards/components/board.js.es6
View File

@ -45,7 +45,6 @@
group: 'boards',
draggable: '.is-draggable',
handle: '.js-board-handle',
filter: '.board-delete',
onUpdate: function (e) {
BoardsStore.moveList(e.oldIndex, e.newIndex);
}

25
app/assets/javascripts/boards/components/board_card.js.es6 Normal file
View File

@ -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);
})();

4
app/assets/javascripts/boards/components/board_delete.js.es6
View File

@ -1,14 +1,14 @@
(() => {
const BoardDelete = Vue.extend({
props: {
boardId: Number
list: Object
},
methods: {
deleteBoard: function () {
$(this.$el).tooltip('destroy');
if (confirm('Are you sure you want to delete this list?')) {
BoardsStore.removeList(this.boardId);
this.list.destroy();
}
}
}

1
app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
View File

@ -8,6 +8,7 @@
fallbackClass: 'is-dragging',
fallbackOnBody: true,
ghostClass: 'is-ghost',
filter: '.has-tooltip',
scrollSensitivity: 50,
scrollSpeed: 10,
onStart: function () {

1
app/assets/javascripts/boards/models/label.js.es6
View File

@ -3,5 +3,6 @@ class Label {
this.id = obj.id;
this.title = obj.title;
this.color = obj.color;
this.description = obj.description;
}
}

5
app/assets/javascripts/boards/models/list.js.es6
View File

@ -33,6 +33,11 @@ class List {
destroy () {
if (this.type !== 'blank') {
BoardsStore.state.lists = _.reject(BoardsStore.state.lists, (list) => {
return list.id === this.id;
});
BoardsStore.updateNewListDropdown();
gl.boardService.destroyList(this.id);
}
}

54
app/assets/javascripts/boards/stores/boards_store.js.es6
View File

@ -11,53 +11,51 @@
label_name: gl.utils.getParameterValues('label_name[]')
};
},
new: function (board, persist = true) {
const doneList = this.findList('type', 'done'),
backlogList = this.findList('type', 'backlog'),
list = new List(board);
addList: function (listObj) {
const list = new List(listObj);
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;
},
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 () {
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 () {
// 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 !addBlankState;
},
addBlankState: function () {
const addBlankState = this.shouldAddBlankState();
if (this.welcomeIsHidden() || this.disabled) return;
if (addBlankState) {
this.new({
if (this.shouldAddBlankState()) {
this.addList({
id: 'blank',
list_type: 'blank',
title: 'Welcome to your Issue Board!',
position: 0
}, false);
});
}
},
removeBlankState: function () {
if (this.welcomeIsHidden()) return;
this.removeList('blank');
$.cookie('issue_board_welcome_hidden', 'true', {
@ -72,13 +70,9 @@
if (!list) return;
list.destroy();
this.state.lists = _.reject(this.state.lists, function (list) {
this.state.lists = _.reject(this.state.lists, (list) => {
return list.id === id;
});
this.updateNewListDropdown();
},
moveList: function (oldIndex, newIndex) {
if (oldIndex === newIndex) return;

5
app/assets/stylesheets/pages/boards.scss
View File

@ -250,6 +250,11 @@
a {
cursor: pointer;
}
.label {
border: 0;
outline: 0;
}
}
.card-title {

6
app/views/projects/boards/components/_board.html.haml
View File

@ -6,12 +6,14 @@
.board{ ":class" => "{ 'is-draggable': !isPreset }" }
.board-inner
%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 }}
%span.pull-right{ "v-if" => "list.type !== 'blank'" }
{{ list.issues.length }}
- 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" }
= icon("trash")
.board-inner-container.board-search-container{ "v-if" => "list.canSearch()" }

43
app/views/projects/boards/components/_card.html.haml
View File

@ -1,19 +1,26 @@
%li.card{ ":data-issue" => "issue.id",
%board-card{ "inline-template" => true,
"v-for" => "issue in issues | orderBy 'id' -1",
"track-by" => "id",
":class" => "{ 'user-can-drag': !disabled }" }
%h4.card-title
%a{ ":href" => "issueLinkBase + '/' + issue.id",
":title" => "issue.title" }
{{ issue.title }}
.card-footer
%span.card-number
= precede '#' do
{{ issue.id }}
%span.label.color-label{ "v-for" => "label in issue.labels",
":style" => "{ backgroundColor: label.color, color: label.textColor }" }
{{ 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 }
":issue" => "issue",
":issue-link-base" => "issueLinkBase",
":disabled" => "disabled",
"track-by" => "id" }
%li.card{ ":data-issue" => "issue.id",
":class" => "{ 'user-can-drag': !disabled }" }
%h4.card-title
%a{ ":href" => "issueLinkBase + '/' + issue.id",
":title" => "issue.title" }
{{ issue.title }}
.card-footer
%span.card-number
= precede '#' do
{{ issue.id }}
%button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
type: "button",
"@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 }