Use ColorPick libary to select color. This just to avoid overflow between the buttons

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

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;
+}

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;
+            $("#color-button").colorPick({
-            var colors = $("#modal-note-div .quicknote")[0].getElementsByClassName("circle-toolbar");
+                'initialColor': color,
-            $.each(colors, function(i, c) {
+                'paletteLabel': t('quicknotes', 'Colors'),
-                $(c).removeClass('icon-checkmark');
+                'palette': ['#F7EB96', '#88B7E3', '#C1ECB0', '#BFA6E9', '#DAF188', '#FF96AC', '#FCF66F', '#F2F1EF', '#C1D756', '#CECECE'],
-            });
+                'allowRecent': false,
-            $.each(colors, function(i, c) {
+                'allowCustomColor': false,
-                if (color === self._colorToHex(c.style.backgroundColor)) {
+                'onColorSelected': function() {
-                    c.className += " icon-checkmark";
+                    $("#modal-note-div .quicknote").css("background-color", this.color);
                 }
             });
-            $("#modal-note-div .quicknote").css("background-color", color);
         }
     },
     _editableShares: function(shared_with, shared_by) {

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>
+					<button id='color-button' class='round-tool-button'>
-					<a href="#" class="circle-toolbar" style="background-color: #88B7E3"></a>
+						<div class="icon-toggle-background" title="{{t "quicknotes" "Colors"}}"></div>
-					<a href="#" class="circle-toolbar" style="background-color: #C1ECB0"></a>
+					</button>
-					<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='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>

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');