Bit of ❤️ for the context menus

theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx

@@ -29,10 +29,11 @@ import {usePrism} from '@theatre/react'
 import {val} from '@theatre/dataverse'
 import {HiOutlineChevronRight} from 'react-icons/all'
 import memoizeFn from '@theatre/utils/memoizeFn'
+import {collapsedMap} from './collapsedMap'
 
 const Container = styled.div`
   --step: 15px;
-  --left-pad: 15px;
+  --left-pad: 10px;
   ${pointerEventsAutoInNormalMode};
   --right-width: 60%;
 `
@@ -193,8 +194,11 @@ function DetailCompoundPropEditor<
     propConfig,
   )
 
+  const label = propName || 'Props'
+
   const [contextMenu] = useContextMenu(propNameContainer, {
     menuItems: tools.contextMenuItems,
+    displayName: `${label}`,
   })
 
   const lastSubPropIsComposite = compositeSubs.length > 0
@@ -241,7 +245,7 @@ function DetailCompoundPropEditor<
             isHighlighted={isPropHighlightedD}
             ref={propNameContainerRef}
           >
-            <span>{propName || 'Props'}</span>
+            <span>{label}</span>
           </PropName>
           <CollapseIcon
             isCollapsed={isCollapsed}
@@ -297,5 +301,3 @@ function DetailCompoundPropEditor<
 }
 
 export default React.memo(DetailCompoundPropEditor)
-
-const collapsedMap = new Map<string, Atom<boolean>>()

theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx

