adds todo functionality to closed issuable sidebar and changes todo bell icon to check-square

5 files changed, 25 insertions, 8 deletions

diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index 64a68d56962..f2511ab1b58 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -97,10 +97,10 @@ import Cookies from 'js-cookie';
 
       if (data.delete_path != null) {
         $btn.attr('aria-label', $btn.data('mark-text')).attr('data-delete-path', data.delete_path);
-        return $btnText.text($btn.data('mark-text'));
+        return $btnText.html($btn.data('mark-text'));
       } else {
         $btn.attr('aria-label', $btn.data('todo-text')).removeAttr('data-delete-path');
-        return $btnText.text($btn.data('todo-text'));
+        return $btnText.html($btn.data('todo-text'));
       }
     };
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ddc0e78c7b6..6d51b740cc6 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -294,6 +294,14 @@
         margin-top: 0;
       }
 
+      .todo-undone {
+        color: $gl-link-color;
+
+        &:hover {
+          color: $gl-text-color;
+        }
+      }
+
       .author {
         display: none;
       }
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index b071d7f18cd..a08c1de9a09 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -7,17 +7,17 @@
   li {
     .badge.todos-pending-count {
       position: inherit;
-      top: -6px;
+      top: -10px;
       margin-top: -5px;
       font-weight: normal;
       background: $todo-alert-blue;
-      margin-left: -17px;
+      margin-left: -13px;
       font-size: 11px;
       color: $white-light;
-      padding: 3px;
+      padding: 4px;
       padding-top: 1px;
-      padding-bottom: 1px;
-      border-radius: 3px;
+      padding-bottom: 2px;
+      border-radius: 6px;
     }
   }
 }
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 7ddee0e5244..b11281035a5 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -33,7 +33,7 @@
                   = icon('wrench fw')
             %li
               = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = icon('bell fw')
+                = icon('check-square fw')
                 %span.badge.todos-pending-count{ class: ("hidden" if todos_pending_count == 0) }
                   = todos_count_format(todos_pending_count)
             - if current_user.can_create_project?
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 25a4aec0a38..9c3ee96e151 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -22,6 +22,15 @@
           = icon('spin spinner', class: 'hidden js-issuable-todo-loading', 'aria-hidden': 'true')
 
     = 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.assignee
         .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
           - if issuable.assignee