Add configurable border color to badge trophies

com.woltlab.wcf/templates/shared_trophyBadge.tpl

@@ -1,6 +1,6 @@
 <span
 	class="trophyIcon{if $showTooltip} jsTooltip{/if}"
-	style="color: {$trophy->iconColor}; background-color: {$trophy->badgeColor}"
+	style="color: {$trophy->iconColor}; background-color: {$trophy->badgeColor}{if $trophy->borderColor}; --trophy-border-color: {$trophy->borderColor}{/if}"
 	data-trophy-id="{$trophy->trophyID}"
 	{if $showTooltip}title="{$trophy->getTitle()}"{/if}
 >

com.woltlab.wcf/templates/shared_trophyBadgeFormField.tpl

@@ -1,19 +1,21 @@
 <div class="badgeIconEditor" id="{$field->getPrefixedId()}_container">
-	<span class="trophyIcon" style="color: {$field->getIconColor()}; background-color: {$field->getBadgeColor()}">
+	<span class="trophyIcon" style="color: {$field->getIconColor()}; background-color: {$field->getBadgeColor()}; --trophy-border-color: {$field->getBorderColor()}">
 		{unsafe:$field->getIcon()->toHtml(64)}
 	</span>
 	{if !$field->isImmutable()}
 		<div class="badgeIconEditorButtons">
 			<button type="button" class="button small" data-value="icon">{lang}wcf.global.fontAwesome.selectIcon{/lang}</button>
 			<button type="button" class="button small" data-value="color">{lang}wcf.style.colorPicker.changeColor{/lang}</button>
 			<button type="button" class="button small" data-value="background-color">{lang}wcf.style.colorPicker.changeBackgroundColor{/lang}</button>
+			<button type="button" class="button small" data-value="border-color">{lang}wcf.style.colorPicker.changeBorderColor{/lang}</button>
 		</div>
 	{/if}
 </div>
 
 <input type="hidden" id="{$field->getPrefixedId()}_iconName" name="{$field->getPrefixedId()}[iconName]" value="{$field->getIconName()}">
 <input type="hidden" id="{$field->getPrefixedId()}_iconColor" name="{$field->getPrefixedId()}[iconColor]" value="{$field->getIconColor()}">
 <input type="hidden" id="{$field->getPrefixedId()}_badgeColor" name="{$field->getPrefixedId()}[badgeColor]" value="{$field->getBadgeColor()}">
+<input type="hidden" id="{$field->getPrefixedId()}_borderColor" name="{$field->getPrefixedId()}[borderColor]" value="{$field->getBorderColor()}">
 
 {if !$field->isImmutable()}
 	{if $__trophyBadgeFormFieldIncludeJavaScript}

ts/WoltLabSuite/Core/Form/Builder/Field/Controller/TrophyBadge.ts

