Commit 0a53a3d9 authored by mhasbini's avatar mhasbini

change todos counter position & format ( for large counts )

parent 88152949
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
(function() { (function() {
$(document).on('todo:toggle', function(e, count) { $(document).on('todo:toggle', function(e, count) {
var $todoPendingCount = $('.todos-pending-count'); var $todoPendingCount = $('.todos-pending-count');
$todoPendingCount.text(gl.text.addDelimiter(count)); $todoPendingCount.text(gl.text.highCountTrim(count));
$todoPendingCount.toggleClass('hidden', count === 0); $todoPendingCount.toggleClass('hidden', count === 0);
}); });
})(); })();
...@@ -14,6 +14,9 @@ require('vendor/latinise'); ...@@ -14,6 +14,9 @@ require('vendor/latinise');
gl.text.addDelimiter = function(text) { gl.text.addDelimiter = function(text) {
return text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : text; return text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : text;
}; };
gl.text.highCountTrim = function(count) {
return count > 99 ? '99+' : count;
};
gl.text.randomString = function() { gl.text.randomString = function() {
return Math.random().toString(36).substring(7); return Math.random().toString(36).substring(7);
}; };
......
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
.navbar-nav { .navbar-nav {
li { li {
.badge.todos-pending-count { .badge.todos-pending-count {
position: inherit;
top: -6px;
margin-top: -5px; margin-top: -5px;
font-weight: normal; font-weight: normal;
background: $todo-alert-blue; background: $todo-alert-blue;
......
...@@ -35,6 +35,11 @@ class Dashboard::TodosController < Dashboard::ApplicationController ...@@ -35,6 +35,11 @@ class Dashboard::TodosController < Dashboard::ApplicationController
render json: todos_counts render json: todos_counts
end end
# Used in TodosHelper also
def self.todos_count_format(count)
count >= 100 ? '99+' : count
end
private private
def find_todos def find_todos
......
...@@ -3,6 +3,10 @@ module TodosHelper ...@@ -3,6 +3,10 @@ module TodosHelper
@todos_pending_count ||= current_user.todos_pending_count @todos_pending_count ||= current_user.todos_pending_count
end end
def todos_count_format(count)
count > 99 ? '99+' : count
end
def todos_done_count def todos_done_count
@todos_done_count ||= current_user.todos_done_count @todos_done_count ||= current_user.todos_done_count
end end
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
= link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
= icon('bell fw') = icon('bell fw')
%span.badge.todos-pending-count{ class: ("hidden" if todos_pending_count == 0) } %span.badge.todos-pending-count{ class: ("hidden" if todos_pending_count == 0) }
= todos_pending_count = todos_count_format(todos_pending_count)
- if Gitlab::Sherlock.enabled? - if Gitlab::Sherlock.enabled?
%li %li
= link_to sherlock_transactions_path, title: 'Sherlock Transactions', = link_to sherlock_transactions_path, title: 'Sherlock Transactions',
......
---
title: show 99+ for large count in todos notification bell
merge_request: 9171
author: mhasbini
...@@ -16,7 +16,8 @@ in a simple dashboard. ...@@ -16,7 +16,8 @@ in a simple dashboard.
You can quickly access the Todos dashboard using the bell icon next to the You can quickly access the Todos dashboard using the bell icon next to the
search bar in the upper right corner. The number in blue is the number of Todos search bar in the upper right corner. The number in blue is the number of Todos
you still have open. you still have open if the count is < 100, else it's 99+. The exact number
will still be shown in the body of the _To do_ tab.
![Todos icon](img/todos_icon.png) ![Todos icon](img/todos_icon.png)
......
...@@ -171,6 +171,29 @@ describe 'Dashboard Todos', feature: true do ...@@ -171,6 +171,29 @@ describe 'Dashboard Todos', feature: true do
end end
end end
context 'User have large number of todos' do
before do
create_list(:todo, 101, :mentioned, user: user, project: project, target: issue, author: author)
login_as(user)
visit dashboard_todos_path
end
it 'shows 99+ for count >= 100 in notification' do
expect(page).to have_selector('.todos-pending-count', text: '99+')
end
it 'shows exact number in To do tab' do
expect(page).to have_selector('.todos-pending .badge', text: '101')
end
it 'shows exact number for count < 100' do
3.times { first('.js-done-todo').click }
expect(page).to have_selector('.todos-pending-count', text: '98')
end
end
context 'User has a Build Failed todo' do context 'User has a Build Failed todo' do
let!(:todo) { create(:todo, :build_failed, user: user, project: project, author: author) } let!(:todo) { create(:todo, :build_failed, user: user, project: project, author: author) }
......
...@@ -45,8 +45,8 @@ require('~/lib/utils/text_utility'); ...@@ -45,8 +45,8 @@ require('~/lib/utils/text_utility');
expect(isTodosCountHidden()).toEqual(false); expect(isTodosCountHidden()).toEqual(false);
}); });
it('should add delimiter to todos-pending-count', function() { it('should show 99+ for todos-pending-count', function() {
expect($(todosPendingCount).text()).toEqual('1,000'); expect($(todosPendingCount).text()).toEqual('99+');
}); });
}); });
}); });
......
...@@ -35,5 +35,16 @@ require('~/lib/utils/text_utility'); ...@@ -35,5 +35,16 @@ require('~/lib/utils/text_utility');
expect(gl.text.pluralize('test', 1)).toBe('test'); expect(gl.text.pluralize('test', 1)).toBe('test');
}); });
}); });
describe('gl.text.highCountTrim', () => {
it('returns 99+ for count >= 100', () => {
expect(gl.text.highCountTrim(105)).toBe('99+');
expect(gl.text.highCountTrim(100)).toBe('99+');
});
it('returns exact number for count < 100', () => {
expect(gl.text.highCountTrim(45)).toBe(45);
});
});
}); });
})(); })();
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