Pin notes.. Still dont have backend support..

css/style.css

@@ -82,19 +82,28 @@
    overflow: hidden;
 }
 
-
 .note-content {
     margin: 4px;
     overflow-wrap: break-word;
 }
 
-#div-content .shared-title,
+.icon-header-note {
-#div-content .shared-title-owner,
-#div-content .icon-delete-note {
     cursor: pointer;
     float: right;
     margin: 2px;
-    opacity: 0.5;
+    padding: 12px;
+    background-color: rgba(0,0,0,0.08);
+    opacity: 0.7;
+    border-radius: 50%;
+}
+
+.hide-header-icon {
+    display: none;
+}
+
+.fixed-header-icon,
+.show-header-icon {
+    display: block;
 }
 
 .noselect {
@@ -160,11 +169,10 @@
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
 
-.hide-delete-icon,
 .hide-modal-note {
     display: none;
 }
-.show-delete-icon,
+
 .show-modal-note {
     display: block;
 }

js/script.js

@@ -439,6 +439,13 @@ View.prototype = {
                 isFitWidth: true,
                 fitWidth: true,
                 gutter: 10,
+            },
+            sortBy: 'pinnedNote',
+            getSortData: {
+                pinnedNote: function(itemElem) {
+                    var $item = $(itemElem);
+                    return $item.find('.icon-checkmark').hasClass('fixed-header-icon') ? -1 : $item.index();
+                }
             }
         });
 
@@ -450,10 +457,10 @@ View.prototype = {
 
         // Show delete icon on hover.
         $("#app-content").on("mouseenter", ".quicknote", function() {
-            $(this).find(".icon-delete").addClass( "show-delete-icon");
+            $(this).find(".icon-header-note").addClass( "show-header-icon");
         });
         $("#app-content").on("mouseleave", ".quicknote", function() {
-            $(this).find(".icon-delete").removeClass("show-delete-icon");
+            $(this).find(".icon-header-note").removeClass("show-header-icon");
         });
 
         // Open notes when clicking them.
@@ -566,6 +573,18 @@ View.prototype = {
             );
         });
 
+        $('#app-content').on("click", ".icon-checkmark", function (event) {
+            event.stopPropagation();
+            if ($(this).hasClass("fixed-header-icon")) {
+                $(this).removeClass("fixed-header-icon");
+                $(this).addClass("hide-header-icon");
+            } else {
+                $(this).removeClass("hide-header-icon");
+                $(this).addClass("fixed-header-icon");
+            }
+            $('.notes-grid').isotope('updateSortData').isotope();
+        });
+
         /*
          * Modal actions.
          */

js/templates/note-item.handlebars

@@ -12,7 +12,8 @@
 		</div>
 		{{else}}
 		<div>
-			<div class="icon-delete hide-delete-icon icon-delete-note" title="Delete"></div>
+			<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="Delete"></div>
+			<div class="icon-header-note icon-checkmark hide-header-icon" title="Pin note"></div>
 			<!--
 			{{#if sharedwith}}
 			<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>

js/templates/notes.handlebars

@@ -15,7 +15,8 @@
 			</div>
 			{{else}}
 			<div>
-				<div class="icon-delete hide-delete-icon icon-delete-note" title="Delete"></div>
+				<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="Delete"></div>
+				<div class="icon-header-note icon-checkmark hide-header-icon" title="Pin note"></div>
 				<!--
 				{{#if sharedwith}}
 				<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>