Add checkmarks to color filter on navigation

This commit is contained in:
Matias De lellis
2016-05-26 20:09:37 -03:00
parent f32eccab48
commit 2dbeca3462
2 changed files with 16 additions and 6 deletions

View File

@@ -315,7 +315,7 @@ View.prototype = {
$('#modal-note-div .circle-toolbar').click(function (event) { $('#modal-note-div .circle-toolbar').click(function (event) {
event.stopPropagation(); event.stopPropagation();
var oldColorTool = $('.circle-toolbar.icon-checkmark'); var oldColorTool = $('#modal-note-div .circle-toolbar.icon-checkmark');
$.each(oldColorTool, function(i, oct) { $.each(oldColorTool, function(i, oct) {
$(oct).removeClass('icon-checkmark'); $(oct).removeClass('icon-checkmark');
}); });
@@ -365,6 +365,12 @@ View.prototype = {
$('#all-notes').click(function () { $('#all-notes').click(function () {
self._notes.unsetActive(); self._notes.unsetActive();
$('.notes-grid').isotope({ filter: '*'}); $('.notes-grid').isotope({ filter: '*'});
var oldColorTool = $('#app-navigation .circle-toolbar.icon-checkmark');
$.each(oldColorTool, function(i, oct) {
$(oct).removeClass('icon-checkmark');
});
$('#app-navigation .any-color').addClass('icon-checkmark');
}); });
// create a new note // create a new note
@@ -423,10 +429,14 @@ View.prototype = {
// Handle colors. // Handle colors.
$('#app-navigation .circle-toolbar').click(function (event) { $('#app-navigation .circle-toolbar').click(function (event) {
event.stopPropagation(); var oldColorTool = $('#app-navigation .circle-toolbar.icon-checkmark');
$.each(oldColorTool, function(i, oct) {
$(oct).removeClass('icon-checkmark');
});
$(this).addClass('icon-checkmark');
if (!$(this).hasClass("any-color")) {
var color = $(this).css("background-color"); var color = $(this).css("background-color");
if (color != 'transparent') {
$('.notes-grid').isotope({ filter: function() { $('.notes-grid').isotope({ filter: function() {
var itemColor = $(this).children().css("background-color"); var itemColor = $(this).children().css("background-color");
return color == itemColor; return color == itemColor;

View File

@@ -10,7 +10,7 @@
<a href="#" class="icon-search svg">Colors</a> <a href="#" class="icon-search svg">Colors</a>
<ul> <ul>
<li style="display: flex; justify-content: center;"> <li style="display: flex; justify-content: center;">
<button class="circle-toolbar" style="background: transparent none; border: 1px solid;"></button> <button class="circle-toolbar icon-checkmark any-color"></button>
{{#each colors}} {{#each colors}}
<button class="circle-toolbar" style="background-color: {{color}} "></button> <button class="circle-toolbar" style="background-color: {{color}} "></button>
{{/each}} {{/each}}