@@ -1,6 +1,6 @@
 /**
- * Enables editing of the icon, the icon color and the background color of a
- * badge trophy.
+ * Enables editing of the icon, the icon color, the background color and the
+ * border color of a badge trophy.
  *
  * @author    Alexander Ebert, Marcel Werk
  * @copyright 2001-2026 WoltLab GmbH
@@ -56,7 +56,7 @@ function setupColorPicker(
   button: HTMLButtonElement,
   preview: HTMLElement,
   input: HTMLInputElement,
-  property: "color" | "background-color",
+  property: "color" | "background-color" | "--trophy-border-color",
 ): void {
   button.dataset.store = input.id;
 
@@ -83,4 +83,10 @@ export function setup(fieldId: string): void {
     getInput(fieldId, "badgeColor"),
     "background-color",
   );
+  setupColorPicker(
+    getButton(container, "border-color"),
+    preview,
+    getInput(fieldId, "borderColor"),
+    "--trophy-border-color",
+  );
 }

ts/WoltLabSuite/Core/Form/Builder/Field/TrophyBadge.ts

@@ -16,6 +16,7 @@ class TrophyBadge extends Field {
         iconName: this.#getValue("iconName"),
         iconColor: this.#getValue("iconColor"),
         badgeColor: this.#getValue("badgeColor"),
+        borderColor: this.#getValue("borderColor"),
       },
     };
   }

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

@@ -53,6 +53,8 @@
                 ->notNull()
                 ->defaultValue(1),
             IntDatabaseTableColumn::create('iconFileID'),
+            VarcharDatabaseTableColumn::create('borderColor')
+                ->length(255),
             JsonDatabaseTableColumn::create('conditions'),
         ])
         ->foreignKeys([

wcfsetup/install/files/lib/acp/form/TrophyAddForm.class.php

@@ -205,7 +205,12 @@ protected function createForm(): void
                         ->label('wcf.acp.trophy.type.badge')
                         ->required()
                         ->saveValueCallback(static function (TrophyBuilder $builder, TrophyBadgeFormField $field): void {
-                            $builder->setBadge($field->getIconName(), $field->getIconColor(), $field->getBadgeColor());
+                            $builder->setBadge(
+                                $field->getIconName(),
+                                $field->getIconColor(),
+                                $field->getBadgeColor(),
+                                $field->getBorderColor()
+                            );
                         })
                         ->loadValueCallback(static function (Trophy $object, IFormField $field): void {
                             // Image trophies keep the default badge.
@@ -214,6 +219,7 @@ protected function createForm(): void
                                     'iconName' => $object->iconName,
                                     'iconColor' => $object->iconColor,
                                     'badgeColor' => $object->badgeColor,
+                                    'borderColor' => $object->borderColor,
                                 ]);
                             }
                         })

wcfsetup/install/files/lib/data/trophy/Trophy.class.php

@@ -36,6 +36,7 @@
  * @property-read   ?string $iconName
  * @property-read   ?string $iconColor
  * @property-read   ?string $badgeColor
+ * @property-read   ?string $borderColor
  * @property-read   0|1     $isDisabled             `1` if the trophy is disabled, otherwise `0`
  * @property-read   0|1     $awardAutomatically     `1` if the trophy is awarded automatically, otherwise `0`
  * @property-read   0|1     $revokeAutomatically    `1` if the trophy should be automatically revoked once the conditions are no longer met, otherwise `0`

wcfsetup/install/files/lib/data/trophy/TrophyBuilder.class.php

@@ -80,6 +80,7 @@ public function setType(int $type): static
             $this->properties['iconName'] = '';
             $this->properties['iconColor'] = '';
             $this->properties['badgeColor'] = '';
+            $this->properties['borderColor'] = '';
         } elseif ($type === Trophy::TYPE_BADGE) {
             $this->properties['iconFileID'] = null;
         }
@@ -100,11 +101,12 @@ public function setIconFileID(?int $iconFileID): static
     /**
      * Sets the icon and the colors of a badge trophy.
      */
-    public function setBadge(string $iconName, string $iconColor, string $badgeColor): static
+    public function setBadge(string $iconName, string $iconColor, string $badgeColor, string $borderColor): static
     {
         $this->properties['iconName'] = $iconName;
         $this->properties['iconColor'] = $iconColor;
         $this->properties['badgeColor'] = $badgeColor;
+        $this->properties['borderColor'] = $borderColor;
 
         return $this;
     }

wcfsetup/install/files/lib/system/form/builder/field/trophy/TrophyBadgeFormField.class.php

@@ -9,10 +9,11 @@
 use wcf\system\style\FontAwesomeIcon;
 
 /**
- * Form field to configure the icon, the icon color and the background color of
- * a badge trophy.
+ * Form field to configure the icon, the icon color, the background color and the
+ * border color of a badge trophy.
  *
- * The value is an array with the keys `iconName`, `iconColor` and `badgeColor`.
+ * The value is an array with the keys `iconName`, `iconColor`, `badgeColor` and
+ * `borderColor`.
  *
  * @author      Marcel Werk
  * @copyright   2001-2026 WoltLab GmbH
@@ -29,6 +30,8 @@ final class TrophyBadgeFormField extends AbstractFormField implements IImmutable
 
     public const DEFAULT_BADGE_COLOR = 'rgba(50, 92, 132, 1)';
 
+    public const DEFAULT_BORDER_COLOR = 'rgba(0, 0, 0, 0)';
+
     private const COLOR_PATTERN = '~^rgba\(\d{1,3}, ?\d{1,3}, ?\d{1,3}, ?(1|1\.00?|0|0?\.[0-9]{1,2})\)$~';
 
     /**
@@ -48,6 +51,7 @@ final class TrophyBadgeFormField extends AbstractFormField implements IImmutable
         'iconName' => self::DEFAULT_ICON_NAME,
         'iconColor' => self::DEFAULT_ICON_COLOR,
         'badgeColor' => self::DEFAULT_BADGE_COLOR,
+        'borderColor' => self::DEFAULT_BORDER_COLOR,
     ];
 
     /**
@@ -76,6 +80,7 @@ public function readValue(): TrophyBadgeFormField
                     'iconName' => (string)($value['iconName'] ?? ''),
                     'iconColor' => (string)($value['iconColor'] ?? ''),
                     'badgeColor' => (string)($value['badgeColor'] ?? ''),
+                    'borderColor' => (string)($value['borderColor'] ?? ''),
                 ];
             }
         }
@@ -96,6 +101,7 @@ public function value(mixed $value): TrophyBadgeFormField
             'iconName' => (string)($value['iconName'] ?? self::DEFAULT_ICON_NAME),
             'iconColor' => (string)($value['iconColor'] ?? self::DEFAULT_ICON_COLOR),
             'badgeColor' => (string)($value['badgeColor'] ?? self::DEFAULT_BADGE_COLOR),
+            'borderColor' => (string)($value['borderColor'] ?? self::DEFAULT_BORDER_COLOR),
         ];
 
         return $this;
@@ -126,6 +132,7 @@ public function validate(): void
         if (
             \preg_match(self::COLOR_PATTERN, $this->getIconColor()) !== 1
             || \preg_match(self::COLOR_PATTERN, $this->getBadgeColor()) !== 1
+            || \preg_match(self::COLOR_PATTERN, $this->getBorderColor()) !== 1
         ) {
             $this->addValidationError(new FormFieldValidationError(
                 'invalidValue',
@@ -149,6 +156,11 @@ public function getBadgeColor(): string
         return $this->value['badgeColor'];
     }
 
+    public function getBorderColor(): string
+    {
+        return $this->value['borderColor'];
+    }
+
     /**
      * Returns the selected icon or the default icon if the selection is invalid.
      */

