Change color picker to palette

pull/1/head
ClemDee 6 years ago
parent 1901127534
commit e0a79928f4

@ -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 */
@ -873,7 +931,7 @@
text-align: left;
display: flex;
flex-direction: row;
.cp-app-drive-path-inner {
display: flex;
flex-flow: row-reverse;
@ -894,19 +952,19 @@
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.15s;
&:first-child {
flex-shrink: 1;
}
&.cp-app-drive-path-separator {
color: #ccc;
}
&.cp-app-drive-path-collapse {
position: relative;
}
&:hover {
&:not(.cp-app-drive-path-separator) {
background-color: darken(@colortheme_drive-bg, 15%);

@ -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")) {

Loading…
Cancel
Save