More style tweaks
This commit is contained in:
Aria Minaei
parent
5bf5fc7076
commit
541b6287e2
5 changed files with 53 additions and 30 deletions
|
|
@ -3,6 +3,11 @@ import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
|
|||
import React, {useCallback} from 'react'
|
||||
import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
|
||||
import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const Input = styled.input`
|
||||
margin-left: 6px;
|
||||
`
|
||||
|
||||
const BooleanPropEditor: React.FC<{
|
||||
propConfig: PropTypeConfig_Boolean
|
||||
|
|
@ -20,7 +25,7 @@ const BooleanPropEditor: React.FC<{
|
|||
|
||||
return (
|
||||
<SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
|
||||
<input type="checkbox" checked={stuff.value} onChange={onChange} />
|
||||
<Input type="checkbox" checked={stuff.value} onChange={onChange} />
|
||||
</SingleRowPropEditor>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {GoChevronRight} from 'react-icons/go'
|
|||
import styled from 'styled-components'
|
||||
import DeterminePropEditor from './DeterminePropEditor'
|
||||
import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors'
|
||||
import {labelText} from './utils/SingleRowPropEditor'
|
||||
import {propNameText} from './utils/SingleRowPropEditor'
|
||||
|
||||
const Container = styled.div<{depth: number}>`
|
||||
--depth: ${(props) => props.depth};
|
||||
|
|
@ -37,7 +37,7 @@ const IconContainer = styled.div`
|
|||
const PropName = styled.div`
|
||||
margin-right: 4px;
|
||||
cursor: default;
|
||||
${labelText}
|
||||
${propNameText}
|
||||
`
|
||||
|
||||
const SubProps = styled.div<{depth: number; lastSubIsComposite: boolean}>`
|
||||
|
|
|
|||
|
|
@ -9,38 +9,46 @@ import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/Objec
|
|||
import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
|
||||
import styled, {css} from 'styled-components'
|
||||
|
||||
export const labelText = css`
|
||||
export const propNameText = css`
|
||||
font-weight: 300;
|
||||
font-size: 11px;
|
||||
color: #9a9a9a;
|
||||
text-shadow: 0.5px 0.5px 2px black;
|
||||
text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
`
|
||||
|
||||
const Container = styled.div`
|
||||
const Row = styled.div`
|
||||
display: flex;
|
||||
height: 30px;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
const Label = styled.label`
|
||||
const PropNameContainer = styled.div`
|
||||
margin-right: 4px;
|
||||
text-align: right;
|
||||
${labelText};
|
||||
flex: 0 0;
|
||||
flex-basis: 106px;
|
||||
|
||||
${propNameText};
|
||||
`
|
||||
const Body = styled.label`
|
||||
|
||||
const ControlsContainer = styled.div`
|
||||
flex-basis: 8px;
|
||||
flex: 0 0;
|
||||
`
|
||||
|
||||
const InputContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
justify-content: stretch;
|
||||
padding: 0 16px 0 2px;
|
||||
box-sizing: border-box;
|
||||
width: 140px;
|
||||
height: 100%;
|
||||
margin-right: 16px;
|
||||
margin-left: 4px;
|
||||
flex: 1 1;
|
||||
`
|
||||
|
||||
export const SingleRowPropEditor: React.FC<{
|
||||
|
|
@ -50,27 +58,28 @@ export const SingleRowPropEditor: React.FC<{
|
|||
}> = ({propConfig, pointerToProp, stuff, children}) => {
|
||||
const label = propConfig.label ?? last(getPointerParts(pointerToProp).path)
|
||||
|
||||
const [labelRef, labelNode] = useRefAndState<HTMLLabelElement | null>(null)
|
||||
const [propNameContainerRef, propNameContainer] =
|
||||
useRefAndState<HTMLDivElement | null>(null)
|
||||
|
||||
const [contextMenu] = useContextMenu(labelNode, {
|
||||
const [contextMenu] = useContextMenu(propNameContainer, {
|
||||
items: stuff.contextMenuItems,
|
||||
})
|
||||
|
||||
const color = shadeToColor[stuff.shade]
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Row>
|
||||
{contextMenu}
|
||||
<Label
|
||||
ref={labelRef}
|
||||
<PropNameContainer
|
||||
ref={propNameContainerRef}
|
||||
title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
|
||||
'.',
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</Label>
|
||||
{stuff.controlIndicators}
|
||||
<Body>{children}</Body>
|
||||
</Container>
|
||||
</PropNameContainer>
|
||||
<ControlsContainer>{stuff.controlIndicators}</ControlsContainer>
|
||||
<InputContainer>{children}</InputContainer>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,8 @@ import DraggableArea from '@theatre/studio/uiComponents/DraggableArea'
|
|||
type IMode = IState['mode']
|
||||
|
||||
const Container = styled.div<{mode: IMode}>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
const Input = styled.input`
|
||||
|
|
@ -65,6 +64,7 @@ const BasicNumberEditor: React.FC<{
|
|||
temporarilySetValue: (v: number) => void
|
||||
discardTemporaryValue: () => void
|
||||
permenantlySetValue: (v: number) => void
|
||||
className?: string
|
||||
}> = (propsA) => {
|
||||
const [stateA, setState] = useState<IState>({mode: 'noFocus'})
|
||||
|
||||
|
|
@ -238,7 +238,7 @@ const BasicNumberEditor: React.FC<{
|
|||
)
|
||||
|
||||
return (
|
||||
<Container mode={refs.current.state.mode}>
|
||||
<Container mode={refs.current.state.mode} className={propsA.className}>
|
||||
<DraggableArea
|
||||
key="draggableArea"
|
||||
onDragStart={callbacks.transitionToDraggingMode}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import React, {useCallback} from 'react'
|
|||
import styled from 'styled-components'
|
||||
|
||||
const Select = styled.select`
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
|
|
@ -16,9 +16,17 @@ const Select = styled.select`
|
|||
height: calc(100% - 4px);
|
||||
border-radius: 2px;
|
||||
|
||||
/** Credit: https://github.com/tailwindlabs/tailwindcss-forms/blob/39946dd5d1c4cd980a3e8fd2a0c597f962fe285e/src/index.js#L86 */
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 4px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em 1.5em;
|
||||
color-adjust: exact;
|
||||
appearance: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: ${darken(0.9, theme.panel.bg)};
|
||||
background-color: ${darken(0.9, theme.panel.bg)};
|
||||
border: 1px solid ${lighten(0.1, theme.panel.bg)};
|
||||
}
|
||||
`
|
||||
|
|
@ -27,7 +35,8 @@ const BasicSelectEditor: React.FC<{
|
|||
value: string
|
||||
onChange: (val: string) => void
|
||||
options: Record<string, string>
|
||||
}> = ({value, onChange, options}) => {
|
||||
className?: string
|
||||
}> = ({value, onChange, options, className}) => {
|
||||
const _onChange = useCallback(
|
||||
(el: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
onChange(String(el.target.value))
|
||||
|
|
@ -35,7 +44,7 @@ const BasicSelectEditor: React.FC<{
|
|||
[onChange],
|
||||
)
|
||||
return (
|
||||
<Select value={value} onChange={_onChange}>
|
||||
<Select className={className} value={value} onChange={_onChange}>
|
||||
{Object.keys(options).map((key, i) => (
|
||||
<option key={'option-' + i} value={key}>
|
||||
{options[key]}
|
||||
|
|
|
|||
Loading…
Reference in a new issue