CSS adjustments to trigger selection

- Flow name should be placed in a different line - Missing style for trigger selected: background should be gray - Simplified html structure
project-flogo · Jul 6, 2018 · 5486750 · 5486750
1 parent 6804289
commit 5486750
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 64 deletions.
diff --git a/src/client/flogo/app/shim-trigger/shim-trigger.component.html b/src/client/flogo/app/shim-trigger/shim-trigger.component.html
@@ -2,32 +2,30 @@
   <i class="flogo-icon-close shim-trigger__modal-close" (click)="closeModal()"></i>
   <div *ngIf="!isTriggerSelected">
     <div class="shim-trigger__modal-header">{{'TRIGGER-SHIM:MULTIPLE-TRIGGERS' | translate}}</div>
-    <div *ngFor="let shimTrigger of shimTriggersList"
-         (click)="onTriggerSelectionFinish(shimTrigger)">
-      <div class="shim-trigger-container">
-        <ul class="list-unstyled shim-trigger_content">
-          <li class="shim-trigger-item">
-            <i class="flogo-icon-trigger shim-trigger-icon"></i><span>{{shimTrigger.configuredTrigger.name}}</span>
-          </li>
-        </ul>
-        <ul class="list-unstyled shim-trigger-flow_content">
-          <li class="shim-trigger-flow-item"><span class="shim-trigger-connected-flow">{{ 'TRIGGER-SHIM:CONNECTED-FLOW' | translate }}</span>
-            <span>{{shimTrigger.configuredFlow.name}}</span></li>
-        </ul>
-      </div>
-    </div>
+    <ul class="shim-triggers-list">
+      <li class="shim-trigger-list__element" *ngFor="let shimTrigger of shimTriggersList"
+           (click)="onTriggerSelectionFinish(shimTrigger)">
+        <div class="shim-trigger-item">
+          <i class="flogo-icon-trigger shim-trigger-icon"></i>
+          <span class="shim-trigger-item__name">{{ shimTrigger.configuredTrigger.name }}</span>
+        </div>
+        <div class="shim-trigger-flow">
+          <span class="shim-trigger-flow__label">{{ 'TRIGGER-SHIM:CONNECTED-FLOW' | translate }}</span>
+          <span class="shim-trigger-flow__name">{{ shimTrigger.configuredFlow.name }}</span>
+        </div>
+      </li>
+    </ul>
   </div>
   <div *ngIf="!isLambdaTrigger && isTriggerSelected">
     <div class="shim-trigger-selected">
-      <ul class="list-unstyled shim-trigger_content">
-        <li class="shim-trigger-item">
-          <i class="flogo-icon-trigger shim-trigger-icon"></i><span>{{displayOptions.triggerName}}</span>
-        </li>
-      </ul>
-      <ul class="list-unstyled shim-trigger-flow_content">
-        <li class="shim-trigger-flow-item"><span class="shim-trigger-connected-flow">{{ 'TRIGGER-SHIM:CONNECTED-FLOW' | translate }}</span>
-          <span>{{displayOptions.flowName}}</span></li>
-      </ul>
+      <div class="shim-trigger-item">
+        <i class="flogo-icon-trigger shim-trigger-icon"></i>
+        <span class="shim-trigger-item__name">{{ displayOptions.triggerName }}</span>
+      </div>
+      <div class="shim-trigger-flow">
+        <span class="shim-trigger-flow__label">{{ 'TRIGGER-SHIM:CONNECTED-FLOW' | translate }}</span>
+        <span class="shim-trigger-flow__name">{{displayOptions.flowName}}</span>
+      </div>
     </div>
     <div class="select-environment">{{ 'TRIGGER-SHIM:SELECT-ENVIRONMENT' | translate }}</div>
     <ul class="list-unstyled trigger-build-options">

diff --git a/src/client/flogo/app/shim-trigger/shim-trigger.component.less b/src/client/flogo/app/shim-trigger/shim-trigger.component.less
@@ -13,21 +13,48 @@
   width: 18px;
 }
 
-.shim-trigger_content {
+.shim-trigger-list {
+  margin: 0;
+  padding: 0;
+}
+
+.shim-trigger-list__element {
+  display: flex;
+  cursor: pointer;
+  height: 68px;
+  margin-left: 55px;
+  margin-right: 55px;
+  padding: 10px 8px 8px;
+  border: solid 1px transparent;
+  transition: box-shadow 0.2s ease-in-out;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
+  &:hover {
+    border-radius: 4px;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    border-color: @gray-lighter;
+  }
+}
+
+.shim-trigger-item {
   position: relative;
-  margin-left: 10px;
-  width: 211px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  display: flex;
+  flex: 3;
+
+  min-width: 0;
+  margin-right: 8px;
   background-color: @color-trigger-bg-color;
   height: @trigger-height;
   align-items: center;
   padding-left: 3px;
-  padding-bottom: 5px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-  display: flex;
+
+  color: @color-trigger-icon;
+  font-weight: 600;
+
   &:after {
     display: block;
-    content: "";
+    content: '';
     position: absolute;
     width: 0;
     height: 0;
@@ -37,51 +64,46 @@
     top: 0;
     right: -8px;
   }
-  .shim-trigger-item {
-    max-width: 90%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inline-block;
-    letter-spacing: 0.3px;
-    color: @color-trigger-icon;
-    font-weight: 600;
-  }
-
 }
 
-.shim-trigger-container {
-  display: flex;
-  cursor: pointer;
-  width: 346px;
-  height: 68px;
-  margin-left: 55px;
-  &:hover {
-    border-radius: 4px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-    border: solid 1px @gray-lighter;
-  }
+.shim-trigger-item__name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 0.5em;
 }
 
 .shim-trigger-selected {
   display: flex;
   width: 346px;
   height: 68px;
   margin-left: 55px;
+  .shim-trigger-item {
+    background-color: @light-grey;
+    &:after {
+      border-left-color: @light-grey;
+    }
+  }
 }
 
-.shim-trigger-flow-item {
+.shim-trigger-flow {
+  flex: 2;
   margin: 0;
+  padding-left: 16px;
+  min-width: 0;
 }
 
-.shim-trigger-flow_content {
-  margin-left: 35px;
-}
-
-.shim-trigger-connected-flow {
+.shim-trigger-flow__label {
   font-size: 12px;
   color: @warm-grey;
-  display: inline-block;
+  display: block;
+}
+
+.shim-trigger-flow__name {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .shim-trigger__modal-header {
@@ -96,20 +118,20 @@
   margin: 6px 8px;
 }
 
-.select-environment{
+.select-environment {
   font-size: 18px;
   font-weight: 600;
   margin-top: 10px;
 }
 
-.trigger-build-options{
+.trigger-build-options {
   border : solid 1px @light-grey;
   margin-top: 10px;
   margin-bottom: 10px;
   border-radius: 3px;
 }
 
-.build-environment-list-item{
+.build-environment-list-item {
   .uxpl-dropdown;
   cursor: pointer;
   letter-spacing: 0.3px;
@@ -123,7 +145,7 @@
   text-decoration: none;
 }
 
-.shim-trigger-build-link{
+.shim-trigger-build-link {
   text-decoration: none;
   color: @warm-grey;
 }