From 6eda32f785bbaecb091fbd9e87f2c2890f06f9c4 Mon Sep 17 00:00:00 2001
From: Bruce An <bruce.an@marklogic.com>
Date: Mon, 21 Jan 2019 12:48:45 -0800
Subject: [PATCH 1/3] updated ui for flow inputs

---
 .../components/mlcp/mlcp-ui.component.html    | 79 ++++++++++---------
 .../components/mlcp/mlcp-ui.component.scss    | 20 ++++-
 2 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.html b/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.html
index 6d9d7c7d3b..ef4a1ee60a 100644
--- a/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.html
+++ b/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.html
@@ -18,47 +18,48 @@ <h3 (click)="toggleSection('inputFiles')"><i class="fa fa-caret-right" [ngClass]
         <h3 (click)="toggleSection(group.category)"><i class="fa fa-caret-right" [ngClass]="getSectionClass(group.category)"></i> {{group.category}}</h3>
         <div class="group-section slideDown" [ngClass]="getSectionClass(group.category)">
           <div class="setting" *ngFor="let setting of group.settings">
-            <span
+            <mdl-switch
+              [mdl-tooltip]="switchTooltip"
+              mdl-tooltip-position="right"
+              [attr.id]="setting.field"
+              class="primary-color"
               *ngIf="setting.type === 'boolean'"
-              [tooltip]="setting.description"
-              placement="left"
-              container="body">
-              <mdl-switch
-                [attr.id]="setting.field"
-                class="primary-color"
-                *ngIf="setting.type === 'boolean'"
-                [ngModel]="setting.value"
-                (change)="handleValueChanged(setting, $event)">
-                  {{setting.label}}
-              </mdl-switch>
-            </span>
-            <span
-              [tooltip]="setting.description"
-              placement="left"
-              container="body">
-              <mdl-textfield floating-label type="text"
-                 [label]="setting.label"
-                 name="{{setting.field}}" *ngIf="isText(setting.type)"
-                 [ngModel]="setting.value"
-                 (input)="handleValueChanged(setting, $event.target.value)"
-                 [disabled]="setting.readOnly">
-              </mdl-textfield>
-            </span>
-            <span
+              [ngModel]="setting.value"
+              (change)="handleValueChanged(setting, $event)">
+                {{setting.label}}
+            </mdl-switch>
+            <mdl-tooltip #switchTooltip="mdlTooltip">
+              {{setting.description}}
+            </mdl-tooltip>
+
+            <label *ngIf="isText(setting.type)">{{setting.label}}</label>
+            <input 
+              [mdl-tooltip]="inputTooltip"
+              mdl-tooltip-position="right"
+              type="search" 
+              [disabled]="setting.readOnly" 
+              name="{{setting.field}}" 
+              [(ngModel)]="setting.value" 
+              *ngIf="isText(setting.type)" 
+              (input)="handleValueChanged(setting, $event.target.value)">
+              <mdl-tooltip #inputTooltip="mdlTooltip">
+                {{setting.description}}
+              </mdl-tooltip>
+
+            <app-custom-select
+              [mdl-tooltip]="selectTooltip"
+              mdl-tooltip-position="right"
+              [attr.id]="setting.field"
+              [labelText]="setting.label"
+              [items]="setting.options"
+              [initialSelectedItem]="setting.value"
+              (selectedItem)="handleValueChanged(setting, $event)"
               *ngIf="setting.type === 'type'"
-              [tooltip]="setting.description"
-              placement="left"
-              container="body">
-              <app-custom-select
-                [attr.id]="setting.field"
-                [labelText]="setting.label"
-                [items]="setting.options"
-                [initialSelectedItem]="setting.value"
-                (selectedItem)="handleValueChanged(setting, $event)"
-                *ngIf="setting.type === 'type'"
-                label="label"
-                value="value"></app-custom-select>
-              </span>
+              label="label"
+              value="value"></app-custom-select>
+              <mdl-tooltip #selectTooltip="mdlTooltip">
+                {{setting.description}}
+              </mdl-tooltip>
           </div>
         </div>
       </div>
diff --git a/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.scss b/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.scss
index 66a0c1009d..4bbe0de3fc 100644
--- a/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.scss
+++ b/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.scss
@@ -29,7 +29,6 @@ $easingFunc: ease-in-out;
 
 .group-container {
   margin-bottom: 10px;
-
   > h3 {
     cursor: pointer;
     margin: 2px 3px;
@@ -71,6 +70,25 @@ $easingFunc: ease-in-out;
     max-height: 0px;
   }
 }
