CSS adjustments performed. Dialog box design and colors adapted.

mesoneer-ag · Aug 16, 2017 · 0a71a6c · 0a71a6c
1 parent 3befc46
commit 0a71a6c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 21 deletions.
diff --git a/client/PropertyInfoPlugin.js b/client/PropertyInfoPlugin.js
@@ -41,13 +41,6 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
         }
         _.defer(function () {
             addStyle(element);
-            overlays.add(element, 'badge', {
-                position: {
-                    top: 4,
-                    right: 4
-                },
-                html: '</div><div class="doc-val-true" data-badge="D"></div><div class="doc-val-hover" data-badge="D">'
-            });
         });
     }
 
@@ -90,10 +83,35 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
             }
         }
 
+        elementOverlays[element.id] = [];
+
+        if( element.businessObject.documentation !== undefined &&
+            element.businessObject.documentation.length > 0 &&
+            element.businessObject.documentation[0].text.trim() !== ""){
+
+            var text = element.businessObject.documentation[0].text;
+            text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
+
+
+            elementOverlays[element.id].push(
+            overlays.add(element, 'badge', {
+                position: {
+                    top: 4,
+                    right: 4
+                },
+                html: '<div class="doc-val-true" data-badge="D"></div><div class="doc-val-hover" data-badge="D">'+text+'</div>'
+            }));
+        }
+
         if (element.businessObject.extensionElements === undefined && element.businessObject.$instanceOf('bpmn:FlowNode')) {
             return;
         }
 
+        //Do not process the label of an element
+        if (element.type === "label") {
+            return;
+        }
+
         if (!overlaysVisible) {
             return;
         }
@@ -278,7 +296,7 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
 
         }
 
-        elementOverlays[element.id] = badges;
+        pushArray(elementOverlays[element.id],badges);
     }
 
     function uniqBy(a, key) {
@@ -289,6 +307,15 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
         })
     }
 
+    function pushArray(list, other) {
+        var len = other.length;
+        var start = list.length;
+        list.length = start + len;
+        for (var i = 0; i < len; i++ , start++) {
+            list[start] = other[i];
+        }
+    }
+
 }
 
 PropertyInfoPlugin.$inject = ['eventBus', 'overlays', 'elementRegistry', 'editorActions'];

diff --git a/client/client-bundle.js b/client/client-bundle.js
@@ -42,13 +42,6 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
         }
         _.defer(function () {
             addStyle(element);
-            overlays.add(element, 'badge', {
-                position: {
-                    top: 4,
-                    right: 4
-                },
-                html: '</div><div class="doc-val-true" data-badge="D"></div><div class="doc-val-hover" data-badge="D">'
-            });
         });
     }
 
@@ -91,10 +84,35 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
             }
         }
 
+        elementOverlays[element.id] = [];
+
+        if( element.businessObject.documentation !== undefined &&
+            element.businessObject.documentation.length > 0 &&
+            element.businessObject.documentation[0].text.trim() !== ""){
+
+            var text = element.businessObject.documentation[0].text;
+            text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
+
+
+            elementOverlays[element.id].push(
+            overlays.add(element, 'badge', {
+                position: {
+                    top: 4,
+                    right: 4
+                },
+                html: '<div class="doc-val-true" data-badge="D"></div><div class="doc-val-hover" data-badge="D">'+text+'</div>'
+            }));
+        }
+
         if (element.businessObject.extensionElements === undefined && element.businessObject.$instanceOf('bpmn:FlowNode')) {
             return;
         }
 
+        //Do not process the label of an element
+        if (element.type === "label") {
+            return;
+        }
+
         if (!overlaysVisible) {
             return;
         }
@@ -279,7 +297,7 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
 
         }
 
-        elementOverlays[element.id] = badges;
+        pushArray(elementOverlays[element.id],badges);
     }
 
     function uniqBy(a, key) {
@@ -290,6 +308,15 @@ function PropertyInfoPlugin(eventBus, overlays, elementRegistry, editorActions)
         })
     }
 
+    function pushArray(list, other) {
+        var len = other.length;
+        var start = list.length;
+        list.length = start + len;
+        for (var i = 0; i < len; i++ , start++) {
+            list[start] = other[i];
+        }
+    }
+
 }
 
 PropertyInfoPlugin.$inject = ['eventBus', 'overlays', 'elementRegistry', 'editorActions'];

diff --git a/style/style.css b/style/style.css
@@ -39,13 +39,13 @@
     margin: -0.25em 0 0 -1.75em;
     border-bottom: 12px solid transparent;
     border-left: 12px solid transparent;
-    border-right: 12px solid #7de321;
-    border-top: 12px solid #7de321;
+    border-right: 12px solid #FFDE00;
+    border-top: 12px solid #FFDE00;
 }
 
 .doc-val-true::after {
      content: "D";
-     color: #fff;
+     color: #000;
      background: none;
      display: block;
      margin: -11px 0 0 1px;
@@ -63,8 +63,10 @@
     height: 100px;
     position: absolute;
     margin: -11.5em 0 0 -13em;
-    border: 2px solid #7de321;
+    border: 2px solid #D38C17;
     border-radius: 10px;
     box-shadow: 0px 1px 5px 0px #000;
-    background-color: #B8E986;
+    background-color: #FFDE00;
+    padding: 5px 7px;
+    overflow: hidden;
 }