diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6 index 0d5ca81fe04..ca44a991257 100644 --- a/app/assets/javascripts/boards/boards_bundle.js.es6 +++ b/app/assets/javascripts/boards/boards_bundle.js.es6 @@ -19,6 +19,9 @@ $(function () { gl.IssueBoardsApp = new Vue({ el: '#board-app', + props: { + disabled: Boolean + }, data: { state: BoardsStore.state }, @@ -26,6 +29,7 @@ $(function () { BoardsStore.create(); }, ready: function () { + BoardsStore.disabled = this.disabled; gl.boardService.all() .then((resp) => { const boards = resp.json(); diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6 index 8ef61a2b587..0f8fabdd5b7 100644 --- a/app/assets/javascripts/boards/components/board.js.es6 +++ b/app/assets/javascripts/boards/components/board.js.es6 @@ -1,7 +1,8 @@ (() => { const Board = Vue.extend({ props: { - board: Object + board: Object, + disabled: Boolean }, data: function () { return { @@ -38,6 +39,7 @@ }, ready: function () { const options = _.extend({ + disabled: this.disabled, group: 'boards', draggable: '.is-draggable', handle: '.js-board-handle', diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6 index daa41056dc7..46f1ea4ec6b 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js.es6 +++ b/app/assets/javascripts/boards/stores/boards_store.js.es6 @@ -1,5 +1,6 @@ ((w) => { w.BoardsStore = { + disabled: false, state: {}, create: function () { this.state.lists = []; @@ -41,7 +42,7 @@ addBlankState: function () { const addBlankState = this.shouldAddBlankState(); - if (this.welcomeIsHidden()) return; + if (this.welcomeIsHidden() || this.disabled) return; if (addBlankState) { this.new({ diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 0c5e89c0759..4c97309c509 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -2,6 +2,11 @@ display: none; } +.user-can-drag { + cursor: -webkit-grab; + cursor: grab; +} + .is-dragging { * { cursor: -webkit-grabbing; @@ -110,8 +115,6 @@ .board-header { border-top-left-radius: $border-radius-default; border-top-right-radius: $border-radius-default; - cursor: -webkit-grab; - cursor: grab; &.has-border { padding-top: ($gl-padding - 3px); @@ -230,8 +233,6 @@ border-radius: $border-radius-default; box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5); list-style: none; - cursor: -webkit-grab; - cursor: grab; &:not(:last-child) { margin-bottom: 5px; diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml index beff7057703..1a02a921557 100644 --- a/app/views/projects/boards/components/_board.html.haml +++ b/app/views/projects/boards/components/_board.html.haml @@ -1,14 +1,19 @@ -%board{ "inline-template" => true, "v-cloak" => true, "v-for" => "board in state.lists | orderBy 'position'", ":board" => "board" } +%board{ "inline-template" => true, + "v-cloak" => true, + "v-for" => "board in state.lists | orderBy 'position'", + ":board" => "board", + ":disabled" => "#{current_user.nil?}" } .board{ ":class" => "{ 'is-draggable': !isPreset }" } .board-inner %header.board-inner-container.board-header{ ":class" => "{ 'has-border': board.label }", ":style" => "{ borderTopColor: (board.label ? board.label.color : null) }" } - %h3.board-title.js-board-handle + %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': !disabled }" } {{ board.title }} %span.pull-right{ "v-if" => "board.type !== 'blank'" } {{ board.issues.length }} - %board-delete{ "inline-template" => true, "v-if" => "!isPreset", ":board-id" => "board.id" } - %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click" => "deleteBoard" } - = icon("trash") + - if current_user + %board-delete{ "inline-template" => true, "v-if" => "!isPreset", ":board-id" => "board.id" } + %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" => "board.canSearch()" } %input.form-control{ type: "text", placeholder: "Search issues", "v-model" => "query", "debounce" => "250" } = icon("search", class: "board-search-icon", "v-show" => "!query") @@ -18,8 +23,8 @@ "v-if" => "board.type !== 'blank'", ":list" => "board", ":issues" => "board.issues", - ":disabled" => "#{current_user.nil?}", ":loading" => "board.loading", + ":disabled" => "disabled", ":issue-link-base" => "'#{namespace_project_issues_path(@project.namespace, @project)}'" } .board-list-loading.text-center{ "v-if" => "loading" } = icon("spinner spin") diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml index 80d0971fdd2..447b8af3991 100644 --- a/app/views/projects/boards/components/_card.html.haml +++ b/app/views/projects/boards/components/_card.html.haml @@ -1,12 +1,19 @@ -%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | orderBy 'id' -1", "track-by" => "id" } +%li.card{ ":data-issue" => "issue.id", + "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" } + %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 }" } + %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" } + %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 } diff --git a/app/views/projects/boards/show.html.haml b/app/views/projects/boards/show.html.haml index c834a8beff6..a5913db2634 100644 --- a/app/views/projects/boards/show.html.haml +++ b/app/views/projects/boards/show.html.haml @@ -10,5 +10,6 @@ = render 'shared/issuable/filter', type: :boards -.boards-list#board-app{ "data-endpoint" => "#{namespace_project_board_path(@project.namespace, @project)}" } +.boards-list#board-app{ "data-endpoint" => "#{namespace_project_board_path(@project.namespace, @project)}", + ":disabled" => "#{current_user.nil?}" } = render "projects/boards/components/board"