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

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

View File

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

View File

@ -14,24 +14,28 @@
* limitations under the License.
*/
:host {
display: flex;
flex: 1 1 0%;
max-width: 100%;
box-sizing: border-box;
mat-form-field {
display: flex;
flex: 1 1 0%;
max-width: 100%;
box-sizing: border-box;
.tb-autocomplete.tb-option-input-autocomplete {
.mat-mdc-option {
border-bottom: none;
.mdc-list-item__primary-text {
flex: 1;
display: flex;
flex-direction: row;
gap: 8px;
.tb-option {
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.2px;
.tb-autocomplete.tb-option-input-autocomplete {
.mat-mdc-option {
border-bottom: none;
.mdc-list-item__primary-text {
flex: 1;
display: flex;
flex-direction: row;
gap: 8px;
.tb-option {
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.2px;
}
}
}
}