updated visuals for launch commands

ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html

@@ -15,31 +15,45 @@
     limitations under the License.
 
 -->
-<div mat-dialog-content tb-toast fxLayout="column" toastTarget="dockerCommandDialogContent">
-  <span style="padding-bottom: 15px;">{{ 'gateway.docker-label' | translate }}</span>
+<div mat-dialog-content tb-toast fxLayout="column" toastTarget="dockerCommandDialogContent" style="padding-top: 5px">
+  <div fxLayout="row" fxLayoutAlign="space-between center">
+    <span class="tb-no-data-text">{{ 'gateway.docker-label' | translate }}</span>
+    <div fxFlexAlign="end" class="tb-help" [tb-help]="helpLink"></div>
+  </div>
   <div fxFlex fxLayout="row" style="justify-content: space-between; flex-grow: 0; align-items: center">
-    <tb-toggle-select [formControl]="selectedOSCControl" appearance="stroked" style="width: max-content; flex-grow: 0">
-      <tb-toggle-option [value]="osTypes.windows"><span>Windows </span></tb-toggle-option>
-      <tb-toggle-option [value]="osTypes.linux"><span>Linux/MacOS </span></tb-toggle-option>
-    </tb-toggle-select>
-    <div class="tb-help" [tb-help]="helpLink"></div>
   </div>
-  <ng-container [ngSwitch]="selectedOSCControl.value">
-    <ng-template [ngSwitchCase]="osTypes.windows">
-      <tb-markdown usePlainMarkdown containerClass="start-code" data="
+  <mat-tab-group [(selectedIndex)]="tabIndex">
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
+        Windows
+      </ng-template>
+      <ng-template matTabContent>
+        <div class="tb-form-panel no-padding no-border tb-tab-body">
+          <tb-markdown usePlainMarkdown containerClass="start-code" data="
                     ```bash
                     {{windowsCode}}
                     {:copy-code}
                     ```
                 "></tb-markdown>
-    </ng-template>
-    <ng-template [ngSwitchCase]="osTypes.linux">
-      <tb-markdown usePlainMarkdown containerClass="start-code" data="
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
+        Linux
+      </ng-template>
+      <ng-template matTabContent>
+        <div class="tb-form-panel no-padding no-border tb-tab-body">
+          <tb-markdown usePlainMarkdown containerClass="start-code" data="
                     ```bash
                     {{linuxCode}}
                     {:copy-code}
                     ```
                 "></tb-markdown>
-    </ng-template>
-  </ng-container>
+        </div>
+      </ng-template>
+    </mat-tab>
+  </mat-tab-group>
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts

@@ -15,7 +15,6 @@
 ///
 
 import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -24,11 +23,6 @@ import { ActionNotificationShow } from '@core/notification/notification.actions'
 import { DeviceService } from '@core/http/device.service';
 import { helpBaseUrl } from '@shared/models/constants';
 
-enum OsType {
-  linux = 'linux',
-  macos = 'macos',
-  windows = 'win'
-}
 
 @Component({
   selector: 'tb-gateway-command',
@@ -46,10 +40,11 @@ export class DeviceGatewayCommandComponent implements OnInit {
 
   linuxCode: string;
   windowsCode: string;
-  selectedOSCControl: FormControl;
-  osTypes = OsType;
+
   helpLink: string = helpBaseUrl + '/docs/iot-gateway/install/docker-installation/';
 
+  tabIndex = 0;
+
   constructor(protected router: Router,
               protected store: Store<AppState>,
               private translate: TranslateService,
@@ -65,17 +60,16 @@ export class DeviceGatewayCommandComponent implements OnInit {
         this.cd.detectChanges();
       });
     }
-    this.selectedOSCControl = new FormControl('');
     // @ts-ignore
     const platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
       macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
       windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
     if (macosPlatforms.indexOf(platform) !== -1) {
-      this.selectedOSCControl.setValue(OsType.linux);
+      this.tabIndex = 1;
     } else if (windowsPlatforms.indexOf(platform) !== -1) {
-      this.selectedOSCControl.setValue(OsType.windows);
+      this.tabIndex = 0;
     } else if (/Linux/.test(platform)) {
-      this.selectedOSCControl.setValue(OsType.linux);
+      this.tabIndex = 1;
     }
   }