Updated todos sidebar icon

Refactored slightly so that the same logic is shared between both the
expanded & the collapsed.

2 files changed, 18 insertions, 15 deletions

diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 9c3ee96e151..953a5e63968 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/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
diff --git a/app/views/shared/issuable/_sidebar_todo.html.haml b/app/views/shared/issuable/_sidebar_todo.html.haml
new file mode 100644
index 00000000000..574e2958ae8
--- /dev/null
+++ b/app/views/shared/issuable/_sidebar_todo.html.haml
@@ -0,0 +1,15 @@
+- 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')