Refactor IssueishPaneItemView

lib/containers/issueish-pane-item-container.js

@@ -91,43 +91,56 @@ export class IssueishPaneItemView extends React.Component {
  pullRequest: issueish.__typename === 'PullRequest' ? issueish : null,
  };
  return (
- <div className="github-PrPaneItem native-key-bindings">
- <div className="github-PrPaneItem-container">
- <div className="issueish-badge-and-link">
- <IssueishBadge type={issueish.__typename} state={issueish.state} />
- <span className="issueish-link">
- <a href={issueish.url}>{repo.owner.login}/{repo.name}#{issueish.number}</a>
- </span>
- {isPr && <span className="pr-build-status-icon">
- <PrStatusesContainer pullRequest={issueish} displayType="check" />
- </span>}
- <span className="refresh-button">
+ <div className="github-IssueishPaneItemView native-key-bindings">
+ <div className="github-IssueishPaneItemView-container">
+
+ <header className="github-IssueishPaneItemView-header">
+ <div className="github-IssueishPaneItemView-headerGroup">
+ <IssueishBadge className="github-IssueishPaneItemView-headerBadge"
+ type={issueish.__typename}
+ state={issueish.state}
+ />
+ <a className="github-IssueishPaneItemView-headerLink"
+ href={issueish.url}>{repo.owner.login}/{repo.name}#{issueish.number}
+ </a>
+ {isPr && <span className="github-IssueishPaneItemView-headerStatus">
+ <PrStatusesContainer pullRequest={issueish} displayType="check" />
+ </span>}
+ </div>
+ <div className="github-IssueishPaneItemView-headerGroup">
  <Octicon
  icon="repo-sync"
- className={cx({refreshing: this.state.refreshing})}
+ className={cx('github-IssueishPaneItemView-headerRefreshButton', {refreshing: this.state.refreshing})}
  onClick={this.handleRefreshClick}
  />
- </span>
- </div>
- <div className="issueish-avatar-and-title">
- <a className="author-avatar-link" href={issueish.author.url}>
- <img className="author-avatar" src={issueish.author.avatarUrl} title={issueish.author.login} />
- </a>
- <h3 className="issueish-title">{issueish.title}</h3>
- </div>
+ </div>
+ <div className="github-IssueishPaneItemView-headerGroup is-fullWidth">
+ <a className="github-IssueishPaneItemView-avatar" href={issueish.author.url}>
+ <img className="github-IssueishPaneItemView-avatarImage"
+ src={issueish.author.avatarUrl}
+ title={issueish.author.login}
+ />
+ </a>
+ <h3 className="github-IssueishPaneItemView-title">{issueish.title}</h3>
+ </div>
+ </header>
+
  <GithubDotcomMarkdown
  html={issueish.bodyHTML || '<em>No description provided.</em>'}
  switchToIssueish={this.props.switchToIssueish}
  />
- <div className="reactions">
+
+ <div className="github-IssueishPaneItemView-reactions">
  {issueish.reactionGroups.map(group => (
  group.users.totalCount > 0
- ? <span className={cx('reaction-group', group.content.toLowerCase())} key={group.content}>
+ ? <span className={cx('github-IssueishPaneItemView-reactionsGroup', group.content.toLowerCase())}
+ key={group.content}>
  {reactionTypeToEmoji[group.content]} &nbsp; {group.users.totalCount}
  </span>
  : null
  ))}
  </div>
+
  {isPr ?
  <PrTimelineContainer
  {...childProps}
@@ -138,9 +151,11 @@ export class IssueishPaneItemView extends React.Component {
  switchToIssueish={this.props.switchToIssueish}
  />
  }
- {isPr && <div className="pr-build-statuses">
+
+ {isPr && <div className="github-IssueishPaneItemView-buildStatus">
  <PrStatusesContainer pullRequest={issueish} />
  </div>}
+
  </div>
  </div>
  );

lib/containers/pr-statuses-container.js

@@ -10,11 +10,11 @@ import PeriodicRefresher from '../periodic-refresher';
 import {RelayConnectionPropType} from '../prop-types';
 
 export const stateToIconAndStyle = {
- EXPECTED: {category: 'PENDING', icon: 'primitive-dot', style: 'status-warning'},
- PENDING: {category: 'PENDING', icon: 'primitive-dot', style: 'status-warning'},
- SUCCESS: {category: 'SUCCESS', icon: 'check', style: 'status-success'},
- ERROR: {category: 'FAILURE', icon: 'alert', style: 'status-error'},
- FAILURE: {category: 'FAILURE', icon: 'x', style: 'status-error'},
+ EXPECTED: {category: 'PENDING', icon: 'primitive-dot', style: 'github-PrStatuses--warning'},
+ PENDING: {category: 'PENDING', icon: 'primitive-dot', style: 'github-PrStatuses--warning'},
+ SUCCESS: {category: 'SUCCESS', icon: 'check', style: 'github-PrStatuses--success'},
+ ERROR: {category: 'FAILURE', icon: 'alert', style: 'github-PrStatuses--error'},
+ FAILURE: {category: 'FAILURE', icon: 'x', style: 'github-PrStatuses--error'},
 };
 
 export function category(state) {

lib/views/issueish-badge.js

@@ -22,7 +22,7 @@ export default function IssueishBadge({type, state, ...others}) {
 
  const {className, ...otherProps} = others;
  return (
- <span className={cx('issueish-badge', 'badge', state.toLowerCase(), className)} {...otherProps}>
+ <span className={cx(className, 'github-IssueishBadge', state.toLowerCase())} {...otherProps}>
  <Octicon icon={icon} />
  {state.toLowerCase()}
  </span>

styles/github-dotcom-markdown.less

@@ -0,0 +1,56 @@
+// This styles Markdown used in issueish panes.
+
+.github-DotComMarkdownHtml {
+ a {
+ color: @text-color-info;
+ }
+
+ p {
+ line-height: 1.5;
+ }
+
+ hr {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ border-top: 1px solid @text-color;
+ width: 100%
+ }
+
+ ul {
+ margin-left: -10px;
+ }
+
+ ol {
+ margin-left: -20px;
+ }
+
+ li {
+ font-size: .9em;
+ padding-top: .1em;
+ padding-bottom: .1em;
+
+ li {
+ font-size: 1em;
+ }
+ }
+
+ blockquote {
+ font-size: .9em;
+ padding: .4em .8em;
+ color: @text-color-subtle;
+ border-left: 2px solid @base-border-color;
+ }
+
+ pre > code {
+ white-space: pre;
+ }
+
+ // indent task lists
+ .task-list-item {
+ list-style: none;
+ .task-list-item-checkbox {
+ position: absolute;
+ margin-left: -20px;
+ }
+ }
+}

styles/issueish-badge.less

@@ -0,0 +1,39 @@
+@import 'variables';
+
+// Issueish Badge
+// Shows the [Open], [Closed], [Merged] state
+
+.github-IssueishBadge {
+ @space: .4em;
+
+ display: inline-block;
+ padding: @space/1.5 @space;
+ font-size: .9em;
+ font-weight: 500;
+ line-height: 1;
+ text-transform: capitalize;
+ border-radius: @component-border-radius;
+ white-space: nowrap;
+
+ .icon::before {
+ font-size: inherit;
+ width: auto;
+ height: auto;
+ margin-right: @space/2;
+ }
+
+ &.open {
+ color: contrast(@gh-background-color-green, black, white, 50%);
+ background-color: @gh-background-color-green;
+ }
+
+ &.closed {
+ color: contrast(@gh-background-color-red, black, white, 50%);
+ background-color: @gh-background-color-red;
+ }
+
+ &.merged {
+ color: contrast(@gh-background-color-purple, black, white, 50%);
+ background-color: @gh-background-color-purple;
+ }
+}