Changed cursors to only show draggable when logged in

Fixed lists allowed to be reorganized when logged out
Hides welcome state when logged out

7 files changed, 38 insertions, 17 deletions

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"