From 168e08810fddc7d4601bbabb2d5572aec188b503 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 30 May 2022 18:43:14 +0200 Subject: [PATCH] Clean-up of legacy files, FF workaround --- com.woltlab.wcf/fileDelete.xml | 2 + ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts | 2 +- ts/WoltLabSuite/Core/Ui/Color/Picker.ts | 8 +- .../install/files/images/colorPickerBar.png | Bin 102 -> 0 bytes .../files/images/colorPickerGradient.png | Bin 8566 -> 0 bytes .../WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js | 6 +- .../js/WoltLabSuite/Core/Ui/Color/Picker.js | 8 +- .../install/files/style/ui/colorPicker.scss | 165 +++--------------- 8 files changed, 34 insertions(+), 157 deletions(-) delete mode 100644 wcfsetup/install/files/images/colorPickerBar.png delete mode 100644 wcfsetup/install/files/images/colorPickerGradient.png diff --git a/com.woltlab.wcf/fileDelete.xml b/com.woltlab.wcf/fileDelete.xml index 75ce2723ab..dfaf97c229 100644 --- a/com.woltlab.wcf/fileDelete.xml +++ b/com.woltlab.wcf/fileDelete.xml @@ -645,6 +645,8 @@ icon/write1.svg images/apple-touch-icon.png images/avatars/generateAvatar.php + images/colorPickerBar.png + images/colorPickerGradient.png images/favicon.ico images/imageViewer/blank.png images/imageViewer/menu.png diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts b/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts index d7381f5cf9..62a053143f 100644 --- a/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts +++ b/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts @@ -11,7 +11,7 @@ import * as Language from "../../../Language"; import UiDialog from "../../../Ui/Dialog"; import * as UiStyleFontAwesome from "../../../Ui/Style/FontAwesome"; import { DialogCallbackObject, DialogCallbackSetup } from "../../../Ui/Dialog/Data"; -import * as ColorPicker from "../../../Ui/Color/Picker"; +import ColorPicker from "../../../Ui/Color/Picker"; interface Rgba { r: number; diff --git a/ts/WoltLabSuite/Core/Ui/Color/Picker.ts b/ts/WoltLabSuite/Core/Ui/Color/Picker.ts index b217807f0e..eba44d6a0b 100644 --- a/ts/WoltLabSuite/Core/Ui/Color/Picker.ts +++ b/ts/WoltLabSuite/Core/Ui/Color/Picker.ts @@ -111,11 +111,11 @@ class UiColorPicker implements DialogCallbackObject {
${Language.get("wcf.style.colorPicker.color")}
rgba( - - - + + + / - + )
diff --git a/wcfsetup/install/files/images/colorPickerBar.png b/wcfsetup/install/files/images/colorPickerBar.png deleted file mode 100644 index 014d03080b75abacfc8e0a921c0eada04b7a4fc9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 102 zcmeAS@N?(olHy`uVBq!ia0vp^j3C6p1Z4e<={^snbUj@hLo|Y~9&Y4hFyLW2xLk1e z|6NWQ&jl=O1$G>`S|qZf!TStX(7}L2v58#ry8_!7&R;l|1k}jj>FVdQ&MBb@04%p2 A)Bpeg diff --git a/wcfsetup/install/files/images/colorPickerGradient.png b/wcfsetup/install/files/images/colorPickerGradient.png deleted file mode 100644 index 0fda1ea1c64c01f317a1c778e4dc2e5f3582314c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8566 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 * @module WoltLabSuite/Core/Acp/Ui/Trophy/Badge */ -define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog", "../../../Ui/Style/FontAwesome", "../../../Ui/Color/Picker"], function (require, exports, tslib_1, Language, Dialog_1, UiStyleFontAwesome, ColorPicker) { +define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog", "../../../Ui/Style/FontAwesome", "../../../Ui/Color/Picker"], function (require, exports, tslib_1, Language, Dialog_1, UiStyleFontAwesome, Picker_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.init = void 0; Language = tslib_1.__importStar(Language); Dialog_1 = tslib_1.__importDefault(Dialog_1); UiStyleFontAwesome = tslib_1.__importStar(UiStyleFontAwesome); - ColorPicker = tslib_1.__importStar(ColorPicker); + Picker_1 = tslib_1.__importDefault(Picker_1); /** * @exports WoltLabSuite/Core/Acp/Ui/Trophy/Badge */ @@ -133,7 +133,7 @@ define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog" picker.click(); }); document.querySelectorAll(".jsColorPicker").forEach((element) => { - new ColorPicker(element, { callbackSubmit: () => this.renderIcon() }); + new Picker_1.default(element, { callbackSubmit: () => this.renderIcon() }); }); const submitButton = context.querySelector(".formSubmit > .buttonPrimary"); submitButton.addEventListener("click", (ev) => this.save(ev)); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js index 1832dc180e..e9f7397fe6 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js @@ -71,11 +71,11 @@ define(["require", "exports", "tslib", "../../Core", "../Dialog", "../../Dom/Uti
${Language.get("wcf.style.colorPicker.color")}
rgba( - - - + + + / - + )
diff --git a/wcfsetup/install/files/style/ui/colorPicker.scss b/wcfsetup/install/files/style/ui/colorPicker.scss index f0e305bba7..34ea8d3137 100644 --- a/wcfsetup/install/files/style/ui/colorPicker.scss +++ b/wcfsetup/install/files/style/ui/colorPicker.scss @@ -1,140 +1,3 @@ -#colorPickerGradient { - background-color: #f00; - background-image: url("../images/colorPickerGradient.png"); - background-repeat: no-repeat; - border: 1px solid rgba(0, 0, 0, 1); - cursor: default; - display: inline-block; - height: 256px; - overflow: hidden; - position: relative; - width: 256px; - - > span { - border: 1px solid rgba(0, 0, 0, 1); - border-radius: 10px; - display: block; - height: 10px; - left: -4px; - position: absolute; - top: -4px; - width: 10px; - - > span { - border: 1px solid rgba(255, 255, 255, 1); - border-radius: 10px; - display: block; - height: 8px; - width: 8px; - } - } -} - -#colorPickerBar { - background-image: url("../images/colorPickerBar.png"); - background-repeat: repeat-x; - border: 1px solid rgba(0, 0, 0, 1); - cursor: default; - display: inline-block; - height: 256px; - margin-left: 10px; - position: relative; - width: 16px; - - > span { - display: inline-block; - height: 1px; - left: 0; - position: absolute; - top: 27px; - width: 16px; - - &::after, - &::before { - content: ""; - display: block; - height: 0; - position: absolute; - top: 0; - width: 0; - } - - &::after { - border-bottom: 5px solid transparent; - border-right: 5px solid rgba(0, 0, 0, 1); - border-top: 5px solid transparent; - right: -7px; - top: -5px; - } - - &::before { - border-bottom: 5px solid transparent; - border-left: 5px solid rgba(0, 0, 0, 1); - border-top: 5px solid transparent; - left: -7px; - top: -5px; - } - } -} - -#colorPickerForm { - display: inline-block; - margin-left: 20px; - position: relative; - text-align: center; - width: 100px; - - > .colors { - margin-left: 2px; - - > .new, - > .old { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC); - border: 1px solid rgba(0, 0, 0, 1); - box-sizing: content-box; - display: block; - height: 24px; - - > span { - display: block; - height: 24px; - } - } - - > .old { - background-position: 8px 0; - border-top-width: 0; - } - } - - > .hex { - margin-top: 20px; - } - - > .rgba { - margin-top: 20px; - - > li.a { - margin-top: 10px; - } - - > li.g, - > li.b { - margin-top: 2px; - } - } - - > .rgba > li, - > .hex > li { - text-align: right; - - input { - margin-left: 5px; - width: 80px; - } - } -} - .colorPreview { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC); border: 1px solid $wcfContentBorderInner; @@ -149,8 +12,6 @@ } } -/** updated `WoltLabSuite/Core/Ui/Color/Picker` version since 5.5 */ - .colorPickerColorNew, .colorPickerColorOld, .colorPickerButton { @@ -215,10 +76,6 @@ border-top-width: 0; } -.colorPickerChannel { - display: inline-flex; -} - .colorPickerHslRange, .colorPickerHslRange::-webkit-slider-thumb { -webkit-appearance: none; @@ -228,14 +85,12 @@ .colorPickerHslRange { width: 100%; - //&::-moz-range-track, &::-webkit-slider-runnable-track { background-image: var(--track-image); height: 10px; border-radius: 5px; } - //&::-moz-range-thumb, &::-webkit-slider-thumb { background-color: hsl(var(--hue), var(--saturation), var(--lightness)); border: 4px solid #fff; @@ -248,6 +103,26 @@ } } +/* Do not merge these with the block above, it breaks Chrome. */ +.colorPickerHslRange { + &::-moz-range-track { + background-image: var(--track-image); + height: 10px; + border-radius: 5px; + } + + &::-moz-range-thumb { + background-color: hsl(var(--hue), var(--saturation), var(--lightness)); + border: 4px solid #fff; + border-radius: 50%; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.025), 0 1px 5px rgba(0, 0, 0, 0.25); + cursor: pointer; + height: 24px; + margin-top: -6px; + width: 24px; + } +} + .colorPickerHslRange[data-coordinate="hue"] { --track-image: linear-gradient( to right, -- 2.20.1