[incubator-streampipes] branch STREAMPIPES-319 updated: [hotfix] Harmonize options bar layout of data explorer component

[ri...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

riemer pushed a commit to branch STREAMPIPES-319
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git


The following commit(s) were added to refs/heads/STREAMPIPES-319 by this push:
     new 8ba6809  [hotfix] Harmonize options bar layout of data explorer component
8ba6809 is described below

commit 8ba6809148d1b1588f7af4fe041ac568525c54b7
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue Aug 10 21:51:50 2021 +0200

    [hotfix] Harmonize options bar layout of data explorer component
---
 ...data-explorer-dashboard-overview.component.html | 25 +++++++++++++---------
 ui/src/scss/sp/layout.scss                         |  1 +
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
index 1a72053..59300fa 100644
--- a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
+++ b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
@@ -17,16 +17,21 @@
   -->
 
 
-<div fxFlex="100" fxLayout="column" class="m-20">
-    <div fxLayout="row wrap">
-        <button mat-button mat-raised-button color="accent" (click)="openNewDataViewDialog()" class="mr-10">
-            New Data View
-        </button>
-        <button mat-button mat-raised-button color="accent" (click)="openEditLabelView()">
-            Edit Labels
-        </button>
+<div fxFlex="100" fxLayout="column">
+    <div fxFlex="100" fxLayout="column">
+        <div fxLayout="row" class="fixed-height options-bar page-container-nav sp-tab-bg">
+            <div fxLayoutAlign="start center" fxLayout="row" class="pl-10">
+                <button mat-button mat-raised-button color="accent" (click)="openNewDataViewDialog()" class="mr-10">
+                    <i class="material-icons">add</i>
+                    <span>New Data View</span>
+                </button>
+                <button mat-button mat-raised-button color="accent" (click)="openEditLabelView()">
+                    Edit Labels
+                </button>
+            </div>
+        </div>
     </div>
-    <div *ngIf="!editLabels" fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch">
+    <div *ngIf="!editLabels" fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch" class="m-20">
         <div fxFlex="100" class="assemblyOptions sp-blue-bg p-5">
             <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
                 <h4>My Data Views</h4>
@@ -38,7 +43,7 @@
                 <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
 
                     <ng-container matColumnDef="name">
-                        <th fxFlex="80" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Data View </th>
+                        <th fxFlex="80" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Data View</th>
                         <td fxFlex="80" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
                             {{element.name}}<br/>
                             {{element.description}}
diff --git a/ui/src/scss/sp/layout.scss b/ui/src/scss/sp/layout.scss
index 7981bcc..dc856d6 100644
--- a/ui/src/scss/sp/layout.scss
+++ b/ui/src/scss/sp/layout.scss
@@ -83,6 +83,7 @@
 
 .page-container-nav {
   line-height:24px;
+  height: 50px;
   border-bottom:1px solid var(--color-tab-border);
 }