Move data view name input field to toolbar and simplified data explor…

…er appearance (#3217)
apache · Sep 5, 2024 · b145f9d · b145f9d
1 parent bf2266c
commit b145f9d
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 26 deletions.
diff --git a/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.html b/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.html
@@ -31,6 +31,7 @@
         <sp-data-explorer-data-view-toolbar
             [timeSettings]="timeSettings"
             [editMode]="editMode"
+            [configuredWidget]="dataView"
             (downloadFileEmitter)="downloadDataAsFile()"
             (updateDateRangeEmitter)="updateDateRange($event)"
             (saveDataViewEmitter)="saveDataView()"

diff --git a/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.scss b/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.scss
@@ -52,3 +52,8 @@
     width: 450px;
     border: 1px solid var(--color-tab-border);
 }
+
+.widget-title-text {
+    white-space: nowrap;
+    margin-right: 12px;
+}
diff --git a/...esigner-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html b/...esigner-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html
@@ -16,20 +16,6 @@
   ~
   -->
 
-<sp-configuration-box title="Widget Title" marginTop="5px">
-    <div fxFlex="100" fxLayout="row" class="mt-10 form-field-small">
-        <mat-form-field appearance="outline" color="accent" fxFlex="100">
-            <input
-                data-cy="appearance-config-widget-title"
-                matInput
-                [(ngModel)]="
-                    currentlyConfiguredWidget.baseAppearanceConfig.widgetTitle
-                "
-            />
-        </mat-form-field>
-    </div>
-</sp-configuration-box>
-
 <sp-configuration-box title="Color">
     <div fxLayout="column" class="mt-10">
         <div fxFlex="100" fxLayout="row" class="mb-10">

diff --git a/...components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.html b/...components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.html
@@ -23,16 +23,6 @@
         class="designer-panel-content"
         *ngIf="currentlyConfiguredWidget"
     >
-        <div fxLayout="row" class="sp-tab-bg designer-panel-header">
-            <div fxLayoutAlign="start center" class="designer-panel-title">
-                <span>
-                    {{
-                        currentlyConfiguredWidget.baseAppearanceConfig
-                            .widgetTitle
-                    }}
-                </span>
-            </div>
-        </div>
         <div fxFlex="100" fxLayout="column" class="no-overflow">
             <mat-tab-group
                 [selectedIndex]="selectedIndex"

diff --git a/...rer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.html b/...rer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.html
@@ -22,15 +22,45 @@
         fxLayoutAlign="start center"
         fxLayout="row"
         fxFlex="100"
-        *ngIf="editMode"
     >
+        <div
+            fxFlex="15"
+            fxLayout="row"
+            fxLayoutAlign="start center"
+            class="widget-header-text mr-10"
+        >
+            <div
+                fxFlex="100"
+                fxLayout="row"
+                fxLayoutAlign="start center"
+                class="mt-5 form-field-small widget-title-container"
+                *ngIf="editMode"
+            >
+                <span class="widget-title-text">Data View Name</span>
+                <mat-form-field
+                    appearance="outline"
+                    color="accent"
+                    fxFlex="100"
+                >
+                    <input
+                        data-cy="appearance-config-widget-title"
+                        matInput
+                        [(ngModel)]="
+                            configuredWidget.baseAppearanceConfig.widgetTitle
+                        "
+                    />
+                </mat-form-field>
+            </div>
+        </div>
+
         <button
             mat-raised-button
             color="accent"
             matTooltip="Save"
             class="edit-menu-btn"
             (click)="saveDataViewEmitter.emit()"
             data-cy="save-data-view-btn"
+            *ngIf="editMode"
         >
             <mat-icon>save</mat-icon>
             Save
@@ -41,6 +71,7 @@
             class="mat-basic mr-10 edit-menu-btn"
             (click)="discardDataViewEmitter.emit()"
             data-cy="discard-data-explorer-widget-btn"
+            *ngIf="editMode"
         >
             <i class="material-icons">undo</i>
             <span>&nbsp;Discard</span>
@@ -51,6 +82,7 @@
             matTooltip="Download data"
             (click)="downloadFileEmitter.emit()"
             data-cy="data-view-data-download-btn"
+            *ngIf="editMode"
         >
             <mat-icon>get_app</mat-icon>
         </button>

diff --git a/...lorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.ts b/...lorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.ts
@@ -17,11 +17,15 @@
  */
 
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { TimeSettings } from '@streampipes/platform-services';
+import {
+    DataExplorerWidgetModel,
+    TimeSettings,
+} from '@streampipes/platform-services';
 
 @Component({
     selector: 'sp-data-explorer-data-view-toolbar',
     templateUrl: './data-explorer-data-view-toolbar.component.html',
+    styleUrls: ['../data-explorer-data-view.component.scss'],
 })
 export class DataExplorerDataViewToolbarComponent {
     @Input()
@@ -30,6 +34,9 @@ export class DataExplorerDataViewToolbarComponent {
     @Input()
     timeSettings: TimeSettings;
 
+    @Input()
+    configuredWidget: DataExplorerWidgetModel;
+
     timeRangeVisible = true;
 
     @Output()