Optimize icons, and now yes use them!

This commit is contained in:
Matias De lellis
2020-06-03 20:53:01 -03:00
parent 1d8e47ce20
commit 9b09f54dd1
6 changed files with 33 additions and 17 deletions

View File

@@ -2,6 +2,14 @@
@include icon-color('app', 'quicknotes', $color-black); @include icon-color('app', 'quicknotes', $color-black);
} }
.icon-pin {
@include icon-color('pin', 'quicknotes', $color-black);
}
.icon-pinned {
@include icon-color('pinned', 'quicknotes', $color-black);
}
#app-content-wrapper { #app-content-wrapper {
height: 100%; height: 100%;
} }
@@ -101,6 +109,10 @@
border-radius: 50%; border-radius: 50%;
} }
//.icon-header-note:hover {
// background-color: rgba(0,0,0,0.14);
//}
.hide-header-icon { .hide-header-icon {
display: none; display: none;
} }

View File

@@ -1,3 +1 @@
<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" version="1.1" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m11.571 2.4v4.9l1.4286 2.1v1.4h-4.2857v3.5l-0.71429 0.7-0.71429-0.7v-3.5h-4.2857v-1.4l1.4286-2.1v-4.9c0-0.77 0.64286-1.4 1.4286-1.4h4.2857c0.79286 0 1.4286 0.623 1.4286 1.4zm-5.7143 0v5.425l-1.0714 1.575h6.4286l-1.0714-1.575v-5.425z" stroke-width=".70711"/></svg>
<path d="m11.571 2.4v4.9l1.4286 2.1v1.4h-4.2857v3.5l-0.71429 0.7-0.71429-0.7v-3.5h-4.2857v-1.4l1.4286-2.1v-4.9c0-0.77 0.64286-1.4 1.4286-1.4h4.2857c0.79286 0 1.4286 0.623 1.4286 1.4zm-5.7143 0v5.425l-1.0714 1.575h6.4286l-1.0714-1.575v-5.425z" stroke-width=".70711"/>
</svg>

Before

Width:  |  Height:  |  Size: 350 B

After

Width:  |  Height:  |  Size: 370 B

View File

@@ -1,3 +1 @@
<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" version="1.1" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m11.572 2.4a1.4286 1.4 0 0 0-1.4286-1.4h-4.2857c-0.78571 0-1.4286 0.63-1.4286 1.4v4.9l-1.4286 2.1v1.4h4.2857v3.5l0.71429 0.7 0.71429-0.7v-3.5h4.2857v-1.4l-1.4286-2.1z" stroke-width=".70711"/></svg>
<path d="m11.571 2.4a1.4286 1.4 0 0 0-1.4286-1.4h-4.2857c-0.78571 0-1.4286 0.63-1.4286 1.4v4.9l-1.4286 2.1v1.4h4.2857v3.5l0.71429 0.7 0.71429-0.7v-3.5h4.2857v-1.4l-1.4286-2.1z" stroke-width=".70711"/>
</svg>

Before

Width:  |  Height:  |  Size: 284 B

After

Width:  |  Height:  |  Size: 304 B

View File

@@ -449,7 +449,7 @@ View.prototype = {
getSortData: { getSortData: {
pinnedNote: function(itemElem) { pinnedNote: function(itemElem) {
var $item = $(itemElem); var $item = $(itemElem);
return $item.find('.icon-checkmark').hasClass('fixed-header-icon') ? -1 : $item.index(); return $item.find('.icon-pinned').hasClass('fixed-header-icon') ? -1 : $item.index();
} }
} }
}); });
@@ -583,15 +583,23 @@ View.prototype = {
); );
}); });
$('#app-content').on("click", ".icon-checkmark", function (event) { $('#app-content').on("click", ".icon-pin", function (event) {
event.stopPropagation(); event.stopPropagation();
if ($(this).hasClass("fixed-header-icon")) { $(this).removeClass("hide-header-icon");
$(this).removeClass("fixed-header-icon"); $(this).addClass("fixed-header-icon");
$(this).addClass("hide-header-icon"); $(this).removeClass("icon-pin");
} else { $(this).addClass("icon-pinned");
$(this).removeClass("hide-header-icon");
$(this).addClass("fixed-header-icon"); $('.notes-grid').isotope('updateSortData').isotope();
} });
$('#app-content').on("click", ".icon-pinned", function (event) {
event.stopPropagation();
$(this).removeClass("fixed-header-icon");
$(this).addClass("hide-header-icon");
$(this).removeClass("icon-pinned");
$(this).addClass("icon-pin");
$('.notes-grid').isotope('updateSortData').isotope(); $('.notes-grid').isotope('updateSortData').isotope();
}); });

View File

@@ -12,7 +12,7 @@
</div> </div>
{{else}} {{else}}
<div> <div>
<div class="icon-header-note icon-checkmark hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div> <div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div> <div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
<!-- <!--
{{#if sharedwith}} {{#if sharedwith}}

View File

@@ -15,7 +15,7 @@
</div> </div>
{{else}} {{else}}
<div> <div>
<div class="icon-header-note icon-checkmark hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div> <div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div> <div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
<!-- <!--
{{#if sharedwith}} {{#if sharedwith}}