opensourcemirror
/
oni
mirror of https://github.com/onivim/oni.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Feature/vcs manager styling improvements (#2536) 

* add octicons to vsc components

* update component tests

* fix lint errors
This commit is contained in:
Akin 2018-09-02 23:46:56 +01:00 committed by GitHub
parent c06df641ff
commit 9cf1d05433
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 82 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
browser/src/Services/VersionControl/VersionControlView.tsx
View File

@ -183,7 +183,7 @@ export class VersionControlView extends React.Component<ConnectedProps, State> {
/>
<StagedSection
titleId={IDs.staged}
icon="plus-circle"
icon="diff-added"
files={staged}
selectedId={selectedId}
filesToCommit={filesToCommit}
@ -198,7 +198,7 @@ export class VersionControlView extends React.Component<ConnectedProps, State> {
handleCommitCancel={this.handleCommitCancel}
/>
<VersionControlStatus
icon="minus-circle"
icon="diff-modified"
files={modified}
titleId={IDs.modified}
selectedId={selectedId}
@ -208,7 +208,7 @@ export class VersionControlView extends React.Component<ConnectedProps, State> {
/>
<VersionControlStatus
files={untracked}
icon="question-circle"
icon="diff-ignored"
titleId={IDs.untracked}
selectedId={selectedId}
visibility={this.state.untracked}

13
browser/src/UI/components/Octicon.tsx Normal file
View File

@ -0,0 +1,13 @@
import Octicon, { getIconByName, iconsByName } from "@githubprimer/octicons-react"
import * as React from "react"
export type Icons = keyof iconsByName
interface IProps {
name: Icons
props?: {}
}
export default function OcticonByName({ name, ...props }: IProps) {
return <Octicon {...props} icon={getIconByName(name)} />
}

32
browser/src/UI/components/VersionControl/Branch.tsx
View File

@ -1,8 +1,8 @@
import * as React from "react"
import { Diff } from "./../../../Services/VersionControl"
import styled, { IThemeColors, withProps } from "./../../../UI/components/common"
import { Icon } from "./../../../UI/Icon"
import styled from "./../../../UI/components/common"
import Octicon, { Icons } from "./../../../UI/components/Octicon"
type ChangeTypes = "change" | "addition" | "deletion"
@ -31,20 +31,9 @@ export const BranchNameContainer = styled.span`
margin-left: 4px;
`
const selectColorByType = (type: ChangeTypes, theme: IThemeColors) => {
switch (type) {
case "addition":
case "deletion":
case "change":
default:
return ""
}
}
const ChangeSpanContainer = withProps<{ type: ChangeTypes }>(styled.span)`
const ChangeSpanContainer = styled.span`
font-size: 0.7rem;
padding: 0 0.15rem;
color: ${({ type, theme }) => selectColorByType(type, theme)};
`
const ChangeSpan = styled.span`
@ -61,7 +50,7 @@ export const Branch: React.SFC<BranchProps> = ({ diff, branch, children }) =>
branch && (
<BranchContainer>
<BranchText>
<Icon name="code-fork" />
<Octicon name="git-branch" />
<BranchNameContainer>
{`${branch} `}
{diff && (
@ -76,15 +65,16 @@ export const Branch: React.SFC<BranchProps> = ({ diff, branch, children }) =>
</BranchContainer>
)
const getClassNameForType = (type: ChangeTypes) => {
const getClassNameForType = (type: ChangeTypes): Icons => {
switch (type) {
case "addition":
return "plus-circle"
return "diff-added"
case "deletion":
return "minus-circle"
return "diff-removed"
case "change":
return "diff-modified"
default:
return "question-circle"
return "diff-ignored"
}
}
@ -104,8 +94,8 @@ export const DeletionsAndInsertions: React.SFC<ChangesProps> = ({ deletions, ins
export const VCSIcon: React.SFC<ICreateIconArgs> = ({ type, num }) =>
!!num && (
<span>
<ChangeSpanContainer type={type}>
<Icon name={getClassNameForType(type)} />
<ChangeSpanContainer>
<Octicon name={getClassNameForType(type)} />
</ChangeSpanContainer>
<ChangeSpan data-test={`${type}-${num}`}>{num}</ChangeSpan>
</span>

8
browser/src/UI/components/VersionControl/Commits.tsx
View File

@ -1,7 +1,8 @@
import * as React from "react"
import { Logs } from "../../../Services/VersionControl/VersionControlProvider"
import { sidebarItemSelected, styled, withProps } from "./../../../UI/components/common"
import styled, { getSelectedBorder } from "./../../../UI/components/common"
import Octicon from "./../../../UI/components/Octicon"
import { formatDate } from "./../../../Utility"
import VCSSectionTitle from "./../SectionTitle"
@ -22,8 +23,8 @@ const List = styled.ul`
overflow-x: hidden;
max-height: 30em;
`
export const ListItem = withProps<{ isSelected?: boolean }>(styled.li)`
${({ isSelected }) => isSelected && sidebarItemSelected};
export const ListItem = styled<{ isSelected?: boolean }, "li">("li")`
border: ${getSelectedBorder};
padding: 0.4rem;
`
@ -57,6 +58,7 @@ const CommitsSection: React.SFC<ICommitsSection> = ({ commits, ...props }) => {
isSelected={props.selectedId === prevCommit.hash}
>
<Detail>
<Octicon name="git-commit" />
<strong> {prevCommit.message}</strong>
</Detail>
<Detail>{prevCommit.hash.slice(0, 6)}</Detail>

41
browser/src/UI/components/VersionControl/File.tsx
View File

@ -1,22 +1,21 @@
import * as path from "path"
import * as React from "react"
import { Sneakable } from "../Sneakable"
import { Icon } from "./../../Icon"
import styled, { sidebarItemSelected, withProps } from "./../common"
import styled, { getSelectedBorder } from "./../common"
import Octicon, { Icons } from "./../Octicon"
import { Sneakable } from "./../Sneakable"
interface IProps {
onClick: (path: string) => void
file: string
icon: string
icon: Icons
isSelected: boolean
}
const Row = styled.div`
border: ${getSelectedBorder};
display: flex;
span > {
margin-right: 0.2em;
}
padding: 0.3em;
`
const truncate = (str: string) =>
@ -25,30 +24,22 @@ const truncate = (str: string) =>
.slice(-2)
.join(path.sep)
interface SelectionProps {
isSelected?: boolean
}
const Column = withProps<SelectionProps>(styled.div)`
${sidebarItemSelected};
display: flex;
flex-direction: column;
padding: 0.3em;
const Name = styled.span`
word-wrap: break-word;
`
const Name = styled.span`
margin-left: 0.5em;
word-wrap: break-word;
const IconContainer = styled.div`
margin-right: 0.5rem;
`
const File: React.SFC<IProps> = ({ file, icon, onClick, isSelected }) => (
<Sneakable callback={() => onClick(file)} key={file}>
<Column onClick={() => onClick(file)} isSelected={isSelected}>
<Row>
<Icon name={icon} />
<Name>{truncate(file)}</Name>
</Row>
</Column>
<Row onClick={() => onClick(file)} isSelected={isSelected}>
<IconContainer>
<Octicon name={icon} />
</IconContainer>
<Name>{truncate(file)}</Name>
</Row>
</Sneakable>
)

7
browser/src/UI/components/VersionControl/Staged.tsx
View File

@ -1,8 +1,9 @@
import * as React from "react"
import styled, { Center, sidebarItemSelected, withProps } from "../common"
import styled, { Center, getSelectedBorder, withProps } from "../common"
import SectionTitle from "../SectionTitle"
import { LoadingSpinner } from "./../../../UI/components/LoadingSpinner"
import { Icons } from "./../../../UI/components/Octicon"
import CommitMessage from "./CommitMessage"
import File from "./File"
@ -18,7 +19,7 @@ interface IProps {
files?: string[]
titleId: string
selectedId: string
icon: string
icon: Icons
loading: boolean
handleSelection: (id: string) => void
filesToCommit: string[]
@ -32,7 +33,7 @@ interface IProps {
}
const OptionsBar = withProps<{ isSelected: boolean }>(styled.span)`
${p => p.isSelected && sidebarItemSelected};
border: ${getSelectedBorder};
display: block;
width: 100%;
`

5
browser/src/UI/components/VersionControl/Status.tsx
View File

@ -1,13 +1,14 @@
import * as React from "react"
import VCSSectionTitle from "../SectionTitle"
import { Icons } from "./../Octicon"
import VCSSectionTitle from "./../SectionTitle"
import File from "./File"
interface IModifiedFilesProps {
files?: string[]
titleId: string
selectedId: string
icon: string
icon: Icons
onClick: (id: string) => void
toggleVisibility: () => void
visibility: boolean

7
browser/src/UI/components/common.ts
View File

@ -87,6 +87,13 @@ type GetBorder = (
},
) => string
export const showScrollbarOnHover = css`
overflow: hidden;
&:hover {
overflow: overlay;
}
`
export const getSelectedBorder: GetBorder = ({ isSelected, borderSize = "1px", theme }) =>
isSelected
? `${borderSize} solid ${theme["highlight.mode.normal.background"]}`

2
jest.config.js
View File

@ -1,6 +1,6 @@
module.exports = {
bail: true,
verbose: true,
verbose: false,
collectCoverage: true,
coverageDirectory: "<rootDir>/coverage/jest/",
setupFiles: ["<rootDir>/ui-tests/jestsetup.ts"],

1
package.json
View File

@ -856,6 +856,7 @@
},
"license": "MIT",
"dependencies": {
"@githubprimer/octicons-react": "^8.1.0",
"chokidar": "^2.0.3",
"color-normalize": "^1.0.3",
"dompurify": "^1.0.3",

18
ui-tests/VersionControl/VersionControlComponents.test.tsx
View File

@ -2,6 +2,8 @@ import { mount, shallow } from "enzyme"
import { shallowToJson } from "enzyme-to-json"
import * as React from "react"
import Octicon from "./../../browser/src/UI/components/Octicon"
import {
Branch,
BranchNameContainer,
@ -46,25 +48,25 @@ describe("<Branch />", () => {
it("should render the correct icon for additions", () => {
const wrapper = mount(<Branch branch="test-branch" diff={diff} />)
const icon = wrapper.find("i.fa-plus-circle")
expect(icon.length).toBe(1)
const hasAdded = wrapper.contains(<Octicon name="diff-added" />)
expect(hasAdded).toBe(true)
})
it("should render the correct icon for deletions", () => {
const wrapper = mount(<Branch branch="test-branch" diff={diff} />)
const icon = wrapper.find("i.fa-minus-circle")
expect(icon.length).toBe(1)
const hasDeleted = wrapper.contains(<Octicon name="diff-removed" />)
expect(hasDeleted).toBe(true)
})
it("Should not render an icon if there were no insertions", () => {
const wrapper = mount(<Branch branch="test-branch" diff={{ ...diff, insertions: 0 }} />)
const icon = wrapper.find("i.fa-plus-circle")
expect(icon.length).toBe(0)
const icon = wrapper.contains(<Octicon name="diff-added" />)
expect(icon).toBe(false)
})
it("Should not render an icon if there were no deletions", () => {
const wrapper = mount(<Branch branch="test-branch" diff={{ ...diff, deletions: 0 }} />)
const icon = wrapper.find("i.fa-minus-circle")
expect(icon.length).toBe(0)
const icon = wrapper.contains(<Octicon name="diff-removed" />)
expect(icon).toBe(false)
})
})

4
ui-tests/VersionControl/__snapshots__/VersionControlComponents.test.tsx.snap
View File

@ -3,8 +3,8 @@
exports[`<Branch /> should match last known snapshot unless we make a change 1`] = `
<styled.div>
<styled.span>
<Icon
name="code-fork"
<OcticonByName
name="git-branch"
/>
<styled.span>
test-branch

6
yarn.lock
View File

@ -40,6 +40,12 @@
esutils "^2.0.2"
js-tokens "^3.0.0"
"@githubprimer/octicons-react@^8.1.0":
version "8.1.0"
resolved "https://registry.yarnpkg.com/@githubprimer/octicons-react/-/octicons-react-8.1.0.tgz#731c40b6b231dcee731f0f2d37c67e7ee857bd6a"
dependencies:
prop-types "^15.6.1"
"@sindresorhus/is@^0.7.0":
version "0.7.0"
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"