wcfsetup/install/files/lib/system/user/notification/event/UserTrophyReceivedNotificationEvent.class.php

@@ -80,7 +80,8 @@ public static function getTestObjects(UserProfile $recipient, UserProfile $autho
             ->setBadge(
                 FontAwesomeIcon::fromString('trophy;false')->__toString(),
                 'rgba(255, 255, 255, 1)',
-                'rgba(50, 92, 132, 1)'
+                'rgba(50, 92, 132, 1)',
+                'rgba(0, 0, 0, 0)'
             )
             ->create();
 

wcfsetup/install/files/style/ui/trophy.scss

@@ -26,6 +26,7 @@
 	align-self: flex-start;
 	display: inline-block;
 	border-radius: 50%;
+	box-shadow: inset 0 0 0 2px var(--trophy-border-color, transparent);
 
 	fa-icon {
 		transform: scale(0.5625);

wcfsetup/install/lang/de.xml

@@ -4514,6 +4514,7 @@ Erlaubte Dateiendungen: gif, jpg, jpeg, png, webp]]></item>
 		<item name="wcf.style.colorPicker.lightness"><![CDATA[Helligkeit]]></item>
 		<item name="wcf.style.colorPicker.changeColor"><![CDATA[Farbe ändern]]></item>
 		<item name="wcf.style.colorPicker.changeBackgroundColor"><![CDATA[Hintergrundfarbe ändern]]></item>
+		<item name="wcf.style.colorPicker.changeBorderColor"><![CDATA[Rahmenfarbe ändern]]></item>
 		<item name="wcf.style.colorPicker.opacity"><![CDATA[Deckkraft]]></item>
 		<item name="wcf.style.setColorScheme"><![CDATA[Farbschema festlegen]]></item>
 		<item name="wcf.style.setColorScheme.dark"><![CDATA[Dunkles Farbschema]]></item>

wcfsetup/install/lang/en.xml

@@ -4513,6 +4513,7 @@ Allowed extensions: gif, jpg, jpeg, png, webp]]></item>
 		<item name="wcf.style.colorPicker.lightness"><![CDATA[Lightness]]></item>
 		<item name="wcf.style.colorPicker.changeColor"><![CDATA[Change Color]]></item>
 		<item name="wcf.style.colorPicker.changeBackgroundColor"><![CDATA[Change Background Color]]></item>
+		<item name="wcf.style.colorPicker.changeBorderColor"><![CDATA[Change Border Color]]></item>
 		<item name="wcf.style.colorPicker.opacity"><![CDATA[Opacity]]></item>
 		<item name="wcf.style.setColorScheme"><![CDATA[Set Color Scheme]]></item>
 		<item name="wcf.style.setColorScheme.dark"><![CDATA[Dark Theme]]></item>

wcfsetup/setup/db/install_com.woltlab.wcf.php

@@ -3868,6 +3868,8 @@
                 ->length(255),
             VarcharDatabaseTableColumn::create('badgeColor')
                 ->length(255),
+            VarcharDatabaseTableColumn::create('borderColor')
+                ->length(255),
             DefaultFalseBooleanDatabaseTableColumn::create('isDisabled'),
             DefaultFalseBooleanDatabaseTableColumn::create('awardAutomatically'),
             DefaultFalseBooleanDatabaseTableColumn::create('revokeAutomatically'),