From 971c0e1ea95bc6ddd2e9422f83b8d94864dc222e Mon Sep 17 00:00:00 2001 From: Kilu Date: Wed, 26 Jun 2024 17:47:25 +0800 Subject: [PATCH] fix: some style --- .../src/assets/arrow_right.svg | 7 +- frontend/appflowy_web_app/src/assets/moon.svg | 9 ++ frontend/appflowy_web_app/src/assets/more.svg | 8 ++ .../appflowy_web_app/src/assets/report.svg | 11 +++ .../src/components/app/AppTheme.tsx | 16 +++- .../src/components/app/useAppThemeMode.ts | 17 +++- .../components/publish/header/MoreActions.tsx | 88 +++++++++++++++++++ .../publish/header/PublishViewHeader.tsx | 19 ++-- frontend/appflowy_web_app/src/styles/app.scss | 1 + 9 files changed, 163 insertions(+), 13 deletions(-) create mode 100644 frontend/appflowy_web_app/src/assets/moon.svg create mode 100644 frontend/appflowy_web_app/src/assets/more.svg create mode 100644 frontend/appflowy_web_app/src/assets/report.svg create mode 100644 frontend/appflowy_web_app/src/components/publish/header/MoreActions.tsx diff --git a/frontend/appflowy_web_app/src/assets/arrow_right.svg b/frontend/appflowy_web_app/src/assets/arrow_right.svg index eba9ea9591..990748cab3 100644 --- a/frontend/appflowy_web_app/src/assets/arrow_right.svg +++ b/frontend/appflowy_web_app/src/assets/arrow_right.svg @@ -1,5 +1,6 @@ - - - + + + diff --git a/frontend/appflowy_web_app/src/assets/moon.svg b/frontend/appflowy_web_app/src/assets/moon.svg new file mode 100644 index 0000000000..304a7ec978 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/moon.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/frontend/appflowy_web_app/src/assets/more.svg b/frontend/appflowy_web_app/src/assets/more.svg new file mode 100644 index 0000000000..b41b2fd04f --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/more.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/frontend/appflowy_web_app/src/assets/report.svg b/frontend/appflowy_web_app/src/assets/report.svg new file mode 100644 index 0000000000..71dacf8aba --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/report.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/frontend/appflowy_web_app/src/components/app/AppTheme.tsx b/frontend/appflowy_web_app/src/components/app/AppTheme.tsx index 8ae3d12616..09a3bfe13b 100644 --- a/frontend/appflowy_web_app/src/components/app/AppTheme.tsx +++ b/frontend/appflowy_web_app/src/components/app/AppTheme.tsx @@ -1,4 +1,4 @@ -import { useAppThemeMode } from '@/components/app/useAppThemeMode'; +import { ThemeModeContext, useAppThemeMode } from '@/components/app/useAppThemeMode'; import React, { useMemo } from 'react'; import createTheme from '@mui/material/styles/createTheme'; import ThemeProvider from '@mui/material/styles/ThemeProvider'; @@ -8,7 +8,8 @@ import 'src/styles/tailwind.css'; import 'src/styles/template.css'; function AppTheme({ children }: { children: React.ReactNode }) { - const { isDark } = useAppThemeMode(); + const { isDark, setIsDark } = useAppThemeMode(); + const theme = useMemo( () => createTheme({ @@ -161,7 +162,16 @@ function AppTheme({ children }: { children: React.ReactNode }) { [isDark] ); - return {children}; + return ( + + {children} + + ); } export default AppTheme; diff --git a/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts b/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts index 8250d999ec..26dc5e503f 100644 --- a/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts +++ b/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts @@ -1,4 +1,12 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState, createContext } from 'react'; + +export const ThemeModeContext = createContext< + | { + isDark: boolean; + setDark: (isDark: boolean) => void; + } + | undefined +>(undefined); export function useAppThemeMode() { const [isDark, setIsDark] = useState(false); @@ -8,7 +16,6 @@ export function useAppThemeMode() { const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); setIsDark(darkModeMediaQuery.matches); - document.documentElement.setAttribute('data-dark-mode', darkModeMediaQuery.matches ? 'true' : 'false'); } detectColorScheme(); @@ -19,7 +26,13 @@ export function useAppThemeMode() { }; }, []); + useEffect(() => { + console.log('isDark', isDark); + document.documentElement.setAttribute('data-dark-mode', isDark ? 'true' : 'false'); + }, [isDark]); + return { isDark, + setIsDark, }; } diff --git a/frontend/appflowy_web_app/src/components/publish/header/MoreActions.tsx b/frontend/appflowy_web_app/src/components/publish/header/MoreActions.tsx new file mode 100644 index 0000000000..dd454c6d90 --- /dev/null +++ b/frontend/appflowy_web_app/src/components/publish/header/MoreActions.tsx @@ -0,0 +1,88 @@ +import { Popover } from '@/components/_shared/popover'; +import { ThemeModeContext } from '@/components/app/useAppThemeMode'; +import { openUrl } from '@/utils/url'; +import { IconButton } from '@mui/material'; +import React, { useContext, useMemo } from 'react'; +import { ReactComponent as MoreIcon } from '@/assets/more.svg'; +import { ReactComponent as MoonIcon } from '@/assets/moon.svg'; +import { ReactComponent as ReportIcon } from '@/assets/report.svg'; +import { useTranslation } from 'react-i18next'; + +function MoreActions() { + const { isDark, setDark } = useContext(ThemeModeContext) || {}; + const [anchorEl, setAnchorEl] = React.useState(null); + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const open = Boolean(anchorEl); + + const { t } = useTranslation(); + + const actions = useMemo(() => { + return [ + isDark + ? { + Icon: MoonIcon, + label: t('settings.appearance.themeMode.light'), + onClick: () => { + setDark?.(false); + }, + } + : { + Icon: MoonIcon, + label: t('settings.appearance.themeMode.dark'), + onClick: () => { + setDark?.(true); + }, + }, + { + Icon: ReportIcon, + label: t('publish.reportPage'), + onClick: () => { + void openUrl('', '_blank'); + }, + }, + ]; + }, [isDark, t, setDark]); + + return ( + <> + + + + +
+ {actions.map((action, index) => ( + + ))} +
+ + + ); +} + +export default MoreActions; diff --git a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx index 4d3221249b..0d58f651a4 100644 --- a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx +++ b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx @@ -1,8 +1,10 @@ import { usePublishContext } from '@/application/publish'; import { openOrDownload } from '@/components/publish/header/utils'; +import { Divider } from '@mui/material'; import React, { useMemo } from 'react'; import Breadcrumb from './Breadcrumb'; import { ReactComponent as Logo } from '@/assets/logo.svg'; +import MoreActions from './MoreActions'; export function PublishViewHeader() { const viewMeta = usePublishContext()?.viewMeta; @@ -27,11 +29,18 @@ export function PublishViewHeader() { return (
-
- - +
+
+ +
+ +
+ + + +
); diff --git a/frontend/appflowy_web_app/src/styles/app.scss b/frontend/appflowy_web_app/src/styles/app.scss index fcd9e26cb7..6803bbdf47 100644 --- a/frontend/appflowy_web_app/src/styles/app.scss +++ b/frontend/appflowy_web_app/src/styles/app.scss @@ -23,6 +23,7 @@ body { @apply bg-content-blue-100; } + @apply bg-bg-body text-text-title; &[data-os="windows"]:not([data-browser="firefox"]) { .appflowy-custom-scroller { @include mixin.hidden-scrollbar