Integrated the new header to the flows plugin (#1119)

Integrated the new header to the flows plugin
project-flogo · Jun 20, 2019 · 239811a · 239811a
2 parents d435c31 + 69de0fe
commit 239811a
Show file tree

Hide file tree

Showing 15 changed files with 155 additions and 227 deletions.
diff --git a/libs/assets/assets/svg/bg-microservice.svg b/libs/assets/assets/svg/bg-microservice.svg
diff --git a/libs/assets/assets/svg/plugin-flows.svg b/libs/assets/assets/svg/plugin-flows.svg
diff --git a/libs/assets/styles/_variables.less b/libs/assets/styles/_variables.less
@@ -4,6 +4,8 @@
 @color-ink: #212121;
 @primary-blue: #0081cb;
 @color-black: #000000;
+@color-teal: #36bfbb;
+@color-white: #ffffff;
 // UXPL colors
 @french-blue: #3f51b5;
 @light-blue-grey: #c5cae9;

diff --git a/libs/lib-client/header/src/lib/bottom-block.directive.ts b/libs/lib-client/header/src/lib/bottom-block.directive.ts
@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: '[header-role="bottom-block"]',
+})
+export class BottomBlockDirective {}
diff --git a/libs/lib-client/header/src/lib/header.component.html b/libs/lib-client/header/src/lib/header.component.html
@@ -1,4 +1,4 @@
-<div class="header">
+<div class="header" [class.--with-bottom-content]="!!bottomAreaContent">
   <i
     class="flogo-icon flogo-icon-back header-back qa-icon-back"
     [class.--hover]="isHoveredOnBack"

diff --git a/libs/lib-client/header/src/lib/header.component.less b/libs/lib-client/header/src/lib/header.component.less
@@ -11,6 +11,10 @@
   align-items: center;
   justify-content: flex-end;
   z-index: 1;
+
+  &.--with-bottom-content {
+    padding-bottom: 4px;
+  }
 }
 
 .header-back {

diff --git a/libs/lib-client/header/src/lib/header.component.ts b/libs/lib-client/header/src/lib/header.component.ts
@@ -1,4 +1,12 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ContentChild,
+  ElementRef,
+} from '@angular/core';
+import { BottomBlockDirective } from './bottom-block.directive';
 
 /**
  * Header component is used to provide a similar structure of the header in the resource designer
@@ -15,22 +23,12 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
  *            right side block
  *
  *  - bottom block (selector: `header-role="bottom-block"`): This will allow users add any additional items to the bottom of
- *            the header. For example, in flows, the flow and error tabs are added to the bottom of the header
+ *            the header. For example, in flows, the flow and error tabs are added to the bottom of the header.
  *
  *  Inputs and Outputs:
  *    Like all components this one also has a set of inputs and outputs which will allow the consumers to provide dynamic
  *    values using inputs and respond to few user actions by subscribing to the outputs
  *
- *    Inputs:
- *      - name <string> : It is the name of the resource which can be changed
- *      - appName <string> : It is the name of the application to which the resource belongs to
- *      - description <string> (Optional): It is the description of the resource which is displayed in the header.
- *
- *    Outputs:
- *      - goBack()(void) : It is an event which emits when user clicks on the back icon or application name.
- *      - changeName() (string) : It is an event which emits the changed name of the resource.
- *      - changeDescription() (string): It is an event which emits the changed description of the resource.
- *
  * Example of usage:
  *  <flogo-designer-header [name]="Get Employee Details" [appName]="Employee Manager"
  *         (goBack)="goBackToAppPage()" (changeName)="updateResourceName($event)" >
@@ -48,31 +46,53 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   styleUrls: ['header.component.less'],
 })
 export class HeaderComponent {
-  // Resource name to be displayed in the header
+  /**
+   * Resource name to be displayed in the header. It can be changed by clicking on it
+   **/
   @Input()
   name: string;
 
-  // Application name to which the resource belongs
+  /**
+   * Application name to which the resource belongs
+   **/
   @Input()
   appName: string;
 
-  // Description of the resource
+  /**
+   * (Optional)
+   * Description of the resource displayed in the header. It can be changed by clicking on it
+   **/
   @Input()
   description: string;
 
