Permalink
Browse files

use react-octicons

  • Loading branch information...
1 parent 02e3204 commit 1a45d79db6956f5791045dae1e530e34af5e61a8 @philschatz committed Dec 29, 2016
View
@@ -27,6 +27,7 @@
"less-loader": "^2.2.2",
"node-libs-browser": "^1.0.0",
"react-hot-loader": "^1.3.0",
+ "react-octicons": "0.0.2",
"url-loader": "^0.5.6",
"webpack": "^1.9.10",
"webpack-dev-server": "^1.9.0"
@@ -3,6 +3,7 @@ import React from 'react';
import {Link} from 'react-router';
import * as BS from 'react-bootstrap';
import classnames from 'classnames';
+import {XIcon, SearchIcon, CheckIcon, MilestoneIcon} from 'react-octicons';
import IssueStore from '../../issue-store';
import {getFilters} from '../../route-utils';
@@ -38,7 +39,7 @@ const FilterCategory = React.createClass({
let checkmark;
if (isSelected) {
checkmark = (
- <i className='item-checkmark octicon octicon-check'/>
+ <CheckIcon className='item-checkmark'/>
);
}
let iconLink;
@@ -50,7 +51,7 @@ const FilterCategory = React.createClass({
let excludeLink;
if (excludeHref) {
excludeLink = (
- <Link to={excludeHref} className='item-toggle-exclude' title='Exclude this from the board'><i className='octicon octicon-x'/></Link>
+ <Link to={excludeHref} className='item-toggle-exclude' title='Exclude this from the board'><XIcon/></Link>
);
}
return (
@@ -193,7 +194,7 @@ const FilterDropdown = React.createClass({
const isSelected = state.milestoneTitles.indexOf(name) >= 0;
const isExcluded = state.milestoneTitles.indexOf(`-${name}`) >= 0;
// const iconNode = (
- // <i className='octicon octicon-milestone'/>
+ // <MilestoneIcon/>
// );
let toggleHref;
let excludeHref;
@@ -255,7 +256,7 @@ const FilterDropdown = React.createClass({
);
}
return [
- <i key='icon' className='milestone-icon octicon octicon-milestone'/>,
+ <MilestoneIcon key='icon' className='milestone-icon'/>,
<span key='milestone-title' className='milestone-title'>
<GithubFlavoredMarkdown
inline
@@ -330,7 +331,7 @@ const FilterDropdown = React.createClass({
return (
- <BS.NavDropdown id='filter-dropdown' className='filter-menu' title={<span className='-filter-title'>{selectedMilestoneItem} {' '}<i className='octicon octicon-search'/></span>}>
+ <BS.NavDropdown id='filter-dropdown' className='filter-menu' title={<span className='-filter-title'>{selectedMilestoneItem} {' '}<SearchIcon/></span>}>
{panel}
</BS.NavDropdown>
);
@@ -1,5 +1,6 @@
import React from 'react';
import * as BS from 'react-bootstrap';
+import {GiftIcon, CloudDownloadIcon, MarkGithubIcon} from 'react-octicons';
import Client from '../../github-client';
import NewVersionChecker from '../../new-version-checker';
@@ -89,7 +90,7 @@ const KarmaWarning = React.createClass({
<BS.Nav>
<li>
<span className={'karma-stats' + (isKarmaLow && ' is-karma-low' || '')}>
- <i className='octicon octicon-cloud-download' title='GitHub API'/>
+ <CloudDownloadIcon title='GitHub API'/>
{' API Requests Left: '}
{karmaText}
{resetText}
@@ -98,8 +99,8 @@ const KarmaWarning = React.createClass({
{newestText}
</BS.Nav>
<BS.Nav pullRight>
- <BS.NavItem className='nav-squirrel' onClick={this.showGameModal}><i className='octicon octicon-gift' title='Oooh, a present!'/></BS.NavItem>
- <BS.NavItem target='_blank' href='https://github.com/philschatz/gh-board'><i className='octicon octicon-mark-github'/> Source Code</BS.NavItem>
+ <BS.NavItem className='nav-squirrel' onClick={this.showGameModal}><GiftIcon title='Oooh, a present!'/></BS.NavItem>
+ <BS.NavItem target='_blank' href='https://github.com/philschatz/gh-board'><MarkGithubIcon/> Source Code</BS.NavItem>
<SavedFiltersButton/>
</BS.Nav>
<GameModal show={isGameOpen} onHide={this.onHideGameModal}/>
@@ -2,6 +2,7 @@ import _ from 'underscore';
import React from 'react';
import {Link} from 'react-router';
import * as BS from 'react-bootstrap';
+import {HomeIcon, StarIcon, GearIcon, QuestionIcon, GraphIcon, TagIcon} from 'react-octicons';
import SettingsStore from '../../settings-store';
import Client from '../../github-client';
@@ -92,7 +93,7 @@ const AppNav = React.createClass({
const close = () => this.setState({ showModal: false});
const brand = (
- <Link to={buildRoute('dashboard')}><i className='octicon octicon-home'/></Link>
+ <Link to={buildRoute('dashboard')}><HomeIcon/></Link>
);
const filtering = _.map(getFilters().getState().tagNames, (tagName) => {
// TODO: HACK. Find a better way to update the color of labels
@@ -125,7 +126,7 @@ const AppNav = React.createClass({
loginButton = (
<BS.NavDropdown key='signin-dropdown' id='signin-dropdown' title={avatarImage}>
<BS.MenuItem key='1' header>Signed in as <strong>{info.login}</strong></BS.MenuItem>
- <BS.MenuItem key='2' onSelect={this.starThisProject}>Click to <i className='octicon octicon-star icon-spin' style={{color: '#fbca04'}}/> the <strong>gh-board</strong> repo if you like this project</BS.MenuItem>
+ <BS.MenuItem key='2' onSelect={this.starThisProject}>Click to <StarIcon className='icon-spin' style={{color: '#fbca04'}}/> the <strong>gh-board</strong> repo if you like this project</BS.MenuItem>
<BS.MenuItem key='3' divider/>
<BS.MenuItem key='4' eventKey='1'><span onClick={this.onSignOut}>Sign Out</span></BS.MenuItem>
</BS.NavDropdown>
@@ -137,7 +138,7 @@ const AppNav = React.createClass({
}
const settingsTitle = (
- <i className='octicon octicon-gear'/>
+ <GearIcon/>
);
let repoDetails = null;
@@ -235,7 +236,7 @@ const AppNav = React.createClass({
className='btn btn-xs btn-default'
onClick={settingsMenuHelp}
>
- <i className='octicon octicon-question'/>
+ <QuestionIcon/>
</button>
</BS.MenuItem>
<SettingsItem
@@ -273,9 +274,9 @@ const AppNav = React.createClass({
<BS.MenuItem key='manager-pages' header>Manager-ish Pages</BS.MenuItem>
{managerMenu}
<SettingsItem key='milestone-planning' to={getFilters().setRouteName('by-milestone').url()}>Milestone Planning View</SettingsItem>
- <SettingsItem key='burnup' to={getFilters().setRouteName('burnup').url()}><i className='octicon octicon-graph'/> Burnup Chart</SettingsItem>
- <SettingsItem key='gantt-chart' to={getFilters().setRouteName('gantt').url()}><i className='octicon octicon-graph'/> Gantt Chart</SettingsItem>
- <SettingsItem key='label-editing' to={getFilters().setRouteName('labels').url()}><i className='octicon octicon-tag'/> Label Editing</SettingsItem>
+ <SettingsItem key='burnup' to={getFilters().setRouteName('burnup').url()}><GraphIcon/> Burnup Chart</SettingsItem>
+ <SettingsItem key='gantt-chart' to={getFilters().setRouteName('gantt').url()}><GraphIcon/> Gantt Chart</SettingsItem>
+ <SettingsItem key='label-editing' to={getFilters().setRouteName('labels').url()}><TagIcon/> Label Editing</SettingsItem>
<BS.MenuItem key='reset-databases' onClick={this.promptAndResetDatabases}>Reset Local Cache...</BS.MenuItem>
</BS.NavDropdown>
{loginButton}
@@ -1,6 +1,7 @@
import React from 'react';
import * as BS from 'react-bootstrap';
import {History} from 'react-router';
+import {TagIcon} from 'react-octicons';
const LOCALSTORAGE_KEY = 'saved-filters';
@@ -17,7 +18,7 @@ const AddFilterModal = React.createClass({
return (
<BS.Modal className='-add-filter-modal' {...this.props}>
<BS.Modal.Header closeButton>
- <BS.Modal.Title><i className='mega-octicon octicon-tag'/> Save Filter</BS.Modal.Title>
+ <BS.Modal.Title><TagIcon size='mega'/> Save Filter</BS.Modal.Title>
</BS.Modal.Header>
<BS.Modal.Body>
<BS.FormControl type='text' ref='title'/>
@@ -50,7 +51,7 @@ const SavedFiltersButton = React.createClass({
);
});
const addFilter = (
- <i className='octicon octicon-tag' title='Save Filter' onClick={this.showAddFilter}/>
+ <TagIcon title='Save Filter' onClick={this.showAddFilter}/>
);
return (
<li className='-saved-filters'>
@@ -1,5 +1,6 @@
import React from 'react';
import * as BS from 'react-bootstrap';
+import {SyncIcon} from 'react-octicons';
const ASYNC_UNSTARTED = 'ASYNC_UNSTARTED';
const ASYNC_RESOLVED = 'ASYNC_RESOLVED';
@@ -63,7 +64,7 @@ export default React.createClass({
classes['is-waiting'] = true;
disabled = true;
kids = [
- <i className='octicon octicon-sync icon-spin'/>,
+ <SyncIcon className='icon-spin'/>,
waitingText
];
} else if (asyncStatus === ASYNC_RESOLVED) {
@@ -22,6 +22,7 @@
import _ from 'underscore';
import React from 'react';
import * as BS from 'react-bootstrap';
+import {PencilIcon, TrashcanIcon} from 'react-octicons';
import IssueStore from '../issue-store';
import Database from '../database';
@@ -166,9 +167,9 @@ const LabelViewEdit = React.createClass({
</td>
<td className='-label-repos'><small>{details}</small></td>
<td className='label-actions'>
- <BS.Button bsStyle='link' onClick={this.onClickEdit}><i className='octicon octicon-pencil'/> Edit</BS.Button>
+ <BS.Button bsStyle='link' onClick={this.onClickEdit}><PencilIcon/> Edit</BS.Button>
{' '}
- <BS.Button className='action-delete' bsStyle='link' onClick={this.onClickRemove}><i className='octicon octicon-trashcan'/></BS.Button>
+ <BS.Button className='action-delete' bsStyle='link' onClick={this.onClickRemove}><TrashcanIcon/></BS.Button>
</td>
</tr>
);
@@ -1,5 +1,6 @@
import React from 'react';
import * as BS from 'react-bootstrap';
+import {SyncIcon} from 'react-octicons';
import {getFilters, filterCardsByFilter} from '../route-utils';
import IssueStore from '../issue-store';
@@ -39,7 +40,7 @@ const ProgressView = React.createClass({
return (
<div>
<BS.ProgressBar now={ticks} max={max} label={label}/>
- <i className='octicon octicon-sync icon-spin'/> {message}
+ <SyncIcon className='icon-spin'/> {message}
</div>
)
}
@@ -1,5 +1,6 @@
import React from 'react';
import _ from 'underscore';
+import {GraphIcon} from 'react-octicons';
import Chart from './chart';
import Database from '../database';
@@ -236,7 +237,7 @@ const BurnupShell = React.createClass({
return (
<div className='burnup'>
- <h2><i className='octicon octicon-graph'/> Burnup Chart</h2>
+ <h2><GraphIcon/> Burnup Chart</h2>
<p>Make sure you selected <strong>closed</strong> and <strong>Issues</strong> and optionally a Milestone from the filter dropdown at the top of this page</p>
<p>Also, this chart only fills the area when something changed (useful for weekends/open-source projects that frequently have periods of no change)</p>
<Loadable
@@ -2,6 +2,7 @@ import React from 'react';
import _ from 'underscore';
import * as BS from 'react-bootstrap';
import {Link} from 'react-router';
+import {MilestoneIcon} from 'react-octicons';
import {getFilters} from '../route-utils';
import IssueStore from '../issue-store';
@@ -34,7 +35,7 @@ const KanbanColumn = React.createClass({
if (milestone) {
heading = (
<Link className='milestone-title' to={getFilters().toggleMilestoneTitle(milestone.title).url()}>
- <i className='octicon octicon-milestone'/>
+ <MilestoneIcon/>
<GithubFlavoredMarkdown
inline
disableLinks={true}
@@ -1,6 +1,7 @@
import React from 'react';
import _ from 'underscore';
import * as BS from 'react-bootstrap';
+import {UserIcon} from 'react-octicons';
import {getFilters} from '../route-utils';
import IssueStore from '../issue-store';
@@ -31,7 +32,7 @@ const KanbanColumn = React.createClass({
let heading;
heading = (
<span className='user-title'>
- <i className='octicon octicon-user'/>
+ <UserIcon/>
{login}
</span>
);
@@ -3,6 +3,7 @@ import _ from 'underscore';
import {Link, History} from 'react-router';
import * as BS from 'react-bootstrap';
import classnames from 'classnames';
+import {BeakerIcon, SyncIcon, LockIcon, RepoForkedIcon, RepoIcon, PersonIcon, OrganizationIcon} from 'react-octicons';
import {buildRoute} from '../route-utils';
import Client from '../github-client';
@@ -67,10 +68,10 @@ const RepoItem = React.createClass({
});
- let iconClass;
- if (repo.private) { iconClass = 'octicon-lock'; }
- else if (repo.fork) { iconClass = 'octicon-repo-forked'; }
- else { iconClass = 'octicon-repo'; }
+ let repoIcon;
+ if (repo.private) { repoIcon = (<LockIcon className='repo-icon'/>); }
+ else if (repo.fork) { repoIcon = (<RepoForkedIcon className='repo-icon'/>); }
+ else { repoIcon = (<RepoIcon className='repo-icon'/>); }
const classes = {
'repo-item': true,
@@ -101,7 +102,7 @@ const RepoItem = React.createClass({
const repoLink = buildRoute('kanban', {repoInfos});
return (
<BS.ListGroupItem key={repoName} className={classnames(classes)}>
- <i className={'repo-icon octicon ' + iconClass}/>
+ {repoIcon}
<Link to={repoLink}>{repoName}</Link>
{repo.private && (<BS.Label className='repo-private-label' bsStyle='warning'>PRIVATE</BS.Label>) || null} {' '}
{updatedAt}
@@ -168,13 +169,13 @@ const RepoGroup = React.createClass({
let orgIcon;
if (CurrentUserStore.getUser() && CurrentUserStore.getUser().login === repoOwner) {
- orgIcon = 'octicon-person';
+ orgIcon = (<PersonIcon className='org-icon'/>);
} else {
- orgIcon = 'octicon-organization';
+ orgIcon = (<OrganizationIcon className='org-icon'/>);
}
const header = (
<span className='org-header'>
- <i className={'org-icon octicon ' + orgIcon}/>
+ {orgIcon}
{' '}
{repoOwner}
{viewBoard}
@@ -263,7 +264,7 @@ const CustomRepoModal = React.createClass({
<BS.Modal {...this.props}>
<BS.Modal.Header closeButton>
<BS.Modal.Title>
- <i className='repo-icon mega-octicon octicon-repo'/>
+ <RepoIcon size='mega' className='repo-icon'/>
{' Choose your GitHub Repo'}</BS.Modal.Title>
</BS.Modal.Header>
<BS.Modal.Body className='modal-body'>
@@ -303,7 +304,7 @@ const ExamplesPanel = React.createClass({
const examplesHeader = (
<span className='examples-header'>
- <i className='org-icon octicon octicon-beaker'/>
+ <BeakerIcon className='org-icon'/>
{' Example Boards of GitHub Repositories'}
</span>
);
@@ -313,7 +314,7 @@ const ExamplesPanel = React.createClass({
<BS.ListGroup>
{_.map(SAMPLE_REPOS, (props) => <RepoItem key={JSON.stringify(props)} {...props}/>)}
<BS.ListGroupItem className='repo-item' onClick={this.onClickMore}>
- <i className='repo-icon octicon octicon-repo'/>
+ <RepoIcon className='repo-icon'/>
Choose your own...
</BS.ListGroupItem>
<CustomRepoModal show={showModal} container={this} onHide={close}/>
@@ -356,7 +357,7 @@ const DashboardShell = React.createClass({
.catch(() => this.setState({repos: []}));
myRepos = (
<span className='custom-loading'>
- <i className='octicon octicon-sync icon-spin'/>
+ <SyncIcon className='icon-spin'/>
{' Loading List of Repositories...'}
</span>
);
@@ -2,6 +2,7 @@ import React from 'react';
import _ from 'underscore';
import Client from '../github-client';
import * as BS from 'react-bootstrap';
+import {CheckIcon, GiftIcon} from 'react-octicons';
const GameModalInner = React.createClass({
render() {
@@ -10,7 +11,7 @@ const GameModalInner = React.createClass({
return (
<BS.Modal className='game-modal' {...this.props}>
<BS.Modal.Header closeButton>
- <BS.Modal.Title><i className='mega-octicon octicon-gift'/> You found it! {dropDown} <small style={{display: 'inline-block', marginLeft: '3rem'}}>Keys: <kbd>Z</kbd> to undo, <kbd>R</kbd> to reset, <kbd>X</kbd> for action</small></BS.Modal.Title>
+ <BS.Modal.Title><GiftIcon size='mega'/> You found it! {dropDown} <small style={{display: 'inline-block', marginLeft: '3rem'}}>Keys: <kbd>Z</kbd> to undo, <kbd>R</kbd> to reset, <kbd>X</kbd> for action</small></BS.Modal.Title>
</BS.Modal.Header>
<BS.Modal.Body>
<div className='game-wrapper'>
@@ -157,7 +158,7 @@ const GameModal = React.createClass({
let winIcon;
if (gamesWon[game.id]) {
winIcon = (
- <i className='octicon octicon-check'/>
+ <CheckIcon/>
);
}
return (
@@ -61,6 +61,7 @@ const buildStatusBadge = (card) => {
wrapNode.appendChild(titleNode);
if (kanbanLabel) {
+ // TODO: Figure out something for these since we cannot easily inject SVG
const octicon = document.createElement('i');
octicon.classList.add('octicon');
octicon.classList.add('octicon-list-unordered');
Oops, something went wrong.

0 comments on commit 1a45d79

Please sign in to comment.