prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: use octicons-react

Browse source
This commit is contained in:
EnixCoda 2019-08-19 21:40:13 +08:00
parent 5c60353c53
commit 80dd061cce
No known key found for this signature in database
GPG key ID: 0C1A07377913A1DD
6 changed files with 55 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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",

41
src/components/Icon.tsx
View file

@ -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<Props> = function Icon({ type, className = undefined, ...otherProps }) {
const icon = getSVGIconComponent(type)
return (
<div className={cx('octicon-wrapper', className)} {...otherProps}>
{React.createElement(getSVGIconComponent(type), iconStyle)}
{React.createElement(Octicon, {
icon,
className: cx('octicon', icon.name),
})}
</div>
)
}

2
src/components/LoadingIndicator.tsx
View file

@ -1,5 +1,5 @@
import * as React from 'react'
import Icon from 'components/Icon'
import * as React from 'react'
type Props = {
text: React.ReactNode

2
src/components/ResizeHandler.tsx
View file

@ -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 = {

39
src/content.less
View file

@ -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;

9
yarn.lock
View file

@ -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==