mirror of
https://github.com/JanGross/quicknotes.git
synced 2025-11-30 23:37:16 +01:00
Fixes some regressions in NC28 (Issue #109) and improves the dark theme a bit.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
16
js/script.js
16
js/script.js
@@ -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 () {
|
||||
|
||||
@@ -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}}
|
||||
|
||||
Reference in New Issue
Block a user