z-index tweaks (#118)

* z-index tweaks * Example fix
nerfstudio-project · Oct 23, 2023 · ff53b9b · ff53b9b
1 parent 64ced0c
commit ff53b9b
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 20 deletions.
diff --git a/examples/13_theming.py b/examples/13_theming.py
@@ -12,6 +12,7 @@
 from viser.theme import TitlebarButton, TitlebarConfig, TitlebarImage
 
 server = viser.ViserServer()
+server.world_axes.visible = True
 
 buttons = (
     TitlebarButton(
@@ -42,33 +43,28 @@
     "Viser includes support for light theming via the `.configure_theme()` method."
 )
 
+gui_theme_code = server.add_gui_markdown("no theme applied yet")
+
 # GUI elements for controllable values.
-control_layout = server.add_gui_dropdown(
-    "Control layout", ("floating", "fixed", "collapsible")
-)
 titlebar = server.add_gui_checkbox("Titlebar", initial_value=True)
 dark_mode = server.add_gui_checkbox("Dark mode", initial_value=True)
 show_logo = server.add_gui_checkbox("Show logo", initial_value=True)
 brand_color = server.add_gui_rgb("Brand color", (230, 180, 30))
+control_layout = server.add_gui_dropdown(
+    "Control layout", ("floating", "fixed", "collapsible")
+)
 synchronize = server.add_gui_button("Apply theme", icon=viser.Icon.CHECK)
 
-gui_theme_code = server.add_gui_markdown("no theme applied yet")
-
 
 def synchronize_theme() -> None:
-    global gui_theme_code
     server.configure_theme(
         titlebar_content=titlebar_theme if titlebar.value else None,
         control_layout=control_layout.value,
         dark_mode=dark_mode.value,
         show_logo=show_logo.value,
         brand_color=brand_color.value,
     )
-    server.world_axes.visible = True
-
-    gui_theme_code.remove()
-    gui_theme_code = server.add_gui_markdown(
-        f"""
+    gui_theme_code.content = f"""
         ### Current applied theme
         ```
         server.configure_theme(
@@ -79,8 +75,7 @@ def synchronize_theme() -> None:
             brand_color={brand_color.value},
         )
         ```
-        """
-    )
+    """
 
 
 synchronize.on_click(lambda _: synchronize_theme())

diff --git a/src/viser/client/src/App.tsx b/src/viser/client/src/App.tsx
@@ -142,7 +142,14 @@ function ViewerContents() {
           flexDirection: "row",
         }}
       >
-        <MediaQuery smallerThan={"xs"} styles={{ right: 0, bottom: "3.5em" }}>
+        <MediaQuery
+          smallerThan={"xs"}
+          styles={{
+            right: 0,
+            bottom:
+              "4.5em" /* 4em to account for BottomPanel minimum height. */,
+          }}
+        >
           <Box
             sx={(theme) => ({
               backgroundColor:

diff --git a/src/viser/client/src/ControlPanel/BottomPanel.tsx b/src/viser/client/src/ControlPanel/BottomPanel.tsx
@@ -30,7 +30,7 @@ export default function BottomPanel({
         sx={{
           boxSizing: "border-box",
           width: "100%",
-          zIndex: 100,
+          zIndex: 10,
           position: "fixed",
           bottom: 0,
           left: 0,

diff --git a/src/viser/client/src/ControlPanel/Generated.tsx b/src/viser/client/src/ControlPanel/Generated.tsx
@@ -66,7 +66,7 @@ export default function GeneratedGuiContainer({
                 <GeneratedInput conf={conf} key={conf.id} viewer={viewer} />
                 {conf.type === "GuiAddFolderMessage" &&
                 index < guiIdSet.size - 1 ? (
-                // Add some whitespace after folders.
+                  // Add some whitespace after folders.
                   <Box pt="0.03125em" />
                 ) : null}
               </>
@@ -324,8 +324,10 @@ function GeneratedInput({
           onChange={updateValue}
           searchable
           maxDropdownHeight={400}
-          /* withinPortal prevents clipping from overflow: hidden on a parent. */
-          withinPortal
+          // zIndex of dropdown should be >modal zIndex.
+          // On edge cases: it seems like existing dropdowns are always closed when a new modal is opened.
+          zIndex={1000}
+          withinPortal={true}
         />
       );
       break;
@@ -337,6 +339,10 @@ function GeneratedInput({
           value={rgbToHex(value)}
           onChange={(v) => updateValue(hexToRgb(v))}
           format="hex"
+          // zIndex of dropdown should be >modal zIndex.
+          // On edge cases: it seems like existing dropdowns are always closed when a new modal is opened.
+          dropdownZIndex={1000}
+          withinPortal={true}
         />
       );
       break;
@@ -348,6 +354,10 @@ function GeneratedInput({
           value={rgbaToHex(value)}
           onChange={(v) => updateValue(hexToRgba(v))}
           format="hexa"
+          // zIndex of dropdown should be >modal zIndex.
+          // On edge cases: it seems like existing dropdowns are always closed when a new modal is opened.
+          dropdownZIndex={1000}
+          withinPortal={true}
         />
       );
       break;

diff --git a/src/viser/client/src/Modal.tsx b/src/viser/client/src/Modal.tsx
@@ -34,7 +34,7 @@ function GeneratedModal({
       }}
       withCloseButton={false}
       centered
-      zIndex={10000 + index}
+      zIndex={100 + index}
     >
       <GeneratedGuiContainer containerId={conf.id} />
     </Modal>

diff --git a/src/viser/client/src/Titlebar.tsx b/src/viser/client/src/Titlebar.tsx
@@ -191,7 +191,7 @@ export function Titlebar() {
             position: "relative",
             top: 0,
             left: "-0.625rem",
-            zIndex: 10000000,
+            zIndex: 1000,
             height: burgerOpen ? "calc(100vh - 2.375em)" : "0",
             width: "100vw",
             transition: "all 0.5s",