From 14478e575769b1f9ed1e64a3618c29c0718e27cd Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 23 May 2021 02:05:49 +0800 Subject: [PATCH] chore: rename sidebar body wrapper --- __tests__/cases/homepage.not-render.ts | 2 +- __tests__/cases/project-page.gitako.ts | 2 +- __tests__/cases/pull-request-page.gitako.ts | 2 +- src/components/ResizeHandler.tsx | 2 +- src/components/SideBar.tsx | 6 +++--- .../{Resizable.tsx => SideBarBodyWrapper.tsx} | 10 +++++++--- src/styles/index.scss | 4 ++-- 7 files changed, 16 insertions(+), 12 deletions(-) rename src/components/{Resizable.tsx => SideBarBodyWrapper.tsx} (86%) diff --git a/__tests__/cases/homepage.not-render.ts b/__tests__/cases/homepage.not-render.ts index 43cbac6..1a326a7 100644 --- a/__tests__/cases/homepage.not-render.ts +++ b/__tests__/cases/homepage.not-render.ts @@ -4,6 +4,6 @@ describe(`in GitHub homepage`, () => { beforeAll(() => page.goto('https://github.com')) it('should not render Gitako', async () => { - await expectToNotFind('.gitako-side-bar .gitako-position-wrapper') + await expectToNotFind('.gitako-side-bar .gitako-side-bar-body-wrapper') }) }) diff --git a/__tests__/cases/project-page.gitako.ts b/__tests__/cases/project-page.gitako.ts index 6df7c19..f9982e0 100644 --- a/__tests__/cases/project-page.gitako.ts +++ b/__tests__/cases/project-page.gitako.ts @@ -4,7 +4,7 @@ describe(`in Gitako project page`, () => { beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako')) it('should render Gitako', async () => { - await expectToFind('.gitako-side-bar .gitako-position-wrapper') + await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper') }) it('should render file list', async () => { diff --git a/__tests__/cases/pull-request-page.gitako.ts b/__tests__/cases/pull-request-page.gitako.ts index 4658ea1..00c7c18 100644 --- a/__tests__/cases/pull-request-page.gitako.ts +++ b/__tests__/cases/pull-request-page.gitako.ts @@ -4,7 +4,7 @@ describe(`in Gitako project page`, () => { beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/pull/71')) it('should render Gitako', async () => { - await expectToFind('.gitako-side-bar .gitako-position-wrapper') + await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper') }) it('should render file list', async () => { diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx index 70e983a..5d0d02b 100644 --- a/src/components/ResizeHandler.tsx +++ b/src/components/ResizeHandler.tsx @@ -1,6 +1,6 @@ import { Icon } from 'components/Icon' import * as React from 'react' -import { Size } from './Resizable' +import { Size } from './SideBarBodyWrapper' type Props = { size: Size diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index e2b022d..73fb14d 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -2,8 +2,8 @@ import { AccessDeniedDescription } from 'components/AccessDeniedDescription' import { FileExplorer } from 'components/FileExplorer' import { MetaBar } from 'components/MetaBar' import { Portal } from 'components/Portal' -import { Resizable } from 'components/Resizable' import { SettingsBar } from 'components/settings/SettingsBar' +import { SideBarBodyWrapper } from 'components/SideBarBodyWrapper' import { ToggleShowButton } from 'components/ToggleShowButton' import { useConfigs } from 'containers/ConfigsContext' import { platform } from 'platforms' @@ -105,7 +105,7 @@ export function SideBar() { {!shouldShow && } - +
-
+ ) diff --git a/src/components/Resizable.tsx b/src/components/SideBarBodyWrapper.tsx similarity index 86% rename from src/components/Resizable.tsx rename to src/components/SideBarBodyWrapper.tsx index c7758cd..54735e4 100644 --- a/src/components/Resizable.tsx +++ b/src/components/SideBarBodyWrapper.tsx @@ -16,7 +16,11 @@ type Props = { const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100 const MINIMAL_WIDTH = 240 -export function Resizable({ baseSize, className, children }: React.PropsWithChildren) { +export function SideBarBodyWrapper({ + baseSize, + className, + children, +}: React.PropsWithChildren) { const [size, setSize] = React.useState(baseSize) const configContext = useConfigs() @@ -48,8 +52,8 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil else setSize(size) }, []) return ( -
-
{children}
+
+
{children}
{features.resize && }
) diff --git a/src/styles/index.scss b/src/styles/index.scss index 52d3179..a452a3b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -264,7 +264,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- color: var(--gitako-text-link); } - .#{$name}-position-wrapper { + .#{$name}-side-bar-body-wrapper { position: fixed; top: 0; left: 0; @@ -276,7 +276,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- @extend %hidden; } - .gitako-position-content { + .gitako-side-bar-body-wrapper-content { width: var(--gitako-width); } }