dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: string autocomplete style addition and liquid level widget minor improvement

Browse Source
This commit is contained in:
Dmitriymush 2023-10-23 12:47:43 +03:00
parent 7f0d6ebc3c
commit c9e684ef64
2 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.ts
View File

@ -192,7 +192,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
if (isDefinedAndNotNull(data) && data.length && typeof Number(data[1]) === 'number') { if (isDefinedAndNotNull(data) && data.length && typeof Number(data[1]) === 'number') {
const percentage = this.convertInputData(Number(data[1])); const percentage = this.convertInputData(Number(data[1]));
this.updateSvg(percentage); this.updateSvg(percentage);
this.updateValueElement(this.convertOutputData(percentage)); this.updateValueElement(this.convertOutputData(percentage), percentage);
if (this.settings.showTooltip) { if (this.settings.showTooltip) {
this.updateTooltip(data); this.updateTooltip(data);
@ -382,7 +382,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
}); });
} }
private updateValueElement(data: number): void { private updateValueElement(data: number, percentage: number): void {
let content: string; let content: string;
let container: JQuery<HTMLElement>; let container: JQuery<HTMLElement>;
@ -390,13 +390,13 @@ export class LiquidLevelWidgetComponent implements OnInit {
.toFixed(this.settings.decimals || 0); .toFixed(this.settings.decimals || 0);
const valueTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.valueFont), const valueTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.valueFont),
color: this.valueColor.color}); color: this.valueColor.color});
this.backgroundOverlayColor.update(data); this.backgroundOverlayColor.update(percentage);
if (this.overlayContainer) { if (this.overlayContainer) {
this.overlayContainer.attr('fill', this.backgroundOverlayColor.color); this.overlayContainer.attr('fill', this.backgroundOverlayColor.color);
} }
if (this.settings.layout === LevelCardLayout.absolute) { if (this.settings.layout === LevelCardLayout.absolute) {
this.volumeColor.update(data); this.volumeColor.update(percentage);
const volumeInLiters: number = convertLiters(this.volume, this.settings.volumeUnits as CapacityUnits, ConversionType.to); const volumeInLiters: number = convertLiters(this.volume, this.settings.volumeUnits as CapacityUnits, ConversionType.to);
const volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from) const volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from)

4
ui-ngx/src/app/shared/components/string-autocomplete.component.scss
View File

@ -14,6 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
:host { :host {
mat-form-field {
display: flex; display: flex;
flex: 1 1 0%; flex: 1 1 0%;
max-width: 100%; max-width: 100%;
@ -22,11 +23,13 @@
.tb-autocomplete.tb-option-input-autocomplete { .tb-autocomplete.tb-option-input-autocomplete {
.mat-mdc-option { .mat-mdc-option {
border-bottom: none; border-bottom: none;
.mdc-list-item__primary-text { .mdc-list-item__primary-text {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 8px; gap: 8px;
.tb-option { .tb-option {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
@ -36,4 +39,5 @@
} }
} }
} }
}
} }