Updated todos sidebar icon

app/assets/javascripts/right_sidebar.js

@@ -56,14 +56,15 @@ import Cookies from 'js-cookie';
     Sidebar.prototype.toggleTodo = function(e) {
       var $btnText, $this, $todoLoading, ajaxType, url;
       $this = $(e.currentTarget);
-      $todoLoading = $('.js-issuable-todo-loading');
-      $btnText = $('.js-issuable-todo-text', $this);
       ajaxType = $this.attr('data-delete-path') ? 'DELETE' : 'POST';
       if ($this.attr('data-delete-path')) {
         url = "" + ($this.attr('data-delete-path'));
       } else {
         url = "" + ($this.data('url'));
       }
+
+      $this.tooltip('hide');
+
       return $.ajax({
         url: url,
         type: ajaxType,
@@ -74,34 +75,44 @@ import Cookies from 'js-cookie';
         },
         beforeSend: (function(_this) {
           return function() {
-            return _this.beforeTodoSend($this, $todoLoading);
+            $('.js-issuable-todo').disable()
+              .addClass('is-loading');
           };
         })(this)
       }).done((function(_this) {
         return function(data) {
-          return _this.todoUpdateDone(data, $this, $btnText, $todoLoading);
+          return _this.todoUpdateDone(data);
         };
       })(this));
     };
 
-    Sidebar.prototype.beforeTodoSend = function($btn, $todoLoading) {
-      $btn.disable();
-      return $todoLoading.removeClass('hidden');
-    };
+    Sidebar.prototype.todoUpdateDone = function(data) {
+      const deletePath = data.delete_path ? data.delete_path : null;
+      const attrPrefix = deletePath ? 'mark' : 'todo';
+      const $todoBtns = $('.js-issuable-todo');
 
-    Sidebar.prototype.todoUpdateDone = function(data, $btn, $btnText, $todoLoading) {
       $(document).trigger('todo:toggle', data.count);
 
-      $btn.enable();
-      $todoLoading.addClass('hidden');
-
-      if (data.delete_path != null) {
-        $btn.attr('aria-label', $btn.data('mark-text')).attr('data-delete-path', data.delete_path);
-        return $btnText.html($btn.data('mark-text'));
-      } else {
-        $btn.attr('aria-label', $btn.data('todo-text')).removeAttr('data-delete-path');
-        return $btnText.html($btn.data('todo-text'));
-      }
+      $todoBtns.each((i, el) => {
+        const $el = $(el);
+        const $elText = $el.find('.js-issuable-todo-inner');
+
+        $el.removeClass('is-loading')
+          .enable()
+          .attr('aria-label', $el.data(`${attrPrefix}-text`))
+          .attr('data-delete-path', deletePath)
+          .attr('title', $el.data(`${attrPrefix}-text`));
+
+          if ($el.hasClass('has-tooltip')) {
+            $el.tooltip('fixTitle');
+          }
+
+          if ($el.data(`${attrPrefix}-icon`)) {
+            $elText.html($el.data(`${attrPrefix}-icon`));
+          } else {
+            $elText.text($el.data(`${attrPrefix}-text`));
+          }
+      });
     };
 
     Sidebar.prototype.sidebarDropdownLoading = function(e) {

app/assets/stylesheets/framework/buttons.scss

@@ -369,3 +369,13 @@
     width: 100%;
   }
 }
+
+.btn-blank {
+  padding: 0;
+  background: transparent;
+  border: 0;
+
+  &:focus {
+    outline: 0;
+  }
+}

app/assets/stylesheets/pages/issuable.scss

@@ -243,6 +243,10 @@
       font-size: 13px;
       font-weight: normal;
     }
+
+    .hide-expanded {
+      display: none;
+    }
   }
 
   &.right-sidebar-collapsed {
@@ -282,7 +286,7 @@
       display: block;
       width: 100%;
       text-align: center;
-      padding-bottom: 10px;
+      margin-bottom: 10px;
       color: $issuable-sidebar-color;
 
       &:hover {
@@ -590,3 +594,21 @@
     opacity: 0;
   }
 }
