Changed default "Add" button style in entity tables (#14984)

* UI: Use accent text button as default "Add" style in entity tables

* UI: Change default text button style in entity table

* UI: Change default text button style in image gallery

---------

Co-authored-by: Viacheslav Klimov <viacheslavklimov11@gmail.com>

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules-table-config.ts

@@ -106,6 +106,8 @@ export class AlarmRulesTableConfig extends EntityTableConfig<AlarmRuleTableEntit
       this.entityComponent = AlarmRulesComponent;
       this.entityTabsComponent = AlarmRulesTabsComponent;
       this.rowPointer = true;
+    } else {
+      this.addAsTextButton = false;
     }
     this.tableTitle = this.pageMode ? '' : this.translate.instant('alarm-rule.alarm-rules');
     this.detailsPanelEnabled = this.pageMode;
@@ -117,7 +119,7 @@ export class AlarmRulesTableConfig extends EntityTableConfig<AlarmRuleTableEntit
       type: 'alarm-rule.alarm-rule',
       typePlural: 'alarm-rule.alarm-rules',
       list: 'alarm-rule.list',
-      add: 'action.add',
+      add: 'alarm-rule.add',
       details: 'alarm-rule.details',
       noEntities: 'alarm-rule.no-found',
       search: 'action.search',

ui-ngx/src/app/modules/home/components/api-key/api-keys-table-config.ts

@@ -59,7 +59,6 @@ export class ApiKeysTableConfig extends EntityTableConfig<ApiKeyInfo> {
 
     this.entityType = EntityType.API_KEY;
     this.detailsPanelEnabled = false;
-    this.addAsTextButton = true;
     this.pageMode = false;
 
     this.entityTranslations = entityTypeTranslations.get(EntityType.API_KEY);

ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts

@@ -110,6 +110,8 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
       this.entityComponent = CalculatedFieldComponent;
       this.entityTabsComponent = CalculatedFieldsTabsComponent;
       this.rowPointer = true;
+    } else {
+      this.addAsTextButton = false;
     }
     this.tableTitle = this.translate.instant('entity.type-calculated-fields');
     this.detailsPanelEnabled = this.pageMode;

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -45,27 +45,19 @@
                               asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
             </div>
             <span class="flex-1"></span>
-            <div [class.!hidden]="!addEnabled()">
-              <ng-container *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions">
-                <button *ngIf="!entitiesTableConfig.addAsTextButton"
-                        mat-icon-button
+            <div [class.!hidden]="!addEnabled() || entitiesTableConfig.addAsTextButton">
+              <ng-container *ngIf="!entitiesTableConfig.addActionDescriptors.length; else iconCustom">
+                <button mat-icon-button
                         [disabled]="isLoading$ | async"
                         (click)="addEntity($event)"
                         matTooltip="{{ translations.add | translate }}"
                         matTooltipPosition="above">
                   <mat-icon>add</mat-icon>
                 </button>
-                <button *ngIf="entitiesTableConfig.addAsTextButton"
-                        mat-stroked-button color="primary"
-                        [disabled]="isLoading$ | async"
-                        (click)="addEntity($event)">
-                  <mat-icon>add</mat-icon>
-                  {{ translations.add | translate }}
-                </button>
               </ng-container>