-  // Event handler of click event on application name or back icon
+  /**
+   * Event emitted when click on application name or back icon
+   * @emits void
+   **/
   @Output()
   goBack: EventEmitter<void> = new EventEmitter<void>();
 
-  // Event handler to handle change of the resource name
+  /**
+   * Event emits change of the resource name
+   * @emits string
+   **/
   @Output()
   changeName: EventEmitter<string> = new EventEmitter<string>();
 
-  // Event handler to handle change of the resource description
+  /**
+   * Event emits change of the resource description
+   * @emits string
+   **/
   @Output()
   changeDescription: EventEmitter<string> = new EventEmitter<string>();
   isHoveredOnBack = false;
 
+  /**
+   * Reference handler to the bottom block based on whose availability the styling to the header changes
+   **/
+  @ContentChild(BottomBlockDirective)
+  bottomAreaContent: ElementRef;
+
   onMouseOverBackControl() {
     this.isHoveredOnBack = true;
   }

diff --git a/libs/lib-client/header/src/lib/header.module.ts b/libs/lib-client/header/src/lib/header.module.ts
@@ -4,10 +4,11 @@ import { CommonModule as NgCommonModule } from '@angular/common';
 import { SharedModule as FlogoSharedModule } from '@flogo-web/lib-client/common';
 
 import { HeaderComponent } from './header.component';
+import { BottomBlockDirective } from './bottom-block.directive';
 
 @NgModule({
-  declarations: [HeaderComponent],
+  declarations: [HeaderComponent, BottomBlockDirective],
   imports: [NgCommonModule, FlogoSharedModule],
-  exports: [HeaderComponent],
+  exports: [HeaderComponent, BottomBlockDirective],
 })
 export class HeaderModule {}
diff --git a/libs/lib-client/logs/src/lib/logs.component.less b/libs/lib-client/logs/src/lib/logs.component.less
@@ -37,7 +37,6 @@
       font-size: 1.5em;
       padding: 0;
       text-align: center;
-      margin-top: 5px;
     }
 
     .log-button:hover,

