Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-16 22:07:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): show floating sidebar when hovering sidebar swtich (#8393)

Browse Source 
web:

https://github.com/user-attachments/assets/3cafe094-7938-4241-8d57-cfd5ccaadf25

client:

https://github.com/user-attachments/assets/ca218a45-de92-4e0a-ad83-c0f47aee2962
This commit is contained in:
JimmFly
2024-10-09 03:48:17 +00:00
parent bfeb05ca45
commit 5213431d51
14 changed files with 173 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/core/src/components/pure/header/index.tsx
View File

@@ -18,14 +18,8 @@ interface HeaderPros {
export const Header = ({ left, center, right }: HeaderPros) => {
const appSidebarService = useService(AppSidebarService).sidebar;
const open = useLiveData(appSidebarService.open$);
const appSidebarFloating = useLiveData(appSidebarService.responsiveFloating$);
return (
<div
className={clsx(style.header)}
data-open={open}
data-sidebar-floating={appSidebarFloating}
data-testid="header"
>
<div className={clsx(style.header)} data-open={open} data-testid="header">
<div className={clsx(style.headerSideContainer)}>
<div className={clsx(style.headerItem, 'left')}>
<div>{left}</div>

6
packages/frontend/core/src/components/workspace/index.css.ts
View File

@@ -1,5 +1,7 @@
import { cssVar, lightCssVariables } from '@toeverything/theme';
import { globalStyle, style } from '@vanilla-extract/css';
import { createVar, globalStyle, style } from '@vanilla-extract/css';
export const panelWidthVar = createVar('panel-width');
export const appStyle = style({
width: '100%',
@@ -48,7 +50,7 @@ export const mainContainerStyle = style({
flex: 1,
overflow: 'clip',
maxWidth: '100%',
transition: 'margin-left 0.2s ease',
selectors: {
'&[data-client-border="true"]': {
borderRadius: 6,

6
packages/frontend/core/src/components/workspace/index.tsx
View File

@@ -49,9 +49,9 @@ export const MainContainer = forwardRef<
HTMLDivElement,
PropsWithChildren<MainContainerProps>
>(function MainContainer({ className, children, ...props }, ref): ReactElement {
const appSidebarService = useService(AppSidebarService).sidebar;
const appSideBarOpen = useLiveData(appSidebarService.open$);
const { appSettings } = useAppSettingHelper();
const appSidebarService = useService(AppSidebarService).sidebar;
const open = useLiveData(appSidebarService.open$);
return (
<div
@@ -60,7 +60,7 @@ export const MainContainer = forwardRef<
data-is-desktop={BUILD_CONFIG.isElectron}
data-transparent={false}
data-client-border={appSettings.clientBorder}
data-side-bar-open={appSideBarOpen}
data-side-bar-open={open}
data-testid="main-container"
ref={ref}
>