diff --git a/application/src/main/data/json/system/widget_bundles/input_widgets.json b/application/src/main/data/json/system/widget_bundles/input_widgets.json index c68c42fd51..ca2e16e4dd 100644 --- a/application/src/main/data/json/system/widget_bundles/input_widgets.json +++ b/application/src/main/data/json/system/widget_bundles/input_widgets.json @@ -188,7 +188,7 @@ "sizeX": 7.5, "sizeY": 3.5, "resources": [], - "templateHtml": "
\n
\n
\n
\n
\n \n {{ settings.showLabel ? labelValue : '' }}\n \n \n \n \n \n {{requiredErrorMessage}}\n \n \n
\n \n
\n \n \n
\n
\n \n
\n {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n
\n
\n {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n
\n
\n {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n
\n
\n
\n
", + "templateHtml": "
\n
\n
\n
\n
\n \n {{ labelValue }}\n \n \n \n \n \n {{requiredErrorMessage}}\n \n \n
\n \n
\n \n \n
\n
\n \n
\n {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n
\n
\n {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n
\n
\n {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n
\n
\n
\n
", "templateCss": ".attribute-update-form {\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.attribute-update-form__grid {\n display: flex;\n}\n.grid__element:first-child {\n flex: 1;\n}\n.grid__element:last-child {\n margin-top: 19px;\n margin-left: 7px;\n}\n.grid__element {\n display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n width: 32px;\n min-width: 32px;\n height: 32px;\n min-height: 32px;\n padding: 0 !important;\n margin: 0 !important;\n line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n width: 20px;\n min-width: 20px;\n height: 20px;\n min-height: 20px;\n font-size: 20px;\n}\n\n.tb-toast {\n font-size: 14px!important;\n}", "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n self.ctx.ngZone.run(function() {\r\n init(); \r\n self.ctx.detectChanges(true);\r\n });\r\n};\r\n\r\nfunction init() {\r\n\r\n $scope = self.ctx.$scope;\r\n attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n $scope.toastTargetId = 'input-widget' + utils.guid();\r\n settings = utils.deepClone(self.ctx.settings) || {};\r\n settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n settings.isRequired = utils.defaultValue(settings.isRequired, true);\r\n $scope.settings = settings;\r\n $scope.isValidParameter = true;\r\n $scope.dataKeyDetected = false;\r\n $scope.entityDetected = false;\r\n\r\n $scope.datePickerType = settings.showTimeInput ? 'datetime' : 'date'; \r\n \r\n $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\r\n $scope.labelValue = translate.instant('widgets.input-widgets.date');\r\n \r\n if (settings.showTimeInput) {\r\n $scope.labelValue += \" & \" + translate.instant('widgets.input-widgets.time');\r\n }\r\n \r\n var validators = [];\r\n \r\n if (settings.isRequired) {\r\n validators.push($scope.validators.required);\r\n }\r\n \r\n $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n {currentValue: [undefined, validators]}\r\n );\r\n\r\n if (self.ctx.datasources && self.ctx.datasources.length) {\r\n var datasource = self.ctx.datasources[0];\r\n \r\n if (datasource.type === 'entity') {\r\n if (datasource.entityType && datasource.entityId) {\r\n $scope.entityName = datasource.entityName;\r\n if (settings.widgetTitle && settings.widgetTitle.length) {\r\n $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n } else {\r\n $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n }\r\n\r\n $scope.entityDetected = true;\r\n }\r\n }\r\n if (datasource.dataKeys.length) {\r\n if (datasource.dataKeys[0].type !== \"attribute\") {\r\n $scope.isValidParameter = false;\r\n } else {\r\n $scope.currentKey = datasource.dataKeys[0].name;\r\n $scope.dataKeyType = datasource.dataKeys[0].type;\r\n $scope.dataKeyDetected = true;\r\n }\r\n }\r\n }\r\n\r\n self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n \r\n $scope.clear = function(event) {\r\n event.stopPropagation();\r\n $scope.attributeUpdateFormGroup.get('currentValue').patchValue(undefined);\r\n }\r\n \r\n $scope.updateAttribute = function () {\r\n if ($scope.entityDetected) {\r\n var datasource = self.ctx.datasources[0];\r\n var currentValueInMilliseconds;\r\n \r\n if (!$scope.attributeUpdateFormGroup.get('currentValue').value) {\r\n currentValueInMilliseconds = undefined;\r\n } else {\r\n currentValueInMilliseconds = $scope.attributeUpdateFormGroup.get('currentValue').value.getTime();\r\n }\r\n \r\n attributeService.saveEntityAttributes(\r\n datasource.entity.id,\r\n 'SERVER_SCOPE',\r\n [\r\n {\r\n key: $scope.currentKey,\r\n value: currentValueInMilliseconds\r\n }\r\n ]\r\n ).subscribe(\r\n function success() {\r\n $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n if (settings.showResultMessage) {\r\n $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n }\r\n },\r\n function fail() {\r\n if (settings.showResultMessage) {\r\n $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n }\r\n }\r\n );\r\n }\r\n };\r\n \r\n $scope.isValidDate = function(date) {\r\n return date instanceof Date && !isNaN(date);\r\n }\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n try {\r\n if ($scope.dataKeyDetected) {\r\n if (!$scope.isFocused) {\r\n $scope.originalValue = moment(self.ctx.data[0].data[0][1]).toDate();\r\n\r\n if (!$scope.isValidDate($scope.originalValue)) {\r\n $scope.originalValue = undefined;\r\n }\r\n \r\n $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\r\n self.ctx.detectChanges();\r\n }\r\n }\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n};\r\n\r\nself.onResize = function() {\r\n};\r\n\r\nself.typeParameters = function() {\r\n return {\r\n maxDatasources: 1,\r\n maxDataKeys: 1,\r\n singleEntity: true\r\n };\r\n};\r\n\r\nself.onDestroy = function() {\r\n}\r\n", "settingsSchema": "", @@ -264,7 +264,7 @@ "sizeX": 7.5, "sizeY": 3.5, "resources": [], - "templateHtml": "
\n
\n
\n
\n
\n \n {{ settings.showLabel ? labelValue : '' }}\n \n \n \n \n \n {{requiredErrorMessage}}\n \n \n
\n \n
\n \n \n
\n
\n \n
\n
\n {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n
\n
\n {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n
\n
\n
\n
", + "templateHtml": "
\n
\n
\n
\n
\n \n {{ labelValue }}\n \n \n \n \n \n {{requiredErrorMessage}}\n \n \n
\n \n
\n \n \n
\n
\n \n
\n
\n {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n
\n
\n {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n
\n
\n
\n
", "templateCss": ".attribute-update-form {\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.attribute-update-form__grid {\n display: flex;\n}\n.grid__element:first-child {\n flex: 1;\n}\n.grid__element:last-child {\n margin-top: 19px;\n margin-left: 7px;\n}\n.grid__element {\n display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n width: 32px;\n min-width: 32px;\n height: 32px;\n min-height: 32px;\n padding: 0 !important;\n margin: 0 !important;\n line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n width: 20px;\n min-width: 20px;\n height: 20px;\n min-height: 20px;\n font-size: 20px;\n}\n\n.tb-toast {\n font-size: 14px!important;\n}", "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n self.ctx.ngZone.run(function() {\r\n init(); \r\n self.ctx.detectChanges(true);\r\n });\r\n};\r\n\r\nfunction init() {\r\n\r\n $scope = self.ctx.$scope;\r\n attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n $scope.toastTargetId = 'input-widget' + utils.guid();\r\n settings = utils.deepClone(self.ctx.settings) || {};\r\n settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n settings.isRequired = utils.defaultValue(settings.isRequired, true);\r\n $scope.settings = settings;\r\n $scope.isValidParameter = true;\r\n $scope.dataKeyDetected = false;\r\n $scope.entityDetected = false;\r\n\r\n $scope.datePickerType = settings.showTimeInput ? 'datetime' : 'date'; \r\n \r\n $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\r\n $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\r\n $scope.labelValue = translate.instant('widgets.input-widgets.date');\r\n \r\n \r\n if (settings.showTimeInput) {\r\n $scope.labelValue += \" & \" + translate.instant('widgets.input-widgets.time');\r\n }\r\n \r\n var validators = [];\r\n \r\n if (settings.isRequired) {\r\n validators.push($scope.validators.required);\r\n }\r\n \r\n $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n {currentValue: [undefined, validators]}\r\n );\r\n\r\n if (self.ctx.datasources && self.ctx.datasources.length) {\r\n var datasource = self.ctx.datasources[0];\r\n \r\n if (datasource.type === 'entity') {\r\n if (datasource.entityType === 'DEVICE') {\r\n if (datasource.entityType && datasource.entityId) {\r\n $scope.entityName = datasource.entityName;\r\n if (settings.widgetTitle && settings.widgetTitle.length) {\r\n $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n } else {\r\n $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n }\r\n \r\n $scope.entityDetected = true;\r\n }\r\n } else {\r\n $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\r\n }\r\n }\r\n if (datasource.dataKeys.length) {\r\n if (datasource.dataKeys[0].type !== \"attribute\") {\r\n $scope.isValidParameter = false;\r\n } else {\r\n $scope.currentKey = datasource.dataKeys[0].name;\r\n $scope.dataKeyType = datasource.dataKeys[0].type;\r\n $scope.dataKeyDetected = true;\r\n }\r\n }\r\n }\r\n\r\n self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n \r\n $scope.clear = function(event) {\r\n event.stopPropagation();\r\n $scope.attributeUpdateFormGroup.get('currentValue').patchValue(undefined);\r\n }\r\n \r\n $scope.updateAttribute = function () {\r\n if ($scope.entityDetected) {\r\n var datasource = self.ctx.datasources[0];\r\n var currentValueInMilliseconds;\r\n \r\n if (!$scope.attributeUpdateFormGroup.get('currentValue').value) {\r\n currentValueInMilliseconds = undefined;\r\n } else {\r\n currentValueInMilliseconds = $scope.attributeUpdateFormGroup.get('currentValue').value.getTime();\r\n }\r\n\r\n attributeService.saveEntityAttributes(\r\n datasource.entity.id,\r\n 'SHARED_SCOPE',\r\n [\r\n {\r\n key: $scope.currentKey,\r\n value: currentValueInMilliseconds\r\n }\r\n ]\r\n ).subscribe(\r\n function success() {\r\n $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n if (settings.showResultMessage) {\r\n $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n }\r\n },\r\n function fail() {\r\n if (settings.showResultMessage) {\r\n $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n }\r\n }\r\n );\r\n }\r\n };\r\n \r\n $scope.isValidDate = function(date) {\r\n return date instanceof Date && !isNaN(date);\r\n }\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n try {\r\n if ($scope.dataKeyDetected) {\r\n if (!$scope.isFocused) {\r\n $scope.originalValue = moment(self.ctx.data[0].data[0][1]).toDate();\r\n \r\n if (!$scope.isValidDate($scope.originalValue)) {\r\n $scope.originalValue = undefined;\r\n }\r\n \r\n $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\r\n self.ctx.detectChanges();\r\n }\r\n }\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n};\r\n\r\nself.onResize = function() {\r\n\r\n};\r\n\r\nself.typeParameters = function() {\r\n return {\r\n maxDatasources: 1,\r\n maxDataKeys: 1,\r\n singleEntity: true\r\n };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n}\r\n", "settingsSchema": "", diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html index c0e0c9f80f..7dc8729f33 100644 --- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html @@ -15,7 +15,7 @@ limitations under the License. --> -
+

{{ (isAdd ? 'alias.add' : 'alias.edit') | translate }}

diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.html index e76d8c0662..db13e8dcee 100644 --- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.html +++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.html @@ -15,10 +15,9 @@ limitations under the License. --> - - - + {{ 'entity.entity-alias' | translate }} + - +

{{ title | translate }}

@@ -32,7 +32,7 @@
- alias.name + alias.name alias.entity-filter alias.resolve-multiple @@ -45,8 +45,7 @@ *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index"> {{$index + 1}}.
- - + {{ 'entity.alias-required' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss index fbd0349fe0..a7d1982481 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.scss @@ -18,7 +18,7 @@ $previewSize: 300px !default; :host { mat-form-field.rect-field { - max-width: 60px; + max-width: 80px; } .tb-image-preview { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index 4c3df815b7..6a9ce1f657 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -157,7 +157,7 @@

{{ translatedDashboardTitle }}

- + dashboard.title
- +
{{ widget.title }}
@@ -52,7 +52,7 @@
- +
{{ widgetsBundle.title }}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss index 4529fdafd3..a82f9c2f8b 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss @@ -24,10 +24,6 @@ .widget-select { padding: 12px 0 12px 12px; background-color: #cfd8dc; - /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. - */ - /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. - */ .mat-card-container { flex: 0 0 100%; max-width: 100%; @@ -41,6 +37,7 @@ .mat-mdc-card { cursor: pointer; transition: box-shadow 0.2s; + padding: 16px; .preview-container { text-align: center; @@ -55,19 +52,28 @@ .mat-mdc-card-title { font-size: 20px; + line-height: normal; + margin-bottom: 8px; + } + + .mat-mdc-card-subtitle { + margin-bottom: 16px; + margin-top: -4px; + line-height: normal; + font-weight: normal; } .mat-mdc-card-content { font-size: 14px; line-height: 18px; color: #666; + margin-bottom: 16px; + padding: 0; } } } @media #{$mat-gt-xs} { - /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. - */ .mat-card-container { flex: 0 0 50%; max-width: 50%; @@ -75,8 +81,6 @@ } @media screen and (min-width: 2000px) { - /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. - */ .mat-card-container { flex: 0 0 33.333333%; max-width: 33.333333%; diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.ts index 989dac0f79..a9f6805a98 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.scss index 45f2129530..3ac18ddb08 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.scss @@ -15,17 +15,14 @@ */ :host { button.tb-add-new-widget { + height: auto; padding-right: 12px; font-size: 20px; border-style: dashed; border-width: 2px; - /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. - */ - ::ng-deep .mat-button-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - } + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index 9bea63e490..4744984754 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -145,9 +145,8 @@ max="{{ layoutPercentageSize.MAX }}" style="width: 100%;" color="accent" - formControlName="sliderPercentage" - thumbLabel - [displayWith]="formatSliderTooltipLabel.bind(this)"> + discrete + [displayWith]="formatSliderTooltipLabel.bind(this)"> + discrete + [displayWith]="formatSliderTooltipLabel.bind(this)">
-
- +
+ alias.state-entity-parameter-name @@ -211,8 +211,8 @@ formControlName="rootEntity">
-
- +
+ alias.state-entity-parameter-name diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-select.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-select.component.html index 3ba6eaf850..9569eb6c9b 100644 --- a/ui-ngx/src/app/modules/home/components/filter/filter-select.component.html +++ b/ui-ngx/src/app/modules/home/components/filter/filter-select.component.html @@ -15,10 +15,9 @@ limitations under the License. --> - - - + {{ 'filter.filter' | translate }} + {{ 'import.column-key' | translate }} - - + diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html index 234dd16ed6..9c9f278934 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html @@ -17,8 +17,7 @@ -->
- - +
- - + {{'filter.no-dynamic-value' | translate}} @@ -53,8 +51,7 @@
- - +
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html index 4289445144..be17201671 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html @@ -30,8 +30,7 @@
- - + {{'filter.no-dynamic-value' | translate}} @@ -43,8 +42,7 @@
- - +
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html index 8fbae33065..e5c3676f01 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html @@ -56,8 +56,7 @@ >
- - + diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html index 7f1483e28e..87ee2a7fa1 100644 --- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html @@ -15,7 +15,7 @@ limitations under the License. --> - + {{ 'asset-profile.asset-profile' | translate }} - + {{ 'device-profile.device-profile' | translate }}
- - + @@ -37,8 +36,7 @@ {{ 'device-profile.lwm2m.attribute-name-required' | translate }} - - + diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.scss b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.scss index 20dcbb827f..83e4e4ac30 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.scss +++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.scss @@ -26,60 +26,15 @@ } .map-list{ - height: 45px; + height: 80px; } } } :host ::ng-deep { - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-wrapper { - padding-bottom: 0; - } - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-infix { - border-top: 0; - } - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-underline { - bottom: 0; - } - - .button-icon{ + .button-icon { font-size: 20px; width: 20px; height: 20px; } - - .map-list { - mat-form-field { - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-wrapper { - padding-bottom: 0; - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-infix { - border-top-width: 0.2em; - width: auto; - min-width: auto; - } - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-underline { - bottom: 0; - } - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-subscript-wrapper{ - margin-top: 1.8em; - } - } - } - } } diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html index 0922ad7821..81656324e8 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html @@ -55,8 +55,7 @@ matTooltipPosition="above">
- - + diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html index d0fbe17861..d1e68b60c8 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html @@ -29,8 +29,7 @@ last as isLast;" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="mappingConfig" class="mapping-list">
- - + {{ dataTypesTranslationMap.get(dataType) | translate }} @@ -40,15 +39,13 @@ {{ 'device-profile.snmp.data-type-required' | translate }} - - + {{ 'device-profile.snmp.data-key-required' | translate }} - - + {{ 'device-profile.snmp.oid-required' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.scss b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.scss index 9657b63ca0..590ace9f87 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.scss +++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.scss @@ -19,41 +19,9 @@ } .mapping-list { padding-bottom: 8px; - height: 46px; } .required-text { margin: 14px 0; } } - -:host ::ng-deep { - .mapping-list { - mat-form-field { - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-wrapper { - padding-bottom: 0; - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-infix { - border-top-width: 0.2em; - width: auto; - min-width: auto; - } - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-underline { - bottom: 0; - } - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-subscript-wrapper{ - margin-top: 1.8em; - } - } - } - } -} diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html index 350f26d00b..16222675db 100644 --- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html +++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html @@ -28,18 +28,19 @@
-
+
-
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.scss b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.scss index 2ebc48ba07..4eebb52161 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.scss @@ -81,20 +81,20 @@ &.tb-fullscreen-editor { position: relative; right: 0; - .mat-mdc-button { + /* .mat-mdc-button { .mat-icon { margin-right: 5px; } - } + } */ } - .mat-mdc-button { + /* .mat-mdc-button { min-width: 36px; padding: 0; .mat-icon { margin-right: 0; } - } + } */ } .tb-custom-action-editor { diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html index 12ef0f8207..c3d0141d20 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html @@ -19,11 +19,10 @@
-
- + *ngFor="let resource of action.customResources; let i = index" style="padding-top: 10px;"> + @@ -37,7 +36,7 @@ close
-
+
@@ -166,3 +143,19 @@
{{ maxDataKeysText() }}
+ + + f() + + + + + + + + {{ key.aggregationType }}({{ key.name }}) + + + {{key.name}} + + diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss index 69a688ffbe..c1dd2392f8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss @@ -15,6 +15,7 @@ */ .mat-mdc-chip.mat-mdc-standard-chip.tb-datakey-chip { overflow: hidden; + line-height: 20px; .tb-attribute-chip { max-width: 100%; @@ -27,55 +28,72 @@ mat-icon { pointer-events: none; + margin-right: 4px; + margin-left: 4px; + vertical-align: bottom; } } .tb-chip-labels { display: flex; flex-direction: row; - align-items: flex-end; + align-items: center; min-width: 0; .tb-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + mat-icon { + margin-right: 4px; + margin-left: 4px; + vertical-align: middle; + } } .tb-chip-separator { white-space: pre; } } - /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. - */ - .mat-chip-remove.mat-icon { + + .mat-mdc-chip-remove.mat-icon { width: 24px; height: 24px; font-size: 24px; - margin-left: 0; + margin-right: 4px; color: inherit; opacity: inherit; + padding-left: 0; } } } -:host ::ng-deep { - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-flex { - padding-top: 0; - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-infix { - border-top: 0; - } +.tb-datakey-icon { + vertical-align: middle; + &.new-key { + margin-left: 8px; + margin-right: 8px; + } +} + +::ng-deep { + .mat-icon.tb-datakey-icon > svg { + vertical-align: initial; } +} +:host ::ng-deep { .tb-chip-label { .tb-agg-func { font-style: italic; color: #0c959c; } } + .tb-datakey-chip { + .mat-mdc-chip-action { + overflow: hidden; + .mat-mdc-chip-action-label { + overflow: hidden; + } + } + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts index 4be682f21e..03980d94d3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts @@ -29,12 +29,12 @@ import { } from '@angular/core'; import { ControlValueAccessor, - UntypedFormBuilder, - UntypedFormControl, - UntypedFormGroup, FormGroupDirective, NG_VALUE_ACCESSOR, NgForm, + UntypedFormBuilder, + UntypedFormControl, + UntypedFormGroup, Validators } from '@angular/forms'; import { Observable, of } from 'rxjs'; @@ -43,7 +43,7 @@ import { Store } from '@ngrx/store'; import { AppState } from '@app/core/core.state'; import { TranslateService } from '@ngx-translate/core'; import { MatAutocomplete } from '@angular/material/autocomplete'; -import { MatChipInputEvent, MatChipGrid } from '@angular/material/chips'; +import { MatChipGrid, MatChipInputEvent } from '@angular/material/chips'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { DataKey, DatasourceType, JsonSettingsSchema, Widget, widgetType } from '@shared/models/widget.models'; @@ -62,7 +62,6 @@ import { import { deepClone } from '@core/utils'; import { MatChipDropEvent } from '@app/shared/components/mat-chip-draggable.directive'; import { Dashboard } from '@shared/models/dashboard.models'; -import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { AggregationType } from '@shared/models/time/time.models'; @Component({ @@ -175,7 +174,6 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie private dialogs: DialogService, private dialog: MatDialog, private fb: UntypedFormBuilder, - private sanitizer: DomSanitizer, public truncate: TruncatePipe) { } @@ -450,34 +448,13 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie return key ? key.name : undefined; } - displayDataKeyNameFn(key: DataKey): SafeHtml { - let keyName = key.name; - if (this.widgetType === widgetType.latest && key.type === DataKeyType.timeseries - && key.aggregationType && key.aggregationType !== AggregationType.NONE) { - let aggFuncName: string; - switch (key.aggregationType) { - case AggregationType.MIN: - aggFuncName = 'MIN'; - break; - case AggregationType.MAX: - aggFuncName = 'MAX'; - break; - case AggregationType.AVG: - aggFuncName = 'AVG'; - break; - case AggregationType.SUM: - aggFuncName = 'SUM'; - break; - case AggregationType.COUNT: - aggFuncName = 'COUNT'; - break; - } - keyName = `${aggFuncName}(${keyName})`; - } - if (this.datasourceType !== DatasourceType.function && key.postFuncBody) { - keyName = `f(${keyName})`; - } - return this.sanitizer.bypassSecurityTrustHtml(`${keyName}`); + dataKeyHasAggregation(key: DataKey): boolean { + return this.widgetType === widgetType.latest && key.type === DataKeyType.timeseries + && key.aggregationType && key.aggregationType !== AggregationType.NONE; + } + + dataKeyHasPostprocessing(key: DataKey): boolean { + return this.datasourceType !== DatasourceType.function && !!key.postFuncBody; } private fetchKeys(searchText?: string): Observable> { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss index 24e630b18b..a04f82dce7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss @@ -21,35 +21,30 @@ :host ::ng-deep { .tb-nav-button { width: 100%; - height: 100%; + height: 100% !important; &:hover { border-bottom: none; } &:focus { border-bottom: none; } - /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. - */ - .mat-button-wrapper { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - mat-icon { - margin: auto; - } - span { - height: 18px; - min-height: 36px; - max-height: 36px; - padding: 0 0 20px 0; - margin: auto; - font-size: 18px; - font-weight: 400; - line-height: 18px; - white-space: normal; - } + display: flex; + flex-direction: column; + align-items: center; + mat-icon { + margin: auto !important; + } + span.mdc-button__label { + height: 18px; + min-height: 36px; + max-height: 36px; + padding: 0 0 20px 0; + margin: auto; + font-size: 18px; + font-weight: 400; + line-height: 18px; + white-space: normal; + text-align: center; } &.mat-mdc-raised-button.mat-primary { .mat-ripple-element { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss index b011ada279..f3710fbc81 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss @@ -28,25 +28,17 @@ font-size: 24px; } } - /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. - */ - /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. - */ - mat-card { + .mat-mdc-card { padding: 0; margin: 8px; - /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. - */ - mat-card-title { + .mat-mdc-card-title { margin: 0; padding: 24px 16px 16px; } - mat-card-title+mat-card-content { + .mat-mdc-card-title+.mat-mdc-card-content { padding-top: 0; } - /*TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. - */ - mat-card-content { + .mat-mdc-card-content { padding: 16px; } } @@ -60,28 +52,23 @@ &:focus { border-bottom: none; } - /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. - */ - .mat-button-wrapper { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - mat-icon { - margin: auto; - } - span { - height: 18px; - min-height: 36px; - max-height: 36px; - padding: 0 0 20px 0; - margin: auto; - font-size: 18px; - font-weight: 400; - line-height: 18px; - white-space: normal; - } + display: flex; + flex-direction: column; + align-items: center; + mat-icon { + margin: auto; + } + span.mdc-button__label { + height: 18px; + min-height: 36px; + max-height: 36px; + padding: 0 0 20px 0; + margin: auto; + font-size: 18px; + font-weight: 400; + line-height: 18px; + white-space: normal; + text-align: center; } &.mat-mdc-raised-button.mat-primary { .mat-ripple-element { diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index fc9138d052..0b4c433bef 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -15,7 +15,7 @@ limitations under the License. --> - +
- +
- widget-config.datasource-type + widget-config.datasource-type widget-config.datasource-parameters @@ -131,7 +131,7 @@ class="tb-datasource-list-item tb-draggable" cdkDrag [cdkDragDisabled]="disabled">
-
+
@@ -41,8 +41,7 @@

{{ providerDescription }}

- - + { if (data.data.length) { const dashboard = data.data[0]; diff --git a/ui-ngx/src/app/shared/components/dialog/material-icons-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/material-icons-dialog.component.html index 33aad99952..94d256fd61 100644 --- a/ui-ngx/src/app/shared/components/dialog/material-icons-dialog.component.html +++ b/ui-ngx/src/app/shared/components/dialog/material-icons-dialog.component.html @@ -43,7 +43,6 @@
@@ -34,7 +32,7 @@ matTooltipPosition="above" style="border-radius: 50%" (click)="fullscreen = !fullscreen"> -
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.scss b/ui-ngx/src/app/shared/components/markdown-editor.component.scss index 1191c97306..bd8eb26a2e 100644 --- a/ui-ngx/src/app/shared/components/markdown-editor.component.scss +++ b/ui-ngx/src/app/shared/components/markdown-editor.component.scss @@ -58,15 +58,31 @@ overflow: auto; height: 100%; } - button.panel-button { - background: rgba(220, 220, 220, .35); - align-items: center; - vertical-align: middle; - min-width: 32px; - min-height: 15px; - padding: 4px; - font-size: .8rem; - line-height: 15px; - color: #7b7b7b; + + .markdown-editor-toolbar { + & > * { + &:not(:last-child) { + margin-right: 4px; + } + } + button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 { + background: rgba(220, 220, 220, .35); + align-items: center; + vertical-align: middle; + min-width: 32px; + min-height: 15px; + padding: 4px; + font-size: .8rem; + line-height: 15px; + &:not(.tb-help-popup-button) { + color: #7b7b7b; + } + } + button.mat-mdc-button-base:not(.mat-mdc-icon-button) { + height: 23px; + } + .tb-help-popup-button-loading { + background: #f3f3f3; + } } } diff --git a/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts b/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts index e9163ffec3..1a07ec5e59 100644 --- a/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts +++ b/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts @@ -81,7 +81,7 @@ const droppingClassName = 'dropping'; const droppingBeforeClassName = 'dropping-before'; const droppingAfterClassName = 'dropping-after'; -let globalDraggingChipListId = null; +let globalDraggingChipList: MatChipGrid = null; class DraggableChip { @@ -104,6 +104,7 @@ class DraggableChip { private chipsList: MatChipGrid, private chipListElement: HTMLElement, private chipDrop: EventEmitter) { + chip._mousedown = () => {}; this.chipElement = chip._elementRef.nativeElement; this.chipElement.setAttribute('draggable', 'true'); this.handle = this.chipElement.getElementsByClassName('tb-chip-drag-handle')[0] as HTMLElement; @@ -126,7 +127,7 @@ class DraggableChip { } else { event.stopPropagation(); this.dragging = true; - globalDraggingChipListId = this.chipListElement.id; + globalDraggingChipList = this.chipsList; this.chipListElement.classList.add(draggingClassName); this.chipElement.classList.add(draggingClassName); event = (event as any).originalEvent || event; @@ -164,7 +165,7 @@ class DraggableChip { private onDragEnd(event: Event | any) { event.stopPropagation(); this.dragging = false; - globalDraggingChipListId = null; + globalDraggingChipList = null; this.chipListElement.classList.remove(draggingClassName); this.chipElement.classList.remove(draggingClassName); } @@ -174,7 +175,7 @@ class DraggableChip { return; } event.preventDefault(); - if (globalDraggingChipListId !== this.chipListElement.id) { + if (globalDraggingChipList !== this.chipsList) { return; } const bounds = this.chipElement.getBoundingClientRect(); @@ -210,7 +211,7 @@ class DraggableChip { private onDrop(event: Event | any) { this.counter = 0; event.preventDefault(); - if (globalDraggingChipListId !== this.chipListElement.id) { + if (globalDraggingChipList !== this.chipsList) { return; } event = (event as any).originalEvent || event; @@ -233,21 +234,23 @@ class DraggableChip { if (this.dropTimeout) { clearTimeout(this.dropTimeout); } - this.dropTimeout = setTimeout(() => { - this.dropPosition = null; - - this.chipElement.classList.remove(droppingClassName); - this.chipElement.classList.remove(droppingAfterClassName); - this.chipElement.classList.remove(droppingBeforeClassName); - - this.chipElement.removeEventListener('drop', this.dropHandler); - - const dropEvent: MatChipDropEvent = { - from: droppedItemIndex, - to: newIndex - }; - this.chipDrop.emit(dropEvent); - }, 1000 / 16); + if (droppedItemIndex !== newIndex) { + this.dropTimeout = setTimeout(() => { + this.dropPosition = null; + + this.chipElement.classList.remove(droppingClassName); + this.chipElement.classList.remove(droppingAfterClassName); + this.chipElement.classList.remove(droppingBeforeClassName); + + this.chipElement.removeEventListener('drop', this.dropHandler); + + const dropEvent: MatChipDropEvent = { + from: droppedItemIndex, + to: newIndex + }; + this.chipDrop.emit(dropEvent); + }, 1000 / 16); + } } private index(): number { diff --git a/ui-ngx/src/app/shared/components/material-icon-select.component.scss b/ui-ngx/src/app/shared/components/material-icon-select.component.scss index b3274042cd..d17df37a47 100644 --- a/ui-ngx/src/app/shared/components/material-icon-select.component.scss +++ b/ui-ngx/src/app/shared/components/material-icon-select.component.scss @@ -16,16 +16,9 @@ :host { .mat-icon.icon-value { padding: 4px; - margin: 8px 4px 4px; + margin: 12px 4px 4px; cursor: pointer; border: solid 1px rgba(0, 0, 0, .27); - } -} - -:host ::ng-deep { - /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. - */ - .mat-form-field-infix{ - width: 146px; + box-sizing: initial; } } diff --git a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html index 336419fe50..daf3f53a28 100644 --- a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html +++ b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html @@ -15,7 +15,7 @@ limitations under the License. --> - + {{ required ? ('relation.relation-type' | translate) : ( !modelValue ? ('relation.any-relation-type' | translate) : ' ') }} >; diff --git a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html index 6263f93f51..dca71ee4bf 100644 --- a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html +++ b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html @@ -24,7 +24,7 @@ skip_previous
- +
{{ this.currentTime | date:'medium'}} diff --git a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html index 13eb206668..5478253f72 100644 --- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html +++ b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html @@ -15,7 +15,7 @@ limitations under the License. --> - + {{ 'version-control.branch' | translate }} - - +