smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add a gap between shapes and lock (#569)

Browse source 
* 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:
Christopher Chedeau 2020-01-26 19:01:56 +00:00 • committed by GitHub
parent 141b7409a2
commit 263fef4eaa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/index.tsx
View file

@ -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() {
const { t } = this.props;
@ -525,7 +510,6 @@ export class App extends React.Component<any, AppState> {
></ToolButton>
);
})}
{this.renderShapeLock()}
</>
);
}
@ -623,10 +607,23 @@ export class App extends React.Component<any, AppState> {
</div>
</Stack.Col>
<Stack.Col gap={4} align="start">
<Island padding={1}>
<h2 className="visually-hidden">Shapes</h2>
<Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
</Island>
<Stack.Row gap={1}>
<Island padding={1}>
<h2 className="visually-hidden">Shapes</h2>
<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>
<div />
</div>