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

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

Loading…
Cancel
Save