-              <ng-template #addActions>
-                <ng-container *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu">
-                  <button *ngIf="!entitiesTableConfig.addAsTextButton && entitiesTableConfig.addActionDescriptors[0].isEnabled()"
+              <ng-template #iconCustom>
+                <ng-container *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else iconMenu">
+                  <button *ngIf="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
                           mat-icon-button
                           [disabled]="isLoading$ | async"
                           (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
@@ -73,30 +65,14 @@
                           matTooltipPosition="above">
                     <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
                   </button>
-                  <button *ngIf="entitiesTableConfig.addAsTextButton && entitiesTableConfig.addActionDescriptors[0].isEnabled()"
-                          mat-stroked-button color="primary"
-                          [disabled]="isLoading$ | async"
-                          (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)">
-                    <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
-                    {{ entitiesTableConfig.addActionDescriptors[0].name }}
-                  </button>
                 </ng-container>
-                <ng-template #addActionsMenu>
+                <ng-template #iconMenu>
                   <button mat-icon-button [disabled]="isLoading$ | async"
                           matTooltip="{{ translations.add | translate }}"
                           matTooltipPosition="above"
                           [matMenuTriggerFor]="addActionsMenu">
                     <mat-icon>add</mat-icon>
                   </button>
-                  <mat-menu #addActionsMenu="matMenu" xPosition="before">
-                    <button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors"
-                            [disabled]="isLoading$ | async"
-                            [class.!hidden]="!actionDescriptor.isEnabled()"
-                            (click)="actionDescriptor.onAction($event)">
-                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                      <span>{{ actionDescriptor.name }}</span>
-                    </button>
-                  </mat-menu>
                 </ng-template>
               </ng-template>
             </div>
@@ -118,6 +94,72 @@
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
             </button>
+            <div [class.!hidden]="!addEnabled() || !entitiesTableConfig.addAsTextButton" class="pl-3" style="--mat-fab-small-container-elevation-shadow: none;">
+              <ng-container *ngIf="!entitiesTableConfig.addActionDescriptors.length; else textActions">
+                <button class="lt-sm:!hidden"
+                        mat-flat-button color="primary"
+                        [disabled]="isLoading$ | async"
+                        (click)="addEntity($event)">
+                  <mat-icon>add</mat-icon>
+                  {{ translations.add | translate }}
+                </button>
+                <button class="gt-xs:!hidden"
+                        mat-mini-fab color="primary"
+                        [disabled]="isLoading$ | async"
+                        (click)="addEntity($event)"
+                        matTooltip="{{ translations.add | translate }}"
+                        matTooltipPosition="above">
+                  <mat-icon>add</mat-icon>
+                </button>
+              </ng-container>
+              <ng-template #textActions>
+                <ng-container *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else textMenu">
+                  <ng-container *ngIf="entitiesTableConfig.addActionDescriptors[0].isEnabled()">
+                    <button class="lt-sm:!hidden"
+                            mat-flat-button color="primary"
+                            [disabled]="isLoading$ | async"
+                            (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)">
+                      <tb-icon matButtonIcon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
+                      {{ entitiesTableConfig.addActionDescriptors[0].name }}
+                    </button>
+                    <button class="gt-xs:!hidden"
+                            mat-mini-fab color="primary"
+                            [disabled]="isLoading$ | async"
+                            (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
+                            matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
+                            matTooltipPosition="above">
+                      <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
+                    </button>
+                  </ng-container>
+                </ng-container>
+                <ng-template #textMenu>
+                  <button class="lt-sm:!hidden"
+                          mat-flat-button color="primary"
+                          [disabled]="isLoading$ | async"
+                          [matMenuTriggerFor]="addActionsMenu">
+                    <mat-icon>add</mat-icon>
+                    {{ translations.add | translate }}
+                  </button>
+                  <button class="gt-xs:!hidden"
+                          mat-mini-fab color="primary"
+                          [disabled]="isLoading$ | async"
+                          [matMenuTriggerFor]="addActionsMenu"
+                          matTooltip="{{ translations.add | translate }}"
+                          matTooltipPosition="above">
+                    <mat-icon>add</mat-icon>
+                  </button>
+                </ng-template>
+              </ng-template>
+            </div>
+            <mat-menu #addActionsMenu="matMenu" xPosition="before">
+              <button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors"
+                      [disabled]="isLoading$ | async"
+                      [class.!hidden]="!actionDescriptor.isEnabled()"
+                      (click)="actionDescriptor.onAction($event)">
+                <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                <span>{{ actionDescriptor.name }}</span>
+              </button>
+            </mat-menu>
           </div>
         </mat-toolbar>
         <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html

@@ -32,7 +32,8 @@
           </tb-branch-autocomplete>
         </div>
         <span class="flex-1"></span>
-        <div class="flex flex-row items-center justify-center xs:flex-col xs:items-end xs:justify-center">
+        <div class="flex flex-row items-center justify-center xs:flex-col xs:items-end xs:justify-center"
+             [class.xs:flex-col-reverse]="!singleEntityMode">
           <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
                   #createVersionButton
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)"
@@ -40,13 +41,6 @@
             <mat-icon>update</mat-icon>
             {{'version-control.create-version' | translate }}
           </button>
-          <button *ngIf="!singleEntityMode" mat-stroked-button color="primary"
-                  #complexCreateVersionButton
-                  [disabled]="(isLoading$ | async) || (isReadOnly | async)"
-                  (click)="toggleComplexCreateVersion($event, complexCreateVersionButton)">
-            <mat-icon>update</mat-icon>
-            {{'version-control.create-entities-version' | translate }}
-          </button>
           <div class="flex flex-row">
             <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
@@ -61,6 +55,14 @@
               <mat-icon>search</mat-icon>
             </button>
           </div>
+          <button *ngIf="!singleEntityMode" mat-flat-button color="primary"
+                  class="gt-xs:ml-3"
+                  #complexCreateVersionButton
+                  [disabled]="(isLoading$ | async) || (isReadOnly | async)"
+                  (click)="toggleComplexCreateVersion($event, complexCreateVersionButton)">
+            <mat-icon>update</mat-icon>
+            {{'version-control.create-entities-version' | translate }}
+          </button>
         </div>
       </div>
     </mat-toolbar>

ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts

@@ -175,7 +175,7 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P
   selectionEnabled = true;
   searchEnabled = true;
   addEnabled = true;
-  addAsTextButton = false;
+  addAsTextButton = true;
   entitiesDeleteEnabled = true;
   detailsPanelEnabled = true;
   hideDetailsTabsOnEdit = true;

ui-ngx/src/app/modules/home/pages/ai-model/ai-model-table-config.resolve.ts

@@ -47,7 +47,6 @@ export class AiModelsTableConfigResolver {
   ) {
     this.config.selectionEnabled = true;
     this.config.entityType = EntityType.AI_MODEL;
-    this.config.addAsTextButton = true;
     this.config.rowPointer = true;
     this.config.detailsPanelEnabled = false;
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.AI_MODEL);

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-config.resolver.ts

@@ -57,7 +57,6 @@ export class MobileAppTableConfigResolver  {
               ) {
     this.config.selectionEnabled = false;
     this.config.entityType = EntityType.MOBILE_APP;
-    this.config.addAsTextButton = true;
     this.config.entitiesDeleteEnabled = false;
     this.config.rowPointer = true;
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.MOBILE_APP);

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-config.resolve.ts

@@ -63,7 +63,6 @@ export class MobileBundleTableConfigResolver {
   ) {
     this.config.selectionEnabled = false;
     this.config.entityType = EntityType.MOBILE_APP_BUNDLE;
-    this.config.addAsTextButton = true;
     this.config.rowPointer = true;
     this.config.detailsPanelEnabled = false;
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.MOBILE_APP_BUNDLE);

ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-config.resolver.ts

@@ -48,7 +48,6 @@ export class RecipientTableConfigResolver  {
 
     this.config.entityType = EntityType.NOTIFICATION_TARGET;
     this.config.detailsPanelEnabled = false;
-    this.config.addAsTextButton = true;
     this.config.rowPointer = true;
 
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.NOTIFICATION_TARGET);

ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts

@@ -49,7 +49,6 @@ export class RuleTableConfigResolver  {
 
     this.config.entityType = EntityType.NOTIFICATION_RULE;
     this.config.detailsPanelEnabled = false;
-    this.config.addAsTextButton = true;
     this.config.rowPointer = true;
 
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.NOTIFICATION_RULE);

ui-ngx/src/app/modules/home/pages/notification/template/template-table-config.resolver.ts

@@ -47,7 +47,6 @@ export class TemplateTableConfigResolver  {
 
     this.config.entityType = EntityType.NOTIFICATION_TEMPLATE;
     this.config.detailsPanelEnabled = false;
-    this.config.addAsTextButton = true;
     this.config.rowPointer = true;
 
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.NOTIFICATION_TEMPLATE);

ui-ngx/src/app/shared/components/image/image-gallery.component.html

@@ -74,10 +74,10 @@
               <tb-icon>mdi:file-import</tb-icon>
             </button>
             <button [class.!hidden]="dialogMode && isScada"
-                    class="gt-md:!hidden"
+                    class="ml-3 gt-md:!hidden"
                     [disabled]="isLoading$ | async"
-                    mat-icon-button
-                    color="primary"
+                    mat-mini-fab color="primary"
+                    style="--mat-fab-small-container-elevation-shadow: none;"
                     (click)="uploadImage()"
                     matTooltip="{{ (isScada ? 'scada.upload-symbol' : 'image.upload-image' ) | translate }}"
                     matTooltipPosition="above">

ui-ngx/src/app/shared/models/entity-type.models.ts

@@ -490,6 +490,7 @@ export const entityTypeTranslations = new Map<EntityType | AliasEntityType, Enti
         type: 'entity.type-calculated-field',
         typePlural: 'entity.type-calculated-fields',
         list: 'calculated-fields.list',
+        add: 'calculated-fields.add',
         details: 'calculated-fields.calculated-field-details',
         noEntities: 'calculated-fields.no-found',
         search: 'action.search',

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1102,6 +1102,7 @@
         "expression": "Expression",
         "no-found": "No calculated fields found",
         "list": "{ count, plural, =1 {One calculated field} other {List of # calculated fields} }",
+        "add": "Add calculated field",
         "selected-fields": "{ count, plural, =1 {1 calculated field} other {# calculated fields} } selected",
         "type": {
             "simple": "Simple",