From b3cde841f4c5e4895184367132635ed5e29c26f5 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Wed, 8 Apr 2020 17:21:55 +0800 Subject: [PATCH] feat: centralize page content when gitako is open This simplifies layout logic --- src/components/Resizable.tsx | 3 --- src/content.scss | 2 ++ src/platforms/GitHub/index.ts | 23 +++------------------ src/platforms/Gitee/index.ts | 23 +++------------------ src/platforms/dummyPlatformForTypeSafety.ts | 1 - src/platforms/platform.d.ts | 1 - 6 files changed, 8 insertions(+), 45 deletions(-) diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx index 2d6b594..99bb480 100644 --- a/src/components/Resizable.tsx +++ b/src/components/Resizable.tsx @@ -1,6 +1,5 @@ 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' @@ -33,8 +32,6 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil configContext.set({ sideBarWidth: size }) }, [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 48f36c4..feb22e7 100644 --- a/src/content.scss +++ b/src/content.scss @@ -44,6 +44,8 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- } .with-gitako-spacing { + margin-left: var(--gitako-width); + // gitee &.git-project { width: auto; // shrink width diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts index 36f7be8..827dd4f 100644 --- a/src/platforms/GitHub/index.ts +++ b/src/platforms/GitHub/index.ts @@ -2,9 +2,7 @@ import { GITHUB_OAUTH } from 'env' 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' @@ -20,8 +18,8 @@ function parseTreeData(treeData: GitHubAPI.TreeData, metaData: MetaData) { const root: TreeNode = { name: '', path: '', contents: [], type: 'tree' } pathToNode.set('', root) - tree.forEach(item => pathToItem.set(item.path, item)) - tree.forEach(item => { + tree.forEach((item) => pathToItem.set(item.path, item)) + tree.forEach((item) => { // bottom-up search for the deepest node created let path = item.path const itemsToCreateTreeNode: GitHubAPI.TreeItem[] = [] @@ -116,7 +114,7 @@ export const GitHub: Platform = { const treeData = await API.getTreeData(userName, repoName, branchName) const root = parseTreeData(treeData, metaData) - const gitModules = root.contents?.find(item => item.name === '.gitmodules') + const gitModules = root.contents?.find((item) => item.name === '.gitmodules') if (gitModules) { if (metaData.userName && metaData.repoName && gitModules.sha) { const blobData = await API.getBlobData( @@ -155,7 +153,6 @@ export const GitHub: Platform = { } return accessToken }, - useResizeStylesheets, getOAuthLink() { const params = new URLSearchParams({ client_id: GITHUB_OAUTH.clientId, @@ -189,17 +186,3 @@ 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 fb3d208..2ef8d24 100644 --- a/src/platforms/Gitee/index.ts +++ b/src/platforms/Gitee/index.ts @@ -2,9 +2,7 @@ import { GITEE_OAUTH } from 'env' 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' @@ -20,8 +18,8 @@ function parseTreeData(treeData: GiteeAPI.TreeData, metaData: MetaData) { const root: TreeNode = { name: '', path: '', contents: [], type: 'tree' } pathToNode.set('', root) - tree.forEach(item => pathToItem.set(item.path, item)) - tree.forEach(item => { + tree.forEach((item) => pathToItem.set(item.path, item)) + tree.forEach((item) => { // bottom-up search for the deepest node created let path = item.path const itemsToCreateTreeNode: GiteeAPI.TreeItem[] = [] @@ -116,7 +114,7 @@ export const Gitee: Platform = { const treeData = await API.getTreeData(userName, repoName, branchName) const root = parseTreeData(treeData, metaData) - const gitModules = root.contents?.find(item => item.name === '.gitmodules') + const gitModules = root.contents?.find((item) => item.name === '.gitmodules') if (gitModules) { if (metaData.userName && metaData.repoName && gitModules.sha) { const blobData = await API.getBlobData( @@ -140,7 +138,6 @@ export const Gitee: Platform = { getCurrentPath(branchName) { return URLHelper.getCurrentPath(branchName) }, - useResizeStylesheets, getOAuthLink() { const params = new URLSearchParams({ client_id: GITEE_OAUTH.clientId, @@ -178,17 +175,3 @@ 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 57dd469..9852e99 100644 --- a/src/platforms/dummyPlatformForTypeSafety.ts +++ b/src/platforms/dummyPlatformForTypeSafety.ts @@ -9,7 +9,6 @@ export const dummyPlatformForTypeSafety: Platform = { }, getCurrentPath: dummyPlatformMethod, setOAuth: dummyPlatformMethod, - useResizeStylesheets: dummyPlatformMethod, getOAuthLink: dummyPlatformMethod, } diff --git a/src/platforms/platform.d.ts b/src/platforms/platform.d.ts index 95c6bf5..c8c2d07 100644 --- a/src/platforms/platform.d.ts +++ b/src/platforms/platform.d.ts @@ -4,7 +4,6 @@ type Platform = { getTreeData(metaData: MetaData, accessToken?: string): Promise shouldShow(metaData?: Partial): boolean getCurrentPath(branchName: string): string[] | null - useResizeStylesheets(size: number): void setOAuth(code: string): Promise getOAuthLink(): string }