From 34ea8256723b83999a97e9248667ef3d5ec36c00 Mon Sep 17 00:00:00 2001 From: asuk Date: Sat, 5 Aug 2023 12:41:34 +0200 Subject: [PATCH] css changes from asya --- buildAndCopy.sh | 3 ++- theatre/studio/src/panels/BasePanel/common.tsx | 1 + theatre/studio/src/panels/DetailPanel/DetailPanel.tsx | 7 ++++--- .../DetailCompoundPropEditor.tsx | 3 ++- theatre/studio/src/panels/DetailPanel/EmptyState.tsx | 3 ++- theatre/studio/src/propEditors/DefaultValueIndicator.tsx | 8 ++++++++ .../simpleContextMenu/ContextMenu/BaseMenu.tsx | 9 ++++----- .../uiComponents/simpleContextMenu/ContextMenu/Item.tsx | 6 ++++-- 8 files changed, 27 insertions(+), 13 deletions(-) diff --git a/buildAndCopy.sh b/buildAndCopy.sh index 84c2e28..e408087 100755 --- a/buildAndCopy.sh +++ b/buildAndCopy.sh @@ -3,7 +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/web/node_modules/@theatre/browser-bundles/dist" +DESTINATION="/Users/asuk/Documents/openFrameworks/apps/variableLab/msdf-theatre/bin/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 diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx index 1bce423..d94acca 100644 --- a/theatre/studio/src/panels/BasePanel/common.tsx +++ b/theatre/studio/src/panels/BasePanel/common.tsx @@ -58,6 +58,7 @@ export const TitleBar = styled.div` overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + background: #f2f2f2; ` // the minimum visible width or height when the panel is partially offscreen diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 7fb4a27..71040ec 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -33,11 +33,11 @@ const Container = styled.div<{pin: boolean}>` 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 {