feat: vtk.js navigation legend

sethfischer · Mar 5, 2023 · a4ec17d · a4ec17d
1 parent 8565227
commit a4ec17d
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 8 deletions.
diff --git a/sphinxcontrib/cadquery/static/cadquery.css b/sphinxcontrib/cadquery/static/cadquery.css
@@ -13,3 +13,66 @@
 .cadquery-align-center {
     margin: 0px auto;
 }
+
+.cadquery-container-model {
+    color: white;
+    position: relative;
+}
+
+button.cadquery-credit {
+    border: 1px;
+    color: white;
+    cursor: pointer;
+    font-size: 75%;
+}
+
+div.cadquery-help-dropdown {
+    color: black;
+    float: right;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    right: 16px;
+    top: 8px;
+    z-index: 100;
+}
+
+.cadquery-help-dropdown-content {
+    background-color: #f9f9f9;
+    display: none;
+    min-width: 100%;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+}
+
+.cadquery-help-dropdown-content dl,
+.cadquery-help-dropdown-content dl dd,
+.cadquery-help-dropdown-content p {
+    margin: 1px;
+}
+.cadquery-help-dropdown-content p.footer {
+        font-size: 75%;
+}
+
+.cadquery-help-dropdown:hover
+.cadquery-help-dropdown-content {
+    display: block;
+}
+
+.cadquery-help-dropdown:hover button.cadquery-credit {
+    background-color: #2980b9;
+}
+
+.cadquery-help-dropdown-content dl {
+    display: grid;
+    grid-template-columns: 40% auto;
+}
+
+.cadquery-help-dropdown-content dl dt {
+    grid-column: 1;
+}
+
+.cadquery-help-dropdown-content dl dd {
+    grid-column: 2;
+}
diff --git a/sphinxcontrib/cadquery/templates/svg.rst.jinja b/sphinxcontrib/cadquery/templates/svg.rst.jinja
@@ -1,8 +1,16 @@
 .. raw:: html
 
     <div class="cadquery-container" style="margin-bottom: 24px">
-        <div class="cadquery-svg">
-            {{svg_document|indent(8)}}
+        <div class="cadquery-container-model">
+            <div class="cadquery-svg">
+                {{svg_document|indent(8)}}
+            </div>
+            <div class="cadquery-help-dropdown">
+                <button class="cadquery-credit">Modeled with CadQuery</button>
+                <div class="cadquery-help-dropdown-content">
+                    <p class="footer">Exported as SVG.</p>
+                </div>
+            </div>
         </div>
 
 {% if include_source %}

diff --git a/sphinxcontrib/cadquery/templates/vtk.rst.jinja b/sphinxcontrib/cadquery/templates/vtk.rst.jinja
@@ -1,12 +1,30 @@
 .. raw:: html
 
     <div class="cadquery-container cadquery-align-{{align}}" style="margin-bottom: 24px; width:{{width}};">
-        <div class="cadquery-vtk" style="height:{{height}};border: 1px solid #ddd;">
-            <script>
-                var parent_element = {{element}};
-                var data = {{vtk_json}};
-                render(data, parent_element);
-            </script>
+        <div class="cadquery-container-model">
+            <div class="cadquery-vtk" style="height:{{height}};border: 1px solid #ddd;">
+                <script>
+                    var parent_element = {{element}};
+                    var data = {{vtk_json}};
+                    render(data, parent_element);
+                </script>
+            </div>
+            <div class="cadquery-help-dropdown">
+                <button class="cadquery-credit">Modeled with CadQuery</button>
+                <div class="cadquery-help-dropdown-content">
+                    <dl>
+                        <dt>roll</dt>
+                        <dd>MB1</dd>
+                        <dt>pan</dt>
+                        <dd>MB2</dd>
+                        <dt>zoom</dt>
+                        <dd>MB3</dd>
+                        <dt>rotate</dt>
+                        <dd>shift+MB1</dd>
+                    </dl>
+                    <p class="footer">Rendered with VTK.js</p>
+                </div>
+            </div>
         </div>
 
 {% if include_source %}