From 202c9135c2e98b814a612fa4b1956d67b00b64af Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Wed, 1 Jan 2025 14:17:57 +0500 Subject: [PATCH] web: show exclusive titlebar in tablet/mobile mode --- apps/web/src/app.css | 3 +- apps/web/src/components/editor/action-bar.tsx | 57 +++------ .../src/components/route-container/index.tsx | 3 +- apps/web/src/components/title-bar/index.tsx | 121 +++++++++++++++++- apps/web/src/root.tsx | 2 +- 5 files changed, 137 insertions(+), 49 deletions(-) diff --git a/apps/web/src/app.css b/apps/web/src/app.css index 5e3a6a3fa..8d680505b 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -5,7 +5,8 @@ .tabsScroll, .titlebarLogo, -.theme-scope-titleBar { +.theme-scope-titleBar, +.route-container-header { -webkit-app-region: drag; } diff --git a/apps/web/src/components/editor/action-bar.tsx b/apps/web/src/components/editor/action-bar.tsx index e3a0e63c8..5263da1e1 100644 --- a/apps/web/src/components/editor/action-bar.tsx +++ b/apps/web/src/components/editor/action-bar.tsx @@ -41,11 +41,7 @@ import { TableOfContents, Trash, Undo, - Unlock, - WindowClose, - WindowMaximize, - WindowMinimize, - WindowRestore + Unlock } from "../icons"; import { ScrollContainer } from "@notesnook/ui"; import { @@ -83,8 +79,8 @@ import { showPublishView } from "../publish-view"; import { restrictToHorizontalAxis } from "@dnd-kit/modifiers"; import useMobile from "../../hooks/use-mobile"; import { strings } from "@notesnook/intl"; -import { TITLE_BAR_HEIGHT } from "../title-bar"; -import { desktop } from "../../common/desktop-bridge"; +import { TITLE_BAR_HEIGHT, getWindowControls } from "../title-bar"; +import useTablet from "../../hooks/use-tablet"; export function EditorActionBar() { const { isMaximized, isFullscreen, hasNativeWindowControls } = @@ -102,6 +98,7 @@ export function EditorActionBar() { const isNotePublished = activeSession && db.monographs.isPublished(activeSession.id); const isMobile = useMobile(); + const isTablet = useTablet(); const tools = [ { @@ -202,31 +199,13 @@ export function EditorActionBar() { !isFocusMode, onClick: () => useEditorStore.getState().toggleProperties() }, - - { - title: strings.minimize(), - icon: WindowMinimize, - hidden: hasNativeWindowControls || isFullscreen, - enabled: true, - onClick: () => desktop?.window.minimze.mutate() - }, - { - title: isMaximized ? strings.restore() : strings.maximize(), - icon: isMaximized ? WindowRestore : WindowMaximize, - enabled: true, - hidden: hasNativeWindowControls || isFullscreen, - onClick: () => - isMaximized - ? desktop?.window.restore.mutate() - : desktop?.window.maximize.mutate() - }, - { - title: strings.close(), - icon: WindowClose, - hidden: hasNativeWindowControls || isFullscreen, - enabled: true, - onClick: () => window.close() - } + ...getWindowControls( + hasNativeWindowControls, + isFullscreen, + isMaximized, + isTablet, + isMobile + ) ]; return ( @@ -263,7 +242,7 @@ export function EditorActionBar() { alignItems: "center", bg: "transparent", display: [ - tool.hideOnMobile ? "none" : "flex", + "hideOnMobile" in tool && tool.hideOnMobile ? "none" : "flex", tool.hidden ? "none" : "flex" ], borderRadius: 0, @@ -475,12 +454,12 @@ function Tab(props: TabProps) { ? Lock : Unlock : type === "readonly" - ? Readonly - : type === "deleted" - ? Trash - : isUnsaved - ? NoteRemove - : Note; + ? Readonly + : type === "deleted" + ? Trash + : isUnsaved + ? NoteRemove + : Note; const { attributes, listeners, setNodeRef, transform, transition, active } = useSortable({ id }); diff --git a/apps/web/src/components/route-container/index.tsx b/apps/web/src/components/route-container/index.tsx index 34b2ec73f..f444190a9 100644 --- a/apps/web/src/components/route-container/index.tsx +++ b/apps/web/src/components/route-container/index.tsx @@ -77,7 +77,8 @@ function Header(props: RouteContainerProps) { alignItems: "center", justifyContent: "center", height: TITLE_BAR_HEIGHT, - zIndex: 2 + zIndex: 2, + px: 1 }} className="route-container-header search-container" > diff --git a/apps/web/src/components/title-bar/index.tsx b/apps/web/src/components/title-bar/index.tsx index 0183d4c6e..a1fa63bd1 100644 --- a/apps/web/src/components/title-bar/index.tsx +++ b/apps/web/src/components/title-bar/index.tsx @@ -20,12 +20,71 @@ along with this program. If not, see . import { useWindowControls } from "../../hooks/use-window-controls"; import { isMac } from "../../utils/platform"; import { BaseThemeProvider } from "../theme-provider"; +import { strings } from "@notesnook/intl"; +import { desktop } from "../../common/desktop-bridge"; +import { + WindowClose, + WindowMaximize, + WindowMinimize, + WindowRestore +} from "../icons"; +import { Button, Flex } from "@theme-ui/components"; +import useMobile from "../../hooks/use-mobile"; +import useTablet from "../../hooks/use-tablet"; +export function getWindowControls( + hasNativeWindowControls: boolean, + isFullscreen?: boolean, + isMaximized?: boolean, + isTablet?: boolean, + isMobile?: boolean +) { + if (isMobile || isTablet) return []; + return [ + { + title: strings.minimize(), + icon: WindowMinimize, + hidden: hasNativeWindowControls || isFullscreen, + enabled: true, + onClick: () => desktop?.window.minimze.mutate() + }, + { + title: isMaximized ? strings.restore() : strings.maximize(), + icon: isMaximized ? WindowRestore : WindowMaximize, + enabled: true, + hidden: hasNativeWindowControls || isFullscreen, + onClick: () => + isMaximized + ? desktop?.window.restore.mutate() + : desktop?.window.maximize.mutate() + }, + { + title: strings.close(), + icon: WindowClose, + hidden: hasNativeWindowControls || isFullscreen, + enabled: true, + onClick: () => window.close() + } + ]; +} export const TITLE_BAR_HEIGHT = 37; -export function TitleBar() { - const { isFullscreen } = useWindowControls(); +export function TitleBar({ isUnderlay = isMac() }: { isUnderlay?: boolean }) { + const { isFullscreen, hasNativeWindowControls, isMaximized } = + useWindowControls(); + const isTablet = useTablet(); + const isMobile = useMobile(); + if ( + (!isMobile && !isTablet) || + hasNativeWindowControls || + (isFullscreen && isMac()) + ) + return null; - if (isFullscreen || !IS_DESKTOP_APP || !isMac()) return null; + const tools = getWindowControls( + hasNativeWindowControls, + isFullscreen, + isMaximized + ); return ( + > + {tools.length > 0 ? ( + + + + ) : null} + + {tools.map((tool) => ( + + ))} + + ); } diff --git a/apps/web/src/root.tsx b/apps/web/src/root.tsx index de87d8abf..2c25ea643 100644 --- a/apps/web/src/root.tsx +++ b/apps/web/src/root.tsx @@ -81,7 +81,7 @@ export async function startApp() { console.error(e); root.render( <> - + window.location.reload()}