Fix some global menu stuff

* Fix backdrop click to close for global volume menu. Also fix the slider moving around when things are clicked. * Use custom SVG for volume button icon
Ameobea · Nov 29, 2024 · a8f7c15 · a8f7c15
1 parent ee5fce8
commit a8f7c15
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 51 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -50,11 +50,6 @@ declare const process: {
   };
 };
 
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
-
 declare global {
   declare function dbg<T>(arg: T): T;
 

diff --git a/src/ViewContextManager/AddModulePicker.tsx b/src/ViewContextManager/AddModulePicker.tsx
@@ -4,6 +4,7 @@ import ControlPanel from 'react-control-panel';
 
 import './GlobalVolume.css';
 import { getEngine } from 'src/util';
+import { createPortal } from 'react-dom';
 
 interface ViewContextDescriptor {
   name: string;
@@ -93,27 +94,33 @@ const AddModulePicker: React.FC<AddModulePickerProps> = ({ onClose }) => {
 
   return (
     <>
-      <div
-        className='global-menu-backdrop'
-        onClick={evt => {
-          evt.stopPropagation();
-          onClose();
-        }}
-      />
-      <div className='add-module-picker-container'>
-        <ControlPanel
-          width={300}
-          settings={settings}
-          state={useMemo(() => ({ module: selectedModule }), [selectedModule])}
-          onChange={useCallback((_key: string, value: any) => {
-            setSelectedModule(value);
-          }, [])}
-        />
-        <div className='module-description'>
-          {ViewContextDescriptors.find(vc => vc.displayName === selectedModule)?.description ??
-            null}
-        </div>
-      </div>
+      {createPortal(
+        <div
+          className='global-menu-backdrop'
+          onClick={evt => {
+            evt.stopPropagation();
+            onClose();
+          }}
+        />,
+        document.getElementById('content')!
+      )}
+      {createPortal(
+        <div className='add-module-picker-container'>
+          <ControlPanel
+            width={300}
+            settings={settings}
+            state={useMemo(() => ({ module: selectedModule }), [selectedModule])}
+            onChange={useCallback((_key: string, value: any) => {
+              setSelectedModule(value);
+            }, [])}
+          />
+          <div className='module-description'>
+            {ViewContextDescriptors.find(vc => vc.displayName === selectedModule)?.description ??
+              null}
+          </div>
+        </div>,
+        document.getElementById('content')!
+      )}
     </>
   );
 };

diff --git a/src/ViewContextManager/GlobalVolumeSlider.tsx b/src/ViewContextManager/GlobalVolumeSlider.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import './GlobalVolume.css';
 
@@ -18,28 +19,34 @@ export const GlobalVolumeSlider: React.FC<GlobalVolumeSliderProps> = ({ onClose
 
   return (
     <>
-      <div
-        className='global-menu-backdrop'
-        onClick={evt => {
-          evt.stopPropagation();
-          onClose();
-        }}
-      />
-      <div className='global-volume-slider-container'>
-        <input
-          type='range'
-          min={0}
-          max={100}
-          className='vertical-range-slider'
-          style={{ position: 'absolute', left: -44 }}
-          value={value}
-          onChange={evt => {
-            const value = +evt.target.value;
-            setValue(value);
-            setGlobalVolume(value);
+      {createPortal(
+        <div
+          className='global-menu-backdrop'
+          onClick={evt => {
+            evt.stopPropagation();
+            onClose();
           }}
-        />
-      </div>
+        />,
+        document.getElementById('content')!
+      )}
+      {createPortal(
+        <div className='global-volume-slider-container'>
+          <input
+            type='range'
+            min={0}
+            max={100}
+            className='vertical-range-slider'
+            style={{ position: 'absolute', left: -44 }}
+            value={value}
+            onChange={evt => {
+              const value = +evt.target.value;
+              setValue(value);
+              setGlobalVolume(value);
+            }}
+          />
+        </div>,
+        document.getElementById('content')!
+      )}
     </>
   );
 };
diff --git a/src/ViewContextManager/Icons/HamburgerMenu.svg b/src/ViewContextManager/Icons/HamburgerMenu.svg
diff --git a/src/ViewContextManager/Icons/Volume.svg b/src/ViewContextManager/Icons/Volume.svg
diff --git a/src/ViewContextManager/ViewContextManager.css b/src/ViewContextManager/ViewContextManager.css
@@ -74,6 +74,7 @@ input.view-context-switcher-tab-renamer {
 .global-volume-slider-container {
   z-index: 10000000;
   position: absolute;
+  top: 60px;
   right: 41px;
   background-color: #181818;
   height: 132px;
@@ -85,15 +86,18 @@ input.view-context-switcher-tab-renamer {
 .add-module-picker-container {
   z-index: 10000000;
   position: absolute;
+  top: 120px;
   right: 41px;
   background-color: #181818;
+  max-width: 300px;
 
   .module-description {
     font-size: 13.5px;
     font-family: 'Hack', 'Input Mono', 'Input', 'Oxygen Mono', monospace;
-    padding: 6px 2px;
+    padding: 6px 4px;
     min-height: 28px;
     box-sizing: border-box;
+    border: 1px solid #88888833;
   }
 }
 

diff --git a/src/ViewContextManager/ViewContextManager.tsx b/src/ViewContextManager/ViewContextManager.tsx
@@ -24,6 +24,7 @@ import RestartPlaybackIcon from './Icons/RestartPlayback.svg';
 import PlayIcon from './Icons/Play.svg';
 import StopIcon from './Icons/Stop.svg';
 import ResetEverythingIcon from './Icons/ResetEverything.svg';
+import VolumeIcon from './Icons/Volume.svg';
 import PlusIcon from './Icons/Plus.svg';
 import { useSvelteStore } from 'src/reactUtils';
 
@@ -165,7 +166,7 @@ export const ViewContextManager: React.FC<VCMProps> = ({ engine }) => {
         name='Set Global Volume'
       >
         <>
-          🔊
+          <div className='svg-wrapper' dangerouslySetInnerHTML={{ __html: VolumeIcon }} />
           {volumeSliderOpen ? (
             <GlobalVolumeSlider onClose={() => setVolumeSliderOpen(false)} />
           ) : null}

diff --git a/src/controlPanel/ControlPanelUI.tsx b/src/controlPanel/ControlPanelUI.tsx
@@ -1,6 +1,7 @@
 import * as R from 'ramda';
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import ControlPanel from 'react-control-panel';
+import { createPortal } from 'react-dom';
 import { shallowEqual, useSelector } from 'react-redux';
 
 import ControlPanelMidiKeyboard from 'src/controlPanel/ControlPanelMidiKeyboard';

diff --git a/svg.d.ts b/svg.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -29,7 +29,7 @@
   "paths": {
     "src/*": ["src/**/*"]
   },
-  "include": ["./index.d.ts", "src/**/*"],
+  "include": ["./index.d.ts", "src/**/*", "svg.d.ts"],
   "exclude": [
     "node_modules",
     "dist",