yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-11-04 03:54:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove floating menu functions

Browse Source
This commit is contained in:
ascarbek 2023-03-10 16:59:11 +06:00
parent ad0a6d01d2
commit 6304c7d95b
2 changed files with 3 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.hooks.ts
View File

@ -2,35 +2,18 @@ import { useAppDispatch, useAppSelector } from '../../../stores/store';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { IPage } from '../../../stores/reducers/pages/slice'; import { IPage } from '../../../stores/reducers/pages/slice';
import { ViewLayoutTypePB } from '../../../../services/backend'; import { ViewLayoutTypePB } from '../../../../services/backend';
import { MouseEventHandler, useState } from 'react'; import { useState } from 'react';
import { activePageIdActions } from '../../../stores/reducers/activePageId/slice'; import { activePageIdActions } from '../../../stores/reducers/activePageId/slice';
// number of pixels from left side of screen to show hidden navigation panel
const FLOATING_PANEL_SHOW_WIDTH = 10;
const FLOATING_PANEL_HIDE_EXTRA_WIDTH = 10;
export const useNavigationPanelHooks = function () { export const useNavigationPanelHooks = function () {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const folders = useAppSelector((state) => state.folders); const folders = useAppSelector((state) => state.folders);
const pages = useAppSelector((state) => state.pages); const pages = useAppSelector((state) => state.pages);
const width = useAppSelector((state) => state.navigationWidth); const width = useAppSelector((state) => state.navigationWidth);
const [navigationPanelFixed, setNavigationPanelFixed] = useState(true);
const [slideInFloatingPanel, setSlideInFloatingPanel] = useState(true);
const [menuHidden, setMenuHidden] = useState(false); const [menuHidden, setMenuHidden] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const onCollapseNavigationClick = () => {
setSlideInFloatingPanel(true);
setNavigationPanelFixed(false);
};
const onFixNavigationClick = () => {
setNavigationPanelFixed(true);
};
const [floatingPanelWidth, setFloatingPanelWidth] = useState(0);
const onHideMenuClick = () => { const onHideMenuClick = () => {
setMenuHidden(true); setMenuHidden(true);
}; };
@ -59,26 +42,11 @@ export const useNavigationPanelHooks = function () {
navigate(`/page/${pageTypeRoute}/${page.id}`); navigate(`/page/${pageTypeRoute}/${page.id}`);
}; };
const onScreenMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
if (e.screenX <= FLOATING_PANEL_SHOW_WIDTH) {
setSlideInFloatingPanel(true);
} else if (e.screenX > floatingPanelWidth + FLOATING_PANEL_HIDE_EXTRA_WIDTH) {
setSlideInFloatingPanel(false);
}
};
return { return {
width, width,
folders, folders,
pages, pages,
navigate,
onPageClick, onPageClick,
onCollapseNavigationClick,
onFixNavigationClick,
navigationPanelFixed,
onScreenMouseMove,
slideInFloatingPanel,
setFloatingPanelWidth,
menuHidden, menuHidden,
onHideMenuClick, onHideMenuClick,
onShowMenuClick, onShowMenuClick,

18
frontend/appflowy_tauri/src/appflowy_app/components/layout/Screen.tsx
View File

@ -14,24 +14,10 @@ export const Screen = ({ children }: { children: ReactNode }) => {
})(); })();
}, [currentUser.isAuthenticated]); }, [currentUser.isAuthenticated]);
const { const { width, folders, pages, onPageClick, onHideMenuClick, onShowMenuClick, menuHidden } = useNavigationPanelHooks();
width,
folders,
pages,
onPageClick,
onCollapseNavigationClick,
onFixNavigationClick,
navigationPanelFixed,
onScreenMouseMove,
slideInFloatingPanel,
setFloatingPanelWidth,
onHideMenuClick,
onShowMenuClick,
menuHidden,
} = useNavigationPanelHooks();
return ( return (
<div onMouseMove={onScreenMouseMove} className='flex h-screen w-screen bg-white text-black'> <div className='flex h-screen w-screen bg-white text-black'>
<NavigationPanel <NavigationPanel
onHideMenuClick={onHideMenuClick} onHideMenuClick={onHideMenuClick}
width={width} width={width}