From 006121da91207499e3d8102f6b47ca170504c162 Mon Sep 17 00:00:00 2001 From: Elliot Date: Sun, 26 Jun 2022 12:00:59 -0400 Subject: [PATCH] Fix extension buttons spacing, add extension example (#229) * Fix extension buttons spacing & styles * Refactor extension button styles * Clean up extension prism --- .../src/shared/hello-world-extension/App.tsx | 37 ++++++++++++++ .../shared/hello-world-extension/index.tsx | 50 +++++++++++++++++++ .../ExtensionToolbar/ExtensionToolbar.tsx | 26 +++++++--- theatre/studio/src/toolbars/GlobalToolbar.tsx | 10 +++- theatre/studio/src/toolbars/PinButton.tsx | 35 +------------ .../toolbar/ToolbarIconButton.tsx | 5 +- .../toolbar/ToolbarSwitchSelectContainer.ts | 2 - 7 files changed, 121 insertions(+), 44 deletions(-) create mode 100644 packages/playground/src/shared/hello-world-extension/App.tsx create mode 100644 packages/playground/src/shared/hello-world-extension/index.tsx diff --git a/packages/playground/src/shared/hello-world-extension/App.tsx b/packages/playground/src/shared/hello-world-extension/App.tsx new file mode 100644 index 0000000..4d85034 --- /dev/null +++ b/packages/playground/src/shared/hello-world-extension/App.tsx @@ -0,0 +1,37 @@ +import {editable as e, SheetProvider} from '@theatre/r3f' +import {Stars, TorusKnot} from '@react-three/drei' +import {getProject} from '@theatre/core' +import React from 'react' +import {Canvas} from '@react-three/fiber' + +function App() { + return ( +
{ + // return setBgIndex((bgIndex) => (bgIndex + 1) % bgs.length) + }} + style={{ + height: '100vh', + }} + > + + + + + + + + + + + +
+ ) +} + +export default App diff --git a/packages/playground/src/shared/hello-world-extension/index.tsx b/packages/playground/src/shared/hello-world-extension/index.tsx new file mode 100644 index 0000000..451d46d --- /dev/null +++ b/packages/playground/src/shared/hello-world-extension/index.tsx @@ -0,0 +1,50 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' +import type {ToolsetConfig} from '@theatre/studio' +import studio from '@theatre/studio' +import extension from '@theatre/r3f/dist/extension' +import {Box, prism, Ticker, val} from '@theatre/dataverse' + +studio.extend(extension) +studio.extend({ + id: '@theatre/hello-world-extension', + toolbars: { + global(set, studio) { + const exampleBox = new Box('mobile') + return prism(() => [ + { + type: 'Switch', + value: val(exampleBox.derivation), + onChange: (value) => exampleBox.set(value), + options: [ + { + value: 'mobile', + label: 'view mobile version', + svgSource: '😀', + }, + { + value: 'desktop', + label: 'view desktop version', + svgSource: '🪢', + }, + ], + }, + { + type: 'Icon', + title: 'Example Icon', + svgSource: '👁‍🗨', + onClick: () => { + console.log('hello') + }, + }, + ]).tapImmediate(Ticker.raf, (value) => { + set(value) + }) + }, + }, + panes: [], +}) +studio.initialize() + +ReactDOM.render(, document.getElementById('root')) diff --git a/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx b/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx index 08d126f..bd0d472 100644 --- a/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx +++ b/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx @@ -14,7 +14,7 @@ const Container = styled.div` /* pointer-events: none; */ display: flex; - gap: 1rem; + gap: 0.5rem; justify-content: center; ` @@ -34,6 +34,14 @@ const Bg = styled.div` } ` +const GroupDivider = styled.div` + position: abolute; + height: 32px; + width: 1px; + background: #373b40; + opacity: 0.4; +` + const ExtensionToolsetRender: React.FC<{ extension: IExtension toolbarId: string @@ -60,16 +68,22 @@ export const ExtensionToolbar: React.FC<{toolbarId: string}> = ({ const groups: Array = [] const extensionsById = useVal(getStudio().atomP.ephemeral.extensions.byId) + let isAfterFirstGroup = false for (const [, extension] of Object.entries(extensionsById)) { if (!extension || !extension.toolbars?.[toolbarId]) continue groups.push( - , + <> + {isAfterFirstGroup ? : undefined} + + , ) + + isAfterFirstGroup = true } if (groups.length === 0) return null diff --git a/theatre/studio/src/toolbars/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar.tsx index b7ad975..8802c4f 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar.tsx @@ -57,6 +57,14 @@ const HasUpdatesBadge = styled.div` top: -2px; ` +const GroupDivider = styled.div` + position: abolute; + height: 32px; + width: 1px; + background: #373b40; + opacity: 0.4; +` + const GlobalToolbar: React.FC = () => { const conflicts = usePrism(() => { const ephemeralStateOfAllProjects = val( @@ -126,6 +134,7 @@ const GlobalToolbar: React.FC = () => { unpinHintIcon={} pinned={outlinePinned} /> + {conflicts.length > 0 ? ( {conflicts.length} @@ -144,7 +153,6 @@ const GlobalToolbar: React.FC = () => { {hasUpdates && } - { diff --git a/theatre/studio/src/toolbars/PinButton.tsx b/theatre/studio/src/toolbars/PinButton.tsx index 36449d4..22e7ffb 100644 --- a/theatre/studio/src/toolbars/PinButton.tsx +++ b/theatre/studio/src/toolbars/PinButton.tsx @@ -1,45 +1,14 @@ import styled from 'styled-components' -import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import type {ComponentPropsWithRef, ReactNode} from 'react' import React, {forwardRef, useState} from 'react' +import ToolbarIconButton from '@theatre/studio/uiComponents/toolbar/ToolbarIconButton' -const Container = styled.button<{pinned?: boolean}>` - ${pointerEventsAutoInNormalMode}; - position: relative; - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - font-weight: 600; - width: 32px; - height: 32px; - outline: none; - +const Container = styled(ToolbarIconButton)<{pinned?: boolean}>` color: ${({pinned}) => (pinned ? 'rgba(255, 255, 255, 0.8)' : '#A8A8A9')}; - background: rgba(40, 43, 47, 0.8); - backdrop-filter: blur(14px); - border: none; border-bottom: 1px solid ${({pinned}) => pinned ? 'rgba(255, 255, 255, 0.7)' : 'rgba(255, 255, 255, 0.08)'}; - border-radius: 2px; - - &:hover { - background: rgba(59, 63, 69, 0.8); - } - - &:active { - background: rgba(82, 88, 96, 0.8); - } - - svg { - display: block; - } - - @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); - } ` interface PinButtonProps extends ComponentPropsWithRef<'button'> { diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index 1ba53ef..08e5fef 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -27,8 +27,9 @@ export const Container = styled.button` border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 2px; - filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25)) - drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15)); + svg { + display: block; + } &:hover { background: rgba(59, 63, 69, 0.8); diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts index 8077381..459608c 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts @@ -6,8 +6,6 @@ const Container = styled(Group)` height: fit-content; backdrop-filter: blur(14px); border-radius: 2px; - filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25)) - drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15)); ` export default Container