diff --git a/css/rulesAssistant/conditionEditor.css b/css/rulesAssistant/conditionEditor.css index da3643584990909af81cd9756b17db863f27a572..a84be73f23a161bb6857d698520f36decc11be97 100644 --- a/css/rulesAssistant/conditionEditor.css +++ b/css/rulesAssistant/conditionEditor.css @@ -47,6 +47,10 @@ cursor: grab; } +.rule-draggable:hover{ + background: #2c2c2c; +} + .rule-drag-element { display: inline-block; background-image: repeating-linear-gradient(0, #1a1a1a, transparent 0.2em, transparent 0.2em, #1a1a1a 0.4em), @@ -56,6 +60,11 @@ vertical-align: middle; } +.rule-drag-element:hover{ + background-image: repeating-linear-gradient(0, #2c2c2c, transparent 0.2em, transparent 0.2em, #2c2c2c 0.4em), + repeating-linear-gradient(90deg, #2c2c2c, #888 0.2em, #888 0.2em, #2c2c2c 0.4em); +} + .rule-drop-location { border: #999 dashed 1px; border-radius: 4px; @@ -64,9 +73,24 @@ width: 5em; height: 1.5em; vertical-align: middle; - margin: 0 4px + margin: 0 4px; +} + +.part-dragging .condition-viewer .rule-drop-location { + animation: 1.5s ease-in-out infinite rule-drop-location-blink; } +@keyframes rule-drop-location-blink { + 0% { + background: #555; + } + 50% { + background: #638022; + } + 100% { + background: #555; + } +} .rule-builder input[type="text"] { margin-left: 0.2em; diff --git a/js/rulesAssistant/conditionEditor.js b/js/rulesAssistant/conditionEditor.js index 3ccbe4133d59002f258203b4f677b11c21bbfa9e..88a6ac2ba08643609311ea0a8be4656789d9a5ac 100644 --- a/js/rulesAssistant/conditionEditor.js +++ b/js/rulesAssistant/conditionEditor.js @@ -59,6 +59,7 @@ App.RA.Activation.Editor = (function() { outerDiv.classList.add("rule-builder"); const ruleDiv = document.createElement("div"); + ruleDiv.classList.add("condition-viewer"); const errors = []; if (currentRule.validate(errors) === "error") { ruleDiv.append("Condition has errors:"); @@ -1048,8 +1049,12 @@ App.RA.Activation.Editor = (function() { node.classList.add("rule-draggable"); node.ondragstart = ev => { ev.stopPropagation(); + editorNode.classList.add("part-dragging"); ev.dataTransfer.setData("text/plain", rulePart.id); }; + node.ondragend = _ => { + editorNode.classList.remove("part-dragging"); + }; } /**