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

Fixes icons, direction for tertiary buttons

Browse source
This commit is contained in:
Steve Ruiz 2021-07-10 13:14:00 +01:00
parent 4efa1092f1
commit 9d462e9e12
7 changed files with 26 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/icons/redo.tsx
View file

@ -3,8 +3,7 @@ import * as React from 'react'
function SvgRedo(props: React.SVGProps<SVGSVGElement>): JSX.Element {
return (
<svg
width={15}
height={15}
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}

3
components/icons/trash.tsx
View file

@ -3,8 +3,7 @@ import * as React from 'react'
function SvgTrash(props: React.SVGProps<SVGSVGElement>): JSX.Element {
return (
<svg
width={15}
height={15}
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}

3
components/icons/undo.tsx
View file

@ -3,8 +3,7 @@ import * as React from 'react'
function SvgUndo(props: React.SVGProps<SVGSVGElement>): JSX.Element {
return (
<svg
width={15}
height={15}
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}

64
components/tools-panel/shared.tsx
View file

@ -1,39 +1,6 @@
import Tooltip from 'components/tooltip'
import styled from 'styles'
// small: {
// height: 32,
// width: 32,
// '& svg:nth-of-type(1)': {
// height: '16px',
// width: '16px',
// },
// },
// medium: {
// height: 44,
// width: 44,
// '& svg:nth-of-type(1)': {
// height: '18px',
// width: '18px',
// },
// },
// large: {
// height: 44,
// width: 44,
// '& svg:nth-of-type(1)': {
// height: '20px',
// width: '20px',
// },
// },
// tertiary: {
// height: 32,
// width: 44,
// '& svg:nth-of-type(1)': {
// height: '16px',
// width: '16px',
// },
// },
export const ToolButton = styled('button', {
position: 'relative',
height: '32px',
@ -252,22 +219,31 @@ export function TertiaryButton({
)
}
export const TertiaryButtonsContainer = styled('div', {
export const Container = styled('div', {
backgroundColor: '$panel',
border: '1px solid $panel',
borderRadius: '4px',
overflow: 'hidden',
boxShadow: '0px 2px 4px rgba(0,0,0,.16)',
display: 'flex',
height: 'fit-content',
padding: 2,
pointerEvents: 'all',
position: 'relative',
userSelect: 'none',
zIndex: 200,
minWidth: 36,
border: '1px solid $panel',
boxShadow: '0px 2px 4px rgba(0,0,0,.10)',
padding: 2,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
})
'& svg': {
strokeWidth: 0,
export const TertiaryButtonsContainer = styled(Container, {
variants: {
bp: {
mobile: {
alignItems: 'center',
flexDirection: 'column',
},
small: {
alignItems: 'center',
flexDirection: 'row',
},
},
},
})

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

@ -8,7 +8,7 @@ import {
SquareIcon,
TextIcon,
} from '@radix-ui/react-icons'
import { PrimaryButton, SecondaryButton } from './shared'
import { PrimaryButton, SecondaryButton, Container } from './shared'
import React from 'react'
import state, { useSelector } from 'state'
import styled from 'styles'
@ -114,19 +114,6 @@ const ToolsPanelContainer = styled('div', {
gap: 8,
})
const Container = styled('div', {
position: 'relative',
backgroundColor: '$panel',
borderRadius: '4px',
border: '1px solid $panel',
pointerEvents: 'all',
userSelect: 'none',
height: 'fit-content',
display: 'flex',
padding: 2,
boxShadow: '0px 2px 4px rgba(0,0,0,.16)',
})
const CenterWrap = styled('div', {
gridRow: 1,
gridColumn: 2,

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

@ -8,7 +8,7 @@ const clear = () => state.send('CLEARED_PAGE')
export default function UndoRedo(): JSX.Element {
return (
<TertiaryButtonsContainer>
<TertiaryButtonsContainer bp={{ '@initial': 'mobile', '@sm': 'small' }}>
<TertiaryButton label="Undo" onClick={undo}>
<Undo />
</TertiaryButton>

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

@ -10,7 +10,7 @@ const zoomToActual = () => state.send('ZOOMED_TO_ACTUAL')
export default function Zoom(): JSX.Element {
return (
<TertiaryButtonsContainer>
<TertiaryButtonsContainer bp={{ '@initial': 'mobile', '@sm': 'small' }}>
<TertiaryButton label="Zoom Out" onClick={zoomOut}>
<ZoomOutIcon />
</TertiaryButton>