RuleChain UI

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html

@@ -15,12 +15,70 @@
     limitations under the License.
 
 -->
-<fc-canvas #fcCanvas
+<div class="mat-content" fxFlex tb-fullscreen [fullscreen]="isFullscreen"
-           id="fc-target-canvas"
+  fxLayout="column" class="tb-rulechain">
+  <section class="tb-rulechain-container" fxFlex fxLayout="column">
+    <div class="tb-rulechain-layout" fxFlex fxLayout="row">
+      <section fxLayout="row"
+               class="tb-header-buttons tb-library-open" [fxShow]="!isLibraryOpen">
+        <button mat-button mat-icon-button color="primary"
+                class="tb-btn-header tb-btn-open-library mat-fab"
+                (click)="isLibraryOpen = true"
+                matTooltip="{{ 'rulenode.open-node-library' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>menu</mat-icon>
+        </button>
+      </section>
+      <mat-drawer-container style="width: 100%;">
+        <mat-drawer class="tb-rulechain-library"
+                    disableClose="true"
+                    mode="side"
+                    [opened]="isLibraryOpen"
+                    position="start"
+                    fxLayout="column">
+          <mat-toolbar color="primary" class="tb-dark">
+            <div class="mat-toolbar-tools">
+              <button mat-button mat-icon-button class="tb-small"
+                matTooltip="{{'rulenode.search' | translate}}"
+                matTooltipPosition="above">
+                <mat-icon>search</mat-icon>
+              </button>
+              <mat-form-field fxFlex floatLabel="always">
+                <mat-label></mat-label>
+                <input matInput
+                       [(ngModel)]="ruleNodeSearch"
+                       placeholder="{{'rulenode.search' | translate}}"/>
+              </mat-form-field>
+              <button mat-button mat-icon-button class="tb-small"
+                      [fxShow]="ruleNodeSearch !== ''"
+                      (click)="ruleNodeSearch = ''"
+                      matTooltip="{{'action.clear-search' | translate}}"
+                      matTooltipPosition="above">
+                <mat-icon>close</mat-icon>
+              </button>
+              <button mat-button mat-icon-button class="tb-small"
+                      (click)="isLibraryOpen = false"
+                      matTooltip="{{'action.close' | translate}}"
+                      matTooltipPosition="above">
+                <mat-icon>chevron_left</mat-icon>
+              </button>
+            </div>
+          </mat-toolbar>
+        </mat-drawer>
+        <mat-drawer-content>
+          <div class="tb-absolute-fill tb-rulechain-graph">
+            <fc-canvas #fcCanvas
+                       id="tb-rulchain-canvas"
                        [model]="ruleChainModel"
                        (modelChanged)="onModelChanged()"
                        [selectedObjects]="selectedObjects"
                        [edgeStyle]="flowchartConstants.curvedStyle"
                        [automaticResize]="true"
                        [dragAnimation]="flowchartConstants.dragAnimationRepaint">
-</fc-canvas>
+            </fc-canvas>
+          </div>
+        </mat-drawer-content>
+      </mat-drawer-container>
+    </div>
+  </section>
+</div>

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss

@@ -13,7 +13,94 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+:host {
+  width: 100%;
+  height: 100%;
+  .tb-rulechain {
+    width: 100%;
+    height: 100%;
+    section.tb-header-buttons.tb-library-open {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      pointer-events: none;
+
+      .mat-button.tb-btn-open-library {
+        top: 0;
+        left: 0;
+        width: 36px;
+        height: 36px;
+        margin: 4px 0 0 4px;
+        line-height: 36px;
+        opacity: .5;
+      }
+    }
+    .tb-rulechain-library {
+      z-index: 1;
+      width: 250px;
+      min-width: 250px;
+
+      .mat-toolbar {
+        height: 48px;
+        min-height: 48px;
+        padding: 0;
+
+        .mat-toolbar-tools {
+          height: 48px;
+          padding: 0 6px;
+          font-size: 14px;
+
+          .mat-button.mat-icon-button {
+            margin: 0;
+
+            &.tb-small {
+              width: 32px;
+              height: 32px;
+              min-height: 32px;
+              padding: 6px;
+              line-height: 20px;
+              mat-icon {
+                width: 20px;
+                min-width: 20px;
+                height: 20px;
+                min-height: 20px;
+                font-size: 20px;
+                line-height: 20px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .tb-rulechain-graph {
+      z-index: 0;
+    }
+  }
+}
+
 :host ::ng-deep {
+  .tb-rulechain {
+    section.tb-header-buttons.tb-library-open {
+      .mat-fab {
+        .mat-button-wrapper {
+          padding: 0;
+        }
+      }
+    }
+    .tb-rulechain-library {
+      .mat-toolbar {
+        .mat-toolbar-tools {
+          .mat-form-field {
+            .mat-form-field-infix {
+              width: auto;
+            }
+          }
+        }
+      }
+    }
+  }
   .fc-canvas {
     .fc-node {
       border-radius: 8px;