Skip to content

Commit

Permalink
Theme / Inspector / Controls update (#1333)
Browse files Browse the repository at this point in the history
* update headings - remove superfluous colour

* update text/number input - remove fill, clearer arrows, label to left

* update navigator-item - change to subdued border

* update minimenu - remove theme references

* update color picker - remove ref to controlStyle

* update theme - remove reference to tertiaryForeground

* update inspector - make it use the inspectorBackground from theme

* update targetselector - remove nonstandard section

* Update left-pane.tsx

* update - various theme refactors

* update - tighter layout

* theme and controlstyles refactor / reduction

* Update pin-control.tsx

* Update gigantic-size-pins-subsection.tsx

* Update editor-component.tsx

* design(colorpicker) - restore outline

* wip(theme) - control status updates point to theme file

* Update control-status.ts

* more updates

* wip

* applying the color theme instead of hardcoded values

* updates to color theme

* further applying color theme

* Update theme.ts

* Update control-status.ts

* Update option-chain-control.tsx

* Update option-control.tsx

* Update component-section.tsx

* Update property-label.tsx

* Update number-input.tsx

* Update option-chain-control.tsx

* Update option-chain-control.tsx

* feature(theme) - add inverted theme colours

* feature(theme) - add interactivity for unset rows

* Update select-control.tsx

* Update select-control.tsx

* fix tests

Co-authored-by: Eniko Bakos-Demeter <[email protected]>
  • Loading branch information
maltenuhn and enidemi authored Jun 9, 2021
1 parent 81849b3 commit 4e5b3c8
Show file tree
Hide file tree
Showing 44 changed files with 439 additions and 714 deletions.
2 changes: 0 additions & 2 deletions editor/resources/editor/inspector.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
body {
--control-set-fontStyle: normal;
--control-disabled-fontStyle: italic;
--control-border-radius: 4px;
--control-focused-color: #027aff;
}

Expand Down
32 changes: 8 additions & 24 deletions editor/resources/editor/slider.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
align-items: center;
height: 100%;
width: 100%;
border-radius: 6px;
-ms-touch-action: none;
touch-action: none;
box-sizing: border-box;
Expand All @@ -29,21 +28,19 @@
border-radius: 6px;
}
.rc-slider-handle {
border-radius: 50%;
border-radius: 2px;
-ms-touch-action: pan-x;
touch-action: pan-x;
width: 8px;
height: 8px;
width: 4px;
height: 13px;
position: relative;
margin-left: -4px;
margin-left: -2px;
border: none;
background-color: #fff;
box-shadow: 0px 1px 3px #c3c3c3, 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
background-color: #b3b3b3;
box-shadow: 0px 0px 0px 1px hsl(0, 0%, 96%);
}
.rc-slider-handle:focus {
outline: none;
box-shadow: 0px 1px 3px #c3c3c3, 0px 0px 1px rgba(255, 255, 255, 0.5) inset,
0 0 0 1px var(--control-focused-color);
}
.rc-slider-mark {
position: absolute;
Expand All @@ -70,9 +67,9 @@
}
.rc-slider-dot {
border: none;
width: 4px;
width: 2px;
height: 4px;
border-radius: 50%;
border-radius: 1px;
margin-left: -2px;
position: absolute;
vertical-align: middle;
Expand Down Expand Up @@ -112,19 +109,6 @@
display: none;
}

.widget-status-controlled-unset .rc-slider .rc-slider-handle {
background-color: #f5f5f5;
}

.widget-status-controlled-mixed .rc-slider .rc-slider-handle {
display: none;
}
.widget-status-controlled .rc-slider .rc-slider-rail,
.widget-status-controlled .rc-slider .rc-slider-rail::before,
.widget-status-controlled .rc-slider .rc-slider-rail::after {
background-color: #0e8dde;
}

