From 80dd061ccee8e1cb0705308f995de794f202b4d6 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Mon, 19 Aug 2019 21:40:13 +0800 Subject: [PATCH] refactor: use octicons-react --- package.json | 1 + src/components/Icon.tsx | 41 +++++++++++++++-------------- src/components/LoadingIndicator.tsx | 2 +- src/components/ResizeHandler.tsx | 2 +- src/content.less | 39 ++++++++++++++++----------- yarn.lock | 9 ++++++- 6 files changed, 55 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 3baea3d..6a139a2 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@primer/octicons": "^9.1.1", + "@primer/octicons-react": "^9.2.0", "@sentry/browser": "^5.5.0", "@types/react-window": "^1.8.1", "ini": "^1.3.5", diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index a59f335..438900b 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -1,21 +1,20 @@ +import Octicon, { + ChevronDown, + File, + FileCode, + FileMedia, + FilePdf, + FileSubmodule as Submodule, + FileZip, + Gear, + Grabber, + Markdown, + Octoface, + Reply, + TriangleRight, + X, +} from '@primer/octicons-react' import * as React from 'react' -import Submodule from 'assets/icons/octicons/file-submodule.svg?svgr' -import Grabber from 'assets/icons/octicons/grabber.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' -import FileZip from 'assets/icons/octicons/file-zip.svg?svgr' -import Markdown from 'assets/icons/octicons/markdown.svg?svgr' -import FileMedia from 'assets/icons/octicons/file-media.svg?svgr' -import FileCode from 'assets/icons/octicons/file-code.svg?svgr' -import Reply from 'assets/icons/octicons/reply.svg?svgr' -// import FileBinary from 'assets/icons/octicons/file-binary.svg?svgr' -// import FileSymlinkDirectory from 'assets/icons/octicons/file-symlink-directory.svg?svgr' -// import FileSymlinkFile from 'assets/icons/octicons/file-symlink-file.svg?svgr' -import X from 'assets/icons/octicons/x.svg?svgr' -import Gear from 'assets/icons/octicons/gear.svg?svgr' import cx from 'utils/cx' function getSVGIconComponent(type: string) { @@ -70,8 +69,6 @@ function getSVGIconComponent(type: string) { } } -const iconStyle = { width: '100%', height: '100%' } - type Props = { type: string className?: string @@ -79,9 +76,13 @@ type Props = { } const Icon: React.SFC = function Icon({ type, className = undefined, ...otherProps }) { + const icon = getSVGIconComponent(type) return (
- {React.createElement(getSVGIconComponent(type), iconStyle)} + {React.createElement(Octicon, { + icon, + className: cx('octicon', icon.name), + })}
) } diff --git a/src/components/LoadingIndicator.tsx b/src/components/LoadingIndicator.tsx index ea27e73..20e8f5a 100644 --- a/src/components/LoadingIndicator.tsx +++ b/src/components/LoadingIndicator.tsx @@ -1,5 +1,5 @@ -import * as React from 'react' import Icon from 'components/Icon' +import * as React from 'react' type Props = { text: React.ReactNode diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx index 5a6e59a..9886d13 100644 --- a/src/components/ResizeHandler.tsx +++ b/src/components/ResizeHandler.tsx @@ -1,5 +1,5 @@ -import * as React from 'react' import Icon from 'components/Icon' +import * as React from 'react' import { Size } from './Resizable' type Props = { diff --git a/src/content.less b/src/content.less index 1a7287a..906204a 100644 --- a/src/content.less +++ b/src/content.less @@ -92,8 +92,9 @@ justify-content: center; align-items: center; cursor: pointer; - min-width: 30px; + width: 30px; height: 30px; + padding: 4px; will-change: transform; border: 1px solid transparent; @@ -140,10 +141,14 @@ .action-icon { color: #666666; - width: 16px; - height: 20px; - margin: 5px 6px; + width: 100%; + height: 100%; + text-align: center; transition: all @animation-duration ease; + .octicon { + width: 100%; + height: 100%; + } } &:hover { @@ -189,15 +194,17 @@ width: 0; background: #e1e4e8; border-left: 1px solid #e1e4e8; + overflow: hidden; &:hover { width: 16px; background: #fafbfc; border-right: 1px solid #e1e4e8; } - .grabber-icon { + .octicon { transform: rotate(90deg); - width: 12px; + width: 14px; + height: 22px; font-size: 0; } } @@ -216,9 +223,10 @@ } .octicon { - transition: 0.3s ease; + transition: transform 0.3s ease; color: rgba(3, 47, 98, 0.55); - vertical-align: initial; + width: 100%; + height: 100%; } .octicon-wrapper { @@ -226,7 +234,6 @@ width: 16px; height: 16px; text-align: center; - vertical-align: middle; } .octicon-color { @@ -275,12 +282,12 @@ .loading-indicator { display: flex; align-items: center; - } - .loading-indicator-icon { - width: 20px; - height: 20px; - animation: rotate 2s infinite linear; + .octicon { + width: 20px; + height: 20px; + animation: rotate 2s infinite linear; + } } } @@ -352,7 +359,7 @@ white-space: nowrap; // folder icon rotate when expand - &.expanded .octicon.octicon-triangle-right { + &.expanded .octicon.TriangleRight { transform: rotate(90deg); } @@ -362,7 +369,6 @@ .node-item-name { padding-left: 6px; - vertical-align: middle; } } .node-item:hover .node-item-name { @@ -391,6 +397,7 @@ background: #fafbfc; display: flex; flex-direction: column; + max-height: 100%; &-title { border-top: 1px solid #eaecef; padding: 6px 10px; diff --git a/yarn.lock b/yarn.lock index f61790a..f4e9429 100644 --- a/yarn.lock +++ b/yarn.lock @@ -772,6 +772,13 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@primer/octicons-react@^9.2.0": + version "9.2.0" + resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-9.2.0.tgz#76446c36346fef67cbf91c78bd329c8f860c35d5" + integrity sha512-IWY8tJ6j40R5ks6KYORxVxBsmKax/ttXcH7SyHfku0IrYYc/3TSwaPhUDh9hGKDoyE9TUmrku101XJgCbfKhmg== + dependencies: + prop-types "^15.6.1" + "@primer/octicons@^9.1.1": version "9.1.1" resolved "https://registry.yarnpkg.com/@primer/octicons/-/octicons-9.1.1.tgz#a72a59e8ec77521cc2eefb36c345f780a61c79fb" @@ -4158,7 +4165,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.6.2: +prop-types@^15.6.1, prop-types@^15.6.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==