From 4241c2906c9531ab7ddb43740b222a102f5508fa Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 3 Oct 2016 13:38:12 +0100 Subject: Add new issue form to lists Closes #21219 --- .../javascripts/boards/components/board.js.es6 | 8 +++++- .../boards/components/board_list.js.es6 | 7 ++++-- .../boards/components/board_new_issue.js.es6 | 24 ++++++++++++++++++ app/assets/stylesheets/pages/boards.scss | 26 +++++++++++++++++++ .../projects/boards/components/_board.html.haml | 29 ++++++++++++++++++++-- 5 files changed, 89 insertions(+), 5 deletions(-) create mode 100644 app/assets/javascripts/boards/components/board_new_issue.js.es6 (limited to 'app') diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6 index 7e86f001f44..cacb36a897f 100644 --- a/app/assets/javascripts/boards/components/board.js.es6 +++ b/app/assets/javascripts/boards/components/board.js.es6 @@ -21,7 +21,8 @@ }, data () { return { - filters: Store.state.filters + filters: Store.state.filters, + showIssueForm: false }; }, watch: { @@ -33,6 +34,11 @@ deep: true } }, + methods: { + showNewIssueForm() { + this.showIssueForm = !this.showIssueForm; + } + }, ready () { const options = gl.issueBoards.getBoardSortableDefaultOptions({ disabled: this.disabled, diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6 index 474805c1437..d2e905ae062 100644 --- a/app/assets/javascripts/boards/components/board_list.js.es6 +++ b/app/assets/javascripts/boards/components/board_list.js.es6 @@ -1,4 +1,5 @@ //= require ./board_card +//= require ./board_new_issue (() => { const Store = gl.issueBoards.BoardsStore; @@ -8,14 +9,16 @@ gl.issueBoards.BoardList = Vue.extend({ components: { - 'board-card': gl.issueBoards.BoardCard + 'board-card': gl.issueBoards.BoardCard, + 'board-new-issue': gl.issueBoards.BoardNewIssue }, props: { disabled: Boolean, list: Object, issues: Array, loading: Boolean, - issueLinkBase: String + issueLinkBase: String, + showIssueForm: Boolean }, data () { return { diff --git a/app/assets/javascripts/boards/components/board_new_issue.js.es6 b/app/assets/javascripts/boards/components/board_new_issue.js.es6 new file mode 100644 index 00000000000..057844f3ebb --- /dev/null +++ b/app/assets/javascripts/boards/components/board_new_issue.js.es6 @@ -0,0 +1,24 @@ +(() => { + window.gl = window.gl || {}; + + gl.issueBoards.BoardNewIssue = Vue.extend({ + props: { + showIssueForm: Boolean + }, + data() { + return { + title: '' + }; + }, + methods: { + submit(e) { + e.preventDefault(); + + this.title = ''; + }, + cancel() { + this.showIssueForm = false; + } + } + }); +})(); diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index ecc5b24e360..46e92b8a187 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -233,3 +233,29 @@ lex margin-right: 5px; } } + +.board-issue-count-holder { + margin-top: -3px; + + .btn { + line-height: 12px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +} + +.board-issue-count { + padding-right: 10px; + padding-left: 10px; + line-height: 21px; + border-radius: $border-radius-base; + border-color: $border-color; + border-style: solid; + border-width: 1px 1px 1px 1px; + + &.has-btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-width: 1px 0 1px 1px; + } +} diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml index 73066150fb3..6c95812aebd 100644 --- a/app/views/projects/boards/components/_board.html.haml +++ b/app/views/projects/boards/components/_board.html.haml @@ -12,8 +12,15 @@ %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 && !list.preset) }" } {{ list.title }} - %span.pull-right{ "v-if" => "list.type !== 'blank'" } - {{ list.issuesSize }} + .board-issue-count-holder.pull-right.clearfix + %span.board-issue-count.pull-left{ "v-if" => "list.type !== 'blank'", + ":class" => "{ 'has-btn': list.type !== 'done' }" } + {{ list.issuesSize }} + - if can? current_user, :create_issue, @project + %button.btn.btn-small.btn-default.pull-right{ type: "button", + "@click" => "showNewIssueForm", + "v-if" => "list.type !== 'done'" } + = icon("plus") - if can?(current_user, :admin_list, @project) %board-delete{ "inline-template" => true, ":list" => "list", @@ -26,12 +33,30 @@ ":issues" => "list.issues", ":loading" => "list.loading", ":disabled" => "disabled", + ":show-issue-form.sync" => "showIssueForm", ":issue-link-base" => "issueLinkBase" } .board-list-loading.text-center{ "v-if" => "loading" } = icon("spinner spin") %ul.board-list{ "v-el:list" => true, "v-show" => "!loading", ":data-board" => "list.id" } + - if can? current_user, :create_issue, @project + %board-new-issue{ "inline-template" => true, + ":show-issue-form.sync" => "showIssueForm", + "v-if" => "list.type !== 'done' && showIssueForm" } + %li.card + %form{ "@submit" => "submit($event)" } + %label.label-light + Title + %input.form-control{ type: "text", + "v-model" => "title" } + .clearfix.prepend-top-10 + %button.btn.btn-success.pull-left{ type: "submit", + ":disabled" => "title === ''" } + Submit issue + %button.btn.btn-default.pull-right{ type: "button", + "@click" => "cancel" } + Cancel = render "projects/boards/components/card" %li.board-list-count.text-center{ "v-if" => "showCount" } = icon("spinner spin", "v-show" => "list.loadingMore" ) -- cgit v1.2.1