demo version of showing error in editor

freon4dsl · Sep 21, 2024 · b0dd795 · b0dd795
1 parent f12edde
commit b0dd795
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 22 deletions.
diff --git a/packages/core-svelte/src/lib/components/ErrorTooltip.svelte b/packages/core-svelte/src/lib/components/ErrorTooltip.svelte
@@ -10,11 +10,10 @@
     let y: number;
 
     function mouseOver(event: MouseEvent) {
-        // todo adjust height for header
         if (hasErr) {
             isHovered = true;
             // get the position of the mouse relative to the editor view
-            console.log(`Postion: event.pageY ${event.pageY}, event.pageX ${event.pageX}, viewport.top ${$viewport.top}, viewport.left ${$viewport.left}`)
+            // console.log(`Postion: event.pageY ${event.pageY}, event.pageX ${event.pageX}, viewport.top ${$viewport.top}, viewport.left ${$viewport.left}`)
             x = event.pageX - $viewport.left + 5;
             y = event.pageY - $viewport.top + 5;
         }
@@ -33,7 +32,7 @@
     }
 </script>
 
-<span role="group" class="tooltip-surround"
+<span role= "group"
      on:mouseover={mouseOver}
      on:mouseleave={mouseLeave}
      on:mousemove={mouseMove}
@@ -43,18 +42,16 @@
 
 {#if isHovered}
     <div style="top: {y}px; left: {x}px; z-index: 95; position: absolute;" class="error-tooltip">
-        my top: {y}, my left: {x}
         {#if content.length > 1}
-            <ul class="error-tooltip-list">
+            <ol class="error-tooltip-list-content">
                 {#each content as item}
                     {#if item.length > 0}
                         <li>{item}</li>
                     {/if}
                 {/each}
-            </ul>
+            </ol>
         {:else}
-            {content[0]}
+            <span class="error-tooltip-single-content">{content[0]} </span>
         {/if}
-
     </div>
 {/if}
diff --git a/packages/core-svelte/src/lib/components/LabelComponent.svelte b/packages/core-svelte/src/lib/components/LabelComponent.svelte
@@ -42,17 +42,13 @@
     $: { // Evaluated and re-evaluated when the box changes.
         refresh("FROM component " + box?.id);
     }
-    const content: string[] = ['label text']
 </script>
 
-<ErrorTooltip  content={content}  hasErr={true}>
-    <span class="label-component {text} {cssClass}"
-          style="{style}"
-          bind:this={element}
-          id="{id}"
-    >
+<span class="label-component {text} {cssClass}"
+      style="{style}"
+      bind:this={element}
+      id="{id}"
+>
     {text}
 </span>
-</ErrorTooltip>
-
 
diff --git a/packages/core-svelte/src/lib/components/LayoutComponent.svelte b/packages/core-svelte/src/lib/components/LayoutComponent.svelte
@@ -84,7 +84,10 @@
         <ErrorTooltip content={errMess} hasErr={hasErr}>
             <!-- We add a non breaking space here to ensure that the element has a height and a width. -->
             <!-- This trick does not work in all browsers, so the styling should be done carefully. -->
-            <div class="error-marker">&nbsp</div>
+            <!-- Often setting padding to a positive, non-zero value makes the element visible. -->
+            <span style=" position: relative;"> <!-- to make sure that any image is scrolled along with the other content -->
+            <span class="error-marker">&nbsp</span>
+                </span>
         </ErrorTooltip>
     {/if}
     {#if isHorizontal }

diff --git a/packages/core-svelte/src/lib/styles/freon-dark.css b/packages/core-svelte/src/lib/styles/freon-dark.css
@@ -94,11 +94,26 @@
     padding: 4px;
     position: absolute;
 }
+.error-tooltip-list-content {
+    padding-left: 20px;
+}
+.error-tooltip-single-content {
 
+}
 .error-marker {
-    min-width: 10px;
-    min-heigh: 8px;
-    background-color: red;
+    display: block;
+    /* padding seems to be the only way to make the element visible without content*/
+    /* padding-left is width of the image plus some extra */
+    padding: 2px 2px 2px 24px;
+}
+.error-marker:before{
+    content: '';
+    background: url('./img/icons8-warning-26.png');
+    background-size: cover;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    margin-left: -18px; /* value relates to padding-left in .error-marker, but is negative number */
 }
 
 .button-component-ripple {

diff --git a/packages/core-svelte/src/lib/styles/freon-light.css b/packages/core-svelte/src/lib/styles/freon-light.css
@@ -96,6 +96,12 @@
     background: antiquewhite;
     border-radius: 4px;
     padding: 4px;
+}
+.error-tooltip-list-content {
+    padding-left: 20px;
+}
+.error-tooltip-single-content {
+
 }
 .error-marker {
     display: block;
@@ -110,7 +116,7 @@
     position: absolute;
     width: 20px;
     height: 20px;
-    margin-left: -18px; /* relative to, but negative number, padding-left in .error-marker */
+    margin-left: -18px; /* value relates to padding-left in .error-marker, but is negative number */
 }
 
 .button-component-ripple {