From bf0bdf92e8954d10d50342b1cdadfb293857eecf Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sat, 19 May 2018 13:01:31 +0800 Subject: [PATCH] feat: toggle show --- src/components/Icon.js | 12 +++--- src/components/Logo.js | 18 --------- src/components/SettingsBar.js | 5 ++- src/components/SideBar.js | 17 +++----- src/components/ToggleShowButton.js | 13 +++++++ src/content.less | 62 ++++++++++++++++-------------- src/utils/DOMHelper.js | 16 +++----- 7 files changed, 68 insertions(+), 75 deletions(-) delete mode 100644 src/components/Logo.js create mode 100644 src/components/ToggleShowButton.js diff --git a/src/components/Icon.js b/src/components/Icon.js index 3bdb15f..1cd33f7 100644 --- a/src/components/Icon.js +++ b/src/components/Icon.js @@ -1,8 +1,8 @@ import preact from 'preact' /** @jsx preact.h */ -import ChevronLeft from '../assets/icons/octicons/chevron-left.svg?svgr' -import ChevronRight from '../assets/icons/octicons/chevron-right.svg?svgr' +import Octoface from '../assets/icons/octicons/octoface.svg?svgr' +import ChevronDown from '../assets/icons/octicons/chevron-down.svg?svgr' import TriangleRight from '../assets/icons/octicons/triangle-right.svg?svgr' import FilePdf from '../assets/icons/octicons/file-pdf.svg?svgr' import File from '../assets/icons/octicons/file.svg?svgr' @@ -19,10 +19,10 @@ import Gear from '../assets/icons/octicons/gear.svg?svgr' function getSVGIconComponent(type) { switch (type) { - case 'chevron-left': - return ChevronLeft - case 'chevron-right': - return ChevronRight + case 'octoface': + return Octoface + case 'chevron-down': + return ChevronDown case 'x': return X case 'gear': diff --git a/src/components/Logo.js b/src/components/Logo.js deleted file mode 100644 index 78843fa..0000000 --- a/src/components/Logo.js +++ /dev/null @@ -1,18 +0,0 @@ -import preact from 'preact' -/** @jsx preact.h */ -import Icon from './Icon' - -import cx from '../utils/cx' - -export default function Logo({ loading, shouldShow, toggleShowSideBar }) { - return ( -
- - -
- ) -} diff --git a/src/components/SettingsBar.js b/src/components/SettingsBar.js index 4bfec5e..4a8e0b4 100644 --- a/src/components/SettingsBar.js +++ b/src/components/SettingsBar.js @@ -37,7 +37,10 @@ export default class SettingsBar extends preact.Component {

{activated ? 'Settings' : ''}

- + {activated + ? + : + }
{activated && (
diff --git a/src/components/SideBar.js b/src/components/SideBar.js index 7f0a375..c350e34 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -3,7 +3,7 @@ import Portal from 'preact-portal' /** @jsx preact.h */ import FileExplorer from './FileExplorer' -import Logo from './Logo' +import ToggleShowButton from './ToggleShowButton' import MetaBar from './MetaBar' import SettingsBar from './SettingsBar' @@ -112,15 +112,6 @@ export default class SideBar extends preact.Component { ) } - renderLogo() { - const { loading, shouldShow } = this.state - return ( - - - - ) - } - renderContent() { const { errorDueToPrivateRepo, metaData, treeData, showSettings } = this.state return ( @@ -133,10 +124,12 @@ export default class SideBar extends preact.Component { } render() { - const { shouldShow, showSettings, hasAccessToken } = this.state + const { shouldShow, showSettings, hasAccessToken, loading } = this.state return (
- {this.renderLogo()} + + +
{this.renderContent()} + +
+ ) +} diff --git a/src/content.less b/src/content.less index bebbbed..f16faf0 100644 --- a/src/content.less +++ b/src/content.less @@ -65,27 +65,45 @@ visibility: hidden; } -.@{name}-logo-wrapper { - margin-right: 12px; - padding-right: 12px; - border-right: 1px solid #ffffffbf; - height: 100%; - line-height: 1; +.@{name}-toggle-show-button-wrapper { + @animation-duration: .8s; + position: fixed; + top: 5px; + left: 0; + z-index: 2; display: inline-flex; + justify-content: center; align-items: center; cursor: pointer; - - .action-icon { - width: 12px; - height: 24px; - margin-right: 8px; + width: 30px; + height: 30px; + will-change: transform; + transform: translateX(225px); + transition: all @animation-duration ease; + border: 1px solid transparent; + @media screen and (min-width: @content-width) { + transform: translateX(~'calc((100vw - ' @content-width ~') / 2 + ' 225px ~')'); } - .@{name}-logo { - font-family: monospace; - vertical-align: middle; - cursor: pointer; - -webkit-font-smoothing: antialiased; + &.collapsed { + border-color: #999999; + background: #f5f5f5; + border-radius: 3px; + + @media screen and (max-width: @content-width) { + transform: translateX(5px); + } + + .action-icon { + color: #0366d6; + } + } + + .action-icon { + color: #333; + width: 16px; + height: 20px; + transition: all @animation-duration ease; } } @@ -259,15 +277,3 @@ } } } - -@keyframes rainbow { - 0% { - background-position: 9% 91%; - } - 50% { - background-position: 91% 9%; - } - 100% { - background-position: 9% 91%; - } -} diff --git a/src/utils/DOMHelper.js b/src/utils/DOMHelper.js index bb4df75..09fde50 100644 --- a/src/utils/DOMHelper.js +++ b/src/utils/DOMHelper.js @@ -24,17 +24,13 @@ function setBodyIndent(shouldShowGitako) { function insertLogo() { const logoSelector = '.gitako .gitako-logo' const logoElement = document.querySelector(logoSelector) - if (!logoElement) { - const logoMountElement = document.createElement('div') - logoMountElement.setAttribute('class', 'gitako-logo-mount-point') - const headerSelector = 'header' - const headerElement = document.querySelector(headerSelector) - const headerContentWrapper = headerElement.children.item(0) - const headerContents = headerContentWrapper.children.item(0) - headerContents.insertBefore(logoMountElement, headerContents.children.item(0)) - return logoMountElement + if (logoElement) { + return logoElement } - return logoElement + const logoMountElement = document.createElement('div') + logoMountElement.setAttribute('class', 'gitako-logo-mount-point') + document.body.appendChild(logoMountElement) + return logoMountElement } /**