diff --git a/libs/plugins/flow-client/src/lib/flow-tabs/flow-tabs.component.less b/libs/plugins/flow-client/src/lib/flow-tabs/flow-tabs.component.less
@@ -26,7 +26,8 @@
 
 .flogo-flow-tabs-item--selected {
   color: @twilight-blue;
-  border-bottom: 3px solid @twilight-blue;
+  border-bottom: 2px solid @twilight-blue;
+  font-weight: 600;
 }
 
 .error-badge {

diff --git a/libs/plugins/flow-client/src/lib/flow.component.html b/libs/plugins/flow-client/src/lib/flow.component.html
@@ -1,81 +1,53 @@
 <div class="canvas-flow" *ngIf="flowState && !loading">
-  <div class="header header--microservice">
-    <section class="flogo-flow-detail">
-      <header class="flogo-flow-detail-header" [ngClass]="{ '--hover': backToAppHover }">
-        <i
-          class="flogo-icon flogo-icon-back flogo-flow-detail-header-back-icon"
-          (click)="navigateToApp()"
-          (mouseover)="onMouseOverBackControl()"
-          (mouseout)="onMouseOutBackControl()"
-        ></i>
-        <div
-          class="flogo-profile__tile flogo-profile-detail__thumb flogo-profile__microservice"
-        ></div>
-        <div class="header-content">
-          <div class="flow-detail-name">
-            <h3
-              class="flogo-flow-detail-name"
-              [(fgContentEditable)]="flowState.name"
-              (fgContentEditableChange)="changeFlowDetailName($event, 'name')"
-            ></h3>
-            <span>in</span>
-            <span
-              (click)="navigateToApp()"
-              class="flogo-flow-detail-header-back-app-name"
-              (mouseover)="onMouseOverBackControl()"
-              (mouseout)="onMouseOutBackControl()"
-              >{{ flowState?.app?.name }}</span
-            >
-          </div>
-          <p
-            class="flow-detail-description"
-            [(fgContentEditable)]="flowState.description"
-            [allowNewLines]="true"
-            placeholder="{{ 'CANVAS:ADD-FLOW-DESCRIPTION' | translate }}"
-            (fgContentEditableChange)="changeFlowDetail($event, 'description')"
-          ></p>
-        </div>
-      </header>
-
-      <div class="flogo-flow-detail-menu-container">
-        <!-- Temporarily removing run flow for v0.9.0 -->
-        <!--     <flogo-run-flow
-          [disableRun]="runnableInfo?.disabled"
-          disableReason="{{ runnableInfo?.disableReason | translate }}"
-          [flowInputs]="flowState?.metadata?.input"
-          (submit)="onRunFlow($event)"
-        ></flogo-run-flow>-->
-        <div class="flogo-flow-detail-log-button-container">
-          <flogo-logs></flogo-logs>
-        </div>
-        <div
-          class="flogo-flow-detail-menu"
-          [class.--active]="isflowMenuOpen"
-          (fgClickOutside)="closeFlowMenu()"
-        >
-          <i class="flogo-icon-kebabmenu kebabmenu-icon" (click)="toggleFlowMenu()"></i>
-          <div class="flogo-flow-detail-menu-list-wrapper">
-            <ul class="flogo-flow-detail-menu-list">
-              <!--
-                <li class="flogo-flow-detail-menu-item"><a disabled href="javascript:void(0);"><i class="fa fa-clone fa-fw"></i>{{ 'CANVAS:COPY' | translate }}</a></li>
-              -->
-              <li class="flogo-flow-detail-menu-item">
-                <a
-                  (click)="deleteFlow()"
-                  href="javascript:void(0);"
-                  class="flogo-flow-detail-menu-anchor"
-                >
-                  <i class="flogo-icon flogo-icon-delete"></i
-                  >{{ 'CANVAS:DELETE' | translate }}
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
+  <flogo-designer-header
+    [name]="flowState.name"
+    [appName]="flowState?.app?.name"
+    [description]="flowState.description"
+    (goBack)="navigateToApp()"
+    (changeName)="changeFlowDetailName($event, 'name')"
+    (changeDescription)="changeFlowDetail($event, 'description')"
+  >
+    <svg class="flow-logo" viewBox="-3 -11 48 48" header-role="resource-logo">
+      <use xlink:href="/assets/svg/plugin-flows.svg#flowIcon"></use>
+    </svg>
+    <!--Temporarily removing run flow for v0.9.0-->
+    <!--<flogo-run-flow
+        header-role="right-block"
+        class="flow-debugging"
+        [disableRun]="runnableInfo?.disabled"
+        disableReason="{{ runnableInfo?.disableReason | translate }}"
+        [flowInputs]="flowState?.metadata?.input"
+        (submit)="onRunFlow($event)"
+      ></flogo-run-flow>-->
+    <flogo-logs header-role="right-block"></flogo-logs>
+    <div
+      header-role="right-block"
+      class="menu-dropdown"
+      (fgClickOutside)="closeFlowMenu()"
+    >
+      <i
+        class="flogo-icon-kebabmenu kebabmenu-icon menu-dropdown-more-button"
+        [class.active]="isflowMenuOpen"
+        (click)="toggleFlowMenu()"
+        role="button"
+        id="flowMenuButton"
+        aria-haspopup="true"
+        [attr.aria-expanded]="isflowMenuOpen"
+      ></i>
+      <div
+        class="menu-dropdown__content menu-dropdown__content--more"
+        aria-labelledby="flowMenuButton"
+        [class.active]="isflowMenuOpen"
+      >
+        <ul class="dropdown-list">
+          <li class="dropdown-list__item" (click)="deleteFlow()">
+            <i class="flogo-icon flogo-icon-delete"></i>{{ 'CANVAS:DELETE' | translate }}
+          </li>
+        </ul>
       </div>
-    </section>
-    <flogo-flow-tabs class="tabs"></flogo-flow-tabs>
-  </div>
+    </div>
+    <flogo-flow-tabs header-role="bottom-block" class="tabs"></flogo-flow-tabs>
+  </flogo-designer-header>
 
   <flogo-flow-debug-panel class="debug-panel-container">
     <ng-container *ngTemplateOutlet="flowContent"></ng-container>