From 2a0e093a8f81f7e9ff1ce427ac8bb1900d372d6b Mon Sep 17 00:00:00 2001
From: Roland Gruber <post@rolandgruber.de>
Date: Thu, 13 Jan 2022 19:46:46 +0100
Subject: [PATCH] restyling

---
 lam/graphics/required.png | Bin 3002 -> 0 bytes
 lam/lib/html.inc          |  63 +++++++++++++++++++++++++-------------
 lam/style/500_layout.css  |   6 ++++
 3 files changed, 48 insertions(+), 21 deletions(-)
 delete mode 100644 lam/graphics/required.png

diff --git a/lam/graphics/required.png b/lam/graphics/required.png
deleted file mode 100644
index 2718ce4c3ad8490e36cbc75130c1c5d9c3335900..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3002
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

diff --git a/lam/lib/html.inc b/lam/lib/html.inc
index cc0d6d21e..a31b546c7 100644
--- a/lam/lib/html.inc
+++ b/lam/lib/html.inc
@@ -27,6 +27,26 @@
 * @author Roland Gruber
 */
 
+/**
+ * Returns the marker for required values.
+ *
+ * @return string HTML code for required marker
+ */
+function htmlGetRequiredMarker(): string {
+	return '<span class="lam-required" title="' . _('required') . '">*</span>';
+}
+
+/**
+ * Returns the marker for required values.
+ *
+ * @return htmlSpan HTML code for required marker
+ */
+function htmlGetRequiredMarkerElement(): htmlSpan {
+	$span = new htmlSpan(new htmlOutputText('*'), array('lam-required'));
+	$span->setTitle(_('required'));
+	return $span;
+}
+
 /**
  * Represents a HTML element.
  * This is used to build HTML code by using objects.
@@ -948,9 +968,7 @@ class htmlTableExtendedInputField extends htmlInputField {
 		echo '<div class="nowrap">';
 		echo $this->label;
 		if ($this->required) {
-			$graphicsPath = "../../graphics";
-			if (is_dir("../graphics")) $graphicsPath = "../graphics";
-			echo '<img src="' . $graphicsPath . '/required.png" alt="required" width=16 height=16 title="' . _('required') . '">';
+			echo htmlGetRequiredMarker();
 		}
 		echo '</div>';
 		echo "\n</td>\n<td>\n";
@@ -2045,9 +2063,7 @@ class htmlOutputText extends htmlElement {
 			echo $this->string;
 		}
 		if ($this->markAsRequired) {
-			$graphicsPath = "../../graphics";
-			if (is_dir("../graphics")) $graphicsPath = "../graphics";
-			echo '<img src="' . $graphicsPath . '/required.png" alt="required" width=16 height=16 title="' . _('required') . '">';
+			echo htmlGetRequiredMarker();
 		}
 		if ($this->isPreformatted) {
 			echo "</pre>";
@@ -2763,9 +2779,7 @@ class htmlTableExtendedInputTextarea extends htmlInputTextarea {
 		echo '<div class="nowrap">';
 		echo $this->label;
 		if ($this->required) {
-			$graphicsPath = "../../graphics";
-			if (is_dir("../graphics")) $graphicsPath = "../graphics";
-			echo '<img src="' . $graphicsPath . '/required.png" alt="required" width=16 height=16 title="' . _('required') . '">';
+			echo htmlGetRequiredMarker();
 		}
 		echo '</div>';
 		echo "\n</td>\n<td>\n";
@@ -3705,6 +3719,8 @@ class htmlSpan extends htmlElement {
 	private $content = null;
 	/** onclick handler */
 	private $onclick = null;
+	/** title */
+	private $title = null;
 
 	/**
 	 * Constructor.
@@ -3739,7 +3755,11 @@ class htmlSpan extends htmlElement {
 		if (!empty($this->onclick)) {
 			$onclickHandler = ' onclick="' . $this->onclick . '"';
 		}
-		echo '<span' . $classesValue . $onclickHandler . '>';
+		$titleCode = '';
+		if ($this->title !== null) {
+			$titleCode = ' title="' . $this->title . '"';
+		}
+		echo '<span' . $classesValue . $titleCode . $onclickHandler . '>';
 		if ($this->content != null) {
 			$return = $this->content->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
 		}
@@ -3756,6 +3776,15 @@ class htmlSpan extends htmlElement {
 		$this->onclick = $event;
 	}
 
+	/**
+	 * Sets the title.
+	 *
+	 * @param string|null $title title
+	 */
+	public function setTitle(?string $title): void {
+		$this->title = htmlspecialchars($title);
+	}
+
 }
 
 /**
@@ -4465,11 +4494,7 @@ class htmlResponsiveInputField extends htmlInputField {
 		$labelGroup = new htmlGroup();
 		$labelGroup->addElement(new htmlOutputText($this->label));
 		if ($this->required) {
-			$graphicsPath = "../../graphics";
-			if (is_dir("../graphics")) {
-				$graphicsPath = "../graphics";
-			}
-			$labelGroup->addElement(new htmlImage($graphicsPath . '/required.png', 16, 16, _('required'), _('required')));
+			$labelGroup->addElement(htmlGetRequiredMarkerElement());
 		}
 		if (!empty($this->helpID)) {
 			$helpLinkLabel = new htmlHelpLink($this->helpID, $this->helpModule);
@@ -4561,9 +4586,7 @@ class htmlResponsiveInputFileUpload extends htmlInputFileUpload {
 		$labelGroup = new htmlGroup();
 		$labelGroup->addElement(new htmlOutputText($this->label));
 		if ($this->required) {
-			$graphicsPath = "../../graphics";
-			if (is_dir("../graphics")) $graphicsPath = "../graphics";
-			$labelGroup->addElement(new htmlImage($graphicsPath . '/required.png', 16, 16, _('required'), _('required')));
+			$labelGroup->addElement(htmlGetRequiredMarkerElement());
 		}
 		if (!empty($this->helpID)) {
 			$helpLinkLabel = new htmlHelpLink($this->helpID, $this->helpModule);
@@ -4648,9 +4671,7 @@ class htmlResponsiveInputTextarea extends htmlInputTextarea {
 		$labelGroup = new htmlGroup();
 		$labelGroup->addElement(new htmlOutputText($this->label));
 		if ($this->required) {
-			$graphicsPath = "../../graphics";
-			if (is_dir("../graphics")) $graphicsPath = "../graphics";
-			$labelGroup->addElement(new htmlImage($graphicsPath . '/required.png', 16, 16, _('required'), _('required')));
+			$labelGroup->addElement(htmlGetRequiredMarkerElement());
 		}
 		if (!empty($this->helpID)) {
 			$helpLinkLabel = new htmlHelpLink($this->helpID, $this->helpModule);
diff --git a/lam/style/500_layout.css b/lam/style/500_layout.css
index dff971c80..269a62817 100644
--- a/lam/style/500_layout.css
+++ b/lam/style/500_layout.css
@@ -341,6 +341,12 @@ table.accountlist > tbody > tr:hover {
 	vertical-align: unset;
 }
 
+span.lam-required {
+	font-weight: bold;
+	color: #ff9933;
+	margin-left: 0.2rem;
+}
+
 /* table preferences */
 
 table.accountlist thead {