From: Alexander Ebert Date: Mon, 30 May 2022 16:43:14 +0000 (+0200) Subject: Clean-up of legacy files, FF workaround X-Git-Tag: 5.5.0_Beta_4~7^2~2 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=168e08810fddc7d4601bbabb2d5572aec188b503;p=GitHub%2FWoltLab%2FWCF.git Clean-up of legacy files, FF workaround --- 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 014d03080b..0000000000 Binary files a/wcfsetup/install/files/images/colorPickerBar.png and /dev/null differ diff --git a/wcfsetup/install/files/images/colorPickerGradient.png b/wcfsetup/install/files/images/colorPickerGradient.png deleted file mode 100644 index 0fda1ea1c6..0000000000 Binary files a/wcfsetup/install/files/images/colorPickerGradient.png and /dev/null differ diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js index 857ad208d7..0fc40aad0c 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js @@ -6,14 +6,14 @@ * @license GNU Lesser General Public License * @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,