Commit ae0049a8 authored by Phil Hughes's avatar Phil Hughes

Added blank state

parent fcc88e52
...@@ -17,7 +17,18 @@ $(function () { ...@@ -17,7 +17,18 @@ $(function () {
ready: function () { ready: function () {
service.all() service.all()
.then((resp) => { .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); BoardsStore.new(board);
}); });
}); });
......
...@@ -37,4 +37,4 @@ ...@@ -37,4 +37,4 @@
}); });
Vue.component('board', Board) Vue.component('board', Board)
}()); })();
(() => {
const BoardBlankState = Vue.extend({
methods: {
addDefaultLists: function () {
},
clearBlankState: function () {
BoardsStore.removeList('blank');
}
}
});
Vue.component('board-blank-state', BoardBlankState);
})();
...@@ -15,4 +15,4 @@ ...@@ -15,4 +15,4 @@
}); });
Vue.component('board-delete', BoardDelete); Vue.component('board-delete', BoardDelete);
}()); })();
...@@ -88,4 +88,4 @@ ...@@ -88,4 +88,4 @@
}); });
Vue.component('board-list', BoardList); Vue.component('board-list', BoardList);
}()); })();
...@@ -30,7 +30,9 @@ ...@@ -30,7 +30,9 @@
return list.id === id; return list.id === id;
}); });
this.getDoneList().index = this.state.lists.length - 1; if (id !== 'blank') {
this.getDoneList().index = this.state.lists.length - 1;
}
}, },
moveList: function (oldIndex, newIndex) { moveList: function (oldIndex, newIndex) {
const listFrom = _.find(this.state.lists, (list) => { const listFrom = _.find(this.state.lists, (list) => {
......
...@@ -34,9 +34,12 @@ ...@@ -34,9 +34,12 @@
$(function() { $(function() {
var clipboard; var clipboard;
clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
clipboard.on('success', genericSuccess); if ($('body').attr('data-page') !== 'projects:boards:index') {
return clipboard.on('error', genericError); clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
clipboard.on('success', genericSuccess);
return clipboard.on('error', genericError);
}
}); });
}).call(this); }).call(this);
...@@ -137,6 +137,30 @@ ...@@ -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 { .board-list {
flex: 1; flex: 1;
margin: 0; margin: 0;
......
%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
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
= icon("search", class: "board-search-icon", "v-show" => "!query") = 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" } %button.board-search-clear-btn{ type: "button", role: "button", "aria-label" => "Clear search", "@click" => "clearSearch", "v-show" => "query" }
= icon("times", class: "board-search-clear") = 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" } %ul.board-list{ "v-el:list" => true, ":data-board" => "boardId" }
= render "projects/boards/components/card" = render "projects/boards/components/card"
= render "projects/boards/components/blank_state"
%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 %h4.card-title
%a{ href: "#", ":title" => "issue.title" } %a{ href: "#", ":title" => "issue.title" }
{{ issue.title }} {{ issue.title }}
......
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