Add a gap between shapes and lock (#569)
* Add a gap between shapes and lock The lock is a different type as the rest of the shapes, so we should visually separate it. * redesign lock icon Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
parent
141b7409a2
commit
263fef4eaa
@ -43,7 +43,7 @@ export function LockIcon(props: LockIconProps) {
|
|||||||
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
|
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<label className={`ToolIcon ${sizeCn}`} title={props.title}>
|
<label className={`ToolIcon ToolIcon__lock ${sizeCn}`} title={props.title}>
|
||||||
<input
|
<input
|
||||||
className="ToolIcon_type_checkbox"
|
className="ToolIcon_type_checkbox"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
|
@ -60,3 +60,25 @@
|
|||||||
box-shadow: 0 0 0 2px #a5d8ff;
|
box-shadow: 0 0 0 2px #a5d8ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ToolIcon.ToolIcon__lock {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
|
||||||
|
.ToolIcon__icon {
|
||||||
|
background-color: transparent;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
&:hover .ToolIcon__icon {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
&:active .ToolIcon__icon {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
&:focus .ToolIcon__icon {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -481,21 +481,6 @@ export class App extends React.Component<any, AppState> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private renderShapeLock() {
|
|
||||||
const { elementLocked } = this.state;
|
|
||||||
return (
|
|
||||||
<LockIcon
|
|
||||||
checked={elementLocked}
|
|
||||||
onChange={() => {
|
|
||||||
this.setState({
|
|
||||||
elementLocked: !elementLocked,
|
|
||||||
elementType: elementLocked ? "selection" : this.state.elementType,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private renderShapesSwitcher() {
|
private renderShapesSwitcher() {
|
||||||
const { t } = this.props;
|
const { t } = this.props;
|
||||||
|
|
||||||
@ -525,7 +510,6 @@ export class App extends React.Component<any, AppState> {
|
|||||||
></ToolButton>
|
></ToolButton>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{this.renderShapeLock()}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -623,10 +607,23 @@ export class App extends React.Component<any, AppState> {
|
|||||||
</div>
|
</div>
|
||||||
</Stack.Col>
|
</Stack.Col>
|
||||||
<Stack.Col gap={4} align="start">
|
<Stack.Col gap={4} align="start">
|
||||||
<Island padding={1}>
|
<Stack.Row gap={1}>
|
||||||
<h2 className="visually-hidden">Shapes</h2>
|
<Island padding={1}>
|
||||||
<Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
|
<h2 className="visually-hidden">Shapes</h2>
|
||||||
</Island>
|
<Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
|
||||||
|
</Island>
|
||||||
|
<LockIcon
|
||||||
|
checked={this.state.elementLocked}
|
||||||
|
onChange={() => {
|
||||||
|
this.setState({
|
||||||
|
elementLocked: !this.state.elementLocked,
|
||||||
|
elementType: this.state.elementLocked
|
||||||
|
? "selection"
|
||||||
|
: this.state.elementType,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Stack.Row>
|
||||||
</Stack.Col>
|
</Stack.Col>
|
||||||
<div />
|
<div />
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user