[Improvement] Share zone styling (#2628)

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Tweaked user avatar size.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Mime Čuvalo 2024-01-25 20:29:25 +00:00 committed by GitHub
parent 8fffd87a4f
commit 2330effea9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 67 additions and 30 deletions

View file

@ -1,26 +1,18 @@
import * as Popover from '@radix-ui/react-popover'
import {
Button,
useActions,
useBreakpoint,
useContainer,
useEditor,
useTranslation,
} from '@tldraw/tldraw'
import { Button, useActions, useContainer, useEditor, useTranslation } from '@tldraw/tldraw'
import React, { useState } from 'react'
import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen'
import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'
import { getSaveFileCopyAction } from '../utils/useFileSystem'
import { useHandleUiEvents } from '../utils/useHandleUiEvent'
import { ShareButton } from './ShareButton'
export const ExportMenu = React.memo(function ExportMenu() {
const { [SHARE_PROJECT_ACTION]: shareProject, [SHARE_SNAPSHOT_ACTION]: shareSnapshot } =
useActions()
const container = useContainer()
const msg = useTranslation()
const breakpoint = useBreakpoint()
const handleUiEvent = useHandleUiEvents()
const showIcon = breakpoint < 5
const editor = useEditor()
const saveFileCopyAction = getSaveFileCopyAction(editor, handleUiEvent)
const [didCopySnapshotLink, setDidCopySnapshotLink] = useState(false)
@ -31,13 +23,7 @@ export const ExportMenu = React.memo(function ExportMenu() {
return (
<Popover.Root open={isOpen} onOpenChange={onOpenChange}>
<Popover.Trigger dir="ltr" asChild>
<Button
type="normal"
className="tlui-share-zone__button"
title={msg('share-menu.title')}
label={showIcon ? undefined : 'share-menu.title'}
icon={showIcon ? 'collab' : undefined}
/>
<ShareButton title={'share-menu.title'} label={'share-menu.title'} />
</Popover.Trigger>
<Popover.Portal container={container}>
<Popover.Content

View file

@ -52,7 +52,14 @@ export const PeopleMenu = track(function PeopleMenu({
</button>
</Popover.Trigger>
<Popover.Portal container={container}>
<Popover.Content dir="ltr" className="tlui-menu" align="end" side="bottom" sideOffset={6}>
<Popover.Content
dir="ltr"
className="tlui-menu"
align="end"
side="bottom"
sideOffset={2}
alignOffset={-5}
>
<div className="tlui-people-menu__wrapper">
<div className="tlui-people-menu__section">
<UserPresenceEditor />

View file

@ -0,0 +1,32 @@
import { useTranslation } from '@tldraw/tldraw'
import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react'
export type ShareButtonProps = DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> & { title: string; label: string }
export const ShareButton = forwardRef<HTMLButtonElement, ShareButtonProps>(function ShareButton(
{ label, title, ...props },
ref
) {
const msg = useTranslation()
const titleStr = msg(title)
const labelStr = msg(label)
return (
<button
ref={ref}
draggable={false}
type="button"
title={titleStr}
className="tlui-share-zone__button-wrapper"
{...props}
>
<div className="tlui-button tlui-button__normal tlui-share-zone__button">
<span className="tlui-button__label" draggable={false}>
{labelStr}
</span>
</div>
</button>
)
})

View file

@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'
import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen'
import { createQRCodeImageDataString } from '../utils/qrcode'
import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'
import { ShareButton } from './ShareButton'
type ShareState = {
state: 'offline' | 'shared' | 'readonly'
@ -93,12 +94,7 @@ export const ShareMenu = React.memo(function ShareMenu() {
return (
<Popover.Root onOpenChange={onOpenChange} open={isOpen}>
<Popover.Trigger dir="ltr" asChild>
<Button
type="normal"
className="tlui-share-zone__button"
title={msg('share-menu.title')}
label={'share-menu.title'}
/>
<ShareButton title={'share-menu.title'} label={'share-menu.title'} />
</Popover.Trigger>
<Popover.Portal container={container}>
<Popover.Content
@ -107,6 +103,7 @@ export const ShareMenu = React.memo(function ShareMenu() {
align="end"
side="bottom"
sideOffset={2}
alignOffset={4}
>
{shareState.state === 'shared' || shareState.state === 'readonly' ? (
<>

View file

@ -1,5 +1,9 @@
/* ------------------ Da Share Zone ----------------- */
.tlui-style-panel__wrapper {
margin-top: 4px;
}
.tlui-share-zone {
padding: 0px 0px 0px 0px;
display: flex;
@ -26,23 +30,34 @@
border-radius: 100%;
}
.tlui-share-zone__button-wrapper {
all: unset;
padding: 2px;
position: relative;
pointer-events: all;
position: relative;
cursor: pointer;
}
.tlui-share-zone__button {
font-family: inherit;
font-size: inherit;
border: 4px solid var(--color-background);
height: 36px;
border: 2px solid var(--color-background);
border-radius: 8px;
background-color: var(--color-selected);
color: var(--color-selected-contrast);
text-shadow: none;
pointer-events: all;
position: relative;
font-weight: 600;
}
.tlui-share-zone__button::before {
position: absolute;
display: block;
content: '';
inset: -4px;
inset: 0px;
background-color: var(--color-background);
border-top-left-radius: var(--radius-3);
border-bottom-right-radius: var(--radius-3);
@ -137,9 +152,9 @@
}
.tlui-people-menu__avatar {
height: 22px;
width: 22px;
border: 3px solid var(--color-background);
height: 28px;
width: 28px;
border: 2px solid var(--color-background);
background-color: var(--color-low);
border-radius: 100%;
display: flex;
@ -153,7 +168,7 @@
}
.tlui-people-menu__avatar:nth-of-type(n + 2) {
margin-left: -10px;
margin-left: -12px;
}
.tlui-people-menu__avatars-button[data-state='open'] {