+
+.issuable-todo-btn {
+  .fa-spinner {
+    display: none;
+  }
+
+  &.is-loading {
+    .fa-spinner {
+      display: inline-block;
+    }
+
+    &.sidebar-collapsed-icon {
+      .issuable-todo-inner {
+        display: none;
+      }
+    }
+  }
+}

app/helpers/issuables_helper.rb

@@ -253,4 +253,19 @@ module IssuablesHelper
   def selected_template(issuable)
     params[:issuable_template] if issuable_templates(issuable).include?(params[:issuable_template])
   end
+
+  def issuable_todo_button_data(issuable, todo, is_collapsed)
+    {
+      todo_text: "Add todo",
+      mark_text: "Mark done",
+      todo_icon: (is_collapsed ? icon('plus-square') : nil),
+      mark_icon: (is_collapsed ? icon('check-square', class: 'todo-undone') : nil),
+      issuable_id: issuable.id,
+      issuable_type: issuable.class.name.underscore,
+      url: namespace_project_todos_path(@project.namespace, @project),
+      delete_path: (dashboard_todo_path(todo) if todo),
+      placement: (is_collapsed ? 'left' : nil),
+      container: (is_collapsed ? 'body' : nil)
+    }
+  end
 end

app/views/shared/issuable/_sidebar.html.haml

@@ -13,24 +13,12 @@
       %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => "Toggle sidebar" }
         = sidebar_gutter_toggle_icon
       - if current_user
-        %button.btn.btn-default.issuable-header-btn.pull-right.js-issuable-todo{ type: "button", "aria-label" => (todo.nil? ? "Add todo" : "Mark done"), data: { todo_text: "Add todo", mark_text: "Mark done", issuable_id: issuable.id, issuable_type: issuable.class.name.underscore, url: namespace_project_todos_path(@project.namespace, @project), delete_path: (dashboard_todo_path(todo) if todo) } }
-          %span.js-issuable-todo-text
-            - if todo
-              Mark done
-            - else
-              Add todo
-          = icon('spin spinner', class: 'hidden js-issuable-todo-loading', 'aria-hidden': 'true')
+        = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable
 
     = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, format: :json, html: { class: 'issuable-context-form inline-update js-issuable-update' } do |f|
       - if current_user
-        .block.todo
-          .sidebar-collapsed-icon.dont-change-state.js-issuable-todo{ type: "div", aria: { label: (todo.nil? ? icon('plus-square') : icon('check-square', class: 'todo-undone')) }, data: { todo_text: icon('plus-square'), mark_text: icon('check-square', class: 'todo-undone'), issuable_id: issuable.id, issuable_type: issuable.class.name.underscore, url: namespace_project_todos_path(@project.namespace, @project), delete_path: (dashboard_todo_path(todo) if todo) } }
-            %span.js-issuable-todo-text
-              - if todo
-                = icon('check-square', class: 'todo-undone')
-              - else
-                = icon('plus-square')
-            = icon('spin spinner', class: 'hidden js-issuable-todo-loading')
+        .block.todo.hide-expanded
+          = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable, is_collapsed: true
       .block.assignee
         .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
           - if issuable.assignee

app/views/shared/issuable/_sidebar_todo.html.haml

+- is_collapsed = local_assigns.fetch(:is_collapsed, false)
+- mark_content = is_collapsed ? icon('check-square', class: 'todo-undone') : 'Mark done'
+- todo_content = is_collapsed ? icon('plus-square') : 'Add todo'
+
+%button.issuable-todo-btn.js-issuable-todo{ type: 'button',
+  class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'btn btn-default issuable-header-btn pull-right'),
+  title: (todo.nil? ? 'Add todo' : 'Mark done'),
+  'aria-label' => (todo.nil? ? 'Add todo' : 'Mark done'),
+  data: issuable_todo_button_data(issuable, todo, is_collapsed) }
+  %span.issuable-todo-inner.js-issuable-todo-inner<
+    - if todo
+      = mark_content
+    - else
+      = todo_content
+  = icon('spin spinner', 'aria-hidden': 'true')