Showing
3 changed files
with
61 additions
and
22 deletions
@@ -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 | × | 52 | × |
50 | </div> | 53 | </div> |