feat(docs): style graph config settings (#1075)

fix #1072 (2/2)
hydro-project · Feb 26, 2024 · 82df6cf · 82df6cf
1 parent 1fdcf22
commit 82df6cf
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 44 deletions.
diff --git a/docs/src/pages/people.module.css b/docs/src/pages/people.module.css
@@ -39,4 +39,4 @@ div.personImage {
     font-size: 40px;
     margin-top: 30px;
   }
-}
+}
diff --git a/docs/src/pages/playground.js b/docs/src/pages/playground.js
@@ -195,6 +195,7 @@ export function EditorDemo({ compileFn, examples, mermaidId }) {
 
   const [showGraphOpts, setShowGraphOpts] = useState(false);
   const [writeGraphConfig, setWriteGraphConfig] = useState({
+    // Code relies on key order.
     noSubgraphs: false,
     noVarnames: false,
     noPullPush: false,
@@ -203,6 +204,7 @@ export function EditorDemo({ compileFn, examples, mermaidId }) {
   });
   const writeGraphConfigOnChange = (name) => {
     writeGraphConfig[name] = !writeGraphConfig[name];
+    // Code relies on key order, `{ ...x }` preserves key order.
     setWriteGraphConfig({ ...writeGraphConfig });
     return true;
   };
@@ -252,15 +254,9 @@ export function EditorDemo({ compileFn, examples, mermaidId }) {
     </div>
     <div className={styles["panel"]} style={{ marginRight: "0" }}>
       <div style={{ textAlign: "center", fontWeight: "700", marginBottom: "9px" }}>
-        <a className={showingMermaid ? styles["selected-tab"] : styles["unselected-tab"]} style={{
-          cursor: "pointer"
-        }} onClick={() => {
-          setShowingMermaid(true);
-        }}>Graph</a> / <a className={!showingMermaid ? styles["selected-tab"] : styles["unselected-tab"]} style={{
-          cursor: "pointer"
-        }} onClick={() => {
-          setShowingMermaid(false);
-        }}>Compiled Rust</a>
+        <a className={showingMermaid ? styles["selected-tab"] : styles["unselected-tab"]} onClick={() => setShowingMermaid(true)} role="button">Graph</a>
+        &nbsp;/&nbsp;
+        <a className={!showingMermaid ? styles["selected-tab"] : styles["unselected-tab"]} onClick={() => setShowingMermaid(false)} role="button">Compiled Rust</a>
       </div>
       {(() => {
         if (null == output) {
@@ -270,7 +266,30 @@ export function EditorDemo({ compileFn, examples, mermaidId }) {
           </div>;
         }
         if (showingMermaid) {
-          return <MermaidGraph id={mermaidId} source={output.mermaid} />;
+          return <div style={{position: 'relative' }}>
+            <a className={ styles["opts-toggle"] } onClick={() => setShowGraphOpts(!showGraphOpts)}>&hellip;</a>
+            <div className={ styles["opts-pane"] } style={{ display: showGraphOpts ? 'block' : 'none' }}>
+              <ul className={ styles["opts-list"] }>
+                {Object.keys(writeGraphConfig).map(name => {
+                  return (
+                    <li key={name}>
+                      <label>
+                        <input
+                          type="checkbox"
+                          name={name}
+                          value={name}
+                          checked={writeGraphConfig[name]}
+                          onChange={() => writeGraphConfigOnChange(name)}
+                        />
+                        <code>{name}</code>
+                      </label>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+            <MermaidGraph id={mermaidId} source={output.mermaid} />
+          </div>;
         } else {
           return <Editor
             height="70vh"
@@ -284,27 +303,6 @@ export function EditorDemo({ compileFn, examples, mermaidId }) {
         }
       })()}
     </div>
-    <div>
-      <li>
-        {Object.keys(writeGraphConfig).map(name => {
-          return (
-            <li>
-              <label>
-                <input
-                  key={name}
-                  type="checkbox"
-                  name={name}
-                  value={name}
-                  checked={writeGraphConfig[name]}
-                  onChange={() => writeGraphConfigOnChange(name)}
-                />
-                <code>{name}</code>
-              </label>
-            </li>
-          )
-        })}
-      </li>
-    </div>
   </div>
 }
 

diff --git a/docs/src/pages/playground.module.css b/docs/src/pages/playground.module.css
@@ -25,26 +25,37 @@
   }
 }
 
-.unselected-tab {
-  color: gray;
+.unselected-tab, .selected-tab, .opts-toggle {
+  cursor: pointer;
 }
 
-.unselected-tab:hover {
+.unselected-tab, .unselected-tab:hover {
   color: gray;
 }
 
-.selected-tab {
-  color: black;
-}
-
-.selected-tab:hover {
+.selected-tab, .selected-tab:hover, .opts-toggle, .opts-toggle:hover {
   color: black;
 }
 
-[data-theme='dark'] .selected-tab {
+[data-theme='dark'] .selected-tab, [data-theme='dark'] .selected-tab:hover, [data-theme='dark'] .opts-toggle {
   color: white;
 }
 
-[data-theme='dark'] .selected-tab:hover {
-  color: white;
-}
+.opts-toggle {
+  position: absolute;
+  top: -2em;
+  right: 0;
+}
+.opts-pane {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.5em;
+  background-color: var(--ifm-background-surface-color);
+  box-shadow: var(--ifm-navbar-shadow);
+}
+.opts-list {
+  list-style-type: none; /* Remove bullets */
+  padding: 0; /* Remove padding */
+  margin: 0;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,4 +39,4 @@ div.personImage { @@
         font-size: 40px;
         margin-top: 30px;
       }
-    }
+    }