Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: bugs

Browse Source
This commit is contained in:
Kilu 2024-06-29 20:50:27 +08:00
parent b59bda9210
commit a5193477bb
4 changed files with 14 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/appflowy_web_app/src/components/publish/PublishView.tsx
View File

@ -65,25 +65,23 @@ export function PublishView({ namespace, publishName }: PublishViewProps) {
return ( return (
<PublishProvider namespace={namespace} publishName={publishName}> <PublishProvider namespace={namespace} publishName={publishName}>
<div className={'h-screen w-screen'}> <div className={'h-screen w-screen'}>
<PublishViewHeader
onOpenDrawer={() => {
setOpen(true);
}}
openDrawer={open}
drawerWidth={drawerWidth}
/>
{open && <OutlineDrawer width={drawerWidth} open={open} onClose={() => setOpen(false)} />}
<AFScroller <AFScroller
overflowXHidden overflowXHidden
style={{ style={{
height: 'calc(100vh - 64px)',
transform: open ? `translateX(${drawerWidth}px)` : 'none', transform: open ? `translateX(${drawerWidth}px)` : 'none',
width: open ? `calc(100% - ${drawerWidth}px)` : '100%', width: open ? `calc(100% - ${drawerWidth}px)` : '100%',
transition: 'width 0.2s ease-in-out, transform 0.2s ease-in-out', transition: 'width 0.2s ease-in-out, transform 0.2s ease-in-out',
}} }}
className={'appflowy-layout appflowy-scroll-container'} className={'appflowy-layout appflowy-scroll-container'}
> >
<PublishViewHeader
onOpenDrawer={() => {
setOpen(true);
}}
openDrawer={open}
/>
{open && <OutlineDrawer width={drawerWidth} open={open} onClose={() => setOpen(false)} />}
<CollabView doc={doc} /> <CollabView doc={doc} />
</AFScroller> </AFScroller>
</div> </div>

17
frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
View File

@ -10,15 +10,7 @@ import { ReactComponent as Logo } from '@/assets/logo.svg';
import MoreActions from './MoreActions'; import MoreActions from './MoreActions';
import { ReactComponent as SideOutlined } from '@/assets/side_outlined.svg'; import { ReactComponent as SideOutlined } from '@/assets/side_outlined.svg';
export function PublishViewHeader({ export function PublishViewHeader({ onOpenDrawer, openDrawer }: { onOpenDrawer: () => void; openDrawer: boolean }) {
onOpenDrawer,
drawerWidth,
openDrawer,
}: {
onOpenDrawer: () => void;
openDrawer: boolean;
drawerWidth: number;
}) {
const { t } = useTranslation(); const { t } = useTranslation();
const viewMeta = usePublishContext()?.viewMeta; const viewMeta = usePublishContext()?.viewMeta;
const crumbs = useMemo(() => { const crumbs = useMemo(() => {
@ -63,11 +55,10 @@ export function PublishViewHeader({
return ( return (
<div <div
style={{ style={{
transform: openDrawer ? `translateX(${drawerWidth}px)` : 'none', backdropFilter: 'saturate(180%) blur(16px)',
width: openDrawer ? `calc(100% - ${drawerWidth}px)` : '100%', background: 'var(--header)',
transition: 'width 0.2s ease-in-out, transform 0.2s ease-in-out',
}} }}
className={'appflowy-top-bar flex h-[48px] px-5'} className={'appflowy-top-bar sticky top-0 z-10 flex h-[48px] px-5'}
> >
<div className={'flex w-full items-center justify-between gap-2 overflow-hidden'}> <div className={'flex w-full items-center justify-between gap-2 overflow-hidden'}>
{!openDrawer && ( {!openDrawer && (

1
frontend/appflowy_web_app/src/styles/variables/dark.variables.css
View File

@ -55,4 +55,5 @@
--gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%); --gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%);
--gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%); --gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%);
--gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%); --gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%);
--header: rgba(0, 0, 0, 0.7);
} }

1
frontend/appflowy_web_app/src/styles/variables/light.variables.css
View File

@ -58,4 +58,5 @@
--gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%); --gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%);
--gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%); --gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%);
--gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%); --gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%);
--header: rgba(255, 255, 255, 0.8);
} }