Added blank state

This commit is contained in:
Phil Hughes 2016-08-02 09:58:09 +01:00
parent fcc88e52fe
commit ae0049a8b9
11 changed files with 79 additions and 10 deletions

View file

@ -17,7 +17,18 @@ $(function () {
ready: function () {
service.all()
.then((resp) => {
resp.json().forEach((board) => {
const boards = resp.json();
// Add blank state board
if (boards.length === 2) {
boards.splice(1, 0, {
id: 'blank',
title: 'Welcome to your Issue Board!',
index: 1
});
}
boards.forEach((board) => {
BoardsStore.new(board);
});
});

View file

@ -37,4 +37,4 @@
});
Vue.component('board', Board)
}());
})();

View file

@ -0,0 +1,14 @@
(() => {
const BoardBlankState = Vue.extend({
methods: {
addDefaultLists: function () {
},
clearBlankState: function () {
BoardsStore.removeList('blank');
}
}
});
Vue.component('board-blank-state', BoardBlankState);
})();

View file

@ -15,4 +15,4 @@
});
Vue.component('board-delete', BoardDelete);
}());
})();

View file

@ -88,4 +88,4 @@
});
Vue.component('board-list', BoardList);
}());
})();

View file

@ -30,7 +30,9 @@
return list.id === id;
});
if (id !== 'blank') {
this.getDoneList().index = this.state.lists.length - 1;
}
},
moveList: function (oldIndex, newIndex) {
const listFrom = _.find(this.state.lists, (list) => {

View file

@ -34,9 +34,12 @@
$(function() {
var clipboard;
if ($('body').attr('data-page') !== 'projects:boards:index') {
clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
clipboard.on('success', genericSuccess);
return clipboard.on('error', genericError);
}
});
}).call(this);

View file

@ -137,6 +137,30 @@
}
}
.board-blank-state {
height: 100%;
padding: $gl-padding;
background-color: #fff;
}
.board-blank-state-list {
list-style: none;
> li:not(:last-child) {
margin-bottom: 8px;
}
.label-color {
position: relative;
top: 2px;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 3px;
border-radius: $border-radius-default;
}
}
.board-list {
flex: 1;
margin: 0;

View file

@ -0,0 +1,14 @@
%board-blank-state{ "inline-template" => true, "v-if" => "board.id == 'blank'" }
.board-blank-state
%p
Add the following default lists to your Issue Board with one click:
%ul.board-blank-state-list
%li
%span.label-color{ style: "background-color: red;" }
Development
%p
Starting out with the default set of lists will get you right on the way to making the most of your board.
%button.btn.btn-create.btn-inverted.btn-block{ type: "button", "@click" => "addDefaultLists" }
Add default lists
%button.btn.btn-default.btn-block{ type: "button", "@click" => "clearBlankState" }
Nevermind, i'll use my own

View file

@ -14,6 +14,7 @@
= icon("search", class: "board-search-icon", "v-show" => "!query")
%button.board-search-clear-btn{ type: "button", role: "button", "aria-label" => "Clear search", "@click" => "clearSearch", "v-show" => "query" }
= icon("times", class: "board-search-clear")
%board-list{ "inline-template" => true, ":board-id" => "board.id", ":issues" => "board.issues", ":disabled" => "#{current_user.nil?}", ":query" => "query", ":filters" => "filters" }
%board-list{ "inline-template" => true, "v-if" => "board.id != 'blank'", ":board-id" => "board.id", ":issues" => "board.issues", ":disabled" => "#{current_user.nil?}", ":query" => "query", ":filters" => "filters" }
%ul.board-list{ "v-el:list" => true, ":data-board" => "boardId" }
= render "projects/boards/components/card"
= render "projects/boards/components/blank_state"

View file

@ -1,4 +1,4 @@
%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | filterBy query in 'title' | filterBy customFilter" }
%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | filterBy query in 'title' | filterBy customFilter", "track-by" => "id" }
%h4.card-title
%a{ href: "#", ":title" => "issue.title" }
{{ issue.title }}