From 6a55eb3dc2555bf9fc9bc2b231b36298c8ec8a11 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 29 Mar 2020 01:12:49 +0800 Subject: [PATCH] refactor: differ resizing by platforms --- src/components/Resizable.tsx | 16 ++------------ src/content.scss | 23 ++++++++++----------- src/platforms/GitHub/index.ts | 17 +++++++++++++++ src/platforms/Gitee/index.ts | 17 +++++++++++++++ src/platforms/dummyPlatformForTypeSafety.ts | 1 + src/platforms/platform.d.ts | 1 + 6 files changed, 49 insertions(+), 26 deletions(-) diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx index d2002d8..2d6b594 100644 --- a/src/components/Resizable.tsx +++ b/src/components/Resizable.tsx @@ -1,11 +1,10 @@ import { HorizontalResizeHandler } from 'components/ResizeHandler' import { useConfigs } from 'containers/ConfigsContext' +import { platform } from 'platforms' import * as React from 'react' import { useWindowSize } from 'react-use' import { cx } from 'utils/cx' -import { bodySpacingClassName } from 'utils/DOMHelper' import * as features from 'utils/features' -import { useMediaStyleSheet } from 'utils/hooks/useMediaStyleSheet' export type Size = number type Props = { @@ -14,7 +13,6 @@ type Props = { } const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100 -const GITHUB_WIDTH = 1020 export function Resizable({ baseSize, className, children }: React.PropsWithChildren) { const [size, setSize] = React.useState(baseSize) @@ -35,17 +33,7 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil configContext.set({ sideBarWidth: size }) }, [size]) - useMediaStyleSheet( - `.${bodySpacingClassName} { margin-left: calc(var(--gitako-width) * 2 + 1020px - 100vw); }`, - size => [`min-width: ${size + GITHUB_WIDTH}px`, `max-width: ${size * 2 + GITHUB_WIDTH}px`], - size, - ) - - useMediaStyleSheet( - `.${bodySpacingClassName} { margin-left: var(--gitako-width); }`, - size => [`max-width: ${size + GITHUB_WIDTH}px`], - size, - ) + platform.useResizeStylesheets(size) const onResize = React.useCallback((size: number) => { if (size < window.innerWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH) setSize(size) diff --git a/src/content.scss b/src/content.scss index 11351f4..8427ea4 100644 --- a/src/content.scss +++ b/src/content.scss @@ -35,6 +35,8 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- &.git-project { #git-header-nav { position: static; + padding-left: 0; + padding-right: 0; } padding-top: 0; @@ -44,19 +46,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- .with-gitako-spacing { // gitee &.git-project { - // width: auto; // shrink width - .ui.container { - // width: auto; - } + width: auto; // shrink width .site-content { - // min-width: auto; - // max-width: 1020px; + min-width: 1040px; } } } @media (min-width: $github-content-width) { - body { + // github + body.env-production { min-width: $github-content-width; } } @@ -541,19 +540,19 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- } } } +} - // gitee - body.git-project { - // reset styles +// gitee +.git-project { + // reset styles + .#{$name}-side-bar { input[type='text'], input[type='password'], .ui-autocomplete-input, textarea, .uneditable-input { padding: initial; - // line-height: 18px; border: none; - // border-radius: 3px; } } } diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 5e70719..1453b81 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -1,7 +1,9 @@ import { platform } from 'platforms' import * as React from 'react' import { useEvent } from 'react-use' +import { bodySpacingClassName } from 'utils/DOMHelper' import { resolveGitModules } from 'utils/gitSubmodule' +import { useMediaStyleSheet } from 'utils/hooks/useMediaStyleSheet' import { sortFoldersToFront } from 'utils/treeParser' import * as API from './API' import * as DOMHelper from './DOMHelper' @@ -152,6 +154,7 @@ export const GitHub: Platform = { } return accessToken }, + useResizeStylesheets, } export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) { @@ -177,3 +180,17 @@ export function useGitHubAttachCopyFileButton(copyFileButton: boolean) { React.useEffect(attachCopyFileButton, [copyFileButton]) useEvent('pjax:complete', attachCopyFileButton, window) } + +function useResizeStylesheets(size: number) { + const CONTENT_WIDTH = 1020 + useMediaStyleSheet( + `.${bodySpacingClassName} { margin-left: calc(var(--gitako-width) * 2 + 1020px - 100vw); }`, + size => [`min-width: ${size + CONTENT_WIDTH}px`, `max-width: ${size * 2 + CONTENT_WIDTH}px`], + size, + ) + useMediaStyleSheet( + `.${bodySpacingClassName} { margin-left: var(--gitako-width); }`, + size => [`max-width: ${size + CONTENT_WIDTH}px`], + size, + ) +} diff --git a/src/platforms/Gitee/index.ts b/src/platforms/Gitee/index.ts index 1336572..c9c46b0 100644 --- a/src/platforms/Gitee/index.ts +++ b/src/platforms/Gitee/index.ts @@ -1,7 +1,9 @@ import { platform } from 'platforms' import * as React from 'react' import { useEvent } from 'react-use' +import { bodySpacingClassName } from 'utils/DOMHelper' import { resolveGitModules } from 'utils/gitSubmodule' +import { useMediaStyleSheet } from 'utils/hooks/useMediaStyleSheet' import { sortFoldersToFront } from 'utils/treeParser' import * as API from './API' import * as DOMHelper from './DOMHelper' @@ -152,6 +154,7 @@ export const Gitee: Platform = { } return accessToken }, + useResizeStylesheets, } export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) { @@ -165,3 +168,17 @@ export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) { React.useEffect(attachCopySnippetButton, [copySnippetButton]) useEvent('pjax:complete', attachCopySnippetButton, window) } + +function useResizeStylesheets(size: number) { + const CONTENT_WIDTH = 1040 + useMediaStyleSheet( + `.${bodySpacingClassName} { margin-left: calc(var(--gitako-width) * 2 + ${CONTENT_WIDTH}px - 100vw); }`, + size => [`min-width: ${size + CONTENT_WIDTH}px`, `max-width: ${size * 2 + CONTENT_WIDTH}px`], + size, + ) + useMediaStyleSheet( + `.${bodySpacingClassName} { margin-left: var(--gitako-width); }`, + size => [`max-width: ${size + CONTENT_WIDTH}px`], + size, + ) +} diff --git a/src/platforms/dummyPlatformForTypeSafety.ts b/src/platforms/dummyPlatformForTypeSafety.ts index 19dc929..6d33ceb 100644 --- a/src/platforms/dummyPlatformForTypeSafety.ts +++ b/src/platforms/dummyPlatformForTypeSafety.ts @@ -9,6 +9,7 @@ export const dummyPlatformForTypeSafety: Platform = { }, getCurrentPath: callingDummyPlatformMethods, setOAuth: callingDummyPlatformMethods, + useResizeStylesheets: callingDummyPlatformMethods, } function callingDummyPlatformMethods(): any { diff --git a/src/platforms/platform.d.ts b/src/platforms/platform.d.ts index c88bc27..6f74eb4 100644 --- a/src/platforms/platform.d.ts +++ b/src/platforms/platform.d.ts @@ -5,4 +5,5 @@ type Platform = { shouldShow(metaData?: Partial): boolean getCurrentPath(branchName: string): string[] | null setOAuth(code: string): Promise + useResizeStylesheets(size: number): void }