Merge pull request #14 from neuroglia-io/fix-dagre-controls-style

Refactored graph controls style in Neuroglia.Blazor.Dagre (redo)
neuroglia-io · Sep 24, 2022 · 8a14b3a · 8a14b3a
2 parents a9e2bed + 5b5e9af
commit 8a14b3a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 26 deletions.
diff --git a/src/Blazor/Neuroglia.Blazor.Dagre/DagreGraph.razor b/src/Blazor/Neuroglia.Blazor.Dagre/DagreGraph.razor
@@ -4,6 +4,27 @@
 @implements IDisposable
 
 @if (graph != null) {
+    <svg id="svg-definitions"
+         version="1.2"
+         baseProfile="tiny"
+         xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink">
+        <defs>
+            <svg id="center-target" viewBox="0 0 29.334 29.334">
+                <!-- from https://www.svgrepo.com/svg/174124/circle-outline-with-huge-dot-at-the-center -->
+                <path d="M14.666,0C6.578,0,0,6.58,0,14.667s6.578,14.667,14.666,14.667s14.668-6.58,14.668-14.667S22.754,0,14.666,0z
+                    M14.666,25.334C8.784,25.334,4,20.549,4,14.667S8.784,4,14.666,4c5.883,0,10.668,4.785,10.668,10.667S20.547,25.334,14.666,25.334
+                    z M19.332,14.667c0,2.577-2.089,4.667-4.666,4.667c-2.576,0-4.666-2.089-4.666-4.667C10,12.09,12.09,10,14.666,10
+                    C17.243,10,19.332,12.09,19.332,14.667z"/>
+            </svg>
+            <svg id="fit"  viewBox="4 4 24 24">
+                <!-- from https://github.com/carbon-design-system/carbon -->
+                <polygon points="22 16 24 16 24 8 16 8 16 10 22 10 22 16"/>
+                <polygon points="8 24 16 24 16 22 10 22 10 16 8 16 8 24"/>
+            </svg>
+        </defs>
+    </svg>
+
     <div class="graph-container">
         <CascadingValue Value="graph">
             <svg @ref="graphReference"
@@ -58,11 +79,15 @@
             </svg>
         </CascadingValue>
         <div class="graph-controls">
-            <button class="btn btn-outline-dark" type="button" @onclick="Center" title="center graph">
-                <span class="oi oi-target"></span>
+            <button class="btn" type="button" @onclick="Center" title="center graph">
+                <svg class="icon-target">
+                    <use xlink:href="#center-target" />
+                </svg>
             </button>
-            <button class="btn btn-outline-dark" type="button" @onclick="ZoomToFit" title="zoom to fit">
-                <span class="oi oi-resize-both"></span>
+            <button class="btn" type="button" @onclick="ZoomToFit" title="zoom to fit">
+                <svg class="icon-target">
+                    <use xlink:href="#fit" />
+                </svg>
             </button>
         </div>
     </div>

diff --git a/src/Blazor/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.css b/src/Blazor/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.css
@@ -43,10 +43,12 @@
   border-color: #333;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
+
 .graph-controls .btn svg {
   width: 18px;
   height: 18px;
 }
+
 .graph-controls .btn:hover {
   color: #fff;
   fill: #fff;

diff --git a/src/Blazor/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.scss b/src/Blazor/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre.scss
@@ -38,28 +38,26 @@
     fill: #333;
 }
 
-.graph-controls {
-    .btn {
-        border: 1px solid transparent;
-        padding: 0.25rem 0.25rem;
-        line-height: 0.5;
-        border-radius: 0.25rem;
-        vertical-align: middle;
-        color: #333;
-        fill: #333;
-        border-color: #333;
-        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+.graph-controls .btn {
+    border: 1px solid transparent;
+    padding: 0.25rem 0.25rem;
+    line-height: 0.5;
+    border-radius: 0.25rem;
+    vertical-align: middle;
+    color: #333;
+    fill: #333;
+    border-color: #333;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
 
-        svg {
-            width: 18px;
-            height: 18px;
-        }
+.graph-controls .btn svg {
+    width: 18px;
+    height: 18px;
+}
 
-        &:hover {
-            color: #fff;
-            fill: #fff;
-            background-color: #333;
-            border-color: #333;
-        }
-    }
+.graph-controls .btn:hover {
+    color: #fff;
+    fill: #fff;
+    background-color: #333;
+    border-color: #333;
 }