From 1ce663d7b2d84020e0a39131d0919cb53e524c7c Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 18 Aug 2022 18:41:28 +0200
Subject: [PATCH] Simplify and convert the rating form field

---
 .../templates/__ratingFormField.tpl           | 20 +++--
 .../Form/Builder/Field/Controller/Rating.ts   | 21 ++---
 .../files/acp/templates/__ratingFormField.tpl | 20 +++--
 .../Form/Builder/Field/Controller/Rating.js   | 16 ++--
 .../builder/field/RatingFormField.class.php   | 79 -------------------
 wcfsetup/install/files/style/ui/rating.scss   |  4 +
 6 files changed, 47 insertions(+), 113 deletions(-)

diff --git a/com.woltlab.wcf/templates/__ratingFormField.tpl b/com.woltlab.wcf/templates/__ratingFormField.tpl
index cbf631a560..f7938e7ba9 100644
--- a/com.woltlab.wcf/templates/__ratingFormField.tpl
+++ b/com.woltlab.wcf/templates/__ratingFormField.tpl
@@ -1,9 +1,21 @@
 <ul class="ratingList jsOnly">
 	{foreach from=$field->getRatings() item=rating}
-		<li data-rating="{@$rating}"><span class="icon icon24 {if $rating <= $field->getValue()}{implode from=$field->getActiveCssClasses() item=cssClass glue=' '}{@$cssClass}{/implode}{else}{implode from=$field->getDefaultCssClasses() item=cssClass glue=' '}{@$cssClass}{/implode}{/if} pointer jsTooltip" title="{lang maximumRating=$field->getMaximum()}wcf.form.field.rating.ratingTitle{/lang}"></span></li>
+		<li data-rating="{@$rating}">
+			<button type="button" class="jsTooltip" title="{lang maximumRating=$field->getMaximum()}wcf.form.field.rating.ratingTitle{/lang}">
+				{if $rating <= $field->getValue()}
+					{icon size=24 name='star' type='solid'}
+				{else}
+					{icon size=24 name='star'}
+				{/if}
+			</button>
+		</li>
 	{/foreach}
 	{if $field->isNullable()}
-		<li class="ratingMetaButton" data-action="removeRating"><span class="icon icon24 fa-times pointer jsTooltip" title="{lang}wcf.form.field.rating.removeRating{/lang}"></span></li>
+		<li class="ratingMetaButton" data-action="removeRating">
+			<button type="button" class="jsTooltip" title="{lang}wcf.form.field.rating.removeRating{/lang}">
+				{icon size=24 name='xmark'}
+			</button>
+		</li>
 	{/if}
 </ul>
 <noscript>
@@ -18,9 +30,7 @@
 	require(['WoltLabSuite/Core/Form/Builder/Field/Controller/Rating'], function(FormBuilderFieldRating) {
 		new FormBuilderFieldRating(
 			'{@$field->getPrefixedId()}',
-			{if $field->getValue() !== null}{@$field->getValue()}{else}''{/if},
-			[ {implode from=$field->getActiveCssClasses() item=cssClass}'{@$cssClass}'{/implode} ],
-			[ {implode from=$field->getDefaultCssClasses() item=cssClass}'{@$cssClass}'{/implode} ]
+			{if $field->getValue() !== null}{@$field->getValue()}{else}''{/if}
 		);
 	});
 </script>
diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.ts
index ec5e8da63a..f0b378afd0 100644
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.ts
@@ -12,13 +12,11 @@ import * as Core from "../../../../Core";
 import * as Environment from "../../../../Environment";
 
 class Rating {
-  protected readonly _activeCssClasses: string[];
-  protected readonly _defaultCssClasses: string[];
   protected readonly _field: HTMLElement;
   protected readonly _input: HTMLInputElement;
   protected readonly _ratingElements: Map<string, HTMLElement>;
 
-  constructor(fieldId: string, value: string, activeCssClasses: string[], defaultCssClasses: string[]) {
+  constructor(fieldId: string, value: string) {
     this._field = document.getElementById(fieldId + "Container")!;
     if (this._field === null) {
       throw new Error("Unknown field with id '" + fieldId + "'");
@@ -31,9 +29,6 @@ class Rating {
     this._input.value = value;
     this._field.appendChild(this._input);
 
-    this._activeCssClasses = activeCssClasses;
-    this._defaultCssClasses = defaultCssClasses;
-
     this._ratingElements = new Map();
 
     const ratingList = this._field.querySelector(".ratingList")!;
@@ -73,7 +68,7 @@ class Rating {
     const currentRating = target.dataset.rating!;
 
     this._ratingElements.forEach((ratingElement, rating) => {
-      const icon = ratingElement.getElementsByClassName("icon")[0]! as HTMLElement;
+      const icon = ratingElement.querySelector("fa-icon")!;
 
       this._toggleIcon(icon, ~~rating <= ~~currentRating);
     });
@@ -85,7 +80,7 @@ class Rating {
    */
   protected _listItemMouseLeave(): void {
     this._ratingElements.forEach((ratingElement) => {
-      const icon = ratingElement.getElementsByClassName("icon")[0]! as HTMLElement;
+      const icon = ratingElement.querySelector("fa-icon")!;
 
       this._toggleIcon(icon, false);
     });
@@ -108,7 +103,7 @@ class Rating {
    */
   protected _restoreRating(): void {
     this._ratingElements.forEach((ratingElement, rating) => {
-      const icon = ratingElement.getElementsByClassName("icon")[0]! as HTMLElement;
+      const icon = ratingElement.querySelector("fa-icon")!;
 
       this._toggleIcon(icon, ~~rating <= ~~this._input.value);
     });
@@ -117,13 +112,11 @@ class Rating {
   /**
    * Toggles the state of the given icon based on the given state parameter.
    */
-  protected _toggleIcon(icon: HTMLElement, active = false): void {
+  protected _toggleIcon(icon: FaIcon, active = false): void {
     if (active) {
-      icon.classList.remove(...this._defaultCssClasses);
-      icon.classList.add(...this._activeCssClasses);
+      icon.setIcon("star", true);
     } else {
-      icon.classList.remove(...this._activeCssClasses);
-      icon.classList.add(...this._defaultCssClasses);
+      icon.setIcon("star");
     }
   }
 }
diff --git a/wcfsetup/install/files/acp/templates/__ratingFormField.tpl b/wcfsetup/install/files/acp/templates/__ratingFormField.tpl
index cbf631a560..f7938e7ba9 100644
--- a/wcfsetup/install/files/acp/templates/__ratingFormField.tpl
+++ b/wcfsetup/install/files/acp/templates/__ratingFormField.tpl
@@ -1,9 +1,21 @@
 <ul class="ratingList jsOnly">
 	{foreach from=$field->getRatings() item=rating}
-		<li data-rating="{@$rating}"><span class="icon icon24 {if $rating <= $field->getValue()}{implode from=$field->getActiveCssClasses() item=cssClass glue=' '}{@$cssClass}{/implode}{else}{implode from=$field->getDefaultCssClasses() item=cssClass glue=' '}{@$cssClass}{/implode}{/if} pointer jsTooltip" title="{lang maximumRating=$field->getMaximum()}wcf.form.field.rating.ratingTitle{/lang}"></span></li>
+		<li data-rating="{@$rating}">
+			<button type="button" class="jsTooltip" title="{lang maximumRating=$field->getMaximum()}wcf.form.field.rating.ratingTitle{/lang}">
+				{if $rating <= $field->getValue()}
+					{icon size=24 name='star' type='solid'}
+				{else}
+					{icon size=24 name='star'}
+				{/if}
+			</button>
+		</li>
 	{/foreach}
 	{if $field->isNullable()}
-		<li class="ratingMetaButton" data-action="removeRating"><span class="icon icon24 fa-times pointer jsTooltip" title="{lang}wcf.form.field.rating.removeRating{/lang}"></span></li>
+		<li class="ratingMetaButton" data-action="removeRating">
+			<button type="button" class="jsTooltip" title="{lang}wcf.form.field.rating.removeRating{/lang}">
+				{icon size=24 name='xmark'}
+			</button>
+		</li>
 	{/if}
 </ul>
 <noscript>
@@ -18,9 +30,7 @@
 	require(['WoltLabSuite/Core/Form/Builder/Field/Controller/Rating'], function(FormBuilderFieldRating) {
 		new FormBuilderFieldRating(
 			'{@$field->getPrefixedId()}',
-			{if $field->getValue() !== null}{@$field->getValue()}{else}''{/if},
-			[ {implode from=$field->getActiveCssClasses() item=cssClass}'{@$cssClass}'{/implode} ],
-			[ {implode from=$field->getDefaultCssClasses() item=cssClass}'{@$cssClass}'{/implode} ]
+			{if $field->getValue() !== null}{@$field->getValue()}{else}''{/if}
 		);
 	});
 </script>
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.js
index d369c6c661..72ff393a32 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Rating.js
@@ -12,7 +12,7 @@ define(["require", "exports", "tslib", "../../../../Core", "../../../../Environm
     Core = tslib_1.__importStar(Core);
     Environment = tslib_1.__importStar(Environment);
     class Rating {
-        constructor(fieldId, value, activeCssClasses, defaultCssClasses) {
+        constructor(fieldId, value) {
             this._field = document.getElementById(fieldId + "Container");
             if (this._field === null) {
                 throw new Error("Unknown field with id '" + fieldId + "'");
@@ -23,8 +23,6 @@ define(["require", "exports", "tslib", "../../../../Core", "../../../../Environm
             this._input.type = "hidden";
             this._input.value = value;
             this._field.appendChild(this._input);
-            this._activeCssClasses = activeCssClasses;
-            this._defaultCssClasses = defaultCssClasses;
             this._ratingElements = new Map();
             const ratingList = this._field.querySelector(".ratingList");
             ratingList.addEventListener("mouseleave", () => this._restoreRating());
@@ -58,7 +56,7 @@ define(["require", "exports", "tslib", "../../../../Core", "../../../../Environm
             const target = event.currentTarget;
             const currentRating = target.dataset.rating;
             this._ratingElements.forEach((ratingElement, rating) => {
-                const icon = ratingElement.getElementsByClassName("icon")[0];
+                const icon = ratingElement.querySelector("fa-icon");
                 this._toggleIcon(icon, ~~rating <= ~~currentRating);
             });
         }
@@ -68,7 +66,7 @@ define(["require", "exports", "tslib", "../../../../Core", "../../../../Environm
          */
         _listItemMouseLeave() {
             this._ratingElements.forEach((ratingElement) => {
-                const icon = ratingElement.getElementsByClassName("icon")[0];
+                const icon = ratingElement.querySelector("fa-icon");
                 this._toggleIcon(icon, false);
             });
         }
@@ -87,7 +85,7 @@ define(["require", "exports", "tslib", "../../../../Core", "../../../../Environm
          */
         _restoreRating() {
             this._ratingElements.forEach((ratingElement, rating) => {
-                const icon = ratingElement.getElementsByClassName("icon")[0];
+                const icon = ratingElement.querySelector("fa-icon");
                 this._toggleIcon(icon, ~~rating <= ~~this._input.value);
             });
         }
@@ -96,12 +94,10 @@ define(["require", "exports", "tslib", "../../../../Core", "../../../../Environm
          */
         _toggleIcon(icon, active = false) {
             if (active) {
-                icon.classList.remove(...this._defaultCssClasses);
-                icon.classList.add(...this._activeCssClasses);
+                icon.setIcon("star", true);
             }
             else {
-                icon.classList.remove(...this._activeCssClasses);
-                icon.classList.add(...this._defaultCssClasses);
+                icon.setIcon("star");
             }
         }
     }
diff --git a/wcfsetup/install/files/lib/system/form/builder/field/RatingFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/RatingFormField.class.php
index e9e59480d3..9fd2ab42da 100644
--- a/wcfsetup/install/files/lib/system/form/builder/field/RatingFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/RatingFormField.class.php
@@ -13,9 +13,6 @@ use wcf\system\WCF;
  * the the field is not nullable, the minimum value will be automatically set when the field's value
  * is requested the first time.
  *
- * By default, the active rating state is represented by orange stars and the default state by white
- * stars with a black border.
- *
  * This field uses the `wcf.form.field.rating` language item as the default form field label and has
  * a minimum rating of `1` and a maximum rating of `5`.
  *
@@ -41,18 +38,6 @@ class RatingFormField extends AbstractFormField implements
     }
     use TNullableFormField;
 
-    /**
-     * CSS classes for the active state of the rating elements
-     * @var string[]
-     */
-    protected $activeCssClasses = ['fa-star', 'orange'];
-
-    /**
-     * CSS classes for the default state of the rating elements
-     * @var string[]
-     */
-    protected $defaultCssClasses = ['fa-star-o'];
-
     /**
      * @inheritDoc
      */
@@ -73,70 +58,6 @@ class RatingFormField extends AbstractFormField implements
         $this->maximum(5);
     }
 
-    /**
-     * Sets the CSS classes for the active state of the rating elements.
-     *
-     * @param string[] $cssClasses active state CSS classes
-     * @return  static              this form field
-     * @throws  \InvalidArgumentException   if no or invalid CSS classes are given
-     */
-    public function activeCssClasses(array $cssClasses)
-    {
-        if (empty($cssClasses)) {
-            throw new \InvalidArgumentException("No css classes for active state given for field '{$this->getId()}'.");
-        }
-
-        foreach ($cssClasses as $cssClass) {
-            static::validateClass($cssClass);
-        }
-
-        $this->activeCssClasses = $cssClasses;
-
-        return $this;
-    }
-
-    /**
-     * Sets the CSS classes for the default state of the rating elements.
-     *
-     * @param string[] $cssClasses default state CSS classes
-     * @return  static              this form field
-     * @throws  \InvalidArgumentException   if no or invalid CSS classes are given
-     */
-    public function defaultCssClasses(array $cssClasses)
-    {
-        if (empty($cssClasses)) {
-            throw new \InvalidArgumentException("No css classes for default state given for field '{$this->getId()}'.");
-        }
-
-        foreach ($cssClasses as $cssClass) {
-            static::validateClass($cssClass);
-        }
-
-        $this->defaultCssClasses = $cssClasses;
-
-        return $this;
-    }
-
-    /**
-     * Returns the CSS classes for the active state of the rating elements.
-     *
-     * @return  string[]
-     */
-    public function getActiveCssClasses()
-    {
-        return $this->activeCssClasses;
-    }
-
-    /**
-     * Returns the CSS classes for the default state of the rating elements.
-     *
-     * @return  string[]
-     */
-    public function getDefaultCssClasses()
-    {
-        return $this->defaultCssClasses;
-    }
-
     /**
      * Returns the sorted list of possible ratings used to generate the form field's html code.
      *
diff --git a/wcfsetup/install/files/style/ui/rating.scss b/wcfsetup/install/files/style/ui/rating.scss
index a275b60fa3..3d4c936323 100644
--- a/wcfsetup/install/files/style/ui/rating.scss
+++ b/wcfsetup/install/files/style/ui/rating.scss
@@ -4,4 +4,8 @@
 	> li {
 		display: inline-block;
 	}
+
+	fa-icon[name="star"][solid] {
+		color: #f90;
+	}
 }
-- 
2.20.1