PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

improves mobile layout

Browse source
This commit is contained in:
Steve Ruiz 2021-06-02 17:11:42 +01:00
parent 0fe036f5e4
commit 492d3e9769
5 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/shared.tsx
View file

@ -40,8 +40,8 @@ export const IconButton = styled('button', {
height: 44,
width: 44,
'& > svg': {
height: '16px',
width: '16px',
height: '20px',
width: '20px',
},
},
large: {

28
components/tools-panel/tools-panel.tsx
View file

@ -58,7 +58,7 @@ export default function ToolsPanel() {
<Container>
<IconButton
name="select"
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'small', '@sm': 'small', '@md': 'large' }}
onClick={selectSelectTool}
isActive={activeTool === 'select'}
>
@ -68,7 +68,7 @@ export default function ToolsPanel() {
<Container>
<IconButton
name={ShapeType.Draw}
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
onClick={selectDrawTool}
isActive={activeTool === ShapeType.Draw}
>
@ -76,7 +76,7 @@ export default function ToolsPanel() {
</IconButton>
<IconButton
name={ShapeType.Rectangle}
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
onClick={selectRectangleTool}
isActive={activeTool === ShapeType.Rectangle}
>
@ -84,7 +84,7 @@ export default function ToolsPanel() {
</IconButton>
<IconButton
name={ShapeType.Circle}
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
onClick={selectEllipseTool}
isActive={activeTool === ShapeType.Ellipse}
>
@ -92,7 +92,7 @@ export default function ToolsPanel() {
</IconButton>
<IconButton
name={ShapeType.Arrow}
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
onClick={selectArrowTool}
isActive={activeTool === ShapeType.Arrow}
>
@ -100,7 +100,7 @@ export default function ToolsPanel() {
</IconButton>
{/* <IconButton
name={ShapeType.Circle}
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
onClick={selectCircleTool}
isActive={activeTool === ShapeType.Circle}
>
@ -108,7 +108,7 @@ export default function ToolsPanel() {
</IconButton> */}
{/* <IconButton
name={ShapeType.Line}
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
onClick={selectLineTool}
isActive={activeTool === ShapeType.Line}
>
@ -116,7 +116,7 @@ export default function ToolsPanel() {
</IconButton>
<IconButton
name={ShapeType.Ray}
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
onClick={selectRayTool}
isActive={activeTool === ShapeType.Ray}
>
@ -124,7 +124,7 @@ export default function ToolsPanel() {
</IconButton>
<IconButton
name={ShapeType.Dot}
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
onClick={selectDotTool}
isActive={activeTool === ShapeType.Dot}
>
@ -133,14 +133,14 @@ export default function ToolsPanel() {
</Container>
<Container>
<IconButton
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'small', '@sm': 'small', '@md': 'large' }}
onClick={selectToolLock}
>
{isToolLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
</IconButton>
{isPenLocked && (
<IconButton
size={{ '@sm': 'small', '@md': 'large' }}
size={{ '@initial': 'small', '@sm': 'small', '@md': 'large' }}
onClick={selectToolLock}
>
<Pencil2Icon />
@ -161,7 +161,7 @@ const OuterContainer = styled('div', {
padding: '0 8px 12px 8px',
width: '100%',
display: 'flex',
alignItems: 'center',
alignItems: 'flex-end',
justifyContent: 'center',
flexWrap: 'wrap',
gap: 16,
@ -170,15 +170,17 @@ const OuterContainer = styled('div', {
const Flex = styled('div', {
display: 'flex',
justifyContent: 'space-between',
width: '100%',
padding: '0 4px',
justifyContent: 'space-between',
alignItems: 'flex-end',
variants: {
size: {
small: {
width: 'auto',
padding: '0',
justifyContent: 'center',
'& > *:nth-child(n+2)': {
marginLeft: 16,
},

3
components/tools-panel/undo-redo.tsx
View file

@ -38,6 +38,7 @@ const Container = styled('div', {
boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
display: 'flex',
padding: 4,
flexDirection: 'column',
'& svg': {
height: 13,
@ -48,6 +49,8 @@ const Container = styled('div', {
size: {
small: {
bottom: 12,
flexDirection: 'row',
alignItems: 'center',
},
},
},

18
components/tools-panel/zoom.tsx
View file

@ -31,6 +31,11 @@ function ZoomCounter() {
)
}
const ZoomButton = styled(IconButton, {
fontSize: '$0',
padding: 8,
})
const Container = styled('div', {
position: 'absolute',
left: 12,
@ -46,6 +51,8 @@ const Container = styled('div', {
boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
display: 'flex',
padding: 4,
flexDirection: 'column',
alignItems: 'center',
'& svg': {
strokeWidth: 0,
@ -55,13 +62,12 @@ const Container = styled('div', {
size: {
small: {
bottom: 12,
flexDirection: 'row',
alignItems: 'center',
[`& ${ZoomButton}`]: {
width: 44,
},
},
},
},
})
const ZoomButton = styled(IconButton, {
fontSize: '$0',
padding: 8,
width: 44,
})

4
lib/shape-utils/index.tsx
View file

@ -5,10 +5,7 @@ import {
Corner,
Edge,
ShapeStyles,
ShapeHandle,
ShapeBinding,
BaseShape,
ShapeSpecificProps,
Mutable,
} from 'types'
import { v4 as uuid } from 'uuid'
@ -26,7 +23,6 @@ import {
getBoundsFromPoints,
getRotatedCorners,
} from 'utils/utils'
import shape from 'components/canvas/shape'
import {
boundsCollidePolygon,
boundsContainPolygon,