-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
1,201 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
packages/frontend/component/src/components/attachment-viewer/error.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import type { AttachmentBlockModel } from '@blocksuite/blocks'; | ||
| import { ArrowDownBigIcon, PageIcon } from '@blocksuite/icons/rc'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| import { Button } from '../../ui/button'; | ||
| import * as styles from './styles.css'; | ||
|
|
||
| interface ErrorProps { | ||
| model: AttachmentBlockModel; | ||
| ext: string; | ||
| isPDF: boolean; | ||
| } | ||
|
|
||
| export const Error = ({ ext }: ErrorProps) => { | ||
| return ( | ||
| <div className={clsx([styles.body, styles.error])}> | ||
| <PageIcon /> | ||
| <h3 className={styles.errorTitle}>Unable to preview this file</h3> | ||
| <p className={styles.errorMessage}>.{ext} file type not supported.</p> | ||
| <div className={styles.errorBtns}> | ||
| <Button variant="primary" prefix={<ArrowDownBigIcon />}> | ||
| Download | ||
| </Button> | ||
| <Button>Retry</Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
30 changes: 30 additions & 0 deletions
30
packages/frontend/component/src/components/attachment-viewer/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import type { AttachmentBlockModel } from '@blocksuite/blocks'; | ||
| import { filesize } from 'filesize'; | ||
| import { useMemo } from 'react'; | ||
|
|
||
| import { Error } from './error'; | ||
| import * as styles from './styles.css'; | ||
| import { Titlebar } from './titlebar'; | ||
| import { Viewer } from './viewer'; | ||
|
|
||
| export type AttachmentViewerProps = { | ||
| model: AttachmentBlockModel; | ||
| }; | ||
|
|
||
| export const AttachmentViewer = ({ model }: AttachmentViewerProps) => { | ||
| const props = useMemo(() => { | ||
| const pieces = model.name.split('.'); | ||
| const ext = pieces.pop() || ''; | ||
| const name = pieces.join('.'); | ||
| const isPDF = ext === 'pdf'; | ||
| const size = filesize(model.size); | ||
| return { model, name, ext, size, isPDF }; | ||
| }, [model]); | ||
|
|
||
| return ( | ||
| <div className={styles.viewerContainer}> | ||
| <Titlebar {...props} /> | ||
| {props.isPDF ? <Viewer {...props} /> : <Error {...props} />} | ||
| </div> | ||
| ); | ||
| }; |
172 changes: 172 additions & 0 deletions
172
packages/frontend/component/src/components/attachment-viewer/styles.css.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| import { cssVarV2 } from '@toeverything/theme/v2'; | ||
| import { style } from '@vanilla-extract/css'; | ||
|
|
||
| export const viewerContainer = style({ | ||
| position: 'relative', | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| width: '100%', | ||
| height: '100%', | ||
| }); | ||
|
|
||
| export const titlebar = style({ | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| height: '52px', | ||
| padding: '10px 8px', | ||
| background: cssVarV2('layer/background/primary'), | ||
| fontSize: '12px', | ||
| fontWeight: 400, | ||
| color: cssVarV2('text/secondary'), | ||
| borderTopWidth: '0.5px', | ||
| borderTopStyle: 'solid', | ||
| borderTopColor: cssVarV2('layer/insideBorder/border'), | ||
| }); | ||
|
|
||
| export const titlebarChild = style({ | ||
| selectors: { | ||
| [`${titlebar} > &`]: { | ||
| display: 'flex', | ||
| gap: '12px', | ||
| alignItems: 'center', | ||
| paddingLeft: '12px', | ||
| paddingRight: '12px', | ||
| }, | ||
| '&.zoom:not(.show)': { | ||
| display: 'none', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export const titlebarName = style({ | ||
| display: 'flex', | ||
| }); | ||
|
|
||
| export const body = style({ | ||
| display: 'flex', | ||
| flex: 1, | ||
| position: 'relative', | ||
| selectors: { | ||
| '&:before': { | ||
| position: 'absolute', | ||
| // position: 'fixed', | ||
| content: '', | ||
| top: 0, | ||
| right: 0, | ||
| bottom: 0, | ||
| left: 0, | ||
| // width: '100%', | ||
| // height: '100%', | ||
| // zIndex: -1, | ||
| }, | ||
| '&:not(.gridding):before': { | ||
| backgroundColor: cssVarV2('layer/background/secondary'), | ||
| }, | ||
| '&.gridding:before': { | ||
| opacity: 0.25, | ||
| backgroundSize: '20px 20px', | ||
| backgroundImage: `linear-gradient(${cssVarV2('button/grabber/default')} 1px, transparent 1px), linear-gradient(to right, ${cssVarV2('button/grabber/default')} 1px, transparent 1px)`, | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export const virtuoso = style({ | ||
| width: '100%', | ||
| }); | ||
|
|
||
| export const error = style({ | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| gap: '4px', | ||
| }); | ||
|
|
||
| export const errorTitle = style({ | ||
| fontSize: '15px', | ||
| fontWeight: 500, | ||
| lineHeight: '24px', | ||
| color: cssVarV2('text/primary'), | ||
| marginTop: '12px', | ||
| }); | ||
|
|
||
| export const errorMessage = style({ | ||
| fontSize: '12px', | ||
| fontWeight: 500, | ||
| lineHeight: '20px', | ||
| color: cssVarV2('text/tertiary'), | ||
| }); | ||
|
|
||
| export const errorBtns = style({ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: '10px', | ||
| marginTop: '28px', | ||
| }); | ||
|
|
||
| export const viewerPage = style({ | ||
| margin: '20px auto', | ||
| maxWidth: 'calc(100% - 40px)', | ||
| background: cssVarV2('layer/white'), | ||
| boxSizing: 'border-box', | ||
| borderWidth: '1px', | ||
| borderStyle: 'solid', | ||
| borderColor: cssVarV2('layer/insideBorder/border'), | ||
| boxShadow: | ||
| '0px 4px 20px 0px var(--transparent-black-200, rgba(0, 0, 0, 0.10))', | ||
| }); | ||
|
|
||
| export const thumbnails = style({ | ||
| position: 'absolute', | ||
| boxSizing: 'border-box', | ||
| width: '120px', | ||
| padding: '12px 0', | ||
| right: '30px', | ||
| bottom: '30px', | ||
| borderRadius: '8px', | ||
| borderWidth: '1px', | ||
| borderStyle: 'solid', | ||
| borderColor: cssVarV2('layer/insideBorder/border'), | ||
| backgroundColor: cssVarV2('layer/background/primary'), | ||
| boxShadow: cssVarV2('shadow/overlayPanelShadow/2-color'), | ||
| fontSize: '12px', | ||
| fontWeight: 500, | ||
| lineHeight: '20px', | ||
| color: cssVarV2('text/secondary'), | ||
| }); | ||
|
|
||
| export const thumbnailsPages = style({ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| // gap: '12px', | ||
| selectors: { | ||
| '&.collapsed': { | ||
| display: 'none', | ||
| }, | ||
| '&:not(.collapsed)': { | ||
| marginBottom: '8px', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export const thumbnailsPage = style({ | ||
| margin: '0px 12px 12px', | ||
| display: 'flex', | ||
| overflow: 'clip', | ||
| // width: '100%', | ||
| borderRadius: '4px', | ||
| borderWidth: '1px', | ||
| borderStyle: 'solid', | ||
| borderColor: cssVarV2('layer/insideBorder/border'), | ||
| selectors: { | ||
| '&.selected': { | ||
| borderColor: '#29A3FA', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export const thumbnailsIndicator = style({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'space-between', | ||
| padding: '0 12px', | ||
| }); |
Oops, something went wrong.