Add note color picker, close #4

.gitmodules

@@ -3,4 +3,4 @@
 	url = https://source.netsyms.com/Netsyms/Material-Color
 [submodule "static/easy-markdown-editor"]
 	path = static/easy-markdown-editor
-	url = https://source.netsyms.com/Netsyms/easy-markdown-editor.git
+	url = https://source.netsyms.com/Netsyms/easy-markdown-editor.git

action.php

@@ -90,4 +90,16 @@ switch ($VARS['action']) {
             $notes[] = Note::loadNote($n)->toArray();
         }
         exit(json_encode($notes));
+    case "setcolor":
+        if (empty($VARS['noteid'])) {
+            die($Strings->get("invalid parameters"));
+        }
+        $note = Note::loadNote($VARS['noteid']);
+        if (!$note->hasWriteAccess(new User($_SESSION['uid']))) {
+            die($Strings->get("invalid parameters"));
+        }
+        $note->setColor($VARS['color']);
+        $note->saveNote();
+        returnToSender("");
+        break;
 }

langs/en/notes.json

@@ -5,5 +5,9 @@
     "Edit": "Edit",
     "Delete": "Delete",
     "Download": "Download",
-    "Note deleted": "Note deleted"
+    "Note deleted": "Note deleted",
+    "Favorite": "Favorite",
+    "Set color": "Set color",
+    "Cancel": "Cancel",
+    "Save": "Save"
 }

lib/Note.lib.php

@@ -239,6 +239,11 @@ class Note {
      * @param string $color "RRGGBB"
      */
     public function setColor(string $color) {
+        $color = strtoupper($color);
+        // Make sure we have a valid RRGGBB hex
+        if (!preg_match("/[A-F0-9]{6}/", $color)) {
+            $color = "FFFFFF";
+        }
         $this->color = $color;
     }
 

pages/editnote.php

@@ -29,6 +29,6 @@ $note->saveNote();
 <form action="action.php" method="POST" id="noteform">
     <textarea name="content" id="note_content"><?php echo $note->getText(); ?></textarea>
     <input type="hidden" name="noteid" value="<?php echo $note->getID(); ?>" />
-    <input type="hidden" name="color" value="FFFFFF" />
+    <input type="hidden" name="color" value="<?php echo $note->getColor(); ?>" />
     <input type="hidden" name="action" value="savenote" />
 </form>

pages/home.php

@@ -14,6 +14,29 @@ foreach ($noteids as $n) {
 
 <style nonce="<?php echo $SECURE_NONCE; ?>">
 <?php
+$colors = [
+    "F44336",
+    "EC407A",
+    "AB47BC",
+    "7E57C2",
+    "5C6BC0",
+    "42A5F5",
+    "03A9F4",
+    "00BCD4",
+    "26A69A",
+    "4CAF50",
+    "8BC34A",
+    "CDDC39",
+    "FFF176",
+    "FFC107",
+    "FFA726",
+    "FF7043",
+    "E64A19",
+    "795548",
+    "9E9E9E",
+    "78909C"
+];
+
 foreach ($notes as $note) {
     echo "#notecard_" . $note->getID() . ", #notecard_" . $note->getID() . " a {\n"
     . "    background-color: #" . $note->getColor() . ";\n"
@@ -21,9 +44,49 @@ foreach ($notes as $note) {
     . "    border: 1px solid #" . $note->getColor() . ";\n"
     . "}\n";
 }
+
+foreach ($colors as $c) {
+    echo ".bg_$c {\n"
+    . "    background-color: #$c;\n"
+    . "    border: 1px solid #$c;\n"
+    . "}\n";
+}
 ?>
 </style>
 
+<div class="modal fade" tabindex="-1" role="dialog" id="colormodal">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" action="action.php" method="POST">
+            <input type="hidden" name="action" value="setcolor" />
+            <input type="hidden" name="source" value="home" />
+            <input type="hidden" name="noteid" value="" />
+            <input type="hidden" name="color" value="FFFFFF" />
+            <div class="modal-header">
+                <h5 class="modal-title"><?php $Strings->get("Set color"); ?></h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="d-flex flex-wrap justify-content-center">
+                    <?php
+                    foreach ($colors as $c) {
+                        ?>
+                        <button type="submit" name="color" value="<?php echo $c; ?>" class="btn bg_<?php echo $c; ?> m-1">
+                            &nbsp;
+                        </button>
+                        <?php
+                    }
+                    ?>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal"><?php $Strings->get("Cancel"); ?></button>
+            </div>
+        </form>
+    </div>
+</div>
+
 <div class="btn-group mb-4">
     <a href="app.php?page=editnote" class="btn btn-success"><i class="fas fa-plus"></i> <?php $Strings->get("New note"); ?></a>
 </div>
@@ -37,9 +100,12 @@ foreach ($notes as $note) {
             <div class="card notecard mb-3" data-color="<?php echo $note->getColor(); ?>" id="notecard_<?php echo $note->getID(); ?>" data-note="<?php echo $note->getID(); ?>">
                 <div class="card-body">
                     <div class="float-right">
-                        <a href="./action.php?action=favoritenote&noteid=<?php echo $note->getID(); ?>" class="favorite-btn <?php echo $note->getFavorite() ? "text-warning": ""; ?>">
+                        <a href="./action.php?action=favoritenote&noteid=<?php echo $note->getID(); ?>" class="favorite-btn mr-2 <?php echo $note->getFavorite() ? "text-warning" : ""; ?>" data-toggle="tooltip" title="<?php $Strings->get("Favorite"); ?>">
                             <i class="fa<?php echo $note->getFavorite() ? "s" : "r"; ?> fa-star"></i>
                         </a>
+                        <a class="color-btn" data-toggle="tooltip" title="<?php $Strings->get("Set color"); ?>" data-color="<?php echo $note->getColor(); ?>" data-noteid="<?php echo $note->getID(); ?>">
+                            <i class="fas fa-palette"></i>
+                        </a>
                     </div>
                     <div class="card-text note-text">
                         <?php echo $note->getHTML(); ?>

static/js/home.js

@@ -23,4 +23,12 @@ setInterval(function () {
             }
         }
     });
-}, 15 * 1000);
+}, 15 * 1000);
+
+$(".color-btn").click(function () {
+    $("#colormodal input[name=noteid]").val($(this).data("noteid"));
+    $("#colormodal input[name=color]").val($(this).data("color"));
+    $("#colormodal").modal();
+});
+
+$('[data-toggle="tooltip"]').tooltip();