merge
This commit is contained in:
commit
1532b9190a
58 changed files with 318 additions and 247 deletions
|
|
@ -3,8 +3,9 @@
|
|||
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/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
|
||||
yarn build
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -131,7 +131,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);
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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})`,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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; */
|
||||
|
||||
|
|
|
|||
|
|
@ -50,14 +50,15 @@ 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;
|
||||
border-bottom: 1px dashed #91919177;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: #f2f2f2;
|
||||
`
|
||||
|
||||
// the minimum visible width or height when the panel is partially offscreen
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
@ -28,23 +27,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: 0px;
|
||||
top: 0px;
|
||||
// Temporary, see comment about CSS grid in SingleRowPropEditor.
|
||||
width: 280px;
|
||||
height: fit-content;
|
||||
height: 100vh;
|
||||
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 +48,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,18 +68,30 @@ const Header = styled.div`
|
|||
height: ${headerHeight};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px dashed #91919177;
|
||||
`
|
||||
|
||||
const Body = styled.div`
|
||||
${pointerEventsAutoInNormalMode};
|
||||
max-height: calc(100vh - 100px);
|
||||
max-height: calc(80vh - 100px);
|
||||
height: inherit;
|
||||
border-bottom: 1px dashed #91919177;
|
||||
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;
|
||||
padding: 0;
|
||||
scrollbar-width: 10px;
|
||||
padding: 10px;
|
||||
user-select: none;
|
||||
|
||||
/* Set the font-size for input values in the detail panel */
|
||||
|
|
@ -150,14 +157,14 @@ const DetailPanel: React.FC<{}> = (props) => {
|
|||
<Title
|
||||
title={`${obj.sheet.address.sheetId}: ${obj.sheet.address.sheetInstanceId} > ${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>
|
||||
</Title>
|
||||
</Header>
|
||||
|
|
|
|||
|
|
@ -39,13 +39,14 @@ const Container = styled.div`
|
|||
|
||||
const Header = styled.div<{isHighlighted: PropHighlighted}>`
|
||||
height: 30px;
|
||||
display: flex;
|
||||
display: grid;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
opacity: 0.8;
|
||||
`
|
||||
|
||||
const Padding = styled.div<{isVectorProp: boolean}>`
|
||||
padding-left: ${rowIndentationFormulaCSS};
|
||||
/* padding-left: ${rowIndentationFormulaCSS}; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
|
@ -74,16 +75,17 @@ 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;
|
||||
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: #66686a;
|
||||
color: black;
|
||||
|
||||
visibility: ${(props) =>
|
||||
// If it's a vector, show the collapse icon only when it's expanded
|
||||
|
|
@ -91,7 +93,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 +101,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
|
|||
|
||||
&:hover {
|
||||
transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg);
|
||||
color: #c0c4c9;
|
||||
color: black;
|
||||
}
|
||||
`
|
||||
|
||||
|
|
@ -147,12 +149,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<
|
||||
|
|
|
|||
|
|
@ -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,6 @@ const PropNameContainer = deriver(styled.div<{
|
|||
|
||||
${propNameTextCSS};
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
`)
|
||||
|
||||
|
|
@ -80,12 +81,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<T> = {
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -19,13 +19,11 @@ 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;
|
||||
|
|
@ -33,45 +31,41 @@ 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);
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
background: rgba(255, 255, 255, 0);
|
||||
backdrop-filter: blur(0px);
|
||||
|
||||
&.descendant-is-selected {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
${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);
|
||||
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(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()) {
|
||||
background: rgba(40, 43, 47, 0.95);
|
||||
// background: rgba(40, 43, 47, 0.95);
|
||||
}
|
||||
`
|
||||
|
||||
export const outlineItemFont = css`
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
& {
|
||||
}
|
||||
`
|
||||
|
|
@ -84,7 +78,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;
|
||||
`
|
||||
|
|
@ -160,7 +154,11 @@ const BaseItem: React.FC<{
|
|||
/* @ts-ignore */
|
||||
{'--depth': depth}
|
||||
}
|
||||
className={collapsed ? 'collapsed' : ''}
|
||||
className={
|
||||
collapsed
|
||||
? `collapsed layerMover layerMover${label}`
|
||||
: `layerMover layerMover${label}`
|
||||
}
|
||||
>
|
||||
<Header className={selectionStatus} onClick={select ?? noop} data-header>
|
||||
<Head_IconContainer>
|
||||
|
|
@ -171,9 +169,7 @@ const BaseItem: React.FC<{
|
|||
evt.preventDefault()
|
||||
setIsCollapsed?.(!collapsed)
|
||||
}}
|
||||
>
|
||||
<ChevronDown />
|
||||
</Head_Icon_WithDescendants>
|
||||
></Head_Icon_WithDescendants>
|
||||
) : (
|
||||
<Package />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<rect
|
||||
x="4.46443"
|
||||
y="10.0078"
|
||||
width="5"
|
||||
height="5"
|
||||
transform="rotate(-45 4.46443 10.0078)"
|
||||
fill="#212327" // background knockout fill
|
||||
stroke={selectionColorSome(theme)}
|
||||
/>
|
||||
<rect
|
||||
x="3.75732"
|
||||
y="6.01953"
|
||||
x="5.46443"
|
||||
y="11.0078"
|
||||
width="6"
|
||||
height="6"
|
||||
transform="rotate(-45 4.46443 10.0078)"
|
||||
fill={selectionColorSome(theme)} // background knockout fill
|
||||
stroke="none"
|
||||
rx="2"
|
||||
/>
|
||||
<rect
|
||||
x="4.75732"
|
||||
y="7.01953"
|
||||
width="7"
|
||||
height="7"
|
||||
transform="rotate(-45 3.75732 6.01953)"
|
||||
fill={selectionColorAll(theme)}
|
||||
stroke={theme.flag === PresenceFlag.Primary ? 'white' : undefined}
|
||||
|
|
@ -116,13 +117,14 @@ const AggregateDotSomeHereSvg = (theme: IDotThemeValues) => (
|
|||
<rect
|
||||
x="4.46443"
|
||||
y="8"
|
||||
width="5"
|
||||
height="5"
|
||||
width="6"
|
||||
height="6"
|
||||
rx="2"
|
||||
transform="rotate(-45 4.46443 8)"
|
||||
fill="#23262B"
|
||||
stroke={
|
||||
theme.flag === PresenceFlag.Primary ? 'white' : selectionColorAll(theme)
|
||||
}
|
||||
fill="#000000b3"
|
||||
// stroke={
|
||||
// theme.flag === PresenceFlag.Primary ? 'white' : selectionColorAll(theme)
|
||||
// }
|
||||
strokeWidth={theme.flag === PresenceFlag.Primary ? '2px' : undefined}
|
||||
/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,19 @@ const BasicKeyframedTrack: React.VFC<BasicKeyframedTracksProps> = 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 =
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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_BASE = '#FFFFFF'
|
||||
|
||||
export const COLOR_FOCUS_OUTLINE = '#0A4540'
|
||||
export const COLOR_FOCUS_OUTLINE = '#ffffff'
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const SingleKeyframePropLabel = styled.div`
|
|||
|
||||
width: 40%;
|
||||
|
||||
color: #919191;
|
||||
color: #606060;
|
||||
|
||||
overflow: hidden;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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<IDiamond>`
|
|||
|
||||
background: ${(props) => selectBackgroundForDiamond(props)};
|
||||
transform: rotateZ(45deg);
|
||||
border-radius: 2px;
|
||||
|
||||
${(props) =>
|
||||
props.flag === PresenceFlag.Primary ? 'outline: 2px solid white;' : ''};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 & {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
@ -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};
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
@ -36,16 +35,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 = (() => {
|
||||
|
|
@ -203,12 +202,12 @@ const Header: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
|
|||
}}
|
||||
>
|
||||
<TitleBar>
|
||||
<TitleBar_Piece>{sheet.address.sheetId} </TitleBar_Piece>
|
||||
{/* <TitleBar_Piece>{sheet.address.sheetId} </TitleBar_Piece>
|
||||
|
||||
<TitleBar_Punctuation>{':'} </TitleBar_Punctuation>
|
||||
<TitleBar_Piece>{sheet.address.sheetInstanceId} </TitleBar_Piece>
|
||||
|
||||
<TitleBar_Punctuation> {'>'} </TitleBar_Punctuation>
|
||||
<TitleBar_Punctuation> {'>'} </TitleBar_Punctuation>*/}
|
||||
<TitleBar_Piece>Sequence</TitleBar_Piece>
|
||||
</TitleBar>
|
||||
</Header_Container>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -46,20 +46,27 @@ const Container = styled.div<{
|
|||
`
|
||||
|
||||
const DefaultIcon = styled.div`
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 1px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
transform: rotate(45deg);
|
||||
/* border: 1px solid currentColor; */
|
||||
background-color: currentColor;
|
||||
background: #a3a3a3;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: red;
|
||||
}
|
||||
`
|
||||
|
||||
const FilledIcon = styled.div`
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: currentColor;
|
||||
border-radius: 1px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
transform: rotate(45deg);
|
||||
background: #a3a3a3;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: red;
|
||||
}
|
||||
`
|
||||
|
||||
const DefaultOrStaticValueIndicator: React.FC<{
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
@ -30,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;
|
||||
|
|
@ -41,7 +40,7 @@ const Container = styled.div`
|
|||
content: ' ';
|
||||
display: none;
|
||||
z-index: -1;
|
||||
background: ${transparentize(0.2, 'black')};
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -78,7 +77,7 @@ const Button = styled.div`
|
|||
|
||||
export const nextPrevCursorsTheme = {
|
||||
offColor: '#555',
|
||||
onColor: '#0092FF',
|
||||
onColor: '#000000',
|
||||
}
|
||||
|
||||
const CurButton = styled(Button)<{
|
||||
|
|
@ -86,7 +85,7 @@ const CurButton = styled(Button)<{
|
|||
presence: PresenceFlag | undefined
|
||||
}>`
|
||||
&:hover {
|
||||
color: #0092ff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
color: ${(props) =>
|
||||
|
|
@ -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 = () => (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
width="6.5"
|
||||
height="9.3"
|
||||
viewBox="0 0 6.5 9.3"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<Chevron_Group transform={`translate(6 3)`}>
|
||||
<path d="M4 1L1 4L4 7" stroke="currentColor" />
|
||||
<Chevron_Group transform={`translate(0 0)`}>
|
||||
<path
|
||||
fill="#ea2333"
|
||||
d="M3.8,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6C2.4,9.3,0,5.8,0,4.6
|
||||
C0,3.5,2.4,0,3.8,0z M11,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2c-1.1,0-4.2-3-4.2-4.2C6.8,3.4,9.9,0.4,11,0.4z M17.5,0.6
|
||||
c0-0.4,0.3-0.6,0.8-0.6C19.6,0,22,3.5,22,4.6c0,1.2-2.4,4.6-3.8,4.6c-0.4,0-0.8-0.2-0.8-0.6c0-0.7,2.8-3.1,2.8-4
|
||||
C20.3,3.6,17.5,1.1,17.5,0.6z"
|
||||
/>
|
||||
</Chevron_Group>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Next = () => (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
width="6.5"
|
||||
height="9.3"
|
||||
viewBox="0 0 6.5 9.3"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<Chevron_Group transform={`translate(1 3)`}>
|
||||
<path d="M1 1L4 4L1 7" stroke="currentColor" />
|
||||
<Chevron_Group transform={`translate(2 0)`}>
|
||||
<path
|
||||
fill="#ea2333"
|
||||
d="M-13.7,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6
|
||||
c-1.3,0-3.8-3.4-3.8-4.6C-17.5,3.5-15.1,0-13.7,0z M-6.5,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2c-1.1,0-4.2-3-4.2-4.2
|
||||
C-10.7,3.4-7.6,0.4-6.5,0.4z M0,0.6C0,0.2,0.3,0,0.8,0c1.3,0,3.8,3.5,3.8,4.6c0,1.2-2.4,4.6-3.8,4.6C0.3,9.3,0,9,0,8.7
|
||||
c0-0.7,2.8-3.1,2.8-4C2.8,3.6,0,1.1,0,0.6z"
|
||||
/>
|
||||
</Chevron_Group>
|
||||
</svg>
|
||||
)
|
||||
|
|
@ -174,21 +185,25 @@ namespace Icons {
|
|||
const Cur_Group = styled.g`
|
||||
stroke-width: 0;
|
||||
${CurButton}:hover & path {
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
`
|
||||
|
||||
export const Cur = () => (
|
||||
<svg
|
||||
width="12"
|
||||
height="14"
|
||||
viewBox="0 0 8 12"
|
||||
width="8.3"
|
||||
height="9.3"
|
||||
viewBox="0 0 8.3 9.3"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<Cur_Group transform="translate(1 4)">
|
||||
<path d="M3 0L6 3L3 6L0 3L3 0Z" fill="currentColor" />
|
||||
<Cur_Group transform="translate(0 0)">
|
||||
<path
|
||||
fill="#ea2333"
|
||||
d="M-3.1,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6
|
||||
c-1.3,0-3.8-3.4-3.8-4.6C-6.8,3.5-4.4,0-3.1,0z M4.2,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2C3,8.7,0,5.7,0,4.6
|
||||
C0,3.4,3,0.4,4.2,0.4z M10.7,0.6C10.7,0.2,11,0,11.4,0c1.3,0,3.8,3.5,3.8,4.6c0,1.2-2.4,4.6-3.8,4.6c-0.4,0-0.8-0.2-0.8-0.6
|
||||
c0-0.7,2.8-3.1,2.8-4C13.5,3.6,10.7,1.1,10.7,0.6z"
|
||||
/>
|
||||
</Cur_Group>
|
||||
</svg>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@ const ColorPreviewPuck = styled.div.attrs<ColorPreviewPuckProps>((props) => ({
|
|||
background: rgba2hex(props.rgbaColor),
|
||||
},
|
||||
}))<ColorPreviewPuckProps>`
|
||||
height: 18px;
|
||||
height: 23px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 99999px;
|
||||
border: 1px solid #0092ff;
|
||||
border: 1px solid #000000;
|
||||
`
|
||||
|
||||
const HexInput = styled(BasicStringInput)`
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@ 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;
|
||||
font-variation-settings: 'wght' 130;
|
||||
color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')};
|
||||
`
|
||||
|
|
|
|||
|
|
@ -703,6 +703,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(
|
||||
|
|
@ -722,6 +733,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(
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const Container = styled.div`
|
|||
height: 36px;
|
||||
pointer-events: none;
|
||||
|
||||
display: flex;
|
||||
display: none;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -62,7 +62,7 @@ const Link = styled(Item)`
|
|||
|
||||
&:hover {
|
||||
/* background-color: #398995; */
|
||||
color: white !important;
|
||||
color: grey;
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 & {
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
||||
|
|
|
|||
|
|
@ -27,31 +27,33 @@ const Container = styled.div`
|
|||
border: 1px solid transparent;
|
||||
z-index: -2;
|
||||
box-sizing: border-box;
|
||||
border-radius: 1px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.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);
|
||||
padding: 1px 6px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: none;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
padding: 3px 6px 1px 6px;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
cursor: ew-resize;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
height: calc(100% - 4px);
|
||||
border-radius: 5px;
|
||||
border-radius: 0px;
|
||||
margin-bottom: 0px;
|
||||
text-align: center;
|
||||
font-variation-settings: 'wght' 200;
|
||||
|
||||
&:focus {
|
||||
cursor: text;
|
||||
|
|
@ -60,16 +62,17 @@ const Input = styled.input`
|
|||
|
||||
const FillIndicator = styled.div`
|
||||
position: absolute;
|
||||
inset: 3px 2px 4px;
|
||||
inset: 0px 0px 0px;
|
||||
transform: scale(var(--percentage), 1);
|
||||
transform-origin: top left;
|
||||
background-color: #2d5561;
|
||||
z-index: -1;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
background-color: #b4b4b4;
|
||||
z-index: 0;
|
||||
border-radius: 0px;
|
||||
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);
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -7,19 +7,21 @@ 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);
|
||||
padding: 1px 6px;
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
padding: 3px 6px 1px 6px;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
cursor: 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;
|
||||
margin-top: 10px;
|
||||
font-variation-settings: 'wght' 200;
|
||||
|
||||
&:hover {
|
||||
background-color: #10101042;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,7 @@ function Package(props: React.SVGProps<SVGSVGElement>) {
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M8.339 4.5l-2.055.644 4.451 1.393v2.748l-2.966.928-2.504-.783V6.738l2.42.758 2.055-.644-4.458-1.395L4 5.858v4.463L7.768 11.5 12 10.175V5.646L8.339 4.5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<circle cx="8" cy="8" r="4" fill="currentColor" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,22 +14,21 @@ const MenuContainer = styled.ul`
|
|||
position: absolute;
|
||||
min-width: ${minWidth}px;
|
||||
z-index: 10000;
|
||||
background: ${transparentize(0.2, '#111')};
|
||||
background: ${transparentize(0.0, '#d3d3d3')};
|
||||
backdrop-filter: blur(2px);
|
||||
color: white;
|
||||
color: black;
|
||||
list-style-type: none;
|
||||
padding: 2px 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
border-radius: 1px;
|
||||
cursor: default;
|
||||
${pointerEventsAutoInNormalMode};
|
||||
border-radius: 3px;
|
||||
border-radius: 9px;
|
||||
`
|
||||
|
||||
const MenuTitle = styled.div`
|
||||
padding: 4px 10px;
|
||||
border-bottom: 1px solid #6262626d;
|
||||
color: #adadadb3;
|
||||
color: #000000;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -14,22 +14,24 @@ const ItemContainer = styled.li<{enabled: boolean}>`
|
|||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
color: ${(props) => (props.enabled ? 'white' : '#8f8f8f')};
|
||||
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 {
|
||||
background-color: ${(props) =>
|
||||
props.enabled ? 'rgba(63, 174, 191, 0.75)' : 'initial'};
|
||||
props.enabled ? 'rgba(133, 133, 133, 0.75)' : 'initial'};
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue