From 398b67ab614f29aaa643979124114be6f15413c0 Mon Sep 17 00:00:00 2001 From: asuk Date: Tue, 9 May 2023 15:19:05 +0200 Subject: [PATCH 01/13] css changes --- .../devEnv/home/PlaygroundHeader.tsx | 2 +- theatre/studio/src/css.tsx | 6 ++--- .../src/panels/BasePanel/PanelWrapper.tsx | 2 +- .../studio/src/panels/BasePanel/common.tsx | 5 ++-- .../src/panels/DetailPanel/DetailPanel.tsx | 23 ++++++++----------- .../src/panels/OutlinePanel/BaseItem.tsx | 15 +++++------- .../src/panels/OutlinePanel/OutlinePanel.tsx | 4 ++-- .../DopeSheet/Right/DopeSheetBackground.tsx | 5 ++-- .../FrameGrid/StampsGrid.tsx | 2 +- .../GraphEditor/GraphEditor.tsx | 3 ++- .../SequenceEditorPanel/GraphEditorToggle.tsx | 9 ++++---- .../FocusRangeZone/FocusRangeThumb.tsx | 4 ++-- .../RightOverlay/HorizontalScrollbar.tsx | 2 +- .../RightOverlay/Playhead.tsx | 6 ++--- .../RightOverlay/TopStrip.tsx | 4 ++-- .../SequenceEditorPanel.tsx | 8 +++---- .../propEditors/NextPrevKeyframeCursors.tsx | 4 ++-- .../simpleEditors/BooleanPropEditor.tsx | 2 +- .../simpleEditors/RgbaPropEditor.tsx | 4 ++-- .../src/propEditors/utils/propNameTextCSS.tsx | 6 ++--- theatre/studio/src/toolbars/GlobalToolbar.tsx | 2 +- .../studio/src/toolbars/MoreMenu/MoreMenu.tsx | 2 +- .../uiComponents/form/BasicNumberInput.tsx | 23 ++++++++++--------- .../src/uiComponents/form/BasicSelect.tsx | 7 +++--- .../uiComponents/form/BasicStringInput.tsx | 10 ++++---- 25 files changed, 75 insertions(+), 85 deletions(-) diff --git a/packages/playground/devEnv/home/PlaygroundHeader.tsx b/packages/playground/devEnv/home/PlaygroundHeader.tsx index 3b1fcef..3a4d5d3 100644 --- a/packages/playground/devEnv/home/PlaygroundHeader.tsx +++ b/packages/playground/devEnv/home/PlaygroundHeader.tsx @@ -52,7 +52,7 @@ const HeaderLink = styled.a` /* identical to box height, or 169% */ /* White/White100 */ - color: #ffffff; + color: #000000; transition: color 0.2s ease-in; diff --git a/theatre/studio/src/css.tsx b/theatre/studio/src/css.tsx index ffc9d42..eb18613 100644 --- a/theatre/studio/src/css.tsx +++ b/theatre/studio/src/css.tsx @@ -25,13 +25,13 @@ export const pointerEventsAutoInNormalMode = css` export const theme = { panel: { - bg: `#0092FF77`, + bg: `#AAAAAA`, head: { title: { - color: `#0092FF`, + color: `#000000`, }, punctuation: { - color: `#0092FF`, + color: `#000000`, }, }, body: { diff --git a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx index 035e65f..350321d 100644 --- a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx @@ -8,7 +8,7 @@ const Container = styled.div` position: absolute; user-select: none; box-sizing: border-box; - font-family: 'OPS-Cubic'; + font-family: 'Tonka'; ${pointerEventsAutoInNormalMode}; /* box-shadow: 1px 2px 10px -5px black; */ diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx index 7f7fd4c..10501b8 100644 --- a/theatre/studio/src/panels/BasePanel/common.tsx +++ b/theatre/studio/src/panels/BasePanel/common.tsx @@ -50,9 +50,8 @@ export const TitleBar = styled.div` align-items: center; padding: 0 10px; position: relative; - color: #ffffffb3; - border-bottom: 1px solid rgb(0 0 0 / 13%); - background-color: #0092ff; + color: black; + background-color: #a5a5a5; font-size: 10px; font-weight: 500; overflow: hidden; diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 6953281..281b5bc 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -28,23 +28,19 @@ const headerHeight = `32px` const Container = styled.div<{pin: boolean}>` ${pointerEventsAutoInNormalMode}; - font-family: 'OPS-Cubic'; - text-transform: uppercase; - background-color: rgba(255, 255, 255, 1); - border: 2px solid rgba(0, 146, 255, 1); - border-radius: 15px; + font-family: 'Tonka'; + // text-transform: uppercase; + background: rgba(242, 242, 242, 0.9); + border-radius: 0px; color: black; position: fixed; - right: 8px; - top: 50px; + right: 10px; + top: 10px; // Temporary, see comment about CSS grid in SingleRowPropEditor. width: 280px; height: fit-content; z-index: ${panelZIndexes.propsPanel}; - - box-shadow: 0 10px 10px rgba(0, 146, 255, 0.25), - 0 10px 10px rgba(0, 146, 255 0.15); - backdrop-filter: blur(14px); + backdrop-filter: blur(2px); display: ${({pin}) => (pin ? 'block' : 'none')}; @@ -53,13 +49,13 @@ const Container = styled.div<{pin: boolean}>` } @supports not (backdrop-filter: blur()) { - background: rgba(0, 146, 255 0.75); + background: rgba(242, 242, 242, 0.9); } ` const Title = styled.div` margin: 0 10px; - color: #0092ff; + color: #000000; font-weight: bold; font-size: 10px; user-select: none; @@ -73,6 +69,7 @@ const Header = styled.div` height: ${headerHeight}; display: flex; align-items: center; + border-bottom: 1px dashed #91919177; ` const Body = styled.div` diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index 1cf8097..3b80036 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -33,23 +33,21 @@ const Header = styled(BaseHeader)` align-items: center; pointer-events: none; white-space: nowrap; - font-family: 'OPS-Cubic'; - - border-radius: 2px; + font-family: 'Tonka'; /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/ - color: rgba(0, 146, 255, 0.9); + color: rgba(0, 0, 0, 0.8); background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); &.descendant-is-selected { - background: rgba(255, 255, 255, 0.7); + background: rgba(255, 255, 255, 1); } ${pointerEventsAutoInNormalMode}; &:not(.not-selectable):not(.selected):hover { - background: rgba(59, 63, 69, 0.9); + background: rgba(142, 142, 142, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.24); } @@ -60,8 +58,7 @@ const Header = styled(BaseHeader)` } &.selected { - background: rgba(255, 255, 255, 0.7); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(142, 142, 142, 1); } @supports not (backdrop-filter: blur()) { @@ -71,7 +68,7 @@ const Header = styled(BaseHeader)` export const outlineItemFont = css` font-weight: 500; - font-size: 11px; + font-size: 12px; & { } ` diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx index 0c0f63a..151b321 100644 --- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx +++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx @@ -14,10 +14,10 @@ const Container = styled.div<{pin: boolean}>` ${pointerEventsAutoInNormalMode}; background-color: transparent; position: absolute; - left: 8px; + left: 10px; z-index: ${panelZIndexes.outlinePanel}; - top: calc(${headerHeight} + 8px); + top: 10px; height: fit-content; max-height: calc(100% - ${headerHeight}); overflow-y: scroll; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx index 1269ca0..24433cc 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx @@ -1,9 +1,8 @@ -import {theme} from '@theatre/studio/css' import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' import {useVal} from '@theatre/react' import type {Pointer} from '@theatre/dataverse' -import {darken, transparentize} from 'polished' +import { transparentize} from 'polished' import React from 'react' import styled from 'styled-components' import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid' @@ -15,7 +14,7 @@ const Container = styled.div` bottom: 0; z-index: ${() => zIndexes.rightBackground}; overflow: hidden; - background: ${transparentize(0.01, darken(1 * 0.03, theme.panel.bg))}; + background: ${transparentize(0.1, '#f2f2f2')}; pointer-events: none; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx b/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx index 84ef686..596b1c6 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx @@ -17,7 +17,7 @@ const Container = styled.div` ` export const stampsGridTheme = { - fullUnitStampColor: `#ffffff`, + fullUnitStampColor: `#000000`, stampFontSize: '10px', get subUnitStampColor(): string { return darken(0.2, stampsGridTheme.fullUnitStampColor) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx index fad801c..ee2dc5c 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx @@ -27,7 +27,8 @@ const Container = styled.div` position: absolute; right: 0; bottom: 0; - background: ${transparentize(0.1, '#0092FF')}; + background: ${transparentize(0.1, '#c9c9c9')}; + backdrop-filter: blur(2px); ` const SVGContainer = styled.svg` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx index 549378a..a38b88a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx @@ -10,15 +10,14 @@ import {includeLockFrameStampAttrs} from './FrameStampPositionProvider' const Container = styled.button` outline: none; - background-color: #1c1d21; - border: 1px solid #191919; - border-radius: 2px; + background-color: #ffffff; + border: none; + border-radius: 0px; display: flex; bottom: 14px; right: 8px; z-index: 1; position: absolute; - padding: 4px 8px; display: flex; color: #656d77; @@ -26,7 +25,7 @@ const Container = styled.button` font-size: 10px; &:hover { - color: white; + color: black; } & > svg { diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx index 8045d52..138295a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx @@ -53,9 +53,9 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>` #pointer-root.normal & { pointer-events: auto; - border-radius: 15px; + border-radius: 0px; overflow: hidden; - border: 2px solid #0092ff; + border: 2px solid #000000; } #pointer-root.draggingPositionInSequenceEditor & { diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx index 828f662..d5814cf 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx @@ -14,7 +14,7 @@ import useDrag from '@theatre/studio/uiComponents/useDrag' const Container = styled.div` --threadHeight: 6px; - --bg-inactive: #32353b; + --bg-inactive: #a5a5a5; --bg-active: #5b5c5d; position: absolute; height: 0; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx index 49780a9..dd0db39 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx @@ -33,7 +33,7 @@ import { } from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget' const Container = styled.div<{isVisible: boolean}>` - --thumbColor: #00e0ff; + --thumbColor: #ff2a00; position: absolute; top: 0; left: 0; @@ -50,7 +50,7 @@ const Rod = styled.div` top: 8px; width: 0; height: calc(100% - 8px); - border-left: 1px solid #27e0fd; + border-left: 1px solid #ff2a00; z-index: 10; pointer-events: none; @@ -177,7 +177,7 @@ const Tooltip = styled.div` left: 4px; padding: 0 2px; transform: translateX(-50%); - background: #0092ff; + background: #000000; border-radius: 4px; color: #fff; font-size: 10px; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx index 01be055..ef3a7c6 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx @@ -11,8 +11,8 @@ import FocusRangeZone from './FocusRangeZone/FocusRangeZone' export const topStripHeight = 18 export const topStripTheme = { - backgroundColor: `#0092FFeb`, - borderColor: `#0092FF`, + backgroundColor: `#f2f2f2`, + borderColor: `#000000`, } const Container = styled.div` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index f2d88b9..7a202a0 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -36,16 +36,16 @@ const Container = styled(PanelWrapper)` ` const LeftBackground = styled.div` - background-color: #ffffff; - color: #ffffff; + background-color: #f3f3f3; + color: #000000; position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none; - /* border-bottom: 2px solid #0092FF; - border-left: 2px solid #0092FF; */ + /* border-bottom: 2px solid #000000; + border-left: 2px solid #000000; */ ` export const zIndexes = (() => { diff --git a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx index 9c132d6..9bc615d 100644 --- a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx +++ b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx @@ -78,7 +78,7 @@ const Button = styled.div` export const nextPrevCursorsTheme = { offColor: '#555', - onColor: '#0092FF', + onColor: '#000000', } const CurButton = styled(Button)<{ @@ -86,7 +86,7 @@ const CurButton = styled(Button)<{ presence: PresenceFlag | undefined }>` &:hover { - color: #0092ff; + color: #000000; } color: ${(props) => diff --git a/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx index ff460c1..72fc396 100644 --- a/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx +++ b/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx @@ -5,7 +5,7 @@ import BasicCheckbox from '@theatre/studio/uiComponents/form/BasicCheckbox' import type {ISimplePropEditorReactProps} from './ISimplePropEditorReactProps' const Input = styled(BasicCheckbox)` - margin-left: 6px; + margin-bottom: 10px; :focus { outline: 1px solid #555; diff --git a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx index cd4355d..a4a01c7 100644 --- a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx +++ b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx @@ -32,10 +32,10 @@ const ColorPreviewPuck = styled.div.attrs((props) => ({ background: rgba2hex(props.rgbaColor), }, }))` - height: 18px; + height: 23px; aspect-ratio: 1; border-radius: 99999px; - border: 1px solid #0092ff; + border: 1px solid #000000; ` const HexInput = styled(BasicStringInput)` diff --git a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx index 46e53dc..1d5e686 100644 --- a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx +++ b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx @@ -3,8 +3,6 @@ import {css} from 'styled-components' export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>` font-weight: 300; - font-size: 14px; - color: ${(props) => - props.isHighlighted === 'self' ? '#FFFFFF77' : '#0092FF'}; - text-shadow: 0.5px 0.5px 2px rgba(0, 146, 255, 0.3); + font-size: 12px; + color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')}; ` diff --git a/theatre/studio/src/toolbars/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar.tsx index 7ba777e..9ded83d 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar.tsx @@ -29,7 +29,7 @@ const Container = styled.div` height: 36px; pointer-events: none; - display: flex; + display: none; justify-content: space-between; padding: 12px; ` diff --git a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx index 315e586..05432f4 100644 --- a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx +++ b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx @@ -62,7 +62,7 @@ const Link = styled(Item)` &:hover { /* background-color: #398995; */ - color: white !important; + color: grey; &:before { opacity: 1; } diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index 56e231e..0807407 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -34,16 +34,15 @@ const Container = styled.div` &.dragging, &.editingViaKeyboard { &:after { - background-color: rgba(0, 146, 255, 0.8); - border-color: rgba(0, 146, 255, 1); + // background-color: rgba(255, 255, 255, 1); } } ` const Input = styled.input` - background: rgba(0, 146, 255, 0.1); - border: 3px solid white; - color: rgba(0, 146, 255, 1); + background: rgba(255, 255, 255, 1); + border: none; + color: rgba(0, 0, 0, 1); padding: 1px 6px; font: inherit; outline: none; @@ -51,7 +50,8 @@ const Input = styled.input` text-align: left; width: 100%; height: calc(100% - 4px); - border-radius: 5px; + border-radius: 0px; + margin-bottom: 10px; &:focus { cursor: text; @@ -60,16 +60,17 @@ const Input = styled.input` const FillIndicator = styled.div` position: absolute; - inset: 3px 2px 4px; + inset: 0px 0px 10px; transform: scale(var(--percentage), 1); transform-origin: top left; - background-color: #2d5561; - z-index: -1; + background-color: #b4b4b4; + z-index: 0; border-radius: 2px; - pointer-events: none; + pointer-events: none !important; + mix-blend-mode: multiply; ${Container}.dragging &, ${Container}.noFocus:hover & { - background-color: rgba(0, 146, 255, 0.8); + background-color: rgba(188, 188, 188, 0.8); } ` diff --git a/theatre/studio/src/uiComponents/form/BasicSelect.tsx b/theatre/studio/src/uiComponents/form/BasicSelect.tsx index abfec78..9c3a3fd 100644 --- a/theatre/studio/src/uiComponents/form/BasicSelect.tsx +++ b/theatre/studio/src/uiComponents/form/BasicSelect.tsx @@ -22,16 +22,16 @@ const IconContainer = styled.div` const Select = styled.select` appearance: none; - background-color: transparent; + background-color: white; box-sizing: border-box; border: 1px solid transparent; - color: rgba(255, 255, 255, 0.85); + color: rgba(0, 0, 0, 1); padding: 1px 6px; font: inherit; outline: none; text-align: left; width: 100%; - border-radius: 2px; + border-radius: 0px; /* looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why. So we're hard-coding the height to 26px, unlike all other inputs that use a relative height. @@ -46,7 +46,6 @@ const Select = styled.select` &:hover, &:focus { background-color: #10101042; - border-color: #00000059; } ` diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx index 4a33ba6..de1700a 100644 --- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx @@ -7,9 +7,9 @@ import useRefAndState from '@theatre/studio/utils/useRefAndState' import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside' const StyledTextarea = styled.textarea.attrs({type: 'text'})` - background: transparent; - border: 1px solid transparent; - color: rgba(0, 146, 255, 1); + background: #ffffff; + border: none; + color: rgba(0, 0, 0, 1); padding: 1px 6px; font: inherit; outline: none; @@ -17,9 +17,9 @@ const StyledTextarea = styled.textarea.attrs({type: 'text'})` text-align: left; width: 100%; height: calc(100% - 4px); - border-radius: 2px; - border: 1px solid transparent; + border-radius: 0px; box-sizing: border-box; + margin-bottom: 10px; &:hover { background-color: #10101042; From a65c275162ce28cf2198deca30f8d8196b6cf244 Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Tue, 9 May 2023 19:40:34 +0200 Subject: [PATCH 02/13] add layerMover class --- theatre/studio/src/panels/OutlinePanel/BaseItem.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index 3b80036..ae86f50 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -156,7 +156,11 @@ const BaseItem: React.FC<{ /* @ts-ignore */ {'--depth': depth} } - className={collapsed ? 'collapsed' : ''} + className={ + collapsed + ? `collapsed layerMover layerMover${label}` + : `layerMover layerMover${label}` + } >
From 4b94d449adf88e8cc58514a8c936ea7c24a5e7d6 Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Sun, 14 May 2023 10:20:30 +0200 Subject: [PATCH 03/13] dispatch sequenceEvents --- .../BasicKeyframedTrack.tsx | 13 +++++++++++ theatre/studio/src/store/stateEditors.ts | 23 +++++++++++++++++++ 2 files changed, 36 insertions(+) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx index 1254844..aa9be4d 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx @@ -62,6 +62,19 @@ const BasicKeyframedTrack: React.VFC = React.memo( props, ) + const toVT = { + sequenced: true, + panelID: leaf.sheetObject.address.objectKey, + prop: leaf.pathToProp, + origin: 'BasicKeyframedTrack.tsx', + } + const event = new CustomEvent('sequenceEvent', { + bubbles: false, + detail: toVT, + }) + window.dispatchEvent(event) + //console.log('sequence this', {toVT}); + const snapPositionsState = useVal(snapPositionsStateD) const snapPositions = diff --git a/theatre/studio/src/store/stateEditors.ts b/theatre/studio/src/store/stateEditors.ts index 528cf66..6489d3b 100644 --- a/theatre/studio/src/store/stateEditors.ts +++ b/theatre/studio/src/store/stateEditors.ts @@ -702,6 +702,17 @@ namespace stateEditors { tracks.trackData[trackId] = track tracks.trackIdByPropPath[pathEncoded] = trackId + const toVT = { + sequenced: true, + panelID: p.objectKey, + prop: p.pathToProp, + origin: 'stateEditors.ts', + } + const event = new CustomEvent('sequenceEvent', { + bubbles: false, + detail: toVT, + }) + window.dispatchEvent(event) } export function setPrimitivePropAsStatic( @@ -721,6 +732,18 @@ namespace stateEditors { stateEditors.coreByProject.historic.sheetsById.staticOverrides.byObject.setValueOfPrimitiveProp( p, ) + const toVT = { + sequenced: false, + panelID: p.objectKey, + prop: p.pathToProp, + origin: 'stateEditors.ts', + } + const event = new CustomEvent('sequenceEvent', { + bubbles: false, + detail: toVT, + }) + window.dispatchEvent(event) + //console.log('make this static', {toVT}); } export function setCompoundPropAsStatic( From e6ceb6888af291fbfbf17e95e91f4a873994533f Mon Sep 17 00:00:00 2001 From: asuk Date: Sun, 14 May 2023 18:37:21 +0200 Subject: [PATCH 04/13] pull out of data --- buildAndCopy.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/buildAndCopy.sh b/buildAndCopy.sh index a290967..84c2e28 100755 --- a/buildAndCopy.sh +++ b/buildAndCopy.sh @@ -3,8 +3,8 @@ PREVIOUS_DIR=$(pwd) DIR=${0:a:h} SOURCE="$DIR/packages/browser-bundles/dist" -DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/data/web/node_modules/@theatre/browser-bundles/dist" -# DESTINATION="jrkb@nature.fritz.box:/home/jrkb/openFrameworks/apps/celinesTypeGarden/msdf-theatre/bin/data/web/node_modules/@theatre/browser-bundles/dist" +DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist" +# DESTINATION="jrkb@nature.fritz.box:/home/jrkb/openFrameworks/apps/celinesTypeGarden/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist" cd $DIR yarn build From cffd591186e06101e3fa3abe6f04f51b612ae2eb Mon Sep 17 00:00:00 2001 From: asuk Date: Fri, 19 May 2023 18:42:20 +0200 Subject: [PATCH 05/13] a bunch of small css things --- .../panels/BasePanel/ExtensionPaneWrapper.tsx | 2 +- .../src/panels/DetailPanel/DetailPanel.tsx | 15 ++++- .../DetailCompoundPropEditor.tsx | 21 ++++--- .../SingleRowPropEditor.tsx | 20 ++++--- .../src/panels/DetailPanel/ObjectDetails.tsx | 2 +- .../src/panels/OutlinePanel/BaseItem.tsx | 17 +++--- .../ProjectsList/ProjectListItem.tsx | 2 +- .../CurveEditorPopover/CurveEditorPopover.tsx | 2 +- .../CurveEditorPopover/EasingOption.tsx | 2 +- .../Right/LengthIndicator/LengthIndicator.tsx | 4 +- .../src/propEditors/DefaultValueIndicator.tsx | 9 ++- .../propEditors/NextPrevKeyframeCursors.tsx | 55 ++++++++++++------- .../studio/src/toolbars/MoreMenu/MoreMenu.tsx | 2 +- .../src/uiComponents/DetailPanelButton.tsx | 2 +- .../colorPicker/components/common/Alpha.tsx | 2 +- .../colorPicker/components/common/Hue.tsx | 2 +- .../colorPicker/components/common/Pointer.tsx | 2 +- .../components/common/Saturation.tsx | 2 +- .../uiComponents/form/BasicNumberInput.tsx | 5 +- .../toolbar/ToolbarIconButton.tsx | 2 +- .../toolbar/ToolbarSwitchSelectContainer.ts | 2 +- 21 files changed, 104 insertions(+), 68 deletions(-) diff --git a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx index 19b023c..f137b25 100644 --- a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx @@ -64,7 +64,7 @@ const ClosePanelButton = styled.button` display: flex; align-items: center; justify-content: center; - border-radius: 2px; + border-radius: 0px; font-size: 11px; height: 10px; width: 18px; diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 281b5bc..9653c88 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -74,13 +74,22 @@ const Header = styled.div` const Body = styled.div` ${pointerEventsAutoInNormalMode}; - max-height: calc(100vh - 100px); + max-height: calc(80vh - 100px); overflow-y: scroll; &::-webkit-scrollbar { - display: none; + width: 6px; + } + &::-webkit-scrollbar-track { + background: #f1f1f1; + } + &::-webkit-scrollbar-thumb { + background: #c2c2c2; + } + &::-webkit-scrollbar-thumb:hover { + background: #888; } - scrollbar-width: none; + scrollbar-width: 10px; padding: 0; user-select: none; diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx index 602e68f..c4e7649 100644 --- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx @@ -39,13 +39,13 @@ const Container = styled.div` const Header = styled.div<{isHighlighted: PropHighlighted}>` height: 30px; - display: flex; + display: grid; align-items: stretch; position: relative; ` const Padding = styled.div<{isVectorProp: boolean}>` - padding-left: ${rowIndentationFormulaCSS}; + /* padding-left: ${rowIndentationFormulaCSS}; */ display: flex; align-items: center; overflow: hidden; @@ -74,8 +74,9 @@ const PropName = deriver(styled.div<{isHighlighted: PropHighlighted}>` `) const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` - width: 28px; - height: 28px; + width: 10px; + height: 10px; + padding-left: 10px; font-size: 9px; display: flex; align-items: center; @@ -83,7 +84,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` transition: transform 0.05s ease-out, color 0.1s ease-out; transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg); - color: #66686a; + color: black; visibility: ${(props) => // If it's a vector, show the collapse icon only when it's expanded @@ -91,7 +92,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` // If it's a regular compond prop, show the collapse icon only when it's collapsed (props.isVector && !props.isCollapsed) ? 'visible' - : 'hidden'}; + : 'visible'}; ${Header}:hover & { visibility: visible; @@ -99,7 +100,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` &:hover { transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg); - color: #c0c4c9; + color: black; } ` @@ -147,12 +148,14 @@ const InputContainer = styled.div` display: flex; align-items: center; justify-content: stretch; - padding: 0 8px 0 2px; + padding: 0 0px 0 0px; box-sizing: border-box; height: 100%; - width: var(--right-width); + width: 100%; flex-shrink: 0; flex-grow: 0; + padding-bottom: 4px; + padding-top: 4px; ` export type ICompoundPropDetailEditorProps< diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx index dad5529..8ee4eac 100644 --- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx @@ -18,6 +18,8 @@ const Container = deriver(styled.div<{ isHighlighted: PropHighlighted }>` display: flex; + width: 100%; + padding-bottom: 0px; // min-height: 30px; justify-content: flex-start; align-items: stretch; @@ -38,16 +40,16 @@ const Container = deriver(styled.div<{ const Left = styled.div` box-sizing: border-box; - padding-left: ${rowIndentationFormulaCSS}; - padding-right: 4px; + /* padding-left: ${rowIndentationFormulaCSS}; */ + /* padding-right: 4px;*/ display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 4px; - flex-grow: 0; - flex-shrink: 0; - width: calc(100% - var(--right-width)); + flex-grow: 1; + flex-shrink: 1; + width: 100%; ` const PropNameContainer = deriver(styled.div<{ @@ -65,7 +67,7 @@ const PropNameContainer = deriver(styled.div<{ ${propNameTextCSS}; &:hover { - color: white; + color: blue; } `) @@ -80,12 +82,14 @@ const InputContainer = styled.div` display: flex; align-items: center; justify-content: stretch; - padding: 0 8px 0 2px; + padding: 0 0px 0 0px; box-sizing: border-box; height: 100%; - width: var(--right-width); + width: 50%; flex-shrink: 0; flex-grow: 0; + padding-bottom: 4px; + padding-top: 4px; ` type ISingleRowPropEditorProps = { diff --git a/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx b/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx index 58c146d..9bbd1b7 100644 --- a/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx +++ b/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx @@ -19,7 +19,7 @@ const ActionButton = styled.button` align-items: center; justify-content: center; outline: none; - border-radius: 2px; + border-radius: 0px; color: #a8a8a9; background: rgba(255, 255, 255, 0.1); diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index ae86f50..51ff6b0 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -19,13 +19,12 @@ export const BaseHeader = styled.div`` const Header = styled(BaseHeader)` position: relative; - margin-top: 2px; margin-bottom: 2px; margin-left: calc(4px + var(--depth) * 16px); padding-left: 4px; padding-right: 8px; gap: 4px; - height: 21px; + min-height: 21px; line-height: 0; box-sizing: border-box; display: flex; @@ -38,7 +37,7 @@ const Header = styled(BaseHeader)` color: rgba(0, 0, 0, 0.8); background: rgba(255, 255, 255, 0.65); - backdrop-filter: blur(14px); + backdrop-filter: blur(2px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); &.descendant-is-selected { @@ -47,18 +46,18 @@ const Header = styled(BaseHeader)` ${pointerEventsAutoInNormalMode}; &:not(.not-selectable):not(.selected):hover { - background: rgba(142, 142, 142, 1); + /* background: rgba(142, 142, 142, 1); - border-bottom: 1px solid rgba(255, 255, 255, 0.24); + border-bottom: 1px solid rgba(255, 255, 255, 0.24); */ } &:not(.not-selectable):not(.selected):active { - background: rgba(82, 88, 96, 0.9); - border-bottom: 1px solid rgba(255, 255, 255, 0.24); + /* background: rgba(82, 88, 96, 0.9); + border-bottom: 1px solid rgba(255, 255, 255, 0.24);*/ } &.selected { - background: rgba(142, 142, 142, 1); + /* background: rgba(142, 142, 142, 1);*/ } @supports not (backdrop-filter: blur()) { @@ -81,7 +80,7 @@ const Head_Label = styled.span` // Compensate for border bottom top: 0.5px; display: flex; - height: 20px; + min-height: 20px; align-items: center; box-sizing: border-box; ` diff --git a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx index 4d159ff..e3073e0 100644 --- a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx @@ -14,7 +14,7 @@ const ConflictNotice = styled.div` margin-left: 11px; background: #4c282d; padding: 2px 8px; - border-radius: 2px; + border-radius: 0px; font-size: 10px; box-shadow: 0 2px 8px -4px black; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx index cc9222f..4e9c73a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx @@ -65,7 +65,7 @@ const OptionsContainer = styled.div` const SearchBox = styled.input.attrs({type: 'text'})` background-color: ${COLOR_BASE}; border: none; - border-radius: 2px; + border-radius: 0px; color: rgba(255, 255, 255, 0.8); padding: 6px; font-size: 12px; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx index e63b956..5e7571f 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx @@ -17,7 +17,7 @@ const Wrapper = styled.div<{isSelected: boolean}>` transition: background-color 0.15s; background-color: ${COLOR_BASE}; - border-radius: 2px; + border-radius: 0px; cursor: pointer; outline: none; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx index 461aebf..a7e9ff9 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx @@ -71,7 +71,7 @@ const Tooltip = styled.div` font-size: 10px; white-space: nowrap; padding: 2px 8px; - border-radius: 2px; + border-radius: 0px; ${pointerEventsAutoInNormalMode}; cursor: ew-resize; color: #464646; @@ -89,7 +89,7 @@ const Tumb = styled.div` font-size: 10px; white-space: nowrap; padding: 1px 2px; - border-radius: 2px; + border-radius: 0px; ${pointerEventsAutoInNormalMode}; justify-content: center; align-items: center; diff --git a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx index c4f7cb5..a5869d6 100644 --- a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx +++ b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx @@ -31,16 +31,19 @@ const Rect = styled.rect` const DefaultIcon = styled.div` width: 5px; height: 5px; - border-radius: 1px; - /* border: 1px solid currentColor; */ background-color: currentColor; + border-radius: 0px; + transform: rotate(45deg); + border: 1px solid grey; ` const FilledIcon = styled.div` width: 5px; height: 5px; background-color: currentColor; - border-radius: 1px; + border-radius: 0px; + transform: rotate(45deg); + border: 1px solid grey; ` const DefaultOrStaticValueIndicator: React.FC<{hasStaticOverride: boolean}> = ( diff --git a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx index 9bc615d..63f16a5 100644 --- a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx +++ b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx @@ -2,7 +2,6 @@ import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Histo import type {StudioSheetItemKey} from '@theatre/shared/utils/ids' import type {VoidFn} from '@theatre/shared/utils/types' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' -import {transparentize} from 'polished' import React from 'react' import styled, {css} from 'styled-components' import {PresenceFlag} from '@theatre/studio/uiComponents/usePresence' @@ -41,7 +40,7 @@ const Container = styled.div` content: ' '; display: none; z-index: -1; - background: ${transparentize(0.2, 'black')}; + background: transparent; } &:hover { @@ -122,7 +121,7 @@ const Prev = styled(PrevOrNextButton)<{ }>` transform: translateX(2px); ${Container}:hover & { - transform: translateX(-7px); + transform: translateX(-2px); } ` const Next = styled(PrevOrNextButton)<{ @@ -131,7 +130,7 @@ const Next = styled(PrevOrNextButton)<{ }>` transform: translateX(-2px); ${Container}:hover & { - transform: translateX(7px); + transform: translateX(2px); } ` @@ -145,28 +144,40 @@ namespace Icons { export const Prev = () => ( - - + + ) export const Next = () => ( - - + + ) @@ -181,14 +192,20 @@ namespace Icons { export const Cur = () => ( - - + + ) diff --git a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx index 05432f4..ee75ca9 100644 --- a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx +++ b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx @@ -6,7 +6,7 @@ import styled from 'styled-components' const Container = styled.div` width: 138px; - border-radius: 2px; + border-radius: 0px; background-color: rgba(42, 45, 50, 0.9); position: absolute; display: flex; diff --git a/theatre/studio/src/uiComponents/DetailPanelButton.tsx b/theatre/studio/src/uiComponents/DetailPanelButton.tsx index 3a1d29c..aca62ee 100644 --- a/theatre/studio/src/uiComponents/DetailPanelButton.tsx +++ b/theatre/studio/src/uiComponents/DetailPanelButton.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' const DetailPanelButton = styled.button<{disabled?: boolean}>` text-align: center; padding: 8px; - border-radius: 2px; + border-radius: 0px; border: 1px solid #627b7b87; background-color: #4b787d3d; color: #eaeaea; diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx index 74fb397..8503df7 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx @@ -13,7 +13,7 @@ import styled from 'styled-components' const Container = styled.div` position: relative; height: 16px; - border-radius: 2px; + border-radius: 0px; // Checkerboard background-color: #fff; background-image: url('data:image/svg+xml,'); diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx index 9b39f9b..0088b67 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx @@ -12,7 +12,7 @@ import styled from 'styled-components' const Container = styled.div` position: relative; height: 16px; - border-radius: 2px; + border-radius: 0px; background: linear-gradient( to right, diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx index a6fa83c..c140a37 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx @@ -14,7 +14,7 @@ const Container = styled.div` transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ffffff00; - border-radius: 2px; + border-radius: 0px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); ${StyledInteractive}:focus & { diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx index 5b6dfbe..5b5942b 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx @@ -13,7 +13,7 @@ const Container = styled.div` flex-grow: 1; border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */ border-bottom: 12px solid #000; - border-radius: 2px; + border-radius: 0px; background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index 0807407..dfc09fd 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -51,7 +51,8 @@ const Input = styled.input` width: 100%; height: calc(100% - 4px); border-radius: 0px; - margin-bottom: 10px; + margin-bottom: 0px; + text-align: center; &:focus { cursor: text; @@ -60,7 +61,7 @@ const Input = styled.input` const FillIndicator = styled.div` position: absolute; - inset: 0px 0px 10px; + inset: 0px 0px 0px; transform: scale(var(--percentage), 1); transform-origin: top left; background-color: #b4b4b4; diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index 08e5fef..d08d136 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -25,7 +25,7 @@ export const Container = styled.button` backdrop-filter: blur(14px); border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 2px; + border-radius: 0px; svg { display: block; diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts index 459608c..3cebb4d 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts @@ -5,7 +5,7 @@ const Container = styled(Group)` display: flex; height: fit-content; backdrop-filter: blur(14px); - border-radius: 2px; + border-radius: 0px; ` export default Container From ffd9f22d19b14c8a136153b30dc13f65b04fdffe Mon Sep 17 00:00:00 2001 From: asuk Date: Wed, 24 May 2023 16:48:17 +0200 Subject: [PATCH 06/13] a bunch of small css things --- theatre/studio/src/panels/OutlinePanel/BaseItem.tsx | 7 +++---- .../KeyframeEditor/CurveEditorPopover/colors.ts | 4 ++-- theatre/studio/src/uiComponents/Popover/BasicPopover.tsx | 4 ++-- .../simpleContextMenu/ContextMenu/BaseMenu.tsx | 8 ++++---- .../uiComponents/simpleContextMenu/ContextMenu/Item.tsx | 2 +- 5 files changed, 12 insertions(+), 13 deletions(-) diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index 51ff6b0..dbaaac7 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -36,12 +36,11 @@ const Header = styled(BaseHeader)` /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/ color: rgba(0, 0, 0, 0.8); - background: rgba(255, 255, 255, 0.65); - backdrop-filter: blur(2px); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0); + backdrop-filter: blur(0px); &.descendant-is-selected { - background: rgba(255, 255, 255, 1); + background: rgba(255, 255, 255, 0); } ${pointerEventsAutoInNormalMode}; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts index ad1c9c9..abb6877 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts @@ -1,5 +1,5 @@ -export const COLOR_POPOVER_BACK = 'rgba(26, 28, 30, 0.97);' +export const COLOR_POPOVER_BACK = 'rgba(156, 156, 156, 0.97);' export const COLOR_BASE = '#272B2F' -export const COLOR_FOCUS_OUTLINE = '#0A4540' +export const COLOR_FOCUS_OUTLINE = '#ffffff' diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx index f3f8c25..3895a84 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx @@ -5,7 +5,7 @@ import React from 'react' import styled from 'styled-components' import PopoverArrow from './PopoverArrow' -export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`) +export const popoverBackgroundColor = transparentize(0.08, `#999999`) const Container = styled.div` position: absolute; @@ -15,7 +15,7 @@ const Container = styled.div` background: var(--popover-bg); - color: white; + color: black; padding: 0; margin: 0; cursor: default; diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx index bb8bd68..4d6d55e 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx @@ -14,22 +14,22 @@ const MenuContainer = styled.ul` position: absolute; min-width: ${minWidth}px; z-index: 10000; - background: ${transparentize(0.2, '#111')}; + background: ${transparentize(0.2, '#9c9c9c')}; backdrop-filter: blur(2px); - color: white; + color: black; list-style-type: none; padding: 2px 0; margin: 0; border-radius: 1px; cursor: default; ${pointerEventsAutoInNormalMode}; - border-radius: 3px; + border-radius: 0px; ` const MenuTitle = styled.div` padding: 4px 10px; border-bottom: 1px solid #6262626d; - color: #adadadb3; + color: #ffffff; font-size: 11px; font-weight: 500; ` diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx index 1951fb4..c1c9bb4 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx @@ -29,7 +29,7 @@ const ItemContainer = styled.li<{enabled: boolean}>` &:hover:after { background-color: ${(props) => - props.enabled ? 'rgba(63, 174, 191, 0.75)' : 'initial'}; + props.enabled ? 'rgba(133, 133, 133, 0.75)' : 'initial'}; } ` From a47ca9254f16019f175cb62ab7977d7f3b00c77a Mon Sep 17 00:00:00 2001 From: asuk Date: Sat, 27 May 2023 09:12:40 +0200 Subject: [PATCH 07/13] css changes --- theatre/studio/src/panels/DetailPanel/DetailPanel.tsx | 3 ++- .../KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx | 2 +- theatre/studio/src/uiComponents/form/BasicNumberInput.tsx | 4 ++-- theatre/studio/src/uiComponents/form/BasicStringInput.tsx | 1 + .../src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx | 2 +- 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 9653c88..8df9ad4 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -75,6 +75,7 @@ const Header = styled.div` const Body = styled.div` ${pointerEventsAutoInNormalMode}; max-height: calc(80vh - 100px); + border-bottom: 1px dashed #91919177; overflow-y: scroll; &::-webkit-scrollbar { width: 6px; @@ -90,7 +91,7 @@ const Body = styled.div` } scrollbar-width: 10px; - padding: 0; + padding: 10px; user-select: none; /* Set the font-size for input values in the detail panel */ diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx index fa9d79e..62e3af1 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx @@ -31,7 +31,7 @@ const SingleKeyframePropLabel = styled.div` width: 40%; - color: #919191; + color: #606060; overflow: hidden; ` diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index dfc09fd..fd26dc3 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -27,7 +27,7 @@ const Container = styled.div` border: 1px solid transparent; z-index: -2; box-sizing: border-box; - border-radius: 1px; + border-radius: 0px; } &:hover, @@ -66,7 +66,7 @@ const FillIndicator = styled.div` transform-origin: top left; background-color: #b4b4b4; z-index: 0; - border-radius: 2px; + border-radius: 0px; pointer-events: none !important; mix-blend-mode: multiply; diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx index de1700a..4fae9a5 100644 --- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx @@ -20,6 +20,7 @@ const StyledTextarea = styled.textarea.attrs({type: 'text'})` border-radius: 0px; box-sizing: border-box; margin-bottom: 10px; + margin-top: 10px; &:hover { background-color: #10101042; diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx index c1c9bb4..437f161 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx @@ -14,7 +14,7 @@ const ItemContainer = styled.li<{enabled: boolean}>` font-size: 11px; font-weight: 400; position: relative; - color: ${(props) => (props.enabled ? 'white' : '#8f8f8f')}; + color: ${(props) => (props.enabled ? 'white' : '#484848')}; cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')}; &:after { From 8d7a3007e2845de4f09982903ac862fd01d64dff Mon Sep 17 00:00:00 2001 From: asuk Date: Fri, 9 Jun 2023 08:35:16 +0200 Subject: [PATCH 08/13] changed css --- .../extension/components/SnapshotEditor.tsx | 2 +- theatre/studio/src/notify.tsx | 4 +- .../studio/src/panels/BasePanel/common.tsx | 3 +- .../src/panels/DetailPanel/DetailPanel.tsx | 5 +-- .../src/panels/OutlinePanel/BaseItem.tsx | 8 ++-- .../AggregateKeyframeVisualDot.tsx | 42 ++++++++++--------- .../CurveEditorPopover/colors.ts | 2 +- .../KeyframeEditor/SingleKeyframeDot.tsx | 7 ++-- .../Right/keyframeRowUI/ConnectorLine.tsx | 2 +- .../RightOverlay/TopStrip.tsx | 2 +- .../SequenceEditorPanel.tsx | 5 +-- .../VerticalScrollContainer.tsx | 1 + .../src/uiComponents/Popover/BasicPopover.tsx | 1 - .../studio/src/uiComponents/icons/Package.tsx | 5 +-- .../toolbar/ToolbarIconButton.tsx | 2 +- 15 files changed, 44 insertions(+), 47 deletions(-) diff --git a/packages/r3f/src/extension/components/SnapshotEditor.tsx b/packages/r3f/src/extension/components/SnapshotEditor.tsx index 8d98067..db6dcce 100644 --- a/packages/r3f/src/extension/components/SnapshotEditor.tsx +++ b/packages/r3f/src/extension/components/SnapshotEditor.tsx @@ -140,7 +140,7 @@ const WaitForSceneInitMessage = styled.div<{active?: boolean}>` background: rgba(40, 43, 47, 0.8); @supports not (backdrop-filter: blur()) { - background-color: rgba(40, 43, 47, 0.95); + // background-color: rgba(40, 43, 47, 0.95); } ` diff --git a/theatre/studio/src/notify.tsx b/theatre/studio/src/notify.tsx index b94971f..3946d51 100644 --- a/theatre/studio/src/notify.tsx +++ b/theatre/studio/src/notify.tsx @@ -94,7 +94,7 @@ const NotificationContainer = styled.div` backdrop-filter: blur(14px); @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` @@ -300,7 +300,7 @@ const Button = styled.button<{danger?: boolean}>` } @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx index 10501b8..1bce423 100644 --- a/theatre/studio/src/panels/BasePanel/common.tsx +++ b/theatre/studio/src/panels/BasePanel/common.tsx @@ -51,7 +51,8 @@ export const TitleBar = styled.div` padding: 0 10px; position: relative; color: black; - background-color: #a5a5a5; + // background-color: #a5a5a5; + border-bottom: 1px dashed #91919177; font-size: 10px; font-weight: 500; overflow: hidden; diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 8df9ad4..7fb4a27 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -12,7 +12,6 @@ import {isProject, isSheetObject} from '@theatre/shared/instanceTypes' import { panelZIndexes, TitleBar_Piece, - TitleBar_Punctuation, } from '@theatre/studio/panels/BasePanel/common' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import ObjectDetails from './ObjectDetails' @@ -157,14 +156,14 @@ const DetailPanel: React.FC<{}> = (props) => { ${obj.address.objectKey}`} > - <TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> + {/*<TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> <TitleBar_Punctuation>{':'} </TitleBar_Punctuation> <TitleBar_Piece> {obj.sheet.address.sheetInstanceId}{' '} </TitleBar_Piece> - <TitleBar_Punctuation> → </TitleBar_Punctuation> + <TitleBar_Punctuation> → </TitleBar_Punctuation>*/} <TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece>
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index dbaaac7..03f28df 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -3,7 +3,7 @@ import React from 'react' import styled, {css} from 'styled-components' import noop from '@theatre/shared/utils/noop' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' -import {ChevronDown, Package} from '@theatre/studio/uiComponents/icons' +import { Package} from '@theatre/studio/uiComponents/icons' export const Container = styled.li` margin: 0; @@ -60,7 +60,7 @@ const Header = styled(BaseHeader)` } @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` @@ -169,9 +169,7 @@ const BaseItem: React.FC<{ evt.preventDefault() setIsCollapsed?.(!collapsed) }} - > - - + > ) : ( )} diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx index 1af3b40..b60271b 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx @@ -58,9 +58,9 @@ type IDotThemeValues = { isSelected: AggregateKeyframePositionIsSelected | undefined flag: PresenceFlag | undefined } -const SELECTED_COLOR = '#F2C95C' -const DEFAULT_PRIMARY_COLOR = '#40AAA4' -const DEFAULT_SECONDARY_COLOR = '#45747C' +const SELECTED_COLOR = '#5280d5' +const DEFAULT_PRIMARY_COLOR = '#ea2333' +const DEFAULT_SECONDARY_COLOR = '#c073b8' const selectionColorAll = (theme: IDotThemeValues) => theme.isSelected === AggregateKeyframePositionIsSelected.AllSelected ? SELECTED_COLOR @@ -84,19 +84,20 @@ const AggregateDotAllHereSvg = (theme: IDotThemeValues) => ( xmlns="http://www.w3.org/2000/svg" > - + ( diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts index abb6877..fd6d849 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts @@ -1,5 +1,5 @@ export const COLOR_POPOVER_BACK = 'rgba(156, 156, 156, 0.97);' -export const COLOR_BASE = '#272B2F' +export const COLOR_BASE = '#FFFFFF' export const COLOR_FOCUS_OUTLINE = '#ffffff' diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx index 13f6636..bb34f42 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx @@ -28,12 +28,12 @@ import usePresence, { PresenceFlag, } from '@theatre/studio/uiComponents/usePresence' -export const DOT_SIZE_PX = 6 +export const DOT_SIZE_PX = 8 const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 2 const dotTheme = { - normalColor: '#40AAA4', - selectedColor: '#F2C95C', + normalColor: '#ea2333', + selectedColor: '#1cba94', inlineEditorOpenColor: '#FCF3DC', selectedAndInlineEditorOpenColor: '#CBEBEA', } @@ -66,6 +66,7 @@ const Diamond = styled.div` background: ${(props) => selectBackgroundForDiamond(props)}; transform: rotateZ(45deg); + border-radius: 2px; ${(props) => props.flag === PresenceFlag.Primary ? 'outline: 2px solid white;' : ''}; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx index bf36b14..3e23cb9 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx @@ -13,7 +13,7 @@ export type IConnectorThemeValues = { export const CONNECTOR_THEME = { normalColor: `#FFFFFF`, // (greenish-blueish)ish - selectedColor: `#8A7842`, + selectedColor: `#65d8bc`, barColor: (values: IConnectorThemeValues) => { const base = values.isSelected ? CONNECTOR_THEME.selectedColor diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx index ef3a7c6..2259a42 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx @@ -23,7 +23,7 @@ const Container = styled.div` height: ${topStripHeight}px; box-sizing: border-box; background: ${topStripTheme.backgroundColor}; - border-bottom: 1px solid ${topStripTheme.borderColor}; + border-bottom: 1px dashed #91919177; ${pointerEventsAutoInNormalMode}; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index 7a202a0..0404efb 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -25,7 +25,6 @@ import { panelZIndexes, TitleBar, TitleBar_Piece, - TitleBar_Punctuation, } from '@theatre/studio/panels/BasePanel/common' import type {UIPanelId} from '@theatre/shared/utils/ids' import {usePresenceListenersOnRootElement} from '@theatre/studio/uiComponents/usePresence' @@ -203,12 +202,12 @@ const Header: React.FC<{layoutP: Pointer}> = ({ }} > - {sheet.address.sheetId} + {/* {sheet.address.sheetId} {':'}  {sheet.address.sheetInstanceId} -  {'>'}  +  {'>'} */} Sequence diff --git a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx index 771303a..d28d50b 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx @@ -11,6 +11,7 @@ const Container = styled.div` bottom: 0; overflow-x: hidden; overflow-y: scroll; + border-bottom: 1px dashed #91919177; z-index: ${() => zIndexes.scrollableArea}; &::-webkit-scrollbar { diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx index 3895a84..d3714ec 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx @@ -23,7 +23,6 @@ const Container = styled.div` border-radius: 3px; z-index: 10000; border: 1px solid var(--popover-inner-stroke); - box-shadow: 0 0 0 1px var(--popover-outer-stroke), 0 6px 8px -4px black; backdrop-filter: blur(8px); & a { diff --git a/theatre/studio/src/uiComponents/icons/Package.tsx b/theatre/studio/src/uiComponents/icons/Package.tsx index 0f6952f..7f247fb 100644 --- a/theatre/studio/src/uiComponents/icons/Package.tsx +++ b/theatre/studio/src/uiComponents/icons/Package.tsx @@ -10,10 +10,7 @@ function Package(props: React.SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) } diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index d08d136..785285d 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -63,7 +63,7 @@ export const Container = styled.button` } @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` From 938568037a212eae4060342f73c3b2b032b85082 Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Fri, 9 Jun 2023 16:53:26 +0200 Subject: [PATCH 09/13] please, click on diamond to enable sequenced --- .../src/propEditors/DefaultValueIndicator.tsx | 12 ++-- .../useEditingToolsForCompoundProp.tsx | 42 ++++++++------ .../useEditingToolsForSimpleProp.tsx | 56 +++++++++++-------- 3 files changed, 65 insertions(+), 45 deletions(-) diff --git a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx index a5869d6..c88534a 100644 --- a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx +++ b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx @@ -46,11 +46,15 @@ const FilledIcon = styled.div` border: 1px solid grey; ` -const DefaultOrStaticValueIndicator: React.FC<{hasStaticOverride: boolean}> = ( - props, -) => { +const DefaultOrStaticValueIndicator: React.FC<{ + hasStaticOverride: boolean + callbackPlease: () => void +}> = (props) => { + const whoopsy = (lol: any) => { + props.callbackPlease() + } return ( - + {props.hasStaticOverride ? ( ) : ( diff --git a/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx b/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx index 368002b..0ef230d 100644 --- a/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx +++ b/theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx @@ -65,7 +65,12 @@ export function useEditingToolsForCompoundProp( beingScrubbed: false, contextMenuItems: [], controlIndicators: ( - + { + console.log('nothing to do') + }} + /> ), } } @@ -171,28 +176,26 @@ export function useEditingToolsForCompoundProp( }) } + const makeThisPropSequencedPlease = () => { + getStudio()!.transaction(({stateEditors}) => { + for (const {path, conf} of iteratePropType(propConfig, pathToProp)) { + if (isPropConfigComposite(conf)) continue + const propAddress = {...obj.address, pathToProp: path} + + stateEditors.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced( + propAddress, + propConfig, + ) + } + }) + } if ( !hasOneOrMoreSequencedTracks || (hasOneOrMoreSequencedTracks && hasStatics) ) { contextMenuItems.push({ label: 'Sequence all', - callback: () => { - getStudio()!.transaction(({stateEditors}) => { - for (const {path, conf} of iteratePropType( - propConfig, - pathToProp, - )) { - if (isPropConfigComposite(conf)) continue - const propAddress = {...obj.address, pathToProp: path} - - stateEditors.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced( - propAddress, - propConfig, - ) - } - }) - }, + callback: makeThisPropSequencedPlease, }) } @@ -224,7 +227,10 @@ export function useEditingToolsForCompoundProp( ...common, type: 'AllStatic', controlIndicators: ( - + ), } } diff --git a/theatre/studio/src/propEditors/useEditingToolsForSimpleProp.tsx b/theatre/studio/src/propEditors/useEditingToolsForSimpleProp.tsx index 9c0293a..c97aea9 100644 --- a/theatre/studio/src/propEditors/useEditingToolsForSimpleProp.tsx +++ b/theatre/studio/src/propEditors/useEditingToolsForSimpleProp.tsx @@ -155,20 +155,22 @@ function createPrism( const isSequenced = typeof possibleSequenceTrackId === 'string' + const makeThisPropStaticPlease = () => { + getStudio()!.transaction(({stateEditors}) => { + const propAddress = {...obj.address, pathToProp} + stateEditors.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsStatic( + { + ...propAddress, + value: obj.getValueByPointer(pointerToProp) as T, + }, + ) + }) + } + if (isSequenced) { contextMenuItems.push({ label: 'Make static', - callback: () => { - getStudio()!.transaction(({stateEditors}) => { - const propAddress = {...obj.address, pathToProp} - stateEditors.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsStatic( - { - ...propAddress, - value: obj.getValueByPointer(pointerToProp) as T, - }, - ) - }) - }, + callback: makeThisPropStaticPlease, }) const sequenceTrackId = possibleSequenceTrackId as SequenceTrackId @@ -287,19 +289,21 @@ function createPrism( }) } + const makeThisPropSequencedPlease = () => { + getStudio()!.transaction(({stateEditors, set}) => { + const propAddress = {...obj.address, pathToProp} + + stateEditors.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced( + propAddress, + propConfig, + ) + }) + } + if (isSequencable) { contextMenuItems.push({ label: 'Sequence', - callback: () => { - getStudio()!.transaction(({stateEditors}) => { - const propAddress = {...obj.address, pathToProp} - - stateEditors.coreByProject.historic.sheetsById.sequence.setPrimitivePropAsSequenced( - propAddress, - propConfig, - ) - }) - }, + callback: makeThisPropSequencedPlease, }) } @@ -309,7 +313,10 @@ function createPrism( type: 'Static', shade: common.beingScrubbed ? 'Static_BeingScrubbed' : 'Static', controlIndicators: ( - + ), } return ret @@ -320,7 +327,10 @@ function createPrism( type: 'Default', shade: 'Default', controlIndicators: ( - + ), } From b6518dcaf8c4f563c74903bba9b915b9047383ad Mon Sep 17 00:00:00 2001 From: asuk Date: Sun, 11 Jun 2023 14:28:31 +0200 Subject: [PATCH 10/13] changed some small details in the panels --- .../src/panels/OutlinePanel/BaseItem.tsx | 3 +-- .../src/propEditors/DefaultValueIndicator.tsx | 18 ++++++++---------- .../propEditors/NextPrevKeyframeCursors.tsx | 2 -- 3 files changed, 9 insertions(+), 14 deletions(-) diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index 03f28df..e2b4afb 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -3,7 +3,7 @@ import React from 'react' import styled, {css} from 'styled-components' import noop from '@theatre/shared/utils/noop' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' -import { Package} from '@theatre/studio/uiComponents/icons' +import {Package} from '@theatre/studio/uiComponents/icons' export const Container = styled.li` margin: 0; @@ -21,7 +21,6 @@ const Header = styled(BaseHeader)` position: relative; margin-bottom: 2px; margin-left: calc(4px + var(--depth) * 16px); - padding-left: 4px; padding-right: 8px; gap: 4px; min-height: 21px; diff --git a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx index c88534a..5733a94 100644 --- a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx +++ b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx @@ -29,21 +29,19 @@ const Rect = styled.rect` ` const DefaultIcon = styled.div` - width: 5px; - height: 5px; - background-color: currentColor; - border-radius: 0px; + width: 8px; + height: 8px; + border-radius: 2px; transform: rotate(45deg); - border: 1px solid grey; + background: #a3a3a3; ` const FilledIcon = styled.div` - width: 5px; - height: 5px; - background-color: currentColor; - border-radius: 0px; + width: 8px; + height: 8px; + border-radius: 2px; transform: rotate(45deg); - border: 1px solid grey; + background: #a3a3a3; ` const DefaultOrStaticValueIndicator: React.FC<{ diff --git a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx index 63f16a5..39c88db 100644 --- a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx +++ b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx @@ -185,8 +185,6 @@ namespace Icons { const Cur_Group = styled.g` stroke-width: 0; ${CurButton}:hover & path { - stroke: currentColor; - stroke-width: 2; } ` From 7b39d4feaac1c97bdbe99411401e598d2d72c46e Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Fri, 4 Aug 2023 13:01:16 +0200 Subject: [PATCH 11/13] force reconfigure if called by user --- theatre/core/src/sheets/TheatreSheet.ts | 26 ++++++++++++------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/theatre/core/src/sheets/TheatreSheet.ts b/theatre/core/src/sheets/TheatreSheet.ts index 09ac383..79fb5c3 100644 --- a/theatre/core/src/sheets/TheatreSheet.ts +++ b/theatre/core/src/sheets/TheatreSheet.ts @@ -166,20 +166,18 @@ export default class TheatreSheet implements ISheet { if (process.env.NODE_ENV !== 'production') { const prevConfig = weakMapOfUnsanitizedProps.get(existingObject) if (prevConfig) { - if (!deepEqual(config, prevConfig)) { - if (opts?.reconfigure === true) { - const sanitizedConfig = compound(config) - existingObject.template.reconfigure(sanitizedConfig) - weakMapOfUnsanitizedProps.set(existingObject, config) - return existingObject.publicApi as $IntentionalAny - } else { - throw new Error( - `You seem to have called sheet.object("${key}", config) twice, with different values for \`config\`. ` + - `This is disallowed because changing the config of an object on the fly would make it difficult to reason about.\n\n` + - `You can fix this by either re-using the existing object, or calling sheet.object("${key}", config) with the same config.\n\n` + - `If you mean to reconfigure the object's config, set \`{reconfigure: true}\` in sheet.object("${key}", config, {reconfigure: true})`, - ) - } + if (opts?.reconfigure === true) { + const sanitizedConfig = compound(config) + existingObject.template.reconfigure(sanitizedConfig) + weakMapOfUnsanitizedProps.set(existingObject, config) + return existingObject.publicApi as $IntentionalAny + } else if (!deepEqual(config, prevConfig)) { + throw new Error( + `You seem to have called sheet.object("${key}", config) twice, with different values for \`config\`. ` + + `This is disallowed because changing the config of an object on the fly would make it difficult to reason about.\n\n` + + `You can fix this by either re-using the existing object, or calling sheet.object("${key}", config) with the same config.\n\n` + + `If you mean to reconfigure the object's config, set \`{reconfigure: true}\` in sheet.object("${key}", config, {reconfigure: true})`, + ) } } } From 55960b06866432fd6dcec4bb84404b0eedf82a6b Mon Sep 17 00:00:00 2001 From: asuk Date: Fri, 4 Aug 2023 14:23:11 +0200 Subject: [PATCH 12/13] css changes --- .../DeterminePropEditorForDetail/SingleRowPropEditor.tsx | 1 - .../studio/src/propEditors/NextPrevKeyframeCursors.tsx | 8 ++++---- theatre/studio/src/propEditors/utils/propNameTextCSS.tsx | 1 + theatre/studio/src/uiComponents/form/BasicNumberInput.tsx | 3 ++- theatre/studio/src/uiComponents/form/BasicStringInput.tsx | 3 ++- 5 files changed, 9 insertions(+), 7 deletions(-) diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx index 8ee4eac..8d6b893 100644 --- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx @@ -67,7 +67,6 @@ const PropNameContainer = deriver(styled.div<{ ${propNameTextCSS}; &:hover { - color: blue; } `) diff --git a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx index 39c88db..027f351 100644 --- a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx +++ b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx @@ -29,7 +29,7 @@ const Container = styled.div` margin: 0 0px 0 2px; position: relative; z-index: 0; - opacity: 0.7; + opacity: 1; &:after { position: absolute; @@ -152,7 +152,7 @@ namespace Icons { > ` border-radius: 0px; color: black; position: fixed; - right: 10px; - top: 10px; + right: 0px; + top: 0px; // Temporary, see comment about CSS grid in SingleRowPropEditor. width: 280px; - height: fit-content; + height: 100vh; z-index: ${panelZIndexes.propsPanel}; backdrop-filter: blur(2px); @@ -74,6 +74,7 @@ const Header = styled.div` const Body = styled.div` ${pointerEventsAutoInNormalMode}; max-height: calc(80vh - 100px); + height: inherit; border-bottom: 1px dashed #91919177; overflow-y: scroll; &::-webkit-scrollbar { diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx index c4e7649..759c5a1 100644 --- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx @@ -42,6 +42,7 @@ const Header = styled.div<{isHighlighted: PropHighlighted}>` display: grid; align-items: stretch; position: relative; + opacity: 0.8; ` const Padding = styled.div<{isVectorProp: boolean}>` @@ -81,7 +82,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` display: flex; align-items: center; justify-content: center; - + display: none; transition: transform 0.05s ease-out, color 0.1s ease-out; transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg); color: black; diff --git a/theatre/studio/src/panels/DetailPanel/EmptyState.tsx b/theatre/studio/src/panels/DetailPanel/EmptyState.tsx index 8defa0e..3c38421 100644 --- a/theatre/studio/src/panels/DetailPanel/EmptyState.tsx +++ b/theatre/studio/src/panels/DetailPanel/EmptyState.tsx @@ -5,9 +5,10 @@ import {Outline} from '@theatre/studio/uiComponents/icons' const Container = styled.div` padding: 16px; - display: flex; + display: none; flex-direction: column; gap: 24px; + pointer-events: none; ` const Message = styled.div` diff --git a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx index 5733a94..73c4dcb 100644 --- a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx +++ b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx @@ -34,6 +34,10 @@ const DefaultIcon = styled.div` border-radius: 2px; transform: rotate(45deg); background: #a3a3a3; + cursor: pointer; + &:hover { + background: red; + } ` const FilledIcon = styled.div` @@ -42,6 +46,10 @@ const FilledIcon = styled.div` border-radius: 2px; transform: rotate(45deg); background: #a3a3a3; + cursor: pointer; + &:hover { + background: red; + } ` const DefaultOrStaticValueIndicator: React.FC<{ diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx index 4d6d55e..820da75 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx @@ -14,22 +14,21 @@ const MenuContainer = styled.ul` position: absolute; min-width: ${minWidth}px; z-index: 10000; - background: ${transparentize(0.2, '#9c9c9c')}; + background: ${transparentize(0.0, '#d3d3d3')}; backdrop-filter: blur(2px); color: black; list-style-type: none; - padding: 2px 0; + overflow: hidden; margin: 0; - border-radius: 1px; cursor: default; ${pointerEventsAutoInNormalMode}; - border-radius: 0px; + border-radius: 9px; ` const MenuTitle = styled.div` padding: 4px 10px; border-bottom: 1px solid #6262626d; - color: #ffffff; + color: #000000; font-size: 11px; font-weight: 500; ` diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx index 437f161..4468cf2 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx @@ -14,17 +14,19 @@ const ItemContainer = styled.li<{enabled: boolean}>` font-size: 11px; font-weight: 400; position: relative; + font-family: 'Tonka'; + text-transform: uppercase; color: ${(props) => (props.enabled ? 'white' : '#484848')}; cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')}; &:after { position: absolute; - inset: 2px 1px; + inset: 0px 1px; display: block; content: ' '; pointer-events: none; z-index: -1; - border-radius: 3px; + border-radius: 0px; } &:hover:after {