From 8f7445c299eb38970e3fa15953ee1625d7e46dac Mon Sep 17 00:00:00 2001 From: email Date: Fri, 11 Mar 2022 05:07:04 +0800 Subject: [PATCH] feat: remove mobile styles --- web/src/App.tsx | 17 +----- web/src/components/MemosHeader.tsx | 13 +---- web/src/components/Sidebar.tsx | 54 +------------------ web/src/components/UsageHeatMap.tsx | 9 +--- web/src/helpers/consts.ts | 3 -- web/src/less/about-site-dialog.less | 6 --- web/src/less/change-password-dialog.less | 10 ---- web/src/less/confirm-reset-openid-dialog.less | 10 ---- web/src/less/create-shortcut-dialog.less | 13 ----- web/src/less/daily-memo-diary-dialog.less | 24 --------- web/src/less/dialog.less | 10 ---- web/src/less/global.less | 7 --- web/src/less/home.less | 19 ------- web/src/less/memo-card-dialog.less | 7 --- web/src/less/memo-content.less | 16 ------ web/src/less/memo-editor.less | 7 --- web/src/less/memo-filter.less | 6 --- web/src/less/memo-trash.less | 6 --- web/src/less/memolist.less | 6 --- web/src/less/memos-header.less | 7 --- web/src/less/menu-btns-popup.less | 6 --- web/src/less/preview-image-dialog.less | 16 ------ web/src/less/search-bar.less | 6 --- web/src/less/setting.less | 6 --- web/src/less/share-memo-image-dialog.less | 12 ----- web/src/less/shortcut-list.less | 18 ------- web/src/less/siderbar.less | 20 ------- web/src/less/star-history-dialog.less | 6 --- web/src/less/tag-list.less | 15 ------ web/src/less/usage-heat-map.less | 30 ----------- web/src/less/user-banner.less | 24 --------- web/src/pages/MemoTrash.tsx | 13 +---- web/src/pages/Setting.tsx | 19 +------ web/src/services/globalStateService.ts | 18 ------- web/src/stores/globalStateStore.ts | 40 +------------- 35 files changed, 9 insertions(+), 490 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index 0f75e7b6..c16d16f4 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,7 +1,6 @@ -import { useContext, useEffect } from "react"; +import { useContext } from "react"; import appContext from "./stores/appContext"; import { appRouterSwitch } from "./routers"; -import { globalStateService } from "./services"; import "./less/app.less"; function App() { @@ -9,20 +8,6 @@ function App() { locationState: { pathname }, } = useContext(appContext); - useEffect(() => { - const handleWindowResize = () => { - globalStateService.setIsMobileView(document.body.clientWidth <= 875); - }; - - handleWindowResize(); - - window.addEventListener("resize", handleWindowResize); - - return () => { - window.removeEventListener("resize", handleWindowResize); - }; - }, []); - return <>{appRouterSwitch(pathname)}; } diff --git a/web/src/components/MemosHeader.tsx b/web/src/components/MemosHeader.tsx index 70fdc43e..7fa8d192 100644 --- a/web/src/components/MemosHeader.tsx +++ b/web/src/components/MemosHeader.tsx @@ -1,8 +1,7 @@ import { useCallback, useContext, useEffect, useState } from "react"; import appContext from "../stores/appContext"; import SearchBar from "./SearchBar"; -import { globalStateService, memoService, shortcutService } from "../services"; -import Only from "./common/OnlyWhen"; +import { memoService, shortcutService } from "../services"; import "../less/memos-header.less"; let prevRequestTimestamp = Date.now(); @@ -14,7 +13,6 @@ const MemosHeader: React.FC = () => { locationState: { query: { shortcutId }, }, - globalState: { isMobileView }, shortcutState: { shortcuts }, } = useContext(appContext); @@ -39,18 +37,9 @@ const MemosHeader: React.FC = () => { } }, []); - const handleShowSidebarBtnClick = useCallback(() => { - globalStateService.setShowSiderbarInMobileView(true); - }, []); - return (
- - - {titleText}
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index 88df2740..1a8384d7 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -1,7 +1,4 @@ -import { useContext, useEffect, useMemo, useRef } from "react"; -import appContext from "../stores/appContext"; -import { SHOW_SIDERBAR_MOBILE_CLASSNAME } from "../helpers/consts"; -import { globalStateService } from "../services"; +import { useRef } from "react"; import UserBanner from "./UserBanner"; import ShortcutList from "./ShortcutList"; import TagList from "./TagList"; @@ -11,57 +8,8 @@ import "../less/siderbar.less"; interface Props {} const Sidebar: React.FC = () => { - const { - locationState, - globalState: { isMobileView, showSiderbarInMobileView }, - } = useContext(appContext); const wrapperElRef = useRef(null); - const handleClickOutsideOfWrapper = useMemo(() => { - return (event: MouseEvent) => { - const siderbarShown = globalStateService.getState().showSiderbarInMobileView; - - if (!siderbarShown) { - window.removeEventListener("click", handleClickOutsideOfWrapper, { - capture: true, - }); - return; - } - - if (!wrapperElRef.current?.contains(event.target as Node)) { - if (wrapperElRef.current?.parentNode?.contains(event.target as Node)) { - if (siderbarShown) { - event.stopPropagation(); - } - globalStateService.setShowSiderbarInMobileView(false); - window.removeEventListener("click", handleClickOutsideOfWrapper, { - capture: true, - }); - } - } - }; - }, []); - - useEffect(() => { - globalStateService.setShowSiderbarInMobileView(false); - }, [locationState]); - - useEffect(() => { - if (showSiderbarInMobileView) { - document.body.classList.add(SHOW_SIDERBAR_MOBILE_CLASSNAME); - } else { - document.body.classList.remove(SHOW_SIDERBAR_MOBILE_CLASSNAME); - } - }, [showSiderbarInMobileView]); - - useEffect(() => { - if (isMobileView && showSiderbarInMobileView) { - window.addEventListener("click", handleClickOutsideOfWrapper, { - capture: true, - }); - } - }, [isMobileView, showSiderbarInMobileView]); - return (