From 3f7463d5b7f0271f583c79e1eab17c3d35af4ad8 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sat, 24 Dec 2022 23:33:02 +0800 Subject: [PATCH] refactor: activate styles according to platform --- src/components/SideBar.tsx | 9 +++- src/styles/clippy.scss | 12 ++++++ src/styles/code-folding.scss | 2 +- src/styles/gitee.scss | 82 +++++++++++++++++------------------- src/styles/github.scss | 9 ++++ src/styles/index.scss | 26 +++--------- src/utils/DOMHelper.ts | 14 ++++++ 7 files changed, 88 insertions(+), 66 deletions(-) create mode 100644 src/styles/github.scss diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 9d21088..cdc2179 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -34,7 +34,7 @@ import { SideBarResizeHandler } from './SideBarResizeHandler' export function SideBar() { usePJAXAPI() platform.usePlatformHooks?.() - useMarkGitakoReadyState() + useMarkGitakoGlobalAttributes() const error = useLoadedContext(SideBarErrorContext).value @@ -181,7 +181,12 @@ function useFocusSidebarOnExpand(shouldExpand: boolean) { }, [shouldExpand]) } -function useMarkGitakoReadyState() { +function useMarkGitakoGlobalAttributes() { + React.useEffect(() => { + const detach = DOMHelper.attachStickyGitakoPlatform() + DOMHelper.markGitakoPlatform() + return () => detach() + }, []) React.useEffect(() => { const detach = DOMHelper.attachStickyGitakoReadyState() DOMHelper.markGitakoReadyState(true) diff --git a/src/styles/clippy.scss b/src/styles/clippy.scss index 7b27fb3..d99da50 100644 --- a/src/styles/clippy.scss +++ b/src/styles/clippy.scss @@ -31,3 +31,15 @@ } } } + +// TODO: use react to render the button content and set color with CSS variables +@media (prefers-color-scheme: dark) { + :root[data-color-mode='auto'] .markdown-body .clippy .icon { + filter: invert(0.7); // hack to make it looks like a normal color :P + } +} +:root[data-color-mode='dark'] { + .markdown-body .clippy .icon { + filter: invert(0.7); // hack to make it looks like a normal color :P + } +} diff --git a/src/styles/code-folding.scss b/src/styles/code-folding.scss index a672774..7a7d7cc 100644 --- a/src/styles/code-folding.scss +++ b/src/styles/code-folding.scss @@ -1,4 +1,4 @@ -@mixin github-code-folding { +@mixin code-folding { .blob-wrapper table .blob-num { position: relative; // for positioning min-width: 60px; diff --git a/src/styles/gitee.scss b/src/styles/gitee.scss index 0b3f35b..0762bf4 100644 --- a/src/styles/gitee.scss +++ b/src/styles/gitee.scss @@ -1,51 +1,47 @@ -$name: gitako; // duplicated $gitee-header-z-index: 1002; -[data-#{$name}-ready='true'] { - &.git-project { - #git-header-nav { - position: static; - padding-left: 0; - padding-right: 0; +@mixin gitee($name) { + [data-gitako-platform='Gitee'] { + &[data-#{$name}-ready='true'] { + #git-header-nav { + position: static; + padding-left: 0; + padding-right: 0; + } + + // reset styles + .#{$name}-side-bar { + input[type='text'], + input[type='password'], + .ui-autocomplete-input, + textarea, + .uneditable-input { + padding: initial; + border: none; + } + } + + padding-top: 0; + + .#{$name}-side-bar { + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 0; + } + } } - padding-top: 0; - - .#{$name}-side-bar { - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 0; + &[data-with-gitako-spacing='true'] { + body { + width: auto; // shrink width + .site-content { + min-width: 1040px; + } } } } } - -html[data-with-gitako-spacing='true'] { - body { - &.git-project { - width: auto; // shrink width - .site-content { - min-width: 1040px; - } - } - } -} - -// gitee -.git-project { - // reset styles - .#{$name}-side-bar { - input[type='text'], - input[type='password'], - .ui-autocomplete-input, - textarea, - .uneditable-input { - padding: initial; - border: none; - } - } -} diff --git a/src/styles/github.scss b/src/styles/github.scss new file mode 100644 index 0000000..0063545 --- /dev/null +++ b/src/styles/github.scss @@ -0,0 +1,9 @@ +@mixin github($github-content-width) { + [data-gitako-platform='GitHub'] { + @media (min-width: $github-content-width) { + body { + min-width: $github-content-width; + } + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index b40d78e..30b4e56 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -6,6 +6,7 @@ @import './code-folding.scss'; @import './clippy.scss'; @import './gitee.scss'; +@import './github.scss'; @import './keyframes.scss'; $name: gitako; @@ -32,7 +33,7 @@ $minimal-z-index: max( } [data-#{$name}-ready='true'] { - @include github-code-folding; + @include code-folding; .markdown-body { @include clippy; @@ -47,24 +48,9 @@ html[data-with-gitako-spacing='true'] { } } -@media (min-width: $github-content-width) { - // github - body.env-production { - min-width: $github-content-width; - } -} - -// TODO: use react to render the button content and set color with CSS variables -@media (prefers-color-scheme: dark) { - :root[data-color-mode='auto'] .markdown-body .clippy .icon { - filter: invert(0.7); // hack to make it looks like a normal color :P - } -} -:root[data-color-mode='dark'] { - .markdown-body .clippy .icon { - filter: invert(0.7); // hack to make it looks like a normal color :P - } -} +// platform-specific overrides +@include gitee($name); +@include github($github-content-width); .progress-pjax-loader.is-loading { left: 0; /* reposition progress bar of GitHub */ @@ -591,7 +577,7 @@ html[data-with-gitako-spacing='true'] { } } - .gitako-footer { + .#{$name}-footer { flex-shrink: 0; display: flex; justify-content: space-between; diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts index ba95c0a..fdad55f 100644 --- a/src/utils/DOMHelper.ts +++ b/src/utils/DOMHelper.ts @@ -2,6 +2,7 @@ * this helper helps manipulating DOM */ +import { platformName } from 'platforms' import { $ } from './$' export const rootElementID = 'gitako-root' @@ -61,6 +62,19 @@ export function markGitakoReadyState(ready: boolean) { return gitakoDescriptionTarget.setAttribute(readyDataAttributeName, `${ready}`) } +/** + * indicate current platform to activate specific CSS styles + */ +const platformDataAttributeName = 'data-gitako-platform' +export const attachStickyGitakoPlatform = () => + attachStickyDataAttribute(gitakoDescriptionTarget, platformDataAttributeName, () => + markGitakoPlatform(), + ) +export function markGitakoPlatform() { + if (platformName) + return gitakoDescriptionTarget.setAttribute(platformDataAttributeName, platformName) +} + /** * if should show gitako, then move body right to make space for showing gitako * otherwise, hide the space