Overhaul trophy conditions

com.woltlab.wcf/fileDelete.xml

@@ -62,5 +62,6 @@
 		<file>lib/system/upload/AvatarUploadFileValidationStrategy.class.php</file>
 		<file>lib/system/upload/UserCoverPhotoUploadFileSaveStrategy.class.php</file>
 		<file>lib/system/upload/UserCoverPhotoUploadFileValidationStrategy.class.php</file>
+		<file>lib/system/upload/TrophyImageUploadFileValidationStrategy.class.php</file>
 	</delete>
 </data>

com.woltlab.wcf/objectType.xml

@@ -1767,6 +1767,11 @@
 			<definitionname>com.woltlab.wcf.file</definitionname>
 			<classname>wcf\system\file\processor\UnfurlUrlImageFileProcessor</classname>
 		</type>
+		<type>
+			<name>com.woltlab.wcf.trophy</name>
+			<definitionname>com.woltlab.wcf.file</definitionname>
+			<classname>wcf\system\file\processor\TrophyFileProcessor</classname>
+		</type>
 		<!-- deprecated -->
 		<type>
 			<name>com.woltlab.wcf.page.controller</name>

com.woltlab.wcf/package.xml

@@ -55,5 +55,6 @@
 	<instruction type="database" run="standalone">acp/database/update_com.woltlab.wcf_6.3_step1.php</instruction>
 	<instruction type="script">acp/update_com.woltlab.wcf_6.3_userGroupAssignment.php</instruction>
 	<instruction type="script">acp/update_com.woltlab.wcf_6.3_notice.php</instruction>
+	<instruction type="script">acp/update_com.woltlab.wcf_6.3_trophy.php</instruction>
 	-->
 </package>

com.woltlab.wcf/templates/shared_colorFormField.tpl

@@ -3,9 +3,9 @@
 		<span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
 	</span>
 {else}
-	<a href="#" class="colorPickerButton jsTooltip" id="{$field->getPrefixedId()}_colorPickerButton" title="{lang}wcf.style.colorPicker.button.changeColor{/lang}" data-store="{$field->getPrefixedId()}">
-		<span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
-	</a>
+	<button type="button" class="colorPickerButton jsTooltip" id="{$field->getPrefixedId()}_colorPickerButton" title="{lang}wcf.style.colorPicker.button.changeColor{/lang}" data-store="{$field->getPrefixedId()}">
+		<span class="colorPickerButton__color"{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
+	</button>
 	<input type="hidden" {*
 		*}id="{$field->getPrefixedId()}" {*
 		*}name="{$field->getPrefixedId()}" {*

com.woltlab.wcf/templates/shared_conditionFormContainer.tpl

@@ -21,6 +21,10 @@
 	<button type="button" class="button" id="{$container->getPrefixedId()}AddCondition">
 		{lang}wcf.condition.add{/lang}
 	</button>
+
+	{if $container->isRequired() && $container->isEmpty()}
+		<small class="innerError">{lang}wcf.global.form.error.empty{/lang}</small>
+	{/if}
 </section>
 
 {include file='shared_formContainerDependencies'}

com.woltlab.wcf/templates/shared_trophyImage.tpl

@@ -1,5 +1,5 @@
 <img
-	src="{$__wcf->getPath()}images/trophy/{$trophy->iconFile}"
+	src="{$trophy->getFile()->getFullSizeImageSource()}"
 	width="{$size}"
 	height="{$size}"
 	{if $showTooltip}title="{$trophy->getTitle()}"{/if}

ts/WoltLabSuite/Core/Component/Icon/Badge.ts

@@ -0,0 +1,31 @@
+/**
+ * Handles the display of an icon badge with customizable colors.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+export function setup(iconFieldId: string, colorFieldId: string, backgroundColorFieldId: string) {
+  const container = document.getElementById(`${iconFieldId}_icon`)!;
+  container.classList.add("iconBadge");
+
+  if (colorFieldId !== "") {
+    const colorInput = document.getElementById(colorFieldId) as HTMLInputElement;
+    colorInput.addEventListener("color-picker:submit", () => {
+      container.style.setProperty("color", colorInput.value);
+    });
+
+    container.style.setProperty("color", colorInput.value);
+  }
+
+  if (backgroundColorFieldId !== "") {
+    const backgroundColorInput = document.getElementById(backgroundColorFieldId) as HTMLInputElement;
+    backgroundColorInput.addEventListener("color-picker:submit", () => {
+      container.style.setProperty("background-color", backgroundColorInput.value);
+    });
+
+    container.style.setProperty("background-color", backgroundColorInput.value);
+  }
+}

ts/WoltLabSuite/Core/Ui/Color/Picker.ts

@@ -131,10 +131,10 @@ class UiColorPicker implements DialogCallbackObject {
     <div class="colorPickerComparison">
       <small>${Language.get("wcf.style.colorPicker.new")}</small>
       <div class="colorPickerColorNew">
-        <span style="background-color: ${this.input.value}"></span>
+        <span style="background-color: ${this.input.value}; flex: 1 auto"></span>
       </div>
       <div class="colorPickerColorOld">
-        <span style="background-color: ${this.input.value}"></span>
+        <span style="background-color: ${this.input.value}; flex: 1 auto"></span>
       </div>
       <small>${Language.get("wcf.style.colorPicker.current")}</small>
     </div>
@@ -356,13 +356,13 @@ class UiColorPicker implements DialogCallbackObject {
     this.oldColor!.style.backgroundColor = colorString;
     this.input.value = colorString;
 
-    if (!(this.element instanceof HTMLButtonElement)) {
-      const span = this.element.querySelector("span");
-      if (span) {
-        span.style.backgroundColor = colorString;
-      } else {
-        this.element.style.backgroundColor = colorString;
-      }
+    const event = new CustomEvent<void>("color-picker:submit");
+    this.input.dispatchEvent(event);
+
+    const span = this.element.querySelector("span")
+    if (span !== null) {
+      span.classList.add("colorPickerButton__color");
+      span.style.setProperty("background-color", colorString);
     }
 
     UiDialog.close(this);

wcfsetup/install/files/acp/database/update_com.woltlab.wcf_6.3_step1.php

@@ -9,7 +9,9 @@
  */
 
 use wcf\system\database\table\column\DefaultFalseBooleanDatabaseTableColumn;
+use wcf\system\database\table\column\IntDatabaseTableColumn;
 use wcf\system\database\table\column\MediumtextDatabaseTableColumn;
+use wcf\system\database\table\index\DatabaseTableForeignKey;
 use wcf\system\database\table\PartialDatabaseTable;
 
 return [
@@ -23,4 +25,17 @@
             MediumtextDatabaseTableColumn::create('conditions'),
             DefaultFalseBooleanDatabaseTableColumn::create('isLegacy'),
         ]),
+    PartialDatabaseTable::create('wcf1_trophy')
+        ->columns([
+            MediumtextDatabaseTableColumn::create('conditions'),
+            DefaultFalseBooleanDatabaseTableColumn::create('isLegacy'),
+            IntDatabaseTableColumn::create('imageFileID'),
+        ])
+        ->foreignKeys([
+            DatabaseTableForeignKey::create()
+                ->columns(['imageFileID'])
+                ->referencedTable('wcf1_file')
+                ->referencedColumns(['fileID'])
+                ->onDelete('SET NULL'),
+        ]),
 ];