Change color picker to palette

www/drive/app-drive.less

@@ -179,6 +179,64 @@
         }
     }
 
+    .cp-app-drive-color-picker {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+
+        .cp-app-drive-color-picker-color {
+            position: relative;
+            width: 50px;
+            height: 50px;
+            margin: 5px;
+            display: inline-block;
+            cursor: pointer;
+            &.cp-app-drive-no-color {
+                position: relative;
+                width: 40px;
+                height: 40px;
+                margin: 10px;
+                border: 1px solid #444;
+                border-radius: 2px;
+                background-color: white;
+                overflow: hidden;
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: -1px; left: 0;
+                    width: 200%;
+                    border: 1px solid #666;
+                    transform-origin: top left;
+                    -ms-transform-origin: top left;
+                    transform: rotate(45deg);
+                    -ms-transform: rotate(45deg);
+                    -webkit-transform: rotate(45deg);
+                }
+            }
+
+            .cp-app-drive-icon-folder {
+                position: absolute;
+                font-size: 50px;
+            }
+
+            .fa-check {
+                position: absolute;
+                top: 40%; left: 35%;
+                color: transparent;
+            }
+            &.cp-app-drive-current-color > .fa-check {
+                color: white;
+            }
+
+        }
+    }
+
+
+
+
+
     /* TREE */
 
 

www/drive/inner.js

@@ -869,16 +869,41 @@ define([
 
 
         var pickFolderColor = function ($element, currentColor, cb) {
-            var jscolorL;
-            $element[0]._jscLinkedInstance = undefined;
-            var onchange = function (color) {
-                cb("#" + color.toString());
-            };
-            if (APP.colorPicker) { APP.colorPicker.hide(); }
-            jscolorL = new window.jscolor($element[0], {showOnClick: false, onFineChange: onchange, valueElement:undefined, styleElement:undefined});
-            APP.colorPicker = jscolorL;
-            jscolorL.fromString(currentColor);
-            jscolorL.show();
+            var colors = ["none", "#f23c38", "#ff0073", "#da0eba", "#9d00ac", "#6c19b3", "#4a42b1", "#3d8af0", "#30a0f1", "#1fb9d1", "#009686", "#45b354", "#84c750", "#c6e144", "#faf147", "#fbc423", "#fc9819", "#fd5227", "#775549", "#9c9c9c", "#607a89"];
+            var colorsElements = [];
+            var currentElement = null;
+            for (var i in colors) {
+                var element;
+                if (i === "0") {
+                    element = h("span.cp-app-drive-color-picker-color.cp-app-drive-no-color");
+                    $(element).on("click", function (e) {
+                        cb("");
+                    });
+                    colorsElements.push(element);
+                }
+                else {
+                    element = h("span.cp-app-drive-color-picker-color", [
+                        h("span.cptools-folder.cptools.cp-app-drive-icon-folder.cp-app-drive-content-icon"),
+                        h("span.fa.fa-check")
+                    ]);
+                    $(element).css("color", colors[i]);
+                    if (colors[i] === currentColor) {
+                        currentElement = element;
+                        $(element).addClass("cp-app-drive-current-color");
+                    }
+                    (function (color, element) {
+                        $(element).on("click", function (e) {
+                            $(currentElement).removeClass("cp-app-drive-current-color");
+                            currentElement = element;
+                            $(element).addClass("cp-app-drive-current-color");
+                            cb(color);
+                        });
+                    })(colors[i], element)
+                    colorsElements.push(element);
+                }
+            }
+            var content = h("div.cp-app-drive-color-picker", colorsElements);
+            UI.alert(content);
         };
 
         var getFolderColor = function (path) {
@@ -3383,15 +3408,11 @@ define([
             }
             if ($(this).hasClass("cp-app-drive-context-color")) {
                 var currentColor = getFolderColor(paths[0].path);
-                var to;
                 pickFolderColor(paths[0].element, currentColor, function (color) {
                     paths.forEach(function (p) {
                         setFolderColor(p.element, p.path, color);
                     });
-                    clearTimeout(to);
-                    to = setTimeout(function () {
-                        refresh(); // makes imgs overview flicker in drive
-                    }, 300);
+                    refresh(); // makes imgs overview flicker in drive
                 });
             }
             else if($(this).hasClass("cp-app-drive-context-delete")) {