@@ -111,6 +111,7 @@ export function SingleRowPropEditor<T>({
     useRefAndState<HTMLDivElement | null>(null)
 
   const [contextMenu] = useContextMenu(propNameContainer, {
+    displayName: `${label}`,
     menuItems: editingTools.contextMenuItems,
   })
 

theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/collapsedMap.tsx

@@ -0,0 +1,3 @@
+import type {Atom} from '@theatre/dataverse'
+
+export const collapsedMap = new Map<string, Atom<boolean>>()

theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/BasicKeyframedTrack.tsx

@@ -16,7 +16,10 @@ import {
 import type {PropTypeConfig_AllSimples} from '@theatre/core/propTypes'
 import {useVal} from '@theatre/react'
 import type {GraphEditorColors} from '@theatre/sync-server/state/types'
-import {keyframeUtils} from '@theatre/sync-server/state/schema'
+import {
+  graphEditorColors,
+  keyframeUtils,
+} from '@theatre/sync-server/state/schema'
 
 export type ExtremumSpace = {
   fromValueSpace: (v: number) => number
@@ -121,11 +124,13 @@ const BasicKeyframedTrack: React.VFC<{
       />
     ))
 
+    const iconColor = graphEditorColors[color].iconColor
+
     return (
       <g
         style={{
           // @ts-ignore
-          '--main-color': graphEditorColors[color].iconColor,
+          '--main-color': iconColor,
         }}
       >
         {keyframeEditors}

theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx

@@ -14,23 +14,26 @@ const MenuContainer = styled.ul`
   position: absolute;
   min-width: ${minWidth}px;
   z-index: 10000;
-  background: ${transparentize(0.2, '#111')};
-  backdrop-filter: blur(2px);
+  background: ${transparentize(0.8, '#000000')};
+  backdrop-filter: blur(8px) saturate(300%) contrast(65%) brightness(70%);
   color: white;
+  border: 0.5px solid #6262622c;
+  box-sizing: border-box;
+  box-shadow: ${transparentize(0.75, '#000000')} 0px 4px 20px;
   list-style-type: none;
-  padding: 2px 0;
+  padding: 0;
   margin: 0;
-  border-radius: 1px;
+  border-radius: 3px;
   cursor: default;
   ${pointerEventsAutoInNormalMode};
-  border-radius: 3px;
+  border-radius: 4px;
 `
 
 const MenuTitle = styled.div`
-  padding: 4px 10px;
-  border-bottom: 1px solid #6262626d;
-  color: #adadadb3;
-  font-size: 11px;
+  padding: 8px 10px;
+  border-bottom: 1px solid #6262621b;
+  color: #d1d1d1;
+  font-size: 10px;
   font-weight: 500;
 `
 

theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/ContextMenu.tsx

@@ -9,6 +9,7 @@ import {height as itemHeight} from './Item'
 import {PortalContext} from 'reakit'
 import useOnKeyDown from '@theatre/studio/uiComponents/useOnKeyDown'
 import BaseMenu from './BaseMenu'
+import type {$IntentionalAny} from '@theatre/utils/types'
 
 /**
  * How far from the menu should the pointer travel to auto close the menu
@@ -17,7 +18,7 @@ const pointerDistanceThreshold = 20
 
 export type IContextMenuItemCustomNodeRenderFn = (controls: {
   closeMenu(): void
-}) => React.ReactChild
+}) => React.ReactElement
 
 export type IContextMenuItem = {
   label: string | ElementType
@@ -38,6 +39,26 @@ export type ContextMenuProps = {
     clientY: number
   }
   onRequestClose: () => void
+  // default: true
+  closeOnPointerLeave?: boolean
+}
+
+/**
+ * Useful helper in development to prevent the context menu from auto-closing,
+ * so its easier to inspect the DOM / change the styles, etc.
+ *
+ * Call window.$disableAutoCloseContextMenu() in the console to disable auto-close
+ */
+const shouldAutoCloseByDefault =
+  process.env.NODE_ENV === 'development'
+    ? (): boolean =>
+        (window as $IntentionalAny).__autoCloseContextMenuByDefault ?? true
+    : (): boolean => true
+
+if (process.env.NODE_ENV === 'development') {
+  ;(window as $IntentionalAny).$disableAutoCloseContextMenu = () => {
+    ;(window as $IntentionalAny).__autoCloseContextMenuByDefault = false
+  }
 }
 
 /**
@@ -86,7 +107,8 @@ const ContextMenu: React.FC<ContextMenuProps> = (props) => {
         e.clientY < pos.top - pointerDistanceThreshold ||
         e.clientY > pos.top + rect.height + pointerDistanceThreshold
       ) {
-        props.onRequestClose()
+        if (props.closeOnPointerLeave !== false && shouldAutoCloseByDefault())
+          props.onRequestClose()
       }
     }
 
@@ -95,7 +117,14 @@ const ContextMenu: React.FC<ContextMenuProps> = (props) => {
     return () => {
       window.removeEventListener('mousemove', onMouseMove)
     }
-  }, [rect, container, props.clickPoint, windowSize, props.onRequestClose])
+  }, [
+    rect,
+    container,
+    props.clickPoint,
+    windowSize,
+    props.onRequestClose,
+    props.closeOnPointerLeave,
+  ])
   const portalLayer = useContext(PortalContext)
 
   useOnKeyDown((ev) => {

theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx

@@ -3,33 +3,32 @@ import type {ElementType} from 'react'
 import React from 'react'
 import styled from 'styled-components'
 
-export const height = 26
+export const height = 30
 
 const ItemContainer = styled.li<{enabled: boolean}>`
   height: ${height}px;
   padding: 0 12px;
   margin: 0;
   display: flex;
   align-items: center;
-  font-size: 11px;
   font-weight: 400;
   position: relative;
   color: ${(props) => (props.enabled ? 'white' : '#8f8f8f')};
-  cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')};
+  cursor: ${(props) => (props.enabled ? 'default' : 'not-allowed')};
 
   &:after {
     position: absolute;
-    inset: 2px 1px;
+    inset: 2px;
     display: block;
     content: ' ';
     pointer-events: none;
     z-index: -1;
-    border-radius: 3px;
+    border-radius: 4px;
   }
 
   &:hover:after {
     background-color: ${(props) =>
-      props.enabled ? 'rgba(63, 174, 191, 0.75)' : 'initial'};
+      props.enabled ? 'rgba(255, 255, 255, 0.075)' : 'initial'};
   }
 `