[FEATURE] Make widget more compact and use severity

Use severity levels in widget as well and reduce the height to prevent unused whitespace.
web-vision · Sep 9, 2024 · e537b55 · e537b55
1 parent a06e537
commit e537b55
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 22 deletions.
diff --git 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
@@ -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>
+</html>
diff --git 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
@@ -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>