Clean-up of legacy files, FF workaround

diff --git a/com.woltlab.wcf/fileDelete.xml b/com.woltlab.wcf/fileDelete.xml
index 75ce2723abd0ba2cf9dce14eb8ff37a43c54fe80..dfaf97c229672779d8e60299fe99474c98dd6360 100644 (file)
--- a/com.woltlab.wcf/fileDelete.xml
+++ b/com.woltlab.wcf/fileDelete.xml
@@ -645,6 +645,8 @@
                <file>icon/write1.svg</file>
                <file>images/apple-touch-icon.png</file>
                <file>images/avatars/generateAvatar.php</file>
+               <file>images/colorPickerBar.png</file>
+               <file>images/colorPickerGradient.png</file>
                <file>images/favicon.ico</file>
                <file>images/imageViewer/blank.png</file>
                <file>images/imageViewer/menu.png</file>

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts b/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts
index d7381f5cf97e1788e53e1f3f216d9d788b0631c4..62a053143f2fde176034b29a2745589002f8154b 100644 (file)
--- 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 b217807f0e96f41ca2f0ca5eb0f65eb1c997cf7d..eba44d6a0ba3f423289e3c51895193288dc191c7 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
+++ b/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
@@ -111,11 +111,11 @@ class UiColorPicker implements DialogCallbackObject {
         <dt>${Language.get("wcf.style.colorPicker.color")}</dt>
         <dd class="colorPickerChannels">
           rgba(
-          <input type="number" min="0" max="255" class="colorPickerChannel" data-channel="r">
-          <input type="number" min="0" max="255" class="colorPickerChannel" data-channel="g">
-          <input type="number" min="0" max="255" class="colorPickerChannel" data-channel="b">
+          <input type="number" min="0" max="255" size="3" class="colorPickerChannel" data-channel="r">
+          <input type="number" min="0" max="255" size="3" class="colorPickerChannel" data-channel="g">
+          <input type="number" min="0" max="255" size="3" class="colorPickerChannel" data-channel="b">
           /
-          <input type="number" min="0" max="1" step="0.01" class="colorPickerChannel" data-channel="a">
+          <input type="number" min="0" max="1" step="0.01" size="3" class="colorPickerChannel" data-channel="a">
           )
         </dd>
       </dl>

diff --git a/wcfsetup/install/files/images/colorPickerBar.png b/wcfsetup/install/files/images/colorPickerBar.png
deleted file mode 100644 (file)
index 014d030..0000000
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 (file)
index 0fda1ea..0000000
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 857ad208d7a786283ad22f15dafb408005d11035..0fc40aad0c45a2b5012d42ba50275858cf784d46 100644 (file)
--- 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 <http://opensource.org/licenses/lgpl-license.php>
  * @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 1832dc180e486578fa7601d98f637108179cd8d8..e9f7397fe60fbd1d803a15a18403aaeba4e248d2 100644 (file)
--- 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
         <dt>${Language.get("wcf.style.colorPicker.color")}</dt>
         <dd class="colorPickerChannels">
           rgba(
-          <input type="number" min="0" max="255" class="colorPickerChannel" data-channel="r">
-          <input type="number" min="0" max="255" class="colorPickerChannel" data-channel="g">
-          <input type="number" min="0" max="255" class="colorPickerChannel" data-channel="b">
+          <input type="number" min="0" max="255" size="3" class="colorPickerChannel" data-channel="r">
+          <input type="number" min="0" max="255" size="3" class="colorPickerChannel" data-channel="g">
+          <input type="number" min="0" max="255" size="3" class="colorPickerChannel" data-channel="b">
           /
-          <input type="number" min="0" max="1" step="0.01" class="colorPickerChannel" data-channel="a">
+          <input type="number" min="0" max="1" step="0.01" size="3" class="colorPickerChannel" data-channel="a">
           )
         </dd>
       </dl>

diff --git a/wcfsetup/install/files/style/ui/colorPicker.scss b/wcfsetup/install/files/style/ui/colorPicker.scss
index f0e305bba7e3571ca84b10dbb6c1512ca5429a0b..34ea8d31373dc9bdbf5843b5a20c1f0c6efe435a 100644 (file)
--- 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,