+label {
+  display: block;
+}
+input {
+  width: 50%;
+  font-size: 16px;
+  padding: 3px 1px;
+}
+.mdl-tooltip {
+  background: rgba(66, 66, 66, 0.9);
+  max-width: 500px;
+  font-size: 14px;
+  line-height: 1.35;
+}
+::ng-deep {
+  .container {
+    width: 50%;
+  }
+}
 
 @media (min-width: 960px) {
   md-tooltip.custom-tt ._md-content {

From 6ebce1fc9e4065b69bb1f994c515a61434ba1cdd Mon Sep 17 00:00:00 2001
From: Bruce An <bruce.an@marklogic.com>
Date: Mon, 21 Jan 2019 13:30:50 -0800
Subject: [PATCH 2/3] cleaned up tooltip code

---
 .../components/mlcp/mlcp-ui.component.html       | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.html b/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.html
index ef4a1ee60a..cc74132c77 100644
--- a/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.html
+++ b/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.html
@@ -19,7 +19,7 @@ <h3 (click)="toggleSection(group.category)"><i class="fa fa-caret-right" [ngClas
         <div class="group-section slideDown" [ngClass]="getSectionClass(group.category)">
           <div class="setting" *ngFor="let setting of group.settings">
             <mdl-switch
-              [mdl-tooltip]="switchTooltip"
+              [mdl-tooltip]="tooltip"
               mdl-tooltip-position="right"
               [attr.id]="setting.field"
               class="primary-color"
@@ -28,13 +28,9 @@ <h3 (click)="toggleSection(group.category)"><i class="fa fa-caret-right" [ngClas
               (change)="handleValueChanged(setting, $event)">
                 {{setting.label}}
             </mdl-switch>
-            <mdl-tooltip #switchTooltip="mdlTooltip">
-              {{setting.description}}
-            </mdl-tooltip>
-
             <label *ngIf="isText(setting.type)">{{setting.label}}</label>
             <input 
-              [mdl-tooltip]="inputTooltip"
+              [mdl-tooltip]="tooltip"
               mdl-tooltip-position="right"
               type="search" 
               [disabled]="setting.readOnly" 
@@ -42,12 +38,8 @@ <h3 (click)="toggleSection(group.category)"><i class="fa fa-caret-right" [ngClas
               [(ngModel)]="setting.value" 
               *ngIf="isText(setting.type)" 
               (input)="handleValueChanged(setting, $event.target.value)">
-              <mdl-tooltip #inputTooltip="mdlTooltip">
-                {{setting.description}}
-              </mdl-tooltip>
-
             <app-custom-select
-              [mdl-tooltip]="selectTooltip"
+              [mdl-tooltip]="tooltip"
               mdl-tooltip-position="right"
               [attr.id]="setting.field"
               [labelText]="setting.label"
@@ -57,7 +49,7 @@ <h3 (click)="toggleSection(group.category)"><i class="fa fa-caret-right" [ngClas
               *ngIf="setting.type === 'type'"
               label="label"
               value="value"></app-custom-select>
-              <mdl-tooltip #selectTooltip="mdlTooltip">
+              <mdl-tooltip #tooltip="mdlTooltip">
                 {{setting.description}}
               </mdl-tooltip>
           </div>

From e1d12d10f945ac861a4c123af554dc6c34aa1093 Mon Sep 17 00:00:00 2001
From: Bruce An <bruce.an@marklogic.com>
Date: Mon, 21 Jan 2019 14:52:40 -0800
Subject: [PATCH 3/3] fixed css selector

---
 .../ui/app/shared/components/mlcp/mlcp-ui.component.scss    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.scss b/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.scss
index 4bbe0de3fc..92180f270d 100644
--- a/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.scss
+++ b/quick-start/src/main/ui/app/shared/components/mlcp/mlcp-ui.component.scss
@@ -84,10 +84,8 @@ input {
   font-size: 14px;
   line-height: 1.35;
 }
-::ng-deep {
-  .container {
-    width: 50%;
-  }
+:host::ng-deep .container{
+  width: auto;
 }
 
 @media (min-width: 960px) {