dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RuleChain UI

Browse Source
This commit is contained in:
Igor Kulikov 2019-12-10 11:04:14 +02:00
parent 74114de4d3
commit e85c47aebf
2 changed files with 154 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,12 +15,70 @@
limitations under the License. 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">
[model]="ruleChainModel" <section class="tb-rulechain-container" fxFlex fxLayout="column">
(modelChanged)="onModelChanged()" <div class="tb-rulechain-layout" fxFlex fxLayout="row">
[selectedObjects]="selectedObjects" <section fxLayout="row"
[edgeStyle]="flowchartConstants.curvedStyle" class="tb-header-buttons tb-library-open" [fxShow]="!isLibraryOpen">
[automaticResize]="true" <button mat-button mat-icon-button color="primary"
[dragAnimation]="flowchartConstants.dragAnimationRepaint"> class="tb-btn-header tb-btn-open-library mat-fab"
</fc-canvas> (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>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>
</section>
</div>

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

@ -13,7 +13,94 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * 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 { :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-canvas {
.fc-node { .fc-node {
border-radius: 8px; border-radius: 8px;