Commit 96f51880 authored by Phil Hughes's avatar Phil Hughes

Updated todos sidebar icon

Refactored slightly so that the same logic is shared between both the
expanded & the collapsed.
parent 9acfa635
......@@ -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) {
......
......@@ -369,3 +369,13 @@
width: 100%;
}
}
.btn-blank {
padding: 0;
background: transparent;
border: 0;
&:focus {
outline: 0;
}
}
......@@ -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;
}
}
}
}
......@@ -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
......@@ -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
......
- 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')
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment