简柏林 / thingskit · Commits

Commit 70d9d7addd9f93e7364dcf8f6bf34a7a0ffa547a

Authored by Igor Kulikov
1 parent 3bcd596e

RuleChain UI

Inline Side-by-side
Showing 5 changed files with 106 additions and 10 deletions
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 <div class="tb-cell" flex="20">{{event.body.dataType}}</div> 24 <div class="tb-cell" flex="20">{{event.body.dataType}}</div>
25 <div class="tb-cell" flex="20"> 25 <div class="tb-cell" flex="20">
26 <md-button ng-if="event.body.data" class="md-icon-button md-primary" 26 <md-button ng-if="event.body.data" class="md-icon-button md-primary"
27 - ng-click="showContent($event, event.body.data, 'event.data', event.body.msgType)" 27 + ng-click="showContent($event, event.body.data, 'event.data', event.body.dataType)"
28 aria-label="{{ 'action.view' | translate }}"> 28 aria-label="{{ 'action.view' | translate }}">
29 <md-tooltip md-direction="top"> 29 <md-tooltip md-direction="top">
30 {{ 'action.view' | translate }} 30 {{ 'action.view' | translate }}
@@ -1187,6 +1187,7 @@ export default angular.module('thingsboard.locale', []) @@ -1187,6 +1187,7 @@ export default angular.module('thingsboard.locale', [])
1187 "rulenode": { 1187 "rulenode": {
1188 "details": "Details", 1188 "details": "Details",
1189 "events": "Events", 1189 "events": "Events",
  1190 + "search": "Search nodes",
1190 "add": "Add rule node", 1191 "add": "Add rule node",
1191 "name": "Name", 1192 "name": "Name",
1192 "name-required": "Name is required.", 1193 "name-required": "Name is required.",
@@ -43,6 +43,9 @@ export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil, @@ -43,6 +43,9 @@ export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil,
43 vm.editingRuleNodeLink = null; 43 vm.editingRuleNodeLink = null;
44 vm.isEditingRuleNodeLink = false; 44 vm.isEditingRuleNodeLink = false;
45 45
  46 + vm.isLibraryOpen = true;
  47 + vm.ruleNodeSearch = '';
  48 +
46 vm.ruleChain = ruleChain; 49 vm.ruleChain = ruleChain;
47 vm.ruleChainMetaData = ruleChainMetaData; 50 vm.ruleChainMetaData = ruleChainMetaData;
48 51
@@ -131,11 +134,11 @@ export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil, @@ -131,11 +134,11 @@ export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil,
131 } 134 }
132 135
133 vm.onEditRuleNodeClosed = function() { 136 vm.onEditRuleNodeClosed = function() {
134 - //vm.editingRuleNode = null; 137 + vm.editingRuleNode = null;
135 }; 138 };
136 139
137 vm.onEditRuleNodeLinkClosed = function() { 140 vm.onEditRuleNodeLinkClosed = function() {
138 - //vm.editingRuleNodeLink = null; 141 + vm.editingRuleNodeLink = null;
139 }; 142 };
140 143
141 vm.saveRuleNode = function(theForm) { 144 vm.saveRuleNode = function(theForm) {
@@ -18,13 +18,58 @@ @@ -18,13 +18,58 @@
18 .tb-fullscreen-button-style { 18 .tb-fullscreen-button-style {
19 z-index: 1; 19 z-index: 1;
20 } 20 }
  21 + section.tb-header-buttons.tb-library-open {
  22 + pointer-events: none;
  23 + position: absolute;
  24 + left: 0px;
  25 + top: 0px;
  26 + z-index: 1;
  27 + .md-button.tb-btn-open-library {
  28 + left: 0px;
  29 + top: 0px;
  30 + line-height: 36px;
  31 + width: 36px;
  32 + height: 36px;
  33 + margin: 4px 0 0 4px;
  34 + opacity: 0.5;
  35 + }
  36 + }
21 .tb-rulechain-library { 37 .tb-rulechain-library {
22 width: 250px; 38 width: 250px;
23 min-width: 250px; 39 min-width: 250px;
24 - overflow-y: auto;  
25 - overflow-x: hidden;  
26 - 40 + z-index: 1;
  41 + md-toolbar {
  42 + min-height: 48px;
  43 + height: 48px;
  44 + .md-toolbar-tools>.md-button:last-child {
  45 + margin-right: 0px;
  46 + }
  47 + .md-toolbar-tools {
  48 + font-size: 14px;
  49 + padding: 0px 6px;
  50 + .md-button.md-icon-button {
  51 + margin: 0px;
  52 + &.tb-small {
  53 + height: 32px;
  54 + min-height: 32px;
  55 + line-height: 20px;
  56 + padding: 6px;
  57 + width: 32px;
  58 + md-icon {
  59 + line-height: 20px;
  60 + font-size: 20px;
  61 + height: 20px;
  62 + width: 20px;
  63 + min-height: 20px;
  64 + min-width: 20px;
  65 + }
  66 + }
  67 + }
  68 + }
  69 + }
27 .tb-rulechain-library-panel-group { 70 .tb-rulechain-library-panel-group {
  71 + overflow-y: auto;
  72 + overflow-x: hidden;
28 .tb-panel-title { 73 .tb-panel-title {
29 -webkit-user-select: none; 74 -webkit-user-select: none;
30 -moz-user-select: none; 75 -moz-user-select: none;
@@ -33,7 +78,7 @@ @@ -33,7 +78,7 @@
33 min-width: 180px; 78 min-width: 180px;
34 } 79 }
35 .fc-canvas { 80 .fc-canvas {
36 - background: none; 81 + background: #f9f9f9;
37 } 82 }
38 md-icon.md-expansion-panel-icon { 83 md-icon.md-expansion-panel-icon {
39 margin-right: 0px; 84 margin-right: 0px;
@@ -55,6 +100,7 @@ @@ -55,6 +100,7 @@
55 } 100 }
56 } 101 }
57 .tb-rulechain-graph { 102 .tb-rulechain-graph {
  103 + z-index: 0;
58 overflow: auto; 104 overflow: auto;
59 } 105 }
60 } 106 }
@@ -22,8 +22,54 @@ @@ -22,8 +22,54 @@
22 ng-keyup="vm.keyUp($event)"> 22 ng-keyup="vm.keyUp($event)">
23 <section class="tb-rulechain-container" flex layout="column"> 23 <section class="tb-rulechain-container" flex layout="column">
24 <div class="tb-rulechain-layout" flex layout="row"> 24 <div class="tb-rulechain-layout" flex layout="row">
25 - <div class="tb-rulechain-library">  
26 - <md-expansion-panel-group ng-if="vm.ruleChainLibraryLoaded" class="tb-rulechain-library-panel-group" md-component-id="libraryPanelGroup" auto-expand="true" multiple> 25 + <section layout="row" layout-wrap
  26 + class="tb-header-buttons md-fab tb-library-open">
  27 + <md-button ng-show="!vm.isLibraryOpen"
  28 + class="tb-btn-header tb-btn-open-library md-primary md-fab md-fab-top-left"
  29 + aria-label="{{ 'action.apply' | translate }}"
  30 + ng-click="vm.isLibraryOpen = true">
  31 + <md-tooltip md-direction="top">
  32 + {{ 'action.apply-changes' | translate }}
  33 + </md-tooltip>
  34 + <ng-md-icon icon="menu"></ng-md-icon>
  35 + </md-button>
  36 + </section>
  37 + <md-sidenav class="tb-rulechain-library md-sidenav-left md-whiteframe-4dp"
  38 + md-disable-backdrop
  39 + md-is-locked-open="vm.isLibraryOpen"
  40 + md-is-open="vm.isLibraryOpen"
  41 + md-component-id="rulechain-library-sidenav" layout="column">
  42 + <md-toolbar>
  43 + <div class="md-toolbar-tools">
  44 + <md-button class="md-icon-button tb-small" aria-label="{{ 'action.search' | translate }}">
  45 + <md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon>
  46 + <md-tooltip md-direction="top">
  47 + {{'rulenode.search' | translate}}
  48 + </md-tooltip>
  49 + </md-button>
  50 + <div layout="row" md-theme="tb-dark" flex>
  51 + <md-input-container flex>
  52 + <label>&nbsp;</label>
  53 + <input ng-model="vm.ruleNodeSearch" placeholder="{{'rulenode.search' | translate}}"/>
  54 + </md-input-container>
  55 + </div>
  56 + <md-button class="md-icon-button tb-small" aria-label="Close" ng-click="vm.ruleNodeSearch = ''">
  57 + <md-icon aria-label="Close" class="material-icons">close</md-icon>
  58 + <md-tooltip md-direction="top">
  59 + {{ 'action.close' | translate }}
  60 + </md-tooltip>
  61 + </md-button>
  62 + <md-button class="md-icon-button tb-small" aria-label="Close" ng-click="vm.isLibraryOpen = false">
  63 + <md-icon aria-label="Close" class="material-icons">chevron_left</md-icon>
  64 + <md-tooltip md-direction="top">
  65 + {{ 'action.close' | translate }}
  66 + </md-tooltip>
  67 + </md-button>
  68 + </div>
  69 + </md-toolbar>
  70 + <md-expansion-panel-group flex
  71 + ng-if="vm.ruleChainLibraryLoaded" class="tb-rulechain-library-panel-group"
  72 + md-component-id="libraryPanelGroup" auto-expand="true" multiple>
27 <md-expansion-panel md-component-id="{{typeId}}" id="{{typeId}}" ng-repeat="(typeId, typeModel) in vm.ruleNodeTypesModel"> 73 <md-expansion-panel md-component-id="{{typeId}}" id="{{typeId}}" ng-repeat="(typeId, typeModel) in vm.ruleNodeTypesModel">
28 <md-expansion-panel-collapsed ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)" 74 <md-expansion-panel-collapsed ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
29 ng-mouseleave="vm.destroyTooltips()"> 75 ng-mouseleave="vm.destroyTooltips()">
@@ -49,7 +95,7 @@ @@ -49,7 +95,7 @@
49 </md-expansion-panel-expanded> 95 </md-expansion-panel-expanded>
50 </md-expansion-panel> 96 </md-expansion-panel>
51 </md-expansion-panel-group> 97 </md-expansion-panel-group>
52 - </div> 98 + </md-sidenav>
53 <div flex class="tb-rulechain-graph"> 99 <div flex class="tb-rulechain-graph">
54 <fc-canvas id="tb-rulchain-canvas" 100 <fc-canvas id="tb-rulchain-canvas"
55 model="vm.ruleChainModel" 101 model="vm.ruleChainModel"