infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Change no-color icon in color palette

pull/1/head
ClemDee 2019-06-19 17:20:08 +02:00
parent 3635d1305a
commit 439596d0d2
2 changed files with 22 additions and 65 deletions

35
www/drive/app-drive.less
View File

@ -185,7 +185,6 @@
flex-wrap: wrap;
justify-content: center;
align-items: center;
.cp-app-drive-color-picker-color {
position: relative;
width: 50px;
@ -193,38 +192,13 @@
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 #bbb;
transform-origin: top left;
-ms-transform-origin: top left;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
&.cp-app-drive-current-color > .fa-check {
top: 35%; left: 35%;
color: black;
}
}
.cp-app-drive-icon-folder {
position: absolute;
font-size: 50px;
}
.cptools-folder-no-color {
color: #999;
}
.fa-check {
position: absolute;
top: 40%; left: 35%;
@ -234,6 +208,9 @@
color: white;
}
&.cp-app-drive-current-color:first-child > .fa-check {
color: black;
}
}
}

52
www/drive/inner.js
View File

@ -884,46 +884,26 @@ define([
var pickFolderColor = function ($element, currentColor, cb) {
var colors = ["none", "#f23c38", "#ff0073", "#da0eba", "#9d00ac", "#6c19b3", "#4a42b1", "#3d8af0", "#30a0f1", "#1fb9d1", "#009686", "#45b354", "#84c750", "#c6e144", "#faf147", "#fbc423", "#fc9819", "#fd5227", "#775549", "#9c9c9c", "#607a89"];
var colors = ["", "#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;
colors.forEach(function (color, i) {
var element;
if (i === 0) {
element = h("span.cp-app-drive-color-picker-color.cp-app-drive-no-color", [
h("span.fa.fa-check")
]);
if (currentColor === "") {
currentElement = element;
$(element).addClass("cp-app-drive-current-color");
}
$(element).on("click", function () {
$(currentElement).removeClass("cp-app-drive-current-color");
currentElement = element;
$(element).addClass("cp-app-drive-current-color");
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");
}
$(element).on("click", function () {
$(currentElement).removeClass("cp-app-drive-current-color");
currentElement = element;
$(element).addClass("cp-app-drive-current-color");
cb(color);
});
colorsElements.push(element);
var element = h("span.cp-app-drive-color-picker-color", [
h("span.cptools.cp-app-drive-icon-folder.cp-app-drive-content-icon" + (i === 0 ? ".cptools-folder-no-color" : ".cptools-folder")), // XXX cptools-folder-no-color does not show up
h("span.fa.fa-check")
]);
$(element).css("color", colors[i]);
if (colors[i] === currentColor) {
currentElement = element;
$(element).addClass("cp-app-drive-current-color");
}
$(element).on("click", function () {
$(currentElement).removeClass("cp-app-drive-current-color");
currentElement = element;
$(element).addClass("cp-app-drive-current-color");
cb(color);
});
colorsElements.push(element);
});
var content = h("div.cp-app-drive-color-picker", colorsElements);
UI.alert(content);