.rc-slider-vertical {
width: 14px;
height: 100%;
Expand Down
3 changes: 1 addition & 2 deletions editor/src/components/canvas/controls/formula-bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,15 +97,14 @@ export const FormulaBar = betterReactMemo('FormulaBar', () => {
height: '100%',
backgroundColor: colorTheme.canvasBackground.value,
borderRadius: 5,
color: colorTheme.inputColor.value,
transition: 'background-color .1s ease-in-out',
'&:hover': {
'&:not(:disabled)': {
boxShadow: 'inset 0px 0px 0px 1px lightgrey',
},
},
'&:focus': {
backgroundColor: colorTheme.inputBackground.value,
backgroundColor: colorTheme.bg0.value,
boxShadow: 'inset 0px 0px 0px 1px lightgrey',
},
}}
Expand Down
1 change: 1 addition & 0 deletions editor/src/components/canvas/design-panel-root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,7 @@ export const DesignPanelRoot = betterReactMemo('DesignPanelRoot', (props: Design
alignItems: 'stretch',
flexDirection: 'column',
width: UtopiaTheme.layout.inspectorWidth,
backgroundColor: UtopiaTheme.color.inspectorBackground.value,
flexGrow: 0,
flexShrink: 0,
overflowY: 'scroll',
Expand Down
3 changes: 2 additions & 1 deletion editor/src/components/canvas/right-menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
Tooltip,
LargerIcons,
FlexColumn,
colorTheme,
} from '../../uuiui'
import { betterReactMemo, Utils } from '../../uuiui-deps'
import { MenuTile } from '../menubar/menubar'
Expand Down Expand Up @@ -188,7 +189,7 @@ export const RightMenu = betterReactMemo('RightMenu', (props: RightMenuProps) =>
id='canvas-menu'
style={{
alignSelf: 'stretch',
borderLeft: `1px solid #d3d3d369`,
borderLeft: `1px solid ${colorTheme.neutralBorder.value}`,
width: 38,
}}
>
Expand Down
2 changes: 1 addition & 1 deletion editor/src/components/code-editor/code-problems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ export const CodeEditorTabPane = betterReactMemo<CodeEditorTabPaneProps>(
},
}}
style={{
backgroundColor: colorTheme.emphasizedInvertedBackground.value,
backgroundColor: colorTheme.neutralInvertedBackground.value,
color: 'white',
height: '100%',
// There probably is a better fix but I've run out of goats to sacrifice
Expand Down
2 changes: 1 addition & 1 deletion editor/src/components/editor/editor-component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,7 @@ export const EditorComponentInner = betterReactMemo(
flexGrow: 1,
alignItems: 'stretch',
borderRight: `1px solid ${UtopiaTheme.color.neutralBorder.value}`,
backgroundColor: UtopiaTheme.color.neutralBackground.value,
}}
>
<SimpleFlexRow
Expand All @@ -288,7 +289,6 @@ export const EditorComponentInner = betterReactMemo(
alignItems: 'stretch',
justifyContent: 'stretch',
overflowX: 'hidden',
backgroundColor: UtopiaTheme.color.slightlyEmphasizedBackground.value,
}}
>
<OpenFileEditor />
Expand Down
2 changes: 1 addition & 1 deletion editor/src/components/editor/insertmenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ export const InsertGroup: React.FunctionComponent<InsertGroupProps> = betterReac
{props.label}
</div>
{props.subLabel == null ? null : (
<div style={{ color: colorTheme.tertiaryForeground.value, paddingLeft: 10 }}>
<div style={{ color: colorTheme.subduedForeground.value, paddingLeft: 10 }}>
{props.subLabel}
</div>
)}
Expand Down
2 changes: 0 additions & 2 deletions editor/src/components/editor/minimenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,7 @@ export const MiniMenuButton: React.StatelessComponent<MiniMenuButtonProps> = (pr
const primaryStyle = {
borderRadius: '1',
padding: '2px',
backgroundColor: colorTheme.buttonBackground.value,
fontWeight: 500,
color: colorTheme.tertiaryForeground.value,
}
const disabledStyle = isDisabled ? { opacity: 0.5 } : {}

Expand Down
Loading

0 comments on commit 4e5b3c8

Please sign in to comment.