{
alignItems: 'center',
height: UtopiaTheme.layout.rowHeight.normal,
background: colorTheme.inspectorBackground.value,
- padding: '8px 0',
+ padding: '8px 0px',
+ flexShrink: 0,
}}
>
((props: InspectorProps) => {
'Inspector shouldShowGridCellSection',
)
+ const shouldShowContainerSection =
+ selectedViews.length > 0 && inspectorPreferences.includes('layout')
+
function renderInspectorContents() {
return (
@@ -450,9 +455,18 @@ export const Inspector = React.memo((props: InspectorProps) => {
paddingBottom: 50,
}}
>
+ {rootElementIsSelected ? (
+
+ ) : (
+ when(
+ shouldShowAlignmentButtons,
+ ,
+ )
+ )}
{anyComponents || multiselectedContract === 'fragment' ? (
) : null}
+
{unless(
shouldHideInspectorSections,
((props: InspectorProps) => {
{when(
shouldShowStyleSectionContents,
<>
- {rootElementIsSelected ? (
-
- ) : (
- when(
- shouldShowAlignmentButtons,
- ,
- )
- )}
{when(multiselectedContract === 'fragment', )}
{when(
multiselectedContract !== 'fragment' && shouldShowSimplifiedLayoutSection,
// Position and Sizing sections are shown if Frame or Group is selected
<>
+ {when(shouldShowContainerSection, )}
,
)}
diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
index e2ebe28ee57c..18c84925e48c 100644
--- a/editor/src/components/inspector/sections/component-section/component-section.tsx
+++ b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -1534,7 +1534,6 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
padded={false}
variant='<----------1fr---------><-auto->'
style={{
- borderTop: `1px solid ${colorTheme.seperator.value}`,
padding: `0 ${UtopiaTheme.layout.inspectorXPadding}px`,
alignItems: 'center',
gap: 8,
diff --git a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx
index 83b0f14b07f2..195ef10d7705 100644
--- a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx
+++ b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx
@@ -393,7 +393,6 @@ export const PaddingControl = React.memo(() => {
mode={modeToUse}
onCycleMode={onCycleMode}
values={values}
- cycleModePosition='back'
/>
)
})
diff --git a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
index 1093c72e545e..1cdac1268c4c 100644
--- a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
+++ b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
@@ -102,8 +102,6 @@ export interface SplitChainedNumberInputValues {
}
}
-export type CycleModePosition = 'front' | 'back'
-
export interface SplitChainedNumberInputProps {
name: string
mode: ControlMode | null
@@ -131,7 +129,6 @@ export interface SplitChainedNumberInputProps {
values: SplitChainedNumberInputValues
numberType: CSSNumberType
eventHandler: SplitChainedNumberInputEventHandler
- cycleModePosition?: CycleModePosition
}
export type SplitChainedNumberInputEventHandler = (
@@ -460,7 +457,6 @@ const whenCSSNumber = (fn: (v: CSSNumber | null) => any) => (v: UnknownOrEmptyIn
export const SplitChainedNumberInput = React.memo((props: SplitChainedNumberInputProps) => {
const { name, canvasControls, numberType, eventHandler, labels, values } = props
- const cycleModePosition = props.cycleModePosition ?? 'front'
const setHoveredCanvasControls = useSetAtom(InspectorHoveredCanvasControls)
const setFocusedCanvasControls = useSetAtom(InspectorFocusedCanvasControls)
@@ -524,7 +520,7 @@ export const SplitChainedNumberInput = React.memo((props: SplitChainedNumberInpu
case 'one-value':
return [
{
- style: { width: '25%' },
+ style: { width: '50%' },
value: values.oneValue?.value,
DEPRECATED_labelBelow: labels?.oneValue ?? '↔',
minimum: 0,
@@ -555,58 +551,58 @@ export const SplitChainedNumberInput = React.memo((props: SplitChainedNumberInpu
case 'per-direction':
return [
{
- style: { width: '25%' },
- value: values.twoValue.horizontal?.value,
- DEPRECATED_labelBelow: labels?.horizontal ?? 'H',
+ style: { width: '48%' },
+ value: values.twoValue.vertical?.value,
+ DEPRECATED_labelBelow: labels?.vertical ?? 'V',
minimum: 0,
- onSubmitValue: onSubmitValueHorizontal(false),
- onTransientSubmitValue: onSubmitValueHorizontal(true),
+ onSubmitValue: onSubmitValueVertical(false),
+ onTransientSubmitValue: onSubmitValueVertical(true),
numberType: numberType,
- controlStatus: values.twoValue.horizontal?.controlStatus,
+ controlStatus: values.twoValue.vertical?.controlStatus,
defaultUnitToHide: 'px',
onMouseEnter: onMouseEnterForControls([
- rightCanvasControls?.onHover,
- leftCanvasControls?.onHover,
+ topCanvasControls?.onHover,
+ bottomCanvasControls?.onHover,
]),
onMouseLeave: onMouseLeave,
inputProps: {
onFocus: onFocusForControls([
- rightCanvasControls?.onFocus,
- leftCanvasControls?.onFocus,
+ topCanvasControls?.onFocus,
+ bottomCanvasControls?.onFocus,
]),
onBlur: onBlur,
},
- testId: `${name}-H`,
+ testId: `${name}-V`,
},
{
- style: { width: '25%' },
- value: values.twoValue.vertical?.value,
- DEPRECATED_labelBelow: labels?.vertical ?? 'V',
+ style: { width: '48%' },
+ value: values.twoValue.horizontal?.value,
+ DEPRECATED_labelBelow: labels?.horizontal ?? 'H',
minimum: 0,
- onSubmitValue: onSubmitValueVertical(false),
- onTransientSubmitValue: onSubmitValueVertical(true),
+ onSubmitValue: onSubmitValueHorizontal(false),
+ onTransientSubmitValue: onSubmitValueHorizontal(true),
numberType: numberType,
- controlStatus: values.twoValue.vertical?.controlStatus,
+ controlStatus: values.twoValue.horizontal?.controlStatus,
defaultUnitToHide: 'px',
onMouseEnter: onMouseEnterForControls([
- topCanvasControls?.onHover,
- bottomCanvasControls?.onHover,
+ rightCanvasControls?.onHover,
+ leftCanvasControls?.onHover,
]),
onMouseLeave: onMouseLeave,
inputProps: {
onFocus: onFocusForControls([
- topCanvasControls?.onFocus,
- bottomCanvasControls?.onFocus,
+ rightCanvasControls?.onFocus,
+ leftCanvasControls?.onFocus,
]),
onBlur: onBlur,
},
- testId: `${name}-V`,
+ testId: `${name}-H`,
},
]
case 'per-side':
return [
{
- style: { width: '25%' },
+ style: { width: '48%' },
value: values.fourValue.top?.value,
DEPRECATED_labelBelow: labels?.top ?? 'T',
minimum: 0,
@@ -624,7 +620,7 @@ export const SplitChainedNumberInput = React.memo((props: SplitChainedNumberInpu
testId: `${name}-T`,
},
{
- style: { width: '25%' },
+ style: { width: '48%' },
value: values.fourValue.right?.value,
DEPRECATED_labelBelow: labels?.right ?? 'R',
minimum: 0,
@@ -642,40 +638,40 @@ export const SplitChainedNumberInput = React.memo((props: SplitChainedNumberInpu
testId: `${name}-R`,
},
{
- style: { width: '25%' },
- value: values.fourValue.bottom?.value,
- DEPRECATED_labelBelow: labels?.bottom ?? 'B',
+ style: { width: '48%' },
+ value: values.fourValue.left?.value,
+ DEPRECATED_labelBelow: labels?.left ?? 'L',
minimum: 0,
- onSubmitValue: onSubmitValueBottom(false),
- onTransientSubmitValue: onSubmitValueBottom(true),
- controlStatus: values.fourValue.bottom?.controlStatus,
+ onSubmitValue: onSubmitValueLeft(false),
+ onTransientSubmitValue: onSubmitValueLeft(true),
+ controlStatus: values.fourValue.left?.controlStatus,
numberType: numberType,
defaultUnitToHide: 'px',
- onMouseEnter: onMouseEnterForControls([bottomCanvasControls?.onHover]),
+ onMouseEnter: onMouseEnterForControls([leftCanvasControls?.onHover]),
onMouseLeave: onMouseLeave,
inputProps: {
- onFocus: onFocusForControls([bottomCanvasControls?.onFocus]),
+ onFocus: onFocusForControls([leftCanvasControls?.onFocus]),
onBlur: onBlur,
},
- testId: `${name}-B`,
+ testId: `${name}-L`,
},
{
- style: { width: '25%' },
- value: values.fourValue.left?.value,
- DEPRECATED_labelBelow: labels?.left ?? 'L',
+ style: { width: '48%' },
+ value: values.fourValue.bottom?.value,
+ DEPRECATED_labelBelow: labels?.bottom ?? 'B',
minimum: 0,
- onSubmitValue: onSubmitValueLeft(false),
- onTransientSubmitValue: onSubmitValueLeft(true),
- controlStatus: values.fourValue.left?.controlStatus,
+ onSubmitValue: onSubmitValueBottom(false),
+ onTransientSubmitValue: onSubmitValueBottom(true),
+ controlStatus: values.fourValue.bottom?.controlStatus,
numberType: numberType,
defaultUnitToHide: 'px',
- onMouseEnter: onMouseEnterForControls([leftCanvasControls?.onHover]),
+ onMouseEnter: onMouseEnterForControls([bottomCanvasControls?.onHover]),
onMouseLeave: onMouseLeave,
inputProps: {
- onFocus: onFocusForControls([leftCanvasControls?.onFocus]),
+ onFocus: onFocusForControls([bottomCanvasControls?.onFocus]),
onBlur: onBlur,
},
- testId: `${name}-L`,
+ testId: `${name}-B`,
},
]
case null:
@@ -731,7 +727,7 @@ export const SplitChainedNumberInput = React.memo((props: SplitChainedNumberInpu
{modeIcon}
@@ -745,15 +741,17 @@ export const SplitChainedNumberInput = React.memo((props: SplitChainedNumberInpu
display: 'flex',
flexDirection: 'row',
gap: 10,
+ justifyContent: 'space-between',
+ flex: 1,
}}
>
- {when(cycleModePosition === 'front', cycleModeControl)}
- {when(cycleModePosition === 'back', cycleModeControl)}
+ {cycleModeControl}