From e537b5561287bc7540c9f75dc781aa83f42dadc6 Mon Sep 17 00:00:00 2001
From: "Dan Kleine (Dan Untenzu)" <dkl@xima.de>
Date: Mon, 9 Sep 2024 12:14:35 +0200
Subject: [PATCH] [FEATURE] Make widget more compact and use severity

Use severity levels in widget as well and reduce the height
to prevent unused whitespace.
---
 Configuration/Services.php                    |  2 +-
 .../Backend/Templates/Widget/UsageWidget.html | 21 +++++++++++++------
 Resources/Private/Language/de.locallang.xlf   | 14 +++++--------
 Resources/Private/Language/locallang.xlf      |  9 +++-----
 4 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/Configuration/Services.php b/Configuration/Services.php
index 44fd09b..2bc7246 100644
--- a/Configuration/Services.php
+++ b/Configuration/Services.php
@@ -168,7 +168,7 @@
             'title' => 'LLL:EXT:wv_deepltranslate/Resources/Private/Language/locallang.xlf:widgets.deepltranslate.widget.useswidget.title',
             'description' => 'LLL:EXT:wv_deepltranslate/Resources/Private/Language/locallang.xlf:widgets.deepltranslate.widget.useswidget.description',
             'iconIdentifier' => 'content-widget-list',
-            'height' => 'medium',
+            'height' => 'small',
             'width' => 'small',
         ])
     ;
diff --git a/Resources/Private/Backend/Templates/Widget/UsageWidget.html b/Resources/Private/Backend/Templates/Widget/UsageWidget.html
index 8261de5..6377efe 100644
--- a/Resources/Private/Backend/Templates/Widget/UsageWidget.html
+++ b/Resources/Private/Backend/Templates/Widget/UsageWidget.html
@@ -8,14 +8,23 @@
     <f:for as="item" each="{usages}" >
         <div class="mb-3">
             <h4>{item.label}</h4>
+            <f:variable name="count" value="{item.usage.count -> f:format.number(thousandsSeparator: '.', decimalSeparator: '', decimals: 0)}" />
+            <f:variable name="limit" value="{item.usage.limit -> f:format.number(thousandsSeparator: '.', decimalSeparator: '', decimals: 0)}" />
+            <f:variable name="percentage">{item.usage.count / item.usage.limit * 100}</f:variable>
+            <f:if condition="{percentage} >= 98">
+                <f:variable name="severity" value="warning" />
+            </f:if>
+            <f:if condition="{percentage} >= 100">
+                <f:variable name="severity" value="danger" />
+            </f:if>
             <p>
-                <b>{f:translate(key: 'LLL:EXT:wv_deepltranslate/Resources/Private/Language/locallang.xlf:widgets.deepltranslate.widget.useswidget.count')}</b>: {item.usage.count -> f:format.number(thousandsSeparator: '.', decimalSeparator: '', decimals: 0)}
-                <br>
-                <b>{f:translate(key: 'LLL:EXT:wv_deepltranslate/Resources/Private/Language/locallang.xlf:widgets.deepltranslate.widget.useswidget.limit')}</b>: {item.usage.limit -> f:format.number(thousandsSeparator: '.', decimalSeparator: '', decimals: 0)}
+                <f:translate
+                    key="LLL:EXT:wv_deepltranslate/Resources/Private/Language/locallang.xlf:widgets.deepltranslate.widget.useswidget.message"
+                    arguments="{0: count, 1: limit}"
+                />
             </p>
-            <f:variable name="procss">{item.usage.count / item.usage.limit * 100}</f:variable>
             <div class="progress" role="progressbar" aria-label="Usage" aria-valuenow="{procss}" aria-valuemin="0" aria-valuemax="100" style="height: 50%">
-                <div class="progress-bar" style="width: {procss}%">{item.usage.count -> f:format.number(thousandsSeparator: '.', decimalSeparator: '', decimals: 0)}</div>
+                <div class="progress-bar" style="width: {percentage}%; --bs-progress-bar-bg: var(--bs-{severity -> f:or(alternative: 'info')});">&nbsp;</div>
             </div>
         </div>
     </f:for>
@@ -25,4 +34,4 @@ <h4>{item.label}</h4>
     <f:render partial="Widget/Button" arguments="{button: button}"/>
 </f:section>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf
index 929e8db..cf820dc 100644
--- a/Resources/Private/Language/de.locallang.xlf
+++ b/Resources/Private/Language/de.locallang.xlf
@@ -225,20 +225,16 @@
 				<target>DeepL Verwendung</target>
 			</trans-unit>
 			<trans-unit id="widgets.deepltranslate.widget.useswidget.description">
-				<source></source>
-				<target></target>
+				<source>Show a DeepL usage bar</source>
+				<target>Zeige einen Fortschrittsbalken für die DeepL Nutzung</target>
 			</trans-unit>
 			<trans-unit id="widgets.deepltranslate.widget.useswidget.character">
 				<source>Character</source>
 				<target>Zeichen</target>
 			</trans-unit>
-			<trans-unit id="widgets.deepltranslate.widget.useswidget.count">
-				<source>Count</source>
-				<target>Zähler</target>
-			</trans-unit>
-			<trans-unit id="widgets.deepltranslate.widget.useswidget.limit">
-				<source>Limit</source>
-				<target>Begrenzung</target>
+			<trans-unit id="widgets.deepltranslate.widget.useswidget.message">
+				<source>DeepL translations for current billing period: %s of %s characters</source>
+				<target>DeepL Übersetzungen für aktuellen Abrechnungszeitraum: %s von %s Zeichen</target>
 			</trans-unit>
 		</body>
 	</file>
diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
index a94a734..c1cf013 100644
--- a/Resources/Private/Language/locallang.xlf
+++ b/Resources/Private/Language/locallang.xlf
@@ -194,16 +194,13 @@
 				<source>DeepL Usage</source>
 			</trans-unit>
 			<trans-unit id="widgets.deepltranslate.widget.useswidget.description">
-				<source></source>
+				<source>Show a DeepL usage bar</source>
 			</trans-unit>
 			<trans-unit id="widgets.deepltranslate.widget.useswidget.character">
 				<source>Character</source>
 			</trans-unit>
-			<trans-unit id="widgets.deepltranslate.widget.useswidget.count">
-				<source>Count</source>
-			</trans-unit>
-			<trans-unit id="widgets.deepltranslate.widget.useswidget.limit">
-				<source>Limit</source>
+			<trans-unit id="widgets.deepltranslate.widget.useswidget.message">
+				<source>DeepL translations for current billing period: %s of %s characters</source>
 			</trans-unit>
 		</body>
 	</file>