Commit c5de82341f9443db2d2b131a6be55bf4a3186b33

Authored by Igor Kulikov
1 parent 9f87e4a7

RuleChain UI improvements.

@@ -598,9 +598,15 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time @@ -598,9 +598,15 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
598 edgeDoubleClick: function (event, edge) { 598 edgeDoubleClick: function (event, edge) {
599 openLinkDetails(edge); 599 openLinkDetails(edge);
600 }, 600 },
  601 + edgeEdit: function(event, edge) {
  602 + openLinkDetails(edge);
  603 + },
601 nodeCallbacks: { 604 nodeCallbacks: {
602 'doubleClick': function (event, node) { 605 'doubleClick': function (event, node) {
603 openNodeDetails(node); 606 openNodeDetails(node);
  607 + },
  608 + 'nodeEdit': function (event, node) {
  609 + openNodeDetails(node);
604 } 610 }
605 }, 611 },
606 isValidEdge: function (source, destination) { 612 isValidEdge: function (source, destination) {
@@ -223,6 +223,7 @@ @@ -223,6 +223,7 @@
223 .fc-node { 223 .fc-node {
224 z-index: 1; 224 z-index: 1;
225 outline: none; 225 outline: none;
  226 + border-radius: 8px;
226 &.fc-dragging { 227 &.fc-dragging {
227 z-index: 10; 228 z-index: 10;
228 } 229 }
@@ -239,6 +240,7 @@ @@ -239,6 +240,7 @@
239 bottom: 0; 240 bottom: 0;
240 background-color: #000; 241 background-color: #000;
241 opacity: 0; 242 opacity: 0;
  243 + border-radius: 5px;
242 } 244 }
243 &.fc-hover { 245 &.fc-hover {
244 .fc-node-overlay { 246 .fc-node-overlay {
@@ -250,6 +252,12 @@ @@ -250,6 +252,12 @@
250 opacity: 0.25; 252 opacity: 0.25;
251 } 253 }
252 } 254 }
  255 + &.fc-selected {
  256 + &:not(.fc-edit) {
  257 + border: solid 3px red;
  258 + margin: -3px;
  259 + }
  260 + }
253 } 261 }
254 262
255 .fc-leftConnectors, .fc-rightConnectors { 263 .fc-leftConnectors, .fc-rightConnectors {
@@ -340,27 +348,43 @@ @@ -340,27 +348,43 @@
340 348
341 .fc-nodedelete { 349 .fc-nodedelete {
342 display: none; 350 display: none;
  351 + font-size: 18px;
343 } 352 }
344 353
345 -.fc-selected .fc-nodedelete {  
346 - outline: none;  
347 - display: block;  
348 - position: absolute;  
349 - right: -13px;  
350 - top: -16px;  
351 - border: solid 2px white;  
352 - border-radius: 50%;  
353 - font-weight: 600;  
354 - font-size: 18px;  
355 - line-height: 18px;  
356 - height: 20px;  
357 - padding-top: 2px;  
358 - width: 22px;  
359 - background: #494949;  
360 - color: #fff;  
361 - text-align: center;  
362 - vertical-align: bottom;  
363 - cursor: pointer; 354 +.fc-nodeedit {
  355 + display: none;
  356 + font-size: 15px;
  357 +}
  358 +
  359 +.fc-edit {
  360 + .fc-nodedelete, .fc-nodeedit {
  361 + outline: none;
  362 + display: block;
  363 + position: absolute;
  364 + border: solid 2px white;
  365 + border-radius: 50%;
  366 + font-weight: 600;
  367 + line-height: 20px;
  368 + height: 20px;
  369 + padding-top: 2px;
  370 + width: 22px;
  371 + background: #f83e05;
  372 + color: #fff;
  373 + text-align: center;
  374 + vertical-align: bottom;
  375 + cursor: pointer;
  376 + }
  377 +
  378 + .fc-nodeedit {
  379 + top: -24px;
  380 + right: 16px;
  381 + }
  382 +
  383 + .fc-nodedelete {
  384 + top: -24px;
  385 + right: -13px;
  386 + }
  387 +
364 } 388 }
365 389
366 .fc-noselect { 390 .fc-noselect {
@@ -376,7 +400,7 @@ @@ -376,7 +400,7 @@
376 .fc-edge-label { 400 .fc-edge-label {
377 position: absolute; 401 position: absolute;
378 transition: transform .2s; 402 transition: transform .2s;
379 - opacity: 0.8; 403 +// opacity: 0.8;
380 &.ng-leave { 404 &.ng-leave {
381 transition: 0s none; 405 transition: 0s none;
382 } 406 }
@@ -387,13 +411,19 @@ @@ -387,13 +411,19 @@
387 .fc-edge-label-text { 411 .fc-edge-label-text {
388 span { 412 span {
389 border: solid red; 413 border: solid red;
390 - color: red; 414 + color: #fff;
  415 + font-weight: 600;
  416 + background-color: red;
391 } 417 }
392 } 418 }
393 } 419 }
  420 + .fc-nodeedit {
  421 + top: -30px;
  422 + right: 14px;
  423 + }
394 .fc-nodedelete { 424 .fc-nodedelete {
395 - right: -13px;  
396 top: -30px; 425 top: -30px;
  426 + right: -13px;
397 } 427 }
398 &:focus { 428 &:focus {
399 outline: 0; 429 outline: 0;
@@ -45,6 +45,9 @@ @@ -45,6 +45,9 @@
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
  48 + <div ng-if="modelservice.isEditable() && !node.readonly" class="fc-nodeedit" ng-click="callbacks.nodeEdit($event, node)">
  49 + <i class="fa fa-pencil" aria-hidden="true"></i>
  50 + </div>
48 <div ng-if="modelservice.isEditable() && !node.readonly" class="fc-nodedelete" ng-click="modelservice.nodes.delete(node)"> 51 <div ng-if="modelservice.isEditable() && !node.readonly" class="fc-nodedelete" ng-click="modelservice.nodes.delete(node)">
49 &times; 52 &times;
50 </div> 53 </div>