Apps/NotePostApp
2
0
Fork 0
Code Issues 1 Pull Requests Releases 5 Wiki Activity

Show favorite notes first and mark them with a star background

Browse Source
This commit is contained in:
Skylar Ittner 2019-01-15 14:51:32 -07:00
parent 59b4f70a75
commit e69b1a6f8b
6 changed files with 201 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
www/css/notecards.css
View File

@ -69,6 +69,19 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
min-height: 4em;
}
.notecard[data-favorite="1"] {
background-repeat: no-repeat;
background-size: 3em;
background-position: 1em 1em;
}
.notecard[data-favorite="1"][data-fg="FFFFFF"] {
background-image: url(../img/starbg_dark.svg);
}
.notecard[data-favorite="1"][data-fg="000000"] {
background-image: url(../img/starbg_light.svg);
}
.popover .list .list-button {
color: inherit;
}

58
www/img/favorite_bg.svg Normal file
View File

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
aria-hidden="true"
data-prefix="fas"
data-icon="star"
class="svg-inline--fa fa-star fa-w-18"
role="img"
viewBox="0 0 576 512"
version="1.1"
id="svg875"
sodipodi:docname="favorite_bg.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata881">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs879" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1013"
id="namedview877"
showgrid="false"
inkscape:zoom="1.5039062"
inkscape:cx="288"
inkscape:cy="256"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg875" />
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
id="path873"
style="fill:#ffffff;fill-opacity:0.19607843" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

59
www/img/starbg_dark.svg Normal file
View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
aria-hidden="true"
data-prefix="fas"
data-icon="star"
class="svg-inline--fa fa-star fa-w-18"
role="img"
viewBox="0 0 576 512"
version="1.1"
id="svg875"
sodipodi:docname="starbg_dark.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata881">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs879" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1013"
id="namedview877"
showgrid="false"
inkscape:zoom="1.5039062"
inkscape:cx="288"
inkscape:cy="256"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg875" />
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
id="path873"
style="fill:#ffffff;fill-opacity:0.19607843" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

59
www/img/starbg_light.svg Normal file
View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
aria-hidden="true"
data-prefix="fas"
data-icon="star"
class="svg-inline--fa fa-star fa-w-18"
role="img"
viewBox="0 0 576 512"
version="1.1"
id="svg875"
sodipodi:docname="starbg_light.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata881">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs879" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1013"
id="namedview877"
showgrid="false"
inkscape:zoom="1.5039062"
inkscape:cx="288"
inkscape:cy="256"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg875" />
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
id="path873"
style="fill:#000000;fill-opacity:0.19607843" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

12
www/js/home.js
View File

@ -21,8 +21,8 @@ function loadCards(callback) {
$(".notecard-col").remove();
for (n in notes) {
var note = notes[n];
$("#notecards-bin").append('<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-' + note.noteid + '">'
+ '<div class="card notecard" id="notecard-' + note.noteid + '" data-id="' + note.noteid + '" data-bg="' + note.color + '" data-fg="' + note.textcolor + '" style="background-color: #' + note.color + '; color: #' + note.textcolor + ';">'
$("#notecards-bin").append('<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-' + note.noteid + '" data-favorite="' + (note.favorite ? "1" : "0") + '">'
+ '<div class="card notecard" id="notecard-' + note.noteid + '" data-id="' + note.noteid + '" data-favorite="' + (note.favorite ? "1" : "0") + '" data-bg="' + note.color + '" data-fg="' + note.textcolor + '" style="background-color: #' + note.color + '; color: #' + note.textcolor + ';">'
+ '<div class="editbtn">'
+ '<i class="material-icons">edit</i>'
+ '</div>'
@ -35,6 +35,12 @@ function loadCards(callback) {
}
var noteElements = document.getElementsByClassName("notecard-col");
window.shuffleInstance.add(noteElements);
window.shuffleInstance.sort({
reverse: true,
by: function (el) {
return el.getAttribute("data-favorite");
}
});
if (typeof callback == 'function') {
callback();
}
@ -121,6 +127,8 @@ $("#app").on("click", "#colorpicker .colorpicker-color", function () {
NOTES.set(note2);
$("#notecard-" + noteid).data("bg", note2.color);
$("#notecard-" + noteid).data("fg", note2.textcolor);
$("#notecard-" + noteid).attr("data-bg", note2.color);
$("#notecard-" + noteid).attr("data-fg", note2.textcolor); // For CSS starbg
$("#notecard-" + noteid).css("background-color", "#" + note2.color);
$("#notecard-" + noteid).css("color", "#" + note2.textcolor);
});

4
www/pages/home.html
View File

@ -39,8 +39,8 @@
</div>
{{/if}}
{{#each notecards}}
<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-{{noteid}}">
<div class="card notecard" id="notecard-{{noteid}}" data-id="{{noteid}}" data-bg="{{color}}" data-fg="{{textcolor}}" style="background-color: #{{color}}; color: #{{textcolor}};">
<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-{{noteid}}" data-favorite="{{favorite}}">
<div class="card notecard" id="notecard-{{noteid}}" data-id="{{noteid}}" data-favorite="{{favorite}}" data-bg="{{color}}" data-fg="{{textcolor}}" style="background-color: #{{color}}; color: #{{textcolor}};">
<div class="editbtn">
<i class="material-icons">edit</i>
</div>