From ae0049a8b9c7b2f020881ea132fb531a07119ce9 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 2 Aug 2016 09:58:09 +0100 Subject: [PATCH] Added blank state --- .../javascripts/boards/boards_bundle.js.es6 | 13 +++++++++- .../boards/components/board.js.es6 | 2 +- .../components/board_blank_state.js.es6 | 14 +++++++++++ .../boards/components/board_delete.js.es6 | 2 +- .../boards/components/board_list.js.es6 | 2 +- .../boards/stores/boards_store.js.es6 | 4 +++- app/assets/javascripts/copy_to_clipboard.js | 9 ++++--- app/assets/stylesheets/pages/boards.scss | 24 +++++++++++++++++++ .../boards/components/_blank_state.html.haml | 14 +++++++++++ .../boards/components/_board.html.haml | 3 ++- .../boards/components/_card.html.haml | 2 +- 11 files changed, 79 insertions(+), 10 deletions(-) create mode 100644 app/assets/javascripts/boards/components/board_blank_state.js.es6 create mode 100644 app/views/projects/boards/components/_blank_state.html.haml diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6 index d01d8633611..450f265f760 100644 --- a/app/assets/javascripts/boards/boards_bundle.js.es6 +++ b/app/assets/javascripts/boards/boards_bundle.js.es6 @@ -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); }); }); diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6 index 9836790eb74..894e3643d56 100644 --- a/app/assets/javascripts/boards/components/board.js.es6 +++ b/app/assets/javascripts/boards/components/board.js.es6 @@ -37,4 +37,4 @@ }); Vue.component('board', Board) -}()); +})(); diff --git a/app/assets/javascripts/boards/components/board_blank_state.js.es6 b/app/assets/javascripts/boards/components/board_blank_state.js.es6 new file mode 100644 index 00000000000..6208a8e039a --- /dev/null +++ b/app/assets/javascripts/boards/components/board_blank_state.js.es6 @@ -0,0 +1,14 @@ +(() => { + const BoardBlankState = Vue.extend({ + methods: { + addDefaultLists: function () { + + }, + clearBlankState: function () { + BoardsStore.removeList('blank'); + } + } + }); + + Vue.component('board-blank-state', BoardBlankState); +})(); diff --git a/app/assets/javascripts/boards/components/board_delete.js.es6 b/app/assets/javascripts/boards/components/board_delete.js.es6 index cff93f22612..b9afb5724f5 100644 --- a/app/assets/javascripts/boards/components/board_delete.js.es6 +++ b/app/assets/javascripts/boards/components/board_delete.js.es6 @@ -15,4 +15,4 @@ }); Vue.component('board-delete', BoardDelete); -}()); +})(); diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6 index 942382ff543..ca5e46a2a85 100644 --- a/app/assets/javascripts/boards/components/board_list.js.es6 +++ b/app/assets/javascripts/boards/components/board_list.js.es6 @@ -88,4 +88,4 @@ }); Vue.component('board-list', BoardList); -}()); +})(); diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6 index ddf5d9090ce..c3c82864ce8 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js.es6 +++ b/app/assets/javascripts/boards/stores/boards_store.js.es6 @@ -30,7 +30,9 @@ 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) { const listFrom = _.find(this.state.lists, (list) => { diff --git a/app/assets/javascripts/copy_to_clipboard.js b/app/assets/javascripts/copy_to_clipboard.js index c82798cc6a5..d11d657eba3 100644 --- a/app/assets/javascripts/copy_to_clipboard.js +++ b/app/assets/javascripts/copy_to_clipboard.js @@ -34,9 +34,12 @@ $(function() { var clipboard; - clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]'); - clipboard.on('success', genericSuccess); - return clipboard.on('error', genericError); + + 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); diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 0c2bb319c2b..caccb5dcb27 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -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; diff --git a/app/views/projects/boards/components/_blank_state.html.haml b/app/views/projects/boards/components/_blank_state.html.haml new file mode 100644 index 00000000000..6e25aa966e1 --- /dev/null +++ b/app/views/projects/boards/components/_blank_state.html.haml @@ -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 diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml index 6e2c89856fe..bf9e03cb75d 100644 --- a/app/views/projects/boards/components/_board.html.haml +++ b/app/views/projects/boards/components/_board.html.haml @@ -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" diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml index db11654d72f..6f3f447f716 100644 --- a/app/views/projects/boards/components/_card.html.haml +++ b/app/views/projects/boards/components/_card.html.haml @@ -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 }}