From 217e3d868fafcfaa759db63655ef35cc62c57ac0 Mon Sep 17 00:00:00 2001
From: Matias De lellis <mati86dl@gmail.com>
Date: Wed, 17 Jun 2020 14:48:20 -0300
Subject: [PATCH] Use ColorPick libary to select color. This just to avoid
 overflow between the buttons

---
 Makefile                      |  4 ++++
 css/style.scss                | 18 +++++++++++++++++-
 js/script.js                  | 24 ++++++++----------------
 js/templates/notes.handlebars | 23 ++++++++---------------
 templates/main.php            |  2 ++
 5 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/Makefile b/Makefile
index b2759b1..bef7500 100644
--- a/Makefile
+++ b/Makefile
@@ -65,6 +65,8 @@ deps:
 	cp node_modules/medium-editor/dist/css/medium-editor.css vendor/
 	cp node_modules/medium-editor-autolist/dist/autolist.js vendor/
 	cp node_modules/lozad/dist/lozad.js vendor/
+	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
+	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
 
 depsmin:
 	mkdir -p vendor
@@ -76,6 +78,8 @@ depsmin:
 	cp node_modules/medium-editor/dist/css/medium-editor.min.css vendor/medium-editor.css
 	cp node_modules/medium-editor-autolist/dist/autolist.min.js vendor/autolist.js
 	cp node_modules/lozad/dist/lozad.min.js vendor/lozad.js
+	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
+	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
 
 js-templates:
 	node_modules/handlebars/bin/handlebars js/templates -f js/templates.js
diff --git a/css/style.scss b/css/style.scss
index a82a5ce..cea09d8 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -140,9 +140,9 @@
 
 .colors-toolbar {
    float: left;
-   padding-top: 10px;
 }
 
+.colorPickButton,
 .circle-toolbar {
    display:inline-block;
    width:20px;
@@ -361,3 +361,19 @@ div.select2-container {
     padding: 0px;
     border-radius: 50%;
 }
+
+/* Color Picker */
+
+#colorPick {
+    border-radius: 8px;
+    padding: 12px;
+    background-color: var(--color-background-dark);
+    opacity: 1.0 !important;
+    z-index: 2500;
+}
+
+#colorPick span {
+    color: var(--color-main-text);
+    font-size: 13px;
+    text-transform: initial;
+}
diff --git a/js/script.js b/js/script.js
index ee2de34..cf83664 100644
--- a/js/script.js
+++ b/js/script.js
@@ -500,13 +500,6 @@ View.prototype = {
             self._editablePinned(false);
         });
 
-        // Handle colors.
-        $('#modal-note-div .circle-toolbar').click(function (event) {
-            event.stopPropagation();
-            var color = self._colorToHex($(this).css("background-color"));
-            self._editableColor(color);
-        });
-
         // Handle tags on modal
         $('#modal-note-div').on('click', '.slim-tag', function (event) {
             event.stopPropagation();
@@ -837,17 +830,16 @@ View.prototype = {
         if (color === undefined)
             return this._colorToHex($("#modal-note-div .quicknote").css("background-color"));
         else {
-            var self = this;
-            var colors = $("#modal-note-div .quicknote")[0].getElementsByClassName("circle-toolbar");
-            $.each(colors, function(i, c) {
-                $(c).removeClass('icon-checkmark');
-            });
-            $.each(colors, function(i, c) {
-                if (color === self._colorToHex(c.style.backgroundColor)) {
-                    c.className += " icon-checkmark";
+            $("#color-button").colorPick({
+                'initialColor': color,
+                'paletteLabel': t('quicknotes', 'Colors'),
+                'palette': ['#F7EB96', '#88B7E3', '#C1ECB0', '#BFA6E9', '#DAF188', '#FF96AC', '#FCF66F', '#F2F1EF', '#C1D756', '#CECECE'],
+                'allowRecent': false,
+                'allowCustomColor': false,
+                'onColorSelected': function() {
+                    $("#modal-note-div .quicknote").css("background-color", this.color);
                 }
             });
-            $("#modal-note-div .quicknote").css("background-color", color);
         }
     },
     _editableShares: function(shared_with, shared_by) {
diff --git a/js/templates/notes.handlebars b/js/templates/notes.handlebars
index 1de82bf..683987b 100644
--- a/js/templates/notes.handlebars
+++ b/js/templates/notes.handlebars
@@ -69,27 +69,20 @@
 				<select class="note-share-select" name="users[]" multiple="multiple"></select>
 				-->
 				<div class="colors-toolbar">
-					<a href="#" class="circle-toolbar" style="background-color: #F7EB96"></a>
-					<a href="#" class="circle-toolbar" style="background-color: #88B7E3"></a>
-					<a href="#" class="circle-toolbar" style="background-color: #C1ECB0"></a>
-					<a href="#" class="circle-toolbar" style="background-color: #BFA6E9"></a>
-					<a href="#" class="circle-toolbar" style="background-color: #DAF188"></a>
-					<a href="#" class="circle-toolbar" style="background-color: #FF96AC"></a>
-					<a href="#" class="circle-toolbar" style="background-color: #FCF66F"></a>
-					<a href="#" class="circle-toolbar" style="background-color: #F2F1EF"></a>
-					<a href="#" class="circle-toolbar" style="background-color: #C1D756"></a>
-					<a href="#" class="circle-toolbar" style="background-color: #CECECE"></a>
-				</div>
-				<div class="buttons-toolbar">
+					<button id='color-button' class='round-tool-button'>
+						<div class="icon-toggle-background" title="{{t "quicknotes" "Colors"}}"></div>
+					</button>
 					<button id='share-button' class='round-tool-button'>
 						<div class="icon-shared" title="{{t "quicknotes" "Share note"}}"></div>
 					</button>
-					<button id='attach-button' class='round-tool-button'>
-						<div class="icon-picture" title="{{t "quicknotes" "Attach file"}}"></div>
-					</button>
 					<button id='tag-button' class='round-tool-button'>
 						<div class="icon-tag" title="{{t "quicknotes" "Tags"}}"></div>
 					</button>
+					<button id='attach-button' class='round-tool-button'>
+						<div class="icon-picture" title="{{t "quicknotes" "Attach file"}}"></div>
+					</button>
+				</div>
+				<div class="buttons-toolbar">
 					<button id='cancel-button'>
 						{{ cancelTxt }}
 					</button>
diff --git a/templates/main.php b/templates/main.php
index 0ae7678..33137c5 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -6,6 +6,8 @@ vendor_script('quicknotes', 'medium-editor');
 vendor_style('quicknotes', 'medium-editor');
 vendor_script('quicknotes', 'autolist');
 vendor_script('quicknotes', 'lozad');
+vendor_script('quicknotes', 'colorPick');
+vendor_style('quicknotes', 'colorPick');
 script('quicknotes', 'qn-dialogs');
 script('quicknotes', 'script');
 style('quicknotes', 'style');