diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less index 6b638aafe..b7dcb1536 100644 --- a/www/drive/app-drive.less +++ b/www/drive/app-drive.less @@ -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; + } } } diff --git a/www/drive/inner.js b/www/drive/inner.js index 8680c6ef3..3697f416e 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -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);