@@ -40,5 +38,6 @@
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.scss
index 5dba13ec07..441391d95a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.scss
@@ -13,145 +13,143 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-:host {
- .tb-battery-level-panel {
- width: 100%;
- height: 100%;
- position: relative;
+.tb-battery-level-panel {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 24px;
+ &.tb-battery-level-pointer {
+ cursor: pointer;
+ }
+ > div:not(.tb-battery-level-overlay) {
+ z-index: 1;
+ }
+ .tb-battery-level-overlay {
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ bottom: 12px;
+ right: 12px;
+ }
+ .tb-battery-level-content {
+ min-height: 0;
+ flex: 1;
display: flex;
- flex-direction: column;
- gap: 16px;
- padding: 20px 24px 24px 24px;
- &.tb-battery-level-pointer {
- cursor: pointer;
- }
- > div:not(.tb-battery-level-overlay) {
- z-index: 1;
+ justify-content: center;
+ &.vertical {
+ flex-direction: row;
+ gap: 16px;
+ .tb-battery-level-value-box {
+ align-items: center;
+ .tb-battery-level-value {
+ padding: 8px 12px;
+ }
+ }
}
- .tb-battery-level-overlay {
- position: absolute;
- top: 12px;
- left: 12px;
- bottom: 12px;
- right: 12px;
+ &.horizontal {
+ flex-direction: column-reverse;
+ gap: 8px;
+ align-items: center;
+ .tb-battery-level-value-box {
+ .tb-battery-level-value {
+ padding: 4px 6px;
+ }
+ }
}
- .tb-battery-level-content {
- min-height: 0;
- flex: 1;
+ .tb-battery-level-box {
display: flex;
- justify-content: center;
- &.vertical {
- flex-direction: row;
- gap: 16px;
- .tb-battery-level-value-box {
- align-items: center;
- .tb-battery-level-value {
- padding: 8px 12px;
- }
+ align-items: center;
+ .tb-battery-level-rectangle {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .tb-battery-level-shape {
+ position: absolute;
+ inset: 0;
+ mask-repeat: no-repeat;
+ mask-size: cover;
+ mask-position: center;
}
- }
- &.horizontal {
- flex-direction: column-reverse;
- gap: 8px;
- align-items: center;
- .tb-battery-level-value-box {
- .tb-battery-level-value {
- padding: 4px 6px;
- }
+ .tb-battery-level-container {
+ position: absolute;
+ display: flex;
+ gap: 3%;
}
- }
- .tb-battery-level-box {
- display: flex;
- align-items: center;
- .tb-battery-level-rectangle {
+ .tb-battery-level-indicator-box {
width: 100%;
height: 100%;
- position: relative;
+ &.solid {
+ background-repeat: no-repeat;
+ transition: background 0.2s ease-out;
+ }
+ &.divided {
+ transition: opacity 0.2s ease-out;
+ }
+ }
+ &.vertical {
.tb-battery-level-shape {
- position: absolute;
- inset: 0;
- mask-repeat: no-repeat;
- mask-size: cover;
- mask-position: center;
+ mask-image: url(/assets/widget/battery-level/battery-shape-vertical.svg);
}
.tb-battery-level-container {
- position: absolute;
- display: flex;
- gap: 3%;
+ flex-direction: column-reverse;
}
- .tb-battery-level-indicator-box {
- width: 100%;
- height: 100%;
- &.solid {
- background-repeat: no-repeat;
- transition: background 0.2s ease-out;
- }
- &.divided {
- transition: opacity 0.2s ease-out;
+ &.solid {
+ .tb-battery-level-container {
+ inset: 8.85% 6.25% 3.54% 6.25%;
}
}
- &.vertical {
- .tb-battery-level-shape {
- mask-image: url(/assets/widget/battery-level/battery-shape-vertical.svg);
- }
+ &.divided {
.tb-battery-level-container {
- flex-direction: column-reverse;
+ inset: 9.73% 7.81% 4.42% 7.81%;
}
+ }
+ .tb-battery-level-indicator-box {
&.solid {
- .tb-battery-level-container {
- inset: 8.85% 6.25% 3.54% 6.25%;
- }
+ border-radius: 10.7% / 6%;
+ background-position: 0 101%;
}
&.divided {
- .tb-battery-level-container {
- inset: 9.73% 7.81% 4.42% 7.81%;
- }
- }
- .tb-battery-level-indicator-box {
- &.solid {
- border-radius: 10.7% / 6%;
- background-position: 0 101%;
- }
- &.divided {
- border-radius: 7.14% / 17.8%;
- }
+ border-radius: 7.14% / 17.8%;
}
}
- &.horizontal {
- .tb-battery-level-shape {
- mask-image: url(/assets/widget/battery-level/battery-shape-horizontal.svg);
- }
+ }
+ &.horizontal {
+ .tb-battery-level-shape {
+ mask-image: url(/assets/widget/battery-level/battery-shape-horizontal.svg);
+ }
+ .tb-battery-level-container {
+ inset: 6.25% 8.85% 6.25% 3.54%;
+ flex-direction: row;
+ }
+ &.solid {
.tb-battery-level-container {
inset: 6.25% 8.85% 6.25% 3.54%;
- flex-direction: row;
}
+ }
+ &.divided {
+ .tb-battery-level-container {
+ inset: 7.81% 9.73% 7.81% 4.42%;
+ }
+ }
+ .tb-battery-level-indicator-box {
&.solid {
- .tb-battery-level-container {
- inset: 6.25% 8.85% 6.25% 3.54%;
- }
+ border-radius: 6% / 10.7%;
+ background-position: -1% 0%;
}
&.divided {
- .tb-battery-level-container {
- inset: 7.81% 9.73% 7.81% 4.42%;
- }
- }
- .tb-battery-level-indicator-box {
- &.solid {
- border-radius: 6% / 10.7%;
- background-position: -1% 0%;
- }
- &.divided {
- border-radius: 17.8% / 7.14%;
- }
+ border-radius: 17.8% / 7.14%;
}
}
}
}
- .tb-battery-level-value-box {
- display: flex;
- .tb-battery-level-value {
- white-space: nowrap;
- }
+ }
+ .tb-battery-level-value-box {
+ display: flex;
+ .tb-battery-level-value {
+ white-space: nowrap;
}
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
index 442d207a5e..9161764223 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
@@ -24,7 +24,8 @@ import {
OnInit,
Renderer2,
TemplateRef,
- ViewChild
+ ViewChild,
+ ViewEncapsulation
} from '@angular/core';
import { WidgetContext } from '@home/models/widget-component.models';
import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
@@ -74,7 +75,8 @@ const horizontalBatteryDimensions = {
@Component({
selector: 'tb-battery-level-widget',
templateUrl: './battery-level-widget.component.html',
- styleUrls: ['./battery-level-widget.component.scss']
+ styleUrls: ['./battery-level-widget.component.scss'],
+ encapsulation: ViewEncapsulation.None
})
export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterViewInit {
@@ -115,7 +117,9 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
value: number;
- batterySections: boolean[] = [false, false, false, false];
+ batterySections: boolean[];
+ dividedBorderRadius: string;
+ dividedGap: string;
batteryLevelColor: ColorProcessor;
@@ -156,6 +160,26 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
this.vertical = [BatteryLevelLayout.vertical_solid, BatteryLevelLayout.vertical_divided].includes(this.layout);
this.layoutClass = this.vertical ? 'vertical' : 'horizontal';
this.solid = [BatteryLevelLayout.vertical_solid, BatteryLevelLayout.horizontal_solid].includes(this.layout);
+ if (!this.solid) {
+ let sectionsCount = this.settings.sectionsCount;
+ if (!sectionsCount) {
+ sectionsCount = 4;
+ }
+ sectionsCount = Math.min(Math.max(sectionsCount, 2), 20);
+ this.batterySections = Array.from(Array(sectionsCount), () => false);
+ const gap = 1 + (24 - sectionsCount) / 10;
+ this.dividedGap = `${gap}%`;
+ const containerAspect = 0.5567;
+ const sectionHeight = (100 - (gap * (sectionsCount - 1))) / sectionsCount;
+ const sectionAspect = 100 * containerAspect / sectionHeight;
+ const rad1 = 8.425 - sectionsCount * 0.32125;
+ const rad2 = rad1 * sectionAspect;
+ if (this.vertical) {
+ this.dividedBorderRadius = `${rad1}% / ${rad2}%`;
+ } else {
+ this.dividedBorderRadius = `${rad2}% / ${rad1}%`;
+ }
+ }
this.showValue = this.settings.showValue;
this.autoScaleValueSize = this.showValue && this.settings.autoScaleValueSize;
@@ -241,6 +265,8 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
const valueLineHeight = ratios.valueLineHeightRaio * boxSize;
this.setValueFontSize(valueFontSize, valueLineHeight, boxWidth);
}
+ const fontSize = parseInt(window.getComputedStyle(this.batteryLevelValue.nativeElement).fontSize, 10) || 10;
+ this.renderer.setStyle(this.batteryLevelValue.nativeElement, 'minWidth', `${Math.min(fontSize*4, boxWidth)}px`);
}
let height = this.batteryLevelContent.nativeElement.getBoundingClientRect().height;
const width = height * verticalBatteryDimensions.shapeAspectRatio;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.models.ts
index 8d8724f901..34c00a4b92 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.models.ts
@@ -53,6 +53,7 @@ export const batteryLevelLayoutImages = new Map
(
export interface BatteryLevelWidgetSettings {
layout: BatteryLevelLayout;
+ sectionsCount: number;
showValue: boolean;
autoScaleValueSize: boolean;
valueFont: Font;
@@ -64,6 +65,7 @@ export interface BatteryLevelWidgetSettings {
export const batteryLevelDefaultSettings: BatteryLevelWidgetSettings = {
layout: BatteryLevelLayout.vertical_solid,
+ sectionsCount: 4,
showValue: true,
autoScaleValueSize: true,
valueFont: {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
index 32d48347ac..30e0a7ed15 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
@@ -36,7 +36,7 @@