Fixes some regressions in NC28 (Issue #109) and improves the dark theme a bit.

This commit is contained in:
Matias De lellis
2024-01-31 11:52:58 -03:00
parent 88d73504c8
commit 7313d30beb
4 changed files with 53 additions and 19 deletions

View File

@@ -112,3 +112,17 @@
width: 100%;
margin-bottom: 3px;
}
#app-navigation:not(.vue) > ul > li > ul > li:hover, #app-navigation:not(.vue) > ul > li > ul > li:hover > a, #app-navigation:not(.vue) > ul > li > ul > li:focus, #app-navigation:not(.vue) > ul > li > ul > li:focus > a {
border-radius: var(--border-radius-pill);
background-color: var(--color-background-hover);
}
#app-navigation:not(.vue) > ul > li a:hover, #app-navigation:not(.vue) > ul > li a:hover > a, #app-navigation:not(.vue) > ul > li a:focus, #app-navigation:not(.vue) > ul > li a:focus > a {
background-color: var(--color-background-hover);
}
#app-navigation:not(.vue) > ul > li > ul > li.active, #app-navigation:not(.vue) > ul > li > ul > li.active > a, #app-navigation:not(.vue) > ul > li > ul > li a.selected, #app-navigation:not(.vue) > ul > li > ul > li a.selected > a {
border-radius: var(--border-radius-pill);
background-color: var(--color-primary-light);
}

View File

@@ -15,20 +15,44 @@
}
#new-note {
background-color: var(--color-primary-element);
color: var(--color-primary-element-text);
width: 100%;
padding: 10px;
padding-left: 34px;
background-position: 10px center;
min-height: 44px;
text-align: left;
margin: 0;
padding-left: 44px;
background-position: 16px center;
}
.icon-button-add {
background-image: var(--original-icon-add-white);
}
#new-note-fixed {
z-index: 111; /* navigation menu is 110 ;-) */
padding: 10px;
line-height: 44px;
min-height: 44px;
margin-bottom: 4px;
position: relative;
}
#app-navigation:not(.vue) > ul > li > ul > .color-filter {
display: flex;
min-height: 44px;
justify-content: center;
padding-top: 4px;
padding-left: unset;
}
.icon-filter-checkmark {
background-image: var(--original-icon-checkmark-dark);
}
.color-filter > .any-color-filter {
background-color: var(--color-primary-element-text);
}
.quicknote {
color: #202124;
min-height: 150px;
@@ -168,10 +192,6 @@ Button.circle-toolbar {
border-color: var(--color-primary-element);
}
.any-color {
background-color: transparent;
}
/* Isotope Grid */
.notes-grid {

View File

@@ -730,9 +730,9 @@ View.prototype = {
$('#colors-folder .circle-toolbar').click(function (event) {
event.stopPropagation();
self._cleanNavigation();
$(this).addClass('icon-checkmark');
$(this).addClass('icon-filter-checkmark');
if (!$(this).hasClass("any-color")) {
if (!$(this).hasClass("any-color-filter")) {
var color = $(this).css("background-color");
self._filterColor(color);
setFilterUrl('c', color);
@@ -788,7 +788,7 @@ View.prototype = {
var colors = $("#setting-defaul-color")[0].getElementsByClassName("circle-toolbar");
$.each(colors, function(i, c) {
if (color === self._colorToHex(c.style.backgroundColor)) {
c.className += " icon-checkmark";
c.className += " icon-filter-checkmark";
}
});
});
@@ -827,8 +827,8 @@ View.prototype = {
'value': color
},
success: function (response) {
$('#setting-defaul-color .circle-toolbar').removeClass('icon-checkmark');
currentColor.addClass('icon-checkmark');
$('#setting-defaul-color .circle-toolbar').removeClass('icon-filter-checkmark');
currentColor.addClass('icon-filter-checkmark');
}
});
});
@@ -1163,7 +1163,7 @@ View.prototype = {
var circles = $("#colors-folder")[0].getElementsByClassName("circle-toolbar");
$.each(circles, function(i, c) {
if (color == c.style.backgroundColor) {
c.className += " icon-checkmark";
c.className += " icon-filter-checkmark";
}
});
},
@@ -1172,9 +1172,9 @@ View.prototype = {
$.each(navItems, function(i, item) {
$(item).removeClass('active');
});
var oldColorTool = $('#app-navigation .circle-toolbar.icon-checkmark');
var oldColorTool = $('#app-navigation .circle-toolbar.icon-filter-checkmark');
$.each(oldColorTool, function(i, oct) {
$(oct).removeClass('icon-checkmark');
$(oct).removeClass('icon-filter-checkmark');
});
},
render: function () {

View File

@@ -1,6 +1,6 @@
<div id="new-note-fixed">
<div>
<button type="button" id="new-note" class="icon-add">{{newNoteTxt}}</button>
<button type="button" id="new-note" class="icon-button-add">{{newNoteTxt}}</button>
</div>
</div>
<li id="all-notes">
@@ -24,8 +24,8 @@
<button class="collapse"></button>
<a href="#" class="icon-search svg">{{colorsTxt}}</a>
<ul>
<li style="display: flex; justify-content: center;">
<button class="circle-toolbar icon-checkmark any-color"></button>
<li class="color-filter">
<button class="circle-toolbar icon-filter-checkmark any-color-filter"></button>
{{#each colors}}
<button class="circle-toolbar" style="background-color: {{color}} "></button>
{{/each}}