From 47dd3b21f4a2f8e5e41f7edb24b0d4251e3a8094 Mon Sep 17 00:00:00 2001 From: Untone Date: Sun, 6 Oct 2024 20:02:24 +0300 Subject: [PATCH 1/7] dark-theme-feature --- src/components/Article/Article.module.scss | 4 + src/components/Article/FullArticle.tsx | 8 +- .../AuthModal/AuthModal.module.scss | 2 +- src/components/Feed/CardTopic.module.scss | 4 +- src/components/Feed/RowShort.tsx | 10 +- src/components/HeaderNav/Header.module.scss | 2 +- src/components/Views/TopicView.tsx | 4 +- .../_shared/DarkModeToggle/DarkModeToggle.tsx | 41 ++-- .../_shared/ImageCropper/ImageCropper.tsx | 1 + .../_shared/ImageCropper/cropper.css | 28 +++ src/styles/_grid.scss | 2 + src/styles/_theme.scss | 56 +++++ src/styles/_vars.scss | 19 +- src/styles/app.scss | 230 ++++-------------- src/styles/views/Feed.module.scss | 22 ++ src/styles/views/Topic.module.scss | 14 ++ 16 files changed, 229 insertions(+), 218 deletions(-) create mode 100644 src/components/_shared/ImageCropper/cropper.css create mode 100644 src/styles/_theme.scss diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss index ef4c87a2..670e0d22 100644 --- a/src/components/Article/Article.module.scss +++ b/src/components/Article/Article.module.scss @@ -671,3 +671,7 @@ a[data-toggle='tooltip'] { } } } + +.figureAlignColumn { + clear: both; +} \ No newline at end of file diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index b80e72f9..f11d302d 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -4,6 +4,7 @@ import { A, useSearchParams } from '@solidjs/router' import { clsx } from 'clsx' import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js' import { isServer } from 'solid-js/web' + import { useFeed } from '~/context/feed' import { useLocalize } from '~/context/localize' import { useReactions } from '~/context/reactions' @@ -19,7 +20,6 @@ import { capitalize } from '~/utils/capitalize' import { AuthorBadge } from '../Author/AuthorBadge' import { CardTopic } from '../Feed/CardTopic' import { FeedArticlePopup } from '../Feed/FeedArticlePopup' -import stylesHeader from '../HeaderNav/Header.module.scss' import { Icon } from '../_shared/Icon' import { Image } from '../_shared/Image' import { InviteMembers } from '../_shared/InviteMembers' @@ -30,13 +30,15 @@ import { ShareModal } from '../_shared/ShareModal' import { ImageSwiper } from '../_shared/SolidSwiper' import { TableOfContents } from '../_shared/TableOfContents' import { VideoPlayer } from '../_shared/VideoPlayer' -import styles from './Article.module.scss' import { AudioHeader } from './AudioHeader' import { AudioPlayer } from './AudioPlayer' import { CommentsTree } from './CommentsTree' import { SharePopup, getShareUrl } from './SharePopup' import { ShoutRatingControl } from './ShoutRatingControl' +import stylesHeader from '../HeaderNav/Header.module.scss' +import styles from './Article.module.scss' + type Props = { article: Shout } @@ -366,7 +368,7 @@ export const FullArticle = (props: Props) => { props.article.layout !== 'image' } > -
+
{props.article.cover_caption (
-
+
{(a) => ( -
+
{
-
+
{`${t('Show')} `} - {t('All posts')} + {t('All posts')}
diff --git a/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx b/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx index 522b28a7..4c782698 100644 --- a/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx +++ b/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx @@ -12,45 +12,38 @@ type Props = { export const DarkModeToggle = (props: Props) => { const { t } = useLocalize() - const [editorDarkMode, setEditorDarkMode] = createSignal(false) + const [isDark, setIsDark] = createSignal(false) onMount(() => { - const editorDarkModeSelected = localStorage?.getItem('editorDarkMode') - const editorDarkModeAttr = document.documentElement.getAttribute('editorDarkMode') - if (editorDarkModeSelected === 'true') { - setEditorDarkMode(true) - document.documentElement.dataset.editorDarkMode = 'true' - } else if (editorDarkModeSelected === 'false') { - setEditorDarkMode(false) - document.documentElement.dataset.editorDarkMode = 'false' + const theme = localStorage?.getItem('theme') || document.documentElement.getAttribute('theme') + if (theme === 'dark') { + setIsDark(true) + document.documentElement.dataset.theme = 'dark' + } else if (theme !== 'dark') { + setIsDark(false) + document.documentElement.dataset.theme = 'light' } - if (!(editorDarkModeAttr || editorDarkModeSelected)) { - localStorage?.setItem('editorDarkMode', 'false') - document.documentElement.dataset.editorDarkMode = 'false' + if (!theme) { + localStorage?.setItem('theme', 'light') + document.documentElement.dataset.theme = 'light' } onCleanup(() => { - setEditorDarkMode(false) - document.documentElement.dataset.editorDarkMode = undefined + setIsDark(false) + document.documentElement.dataset.theme = undefined }) }) const handleSwitchTheme = () => { - setEditorDarkMode(!editorDarkMode()) - localStorage?.setItem('editorDarkMode', editorDarkMode() ? 'true' : 'false') - document.documentElement.dataset.editorDarkMode = editorDarkMode() ? 'true' : 'false' + setIsDark(!isDark()) + localStorage?.setItem('theme', isDark() ? 'dark' : 'light') + document.documentElement.dataset.theme = isDark() ? 'dark' : 'light' } return (
- +