From d5779102af1d3235d490fdf86cbd35cc16eb899e Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 25 Jun 2018 13:03:09 +0900 Subject: [PATCH 01/13] Rename PrPaneItem -> IssueishPaneItemView Same as JS class --- lib/containers/issueish-pane-item-container.js | 4 ++-- styles/_global.less | 1 - styles/{pr-pane-item.less => issueish-pane-item-view.less} | 6 +++++- 3 files changed, 7 insertions(+), 4 deletions(-) rename styles/{pr-pane-item.less => issueish-pane-item-view.less} (97%) diff --git a/lib/containers/issueish-pane-item-container.js b/lib/containers/issueish-pane-item-container.js index eac4c49228..3e8e7091a4 100644 --- a/lib/containers/issueish-pane-item-container.js +++ b/lib/containers/issueish-pane-item-container.js @@ -91,8 +91,8 @@ export class IssueishPaneItemView extends React.Component { pullRequest: issueish.__typename === 'PullRequest' ? issueish : null, }; return ( -
-
+
+
diff --git a/styles/_global.less b/styles/_global.less index 691318a366..68b39b5be3 100644 --- a/styles/_global.less +++ b/styles/_global.less @@ -3,7 +3,6 @@ // Styles for things that are sprinkled throuout various places // vertical align the text with the icon -.github-PrPaneItem, .tooltip { .badge .icon:before { vertical-align: text-top; diff --git a/styles/pr-pane-item.less b/styles/issueish-pane-item-view.less similarity index 97% rename from styles/pr-pane-item.less rename to styles/issueish-pane-item-view.less index ceba84b91d..0b895a2fc4 100644 --- a/styles/pr-pane-item.less +++ b/styles/issueish-pane-item-view.less @@ -1,6 +1,6 @@ @import 'variables'; -.github-PrPaneItem { +.github-IssueishPaneItemView { padding: @component-padding * 3; overflow: auto; position: absolute; @@ -165,6 +165,10 @@ // Elements ------------------------ + .badge .icon:before { + vertical-align: text-top; + } + blockquote { font-size: inherit; padding-top: 0; From 94349d47dc779fd4f7028cdeef328c3b673f9fc9 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 25 Jun 2018 17:57:38 +0900 Subject: [PATCH 02/13] Rename header classes --- .../issueish-pane-item-container.js | 38 +++++----- styles/issueish-pane-item-view.less | 71 +++++++++++-------- 2 files changed, 61 insertions(+), 48 deletions(-) diff --git a/lib/containers/issueish-pane-item-container.js b/lib/containers/issueish-pane-item-container.js index 3e8e7091a4..85ca18d2e1 100644 --- a/lib/containers/issueish-pane-item-container.js +++ b/lib/containers/issueish-pane-item-container.js @@ -93,28 +93,30 @@ export class IssueishPaneItemView extends React.Component { return (
-
- - - {repo.owner.login}/{repo.name}#{issueish.number} - - {isPr && - - } - +
+ +
- -
-
- - - -

{issueish.title}

-
+
+
+ + + +

{issueish.title}

+
+ No description provided.'} switchToIssueish={this.props.switchToIssueish} diff --git a/styles/issueish-pane-item-view.less b/styles/issueish-pane-item-view.less index 0b895a2fc4..2595cae05e 100644 --- a/styles/issueish-pane-item-view.less +++ b/styles/issueish-pane-item-view.less @@ -22,62 +22,73 @@ margin: 0 auto; } - // Badge and link ------------------------ - .issueish-badge-and-link { + + // Header ------------------------ + + &-header { + display: flex; // TODO: Use grid + justify-content: space-between; + flex-wrap: wrap; + border-bottom: 1px solid @base-border-color; + margin-bottom: @component-padding; + } + + &-headerGroup { display: flex; align-items: center; - margin-bottom: @component-padding * 2; + margin-bottom: @component-padding; - :last-child { - flex: 1; - text-align: right; + &.is-fullWidth { + flex: 1 1 100%; } } - .issueish-link a { + &-headerLink { color: @text-color-subtle; } - .pr-build-status-icon { + &-headerStatus { margin-left: @component-padding; } - .refresh-button { - .icon { - color: @text-color-subtle; - cursor: pointer; - &.refreshing::before { - @keyframes github-RefreshButton-animation { - 100% { transform: rotate(360deg); } - } - animation: github-RefreshButton-animation 2s linear 30; // limit to 1min in case something gets stuck + // Refresh Button ------------------------ + + &-headerRefreshButton { + color: @text-color-subtle; + cursor: pointer; + + &::before { + display: block; + width: 16px; + height: 16px; + line-height: .9; + margin-right: 0; + text-align: center; + } + &.refreshing::before { + @keyframes github-IssueishPaneItemView-headerRefreshButtonAnimation { + 100% { transform: rotate(360deg); } } + animation: github-IssueishPaneItemView-headerRefreshButtonAnimation 2s linear 30; // limit to 1min in case something gets stuck } } // Avatar and title ------------------------ - .issueish-avatar-and-title { - display: flex; - align-items: center; - margin-bottom: @component-padding * 2; - padding-bottom: @component-padding; - border-bottom: 1px solid @base-border-color; - } - - .author-avatar-link { + &-avatar { margin-right: @component-padding; - align-self: flex-start; } - .author-avatar { - max-height: 32px; + &-avatarImage { + width: 32px; + height: 32px; border-radius: @component-border-radius; } - .issueish-title { + &-title { + display: inline-block; margin: 0; font-size: 1.5em; font-weight: 500; From b4c1e8818a60501c80100881fe5f201345a03b29 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 10:28:02 +0900 Subject: [PATCH 03/13] Fix linter warnings --- lib/containers/issueish-pane-item-container.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/containers/issueish-pane-item-container.js b/lib/containers/issueish-pane-item-container.js index 85ca18d2e1..5560aeac1f 100644 --- a/lib/containers/issueish-pane-item-container.js +++ b/lib/containers/issueish-pane-item-container.js @@ -106,13 +106,16 @@ export class IssueishPaneItemView extends React.Component {
- +

{issueish.title}

From 4168ec364ab1081e8f034550aa9a0c6a25a6770f Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 10:32:54 +0900 Subject: [PATCH 04/13] :fire: Remove issueish-body Seems un-used --- styles/issueish-pane-item-view.less | 9 --------- 1 file changed, 9 deletions(-) diff --git a/styles/issueish-pane-item-view.less b/styles/issueish-pane-item-view.less index 2595cae05e..59a8a99fe1 100644 --- a/styles/issueish-pane-item-view.less +++ b/styles/issueish-pane-item-view.less @@ -99,15 +99,6 @@ // Body ------------------------ - .issueish-body { - padding-top: @component-padding; - border-top: 1px solid @base-border-color; - - & > *:first-child { - margin-top: 0; - } - } - .github-DotComMarkdownHtml { a { color: @text-color-info; From b3b9dc8269e3b7a91d062818ebd0e13916e9d89b Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 10:56:08 +0900 Subject: [PATCH 05/13] Add some space To easier see what belongs together --- lib/containers/issueish-pane-item-container.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/containers/issueish-pane-item-container.js b/lib/containers/issueish-pane-item-container.js index 5560aeac1f..d8908035d0 100644 --- a/lib/containers/issueish-pane-item-container.js +++ b/lib/containers/issueish-pane-item-container.js @@ -93,6 +93,7 @@ export class IssueishPaneItemView extends React.Component { return (
+
@@ -120,10 +121,12 @@ export class IssueishPaneItemView extends React.Component {

{issueish.title}

+ No description provided.'} switchToIssueish={this.props.switchToIssueish} /> +
{issueish.reactionGroups.map(group => ( group.users.totalCount > 0 @@ -133,6 +136,7 @@ export class IssueishPaneItemView extends React.Component { : null ))}
+ {isPr ? } + {isPr &&
} +
); From 4b2f809ca7fe446581f8b46fc3b30bc8c3b7991c Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 10:57:08 +0900 Subject: [PATCH 06/13] Move .github-DotComMarkdownHtml into its own file Since it's its own "component" --- styles/_global.less | 10 ------ styles/github-dotcom-markdown.less | 49 +++++++++++++++++++++++++++++ styles/issueish-pane-item-view.less | 42 ------------------------- 3 files changed, 49 insertions(+), 52 deletions(-) create mode 100644 styles/github-dotcom-markdown.less diff --git a/styles/_global.less b/styles/_global.less index 68b39b5be3..00196e9b03 100644 --- a/styles/_global.less +++ b/styles/_global.less @@ -9,16 +9,6 @@ } } -// indent task lists -.github-DotComMarkdownHtml .task-list-item { - list-style: none; - .task-list-item-checkbox { - position: absolute; - margin-left: -20px; - } -} - - .issueish-badge, .issueish-badge.badge { align-self: flex-start; flex-shrink: 0; diff --git a/styles/github-dotcom-markdown.less b/styles/github-dotcom-markdown.less new file mode 100644 index 0000000000..d47d338733 --- /dev/null +++ b/styles/github-dotcom-markdown.less @@ -0,0 +1,49 @@ +// 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; + } + } + + pre > code { + white-space: pre; + } + + // indent task lists + .task-list-item { + list-style: none; + .task-list-item-checkbox { + position: absolute; + margin-left: -20px; + } + } +} diff --git a/styles/issueish-pane-item-view.less b/styles/issueish-pane-item-view.less index 59a8a99fe1..7de53a5248 100644 --- a/styles/issueish-pane-item-view.less +++ b/styles/issueish-pane-item-view.less @@ -97,48 +97,6 @@ } - // Body ------------------------ - - .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; - } - } - - pre > code { - white-space: pre; - } - } - - // Reactions ------------------------ .reactions { From b856bc9ac028d9dc84db8bee2cddbe860e79596b Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 13:24:50 +0900 Subject: [PATCH 07/13] Fix more linter warnings --- lib/containers/issueish-pane-item-container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/containers/issueish-pane-item-container.js b/lib/containers/issueish-pane-item-container.js index d8908035d0..eefb796822 100644 --- a/lib/containers/issueish-pane-item-container.js +++ b/lib/containers/issueish-pane-item-container.js @@ -97,7 +97,7 @@ export class IssueishPaneItemView extends React.Component {
- {repo.owner.login}/{repo.name}#{issueish.number} {isPr && From d401fd50c4a886a4f34179f1565fea82f73ecabc Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 13:59:59 +0900 Subject: [PATCH 08/13] Move github-IssueishBadge styles to its own file --- .../issueish-pane-item-container.js | 5 ++- lib/views/issueish-badge.js | 2 +- styles/_global.less | 31 --------------- styles/issueish-badge.less | 39 +++++++++++++++++++ styles/issueish-pane-item-view.less | 4 ++ styles/issueish-tooltip.less | 4 ++ 6 files changed, 52 insertions(+), 33 deletions(-) create mode 100644 styles/issueish-badge.less diff --git a/lib/containers/issueish-pane-item-container.js b/lib/containers/issueish-pane-item-container.js index eefb796822..28ff60d3e4 100644 --- a/lib/containers/issueish-pane-item-container.js +++ b/lib/containers/issueish-pane-item-container.js @@ -96,7 +96,10 @@ export class IssueishPaneItemView extends React.Component {
- + {repo.owner.login}/{repo.name}#{issueish.number} diff --git a/lib/views/issueish-badge.js b/lib/views/issueish-badge.js index 42e50d76b9..fe337b7988 100644 --- a/lib/views/issueish-badge.js +++ b/lib/views/issueish-badge.js @@ -22,7 +22,7 @@ export default function IssueishBadge({type, state, ...others}) { const {className, ...otherProps} = others; return ( - + {state.toLowerCase()} diff --git a/styles/_global.less b/styles/_global.less index 00196e9b03..27f0a86e74 100644 --- a/styles/_global.less +++ b/styles/_global.less @@ -2,37 +2,6 @@ // Styles for things that are sprinkled throuout various places -// vertical align the text with the icon -.tooltip { - .badge .icon:before { - vertical-align: text-top; - } -} - -.issueish-badge, .issueish-badge.badge { - align-self: flex-start; - flex-shrink: 0; - margin-right: @component-padding; - font-weight: bold; - text-transform: capitalize; - border-radius: @component-border-radius; - - &.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; - } -} - .status-warning { color: @gh-background-color-yellow; } diff --git a/styles/issueish-badge.less b/styles/issueish-badge.less new file mode 100644 index 0000000000..33f920b392 --- /dev/null +++ b/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; + } +} diff --git a/styles/issueish-pane-item-view.less b/styles/issueish-pane-item-view.less index 7de53a5248..263320b1a0 100644 --- a/styles/issueish-pane-item-view.less +++ b/styles/issueish-pane-item-view.less @@ -43,6 +43,10 @@ } } + &-headerBadge { + margin-right: @component-padding; + } + &-headerLink { color: @text-color-subtle; } diff --git a/styles/issueish-tooltip.less b/styles/issueish-tooltip.less index 70107f5762..96e8dbb47b 100644 --- a/styles/issueish-tooltip.less +++ b/styles/issueish-tooltip.less @@ -30,6 +30,10 @@ color: contrast(@gh-background-color-purple, black, white, 50%); background-color: @gh-background-color-purple; } + + .icon:before { + vertical-align: text-top; + } } .issueish-title { From e1c8d0ba91e03c97220b038836bc1e91d10ab5a4 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 15:04:03 +0900 Subject: [PATCH 09/13] Rename reactions --- lib/containers/issueish-pane-item-container.js | 4 ++-- styles/issueish-pane-item-view.less | 18 ++++++++++-------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/lib/containers/issueish-pane-item-container.js b/lib/containers/issueish-pane-item-container.js index 28ff60d3e4..c2ec166b2b 100644 --- a/lib/containers/issueish-pane-item-container.js +++ b/lib/containers/issueish-pane-item-container.js @@ -130,10 +130,10 @@ export class IssueishPaneItemView extends React.Component { switchToIssueish={this.props.switchToIssueish} /> -
+
{issueish.reactionGroups.map(group => ( group.users.totalCount > 0 - ? + ? {reactionTypeToEmoji[group.content]}   {group.users.totalCount} : null diff --git a/styles/issueish-pane-item-view.less b/styles/issueish-pane-item-view.less index 263320b1a0..c39fa58684 100644 --- a/styles/issueish-pane-item-view.less +++ b/styles/issueish-pane-item-view.less @@ -103,18 +103,20 @@ // Reactions ------------------------ - .reactions { - width: fit-content; - padding-top: @component-padding; - .reaction-group { + &-reactions { + margin-top: @component-padding; + + &:empty { + display: none; + } + + &Group { + display: inline-block; margin-right: @component-padding; - padding: @component-padding; + padding: @component-padding/2 @component-padding; border: 1px solid @base-border-color; border-radius: @component-border-radius; } - &:empty { - all: unset; - } } // Statuses ------------------------ From 318849c521f4977ad139d5f7faceee681a865eb0 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 15:33:33 +0900 Subject: [PATCH 10/13] Rename buildStatus --- lib/containers/issueish-pane-item-container.js | 2 +- styles/issueish-pane-item-view.less | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/containers/issueish-pane-item-container.js b/lib/containers/issueish-pane-item-container.js index c2ec166b2b..a5d0727c96 100644 --- a/lib/containers/issueish-pane-item-container.js +++ b/lib/containers/issueish-pane-item-container.js @@ -151,7 +151,7 @@ export class IssueishPaneItemView extends React.Component { /> } - {isPr &&
+ {isPr &&
} diff --git a/styles/issueish-pane-item-view.less b/styles/issueish-pane-item-view.less index c39fa58684..dc62c86676 100644 --- a/styles/issueish-pane-item-view.less +++ b/styles/issueish-pane-item-view.less @@ -119,9 +119,10 @@ } } - // Statuses ------------------------ - .github-PrStatuses { + // Build Status ------------------------ + + &-buildStatus { margin-top: @component-padding * 4; padding: @component-padding; border: 1px solid @base-border-color; From 58cf6363de49d2fb9788dd0b2dcab731b3224bcf Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 16:02:13 +0900 Subject: [PATCH 11/13] More cleanup --- styles/github-dotcom-markdown.less | 7 +++++++ styles/issueish-pane-item-view.less | 20 -------------------- 2 files changed, 7 insertions(+), 20 deletions(-) diff --git a/styles/github-dotcom-markdown.less b/styles/github-dotcom-markdown.less index d47d338733..abc1c08dfe 100644 --- a/styles/github-dotcom-markdown.less +++ b/styles/github-dotcom-markdown.less @@ -34,6 +34,13 @@ } } + blockquote { + font-size: .9em; + padding: .4em .8em; + color: @text-color-subtle; + border-left: 2px solid @base-border-color; + } + pre > code { white-space: pre; } diff --git a/styles/issueish-pane-item-view.less b/styles/issueish-pane-item-view.less index dc62c86676..d2188d4a66 100644 --- a/styles/issueish-pane-item-view.less +++ b/styles/issueish-pane-item-view.less @@ -12,11 +12,6 @@ line-height: 1.5; background-color: @base-background-color; - * { - user-select: text; - -webkit-user-select: text; - } - &-container { max-width: 48em; margin: 0 auto; @@ -129,19 +124,4 @@ border-radius: @component-border-radius; } - - // Elements ------------------------ - - .badge .icon:before { - vertical-align: text-top; - } - - blockquote { - font-size: inherit; - padding-top: 0; - padding-left: @component-padding; - padding-bottom: 0; - color: @text-color-subtle; - border-left: 2px solid @text-color-subtle; - } } From a4228b8ee0f052754c6b0f12e658917fb9536c95 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 16:32:01 +0900 Subject: [PATCH 12/13] Move PR status colors --- lib/containers/pr-statuses-container.js | 10 +++++----- styles/_global.less | 15 --------------- styles/pr-statuses.less | 15 +++++++++++++++ 3 files changed, 20 insertions(+), 20 deletions(-) delete mode 100644 styles/_global.less diff --git a/lib/containers/pr-statuses-container.js b/lib/containers/pr-statuses-container.js index 28751be8b7..e69fdaa357 100644 --- a/lib/containers/pr-statuses-container.js +++ b/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) { diff --git a/styles/_global.less b/styles/_global.less deleted file mode 100644 index 27f0a86e74..0000000000 --- a/styles/_global.less +++ /dev/null @@ -1,15 +0,0 @@ -@import "variables"; - -// Styles for things that are sprinkled throuout various places - -.status-warning { - color: @gh-background-color-yellow; -} - -.status-success { - color: @gh-background-color-green; -} - -.status-error { - color: @gh-background-color-red; -} diff --git a/styles/pr-statuses.less b/styles/pr-statuses.less index 7172ae8fdc..7b8838a193 100644 --- a/styles/pr-statuses.less +++ b/styles/pr-statuses.less @@ -48,4 +48,19 @@ margin-left: 5px; } } + + + // States -------------------- + + &--warning { + color: @gh-background-color-yellow; + } + + &--success { + color: @gh-background-color-green; + } + + &--error { + color: @gh-background-color-red; + } } From 48131e3fd1a8687f1dc5ddcd2b09e0c4e792c417 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 26 Jun 2018 17:21:28 +0900 Subject: [PATCH 13/13] Fix lint warning --- lib/containers/issueish-pane-item-container.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/containers/issueish-pane-item-container.js b/lib/containers/issueish-pane-item-container.js index a5d0727c96..3165aafc90 100644 --- a/lib/containers/issueish-pane-item-container.js +++ b/lib/containers/issueish-pane-item-container.js @@ -133,7 +133,8 @@ export class IssueishPaneItemView extends React.Component {
{issueish.reactionGroups.map(group => ( group.users.totalCount > 0 - ? + ? {reactionTypeToEmoji[group.content]}   {group.users.totalCount} : null