From 4eef171a279e3dec6dcfe1ba57b65388bbb258a4 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 13 Jul 2018 11:57:57 +0900 Subject: [PATCH 01/12] Move avatar + title to the top Since it's shown in the PR list. --- lib/views/issueish-detail-view.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/lib/views/issueish-detail-view.js b/lib/views/issueish-detail-view.js index 31534e9fca..d818746cd2 100644 --- a/lib/views/issueish-detail-view.js +++ b/lib/views/issueish-detail-view.js @@ -97,6 +97,15 @@ export class BareIssueishDetailView extends React.Component {
+
+ + + +

{issueish.title}

+
-
- - - -

{issueish.title}

-
Date: Fri, 13 Jul 2018 12:03:23 +0900 Subject: [PATCH 02/12] Improve Markdown rendering --- styles/github-dotcom-markdown.less | 163 ++++++++++++++++++++++++----- 1 file changed, 138 insertions(+), 25 deletions(-) diff --git a/styles/github-dotcom-markdown.less b/styles/github-dotcom-markdown.less index abc1c08dfe..06f42e7f25 100644 --- a/styles/github-dotcom-markdown.less +++ b/styles/github-dotcom-markdown.less @@ -1,31 +1,82 @@ +@import "variables"; + // This styles Markdown used in issueish panes. +@margin: 1.5em; + .github-DotComMarkdownHtml { - a { - color: @text-color-info; + + & > *:last-child { + margin-bottom: 0; } - p { - line-height: 1.5; + // Headings -------------------- + + h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + margin-top: @margin; + margin-bottom: @margin/3; + color: @text-color-highlight; } - hr { - margin-top: 5px; - margin-bottom: 5px; - border-top: 1px solid @text-color; - width: 100% + h1 { font-size: 1.5em; font-weight: 400; } + h2 { font-size: 1.3em; font-weight: 400; } + h3 { font-size: 1.2em; font-weight: 500; } + h4 { font-size: 1.1em; font-weight: 600; } + h5 { font-size: 1em; font-weight: 600; } + h6 { font-size: .9em; font-weight: 600; } + + h2 { + padding-bottom: .25em; + margin-bottom: @margin/2; + border-bottom: 1px solid @base-border-color; } - ul { - margin-left: -10px; + + // Emphasis -------------------- + + strong { + color: @text-color-highlight; } - ol { - margin-left: -20px; + del { + color: @text-color-subtle; + } + + + // Link -------------------- + + a, + a code { + color: @text-color-info; + } + + + // Images -------------------- + + img { + max-width: 100%; + } + + + // Paragraph -------------------- + + & > p { + margin-top: 0; + margin-bottom: @margin; + } + + + // List -------------------- + + & > ul, + & > ol { + margin-bottom: @margin; + padding-left: 2em; } li { - font-size: .9em; + // font-size: .9em; padding-top: .1em; padding-bottom: .1em; @@ -34,23 +85,85 @@ } } + .task-list-item { + // indent task lists + list-style: none; + .task-list-item-checkbox { + position: absolute; + margin-left: -20px; + } + } + + // Blockquotes -------------------- + blockquote { - font-size: .9em; - padding: .4em .8em; + margin: @margin 0; + padding: .25em 1em; + font-size: inherit; color: @text-color-subtle; - border-left: 2px solid @base-border-color; + border-color: @base-border-color; + border-width: 3px; } - pre > code { - white-space: pre; + + // HR -------------------- + + hr { + margin: @margin*1.5 25%; + border-top: 1px solid @base-border-color; + background: none; } - // indent task lists - .task-list-item { - list-style: none; - .task-list-item-checkbox { - position: absolute; - margin-left: -20px; + + // Table -------------------- + + table { + margin: @margin 0; + } + + th { + color: @text-color-highlight; + } + + th, + td { + padding: .66em 1em; + border: 1px solid @base-border-color; + } + + + // Code -------------------- + + pre, + code { + color: @text-color-highlight; + background-color: @background-color-highlight; + + } + + pre { + margin: @margin 0; + + & > code { + white-space: pre; } } + + .highlight { + margin: @margin 0; + pre { + margin: 0; + } + } + + + // KBD -------------------- + + kbd { + color: @text-color-highlight; + border: 1px solid @base-border-color; + border-bottom: 2px solid darken(@base-border-color, 6%); + background-color: @background-color-highlight; + } + } From e5d6a99c1d34eedae35b318573343c1d437fb500 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 13 Jul 2018 16:51:41 +0900 Subject: [PATCH 03/12] Style tweaks --- styles/issueish-detail-view.less | 13 +++++++++---- styles/pr-timeline.less | 6 +----- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/styles/issueish-detail-view.less b/styles/issueish-detail-view.less index a36451b2ab..eb30b33fe1 100644 --- a/styles/issueish-detail-view.less +++ b/styles/issueish-detail-view.less @@ -8,7 +8,7 @@ right: 0; bottom: 0; left: 0; - font-size: 1.25em; + font-size: 1.166666em; line-height: 1.5; background-color: @base-background-color; @@ -24,14 +24,15 @@ display: flex; // TODO: Use grid justify-content: space-between; flex-wrap: wrap; - border-bottom: 1px solid @base-border-color; - margin-bottom: @component-padding; + padding: @component-padding/2; + border: 1px solid @base-border-color; + border-radius: @component-border-radius; } &-headerGroup { display: flex; align-items: center; - margin-bottom: @component-padding; + margin: @component-padding/2; &.is-fullWidth { flex: 1 1 100%; @@ -122,6 +123,10 @@ padding: @component-padding; border: 1px solid @base-border-color; border-radius: @component-border-radius; + + &:empty { + display: none; + } } } diff --git a/styles/pr-timeline.less b/styles/pr-timeline.less index fc01b4bec6..2e0162c699 100644 --- a/styles/pr-timeline.less +++ b/styles/pr-timeline.less @@ -117,6 +117,7 @@ display: inline; margin-left: 5px; white-space: nowrap; + color: @text-color-subtle; } } @@ -177,11 +178,6 @@ } .github-DotComMarkdownHtml { - - p:last-child { - margin-bottom: 0; - } - pre > code { white-space: pre; } From 52541af738541b9c46c899b60d5e45aa897b218c Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 13 Jul 2018 17:05:50 +0900 Subject: [PATCH 04/12] Adjust when in a dock --- styles/issueish-detail-view.less | 47 ++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/styles/issueish-detail-view.less b/styles/issueish-detail-view.less index eb30b33fe1..1e96464034 100644 --- a/styles/issueish-detail-view.less +++ b/styles/issueish-detail-view.less @@ -130,3 +130,50 @@ } } + + +// Dock Overrides ------------------------ +// When the IssueishDetailView is shown as a Dock item + +atom-dock .github-IssueishDetailView { + padding: @component-padding; + font-size: @font-size; + background-color: @tool-panel-background-color; + + &-header { + margin-bottom: @component-padding*1.5; + padding: 0; + border: none; + border-radius: 0; + } + + &-headerGroup { + margin: 0; + } + + &-avatarImage { + width: 24px; + height: 24px; + border-radius: @component-border-radius; + } + + &-title { + font-size: 1.25em; + font-weight: 500; + line-height: 1.3; + } + + .timeline-item { + margin: 0; + padding: @component-padding*1.5 0; + } + + .pre-timeline-item-icon { + position: relative; + margin: 0; + &:before { + vertical-align: middle; + } + } + +} From 6729b994eb854c921ed48e4f08c274caa2cc7cee Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 13 Jul 2018 17:10:49 +0900 Subject: [PATCH 05/12] Add top border to more link --- styles/issueish-list-view.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/issueish-list-view.less b/styles/issueish-list-view.less index 9bee3602f4..ccb1a8d36a 100644 --- a/styles/issueish-list-view.less +++ b/styles/issueish-list-view.less @@ -66,10 +66,11 @@ } &-more { - margin: @component-padding / 4; + padding: @component-padding / 2; display: flex; flex-direction: row; justify-content: center; + border-top: 1px solid @base-border-color; a { font-style: italic; color: @text-color-subtle; From acb2798e29f9547804a0783da2c2d6b5eae1cd9e Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 13 Jul 2018 17:19:30 +0900 Subject: [PATCH 06/12] Shorten divider --- styles/issueish-list-view.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/issueish-list-view.less b/styles/issueish-list-view.less index ccb1a8d36a..107eea01d9 100644 --- a/styles/issueish-list-view.less +++ b/styles/issueish-list-view.less @@ -103,7 +103,7 @@ } } &-divider { - margin: @component-padding/1.25 0; + margin: @component-padding/1.25 20%; border-color: @base-border-color; } &-createPr { From 99491a952e6f10684689089fd9ccb7db5795d6bd Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 13 Jul 2018 17:24:49 +0900 Subject: [PATCH 07/12] Round avatars --- styles/pr-timeline.less | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/pr-timeline.less b/styles/pr-timeline.less index 2e0162c699..357f114916 100644 --- a/styles/pr-timeline.less +++ b/styles/pr-timeline.less @@ -23,6 +23,7 @@ width: @avatar-size; height: @avatar-size; margin-right: 5px; + border-radius: @component-border-radius; } .pre-timeline-item-icon { From 15becad37f7413658254b265b5aeb2808485b596 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 13 Jul 2018 17:36:02 +0900 Subject: [PATCH 08/12] Move buildStatus to the top So you don't have to scroll down every time. --- lib/views/issueish-detail-view.js | 8 ++++---- styles/issueish-detail-view.less | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/views/issueish-detail-view.js b/lib/views/issueish-detail-view.js index d818746cd2..99365c3d00 100644 --- a/lib/views/issueish-detail-view.js +++ b/lib/views/issueish-detail-view.js @@ -127,6 +127,10 @@ export class BareIssueishDetailView extends React.Component {
+ {isPr &&
+ +
} + No description provided.'} switchToIssueish={this.props.switchToIssueish} @@ -154,10 +158,6 @@ export class BareIssueishDetailView extends React.Component { /> } - {isPr &&
- -
} - ); diff --git a/styles/issueish-detail-view.less b/styles/issueish-detail-view.less index 1e96464034..a4c906b85a 100644 --- a/styles/issueish-detail-view.less +++ b/styles/issueish-detail-view.less @@ -119,7 +119,7 @@ // Build Status ------------------------ &-buildStatus { - margin-top: @component-padding * 4; + margin: @component-padding*3 0; padding: @component-padding; border: 1px solid @base-border-color; border-radius: @component-border-radius; From 00a9274308bb2ba2bad580b40b295e5ee9577034 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 16 Jul 2018 13:15:11 +0900 Subject: [PATCH 09/12] Make buildStatus more compact --- lib/views/pr-status-context-view.js | 2 +- styles/issueish-detail-view.less | 33 +++++++++++++++++-- styles/pr-statuses.less | 50 +++++++++++++++++++++++------ 3 files changed, 71 insertions(+), 14 deletions(-) diff --git a/lib/views/pr-status-context-view.js b/lib/views/pr-status-context-view.js index 9198ddfd68..c790f2344d 100644 --- a/lib/views/pr-status-context-view.js +++ b/lib/views/pr-status-context-view.js @@ -28,7 +28,7 @@ export class BarePrStatusContextView extends React.Component { - {context}
{description} + {context} {description} Details diff --git a/styles/issueish-detail-view.less b/styles/issueish-detail-view.less index a4c906b85a..a764e87411 100644 --- a/styles/issueish-detail-view.less +++ b/styles/issueish-detail-view.less @@ -120,15 +120,19 @@ &-buildStatus { margin: @component-padding*3 0; - padding: @component-padding; - border: 1px solid @base-border-color; - border-radius: @component-border-radius; &:empty { display: none; } } + + // PR body ------------------------ + + &-container > .github-DotComMarkdownHtml { + margin: @component-padding*3 0; + } + } @@ -163,6 +167,14 @@ atom-dock .github-IssueishDetailView { line-height: 1.3; } + &-buildStatus { + margin: @component-padding 0; + + &:empty { + display: none; + } + } + .timeline-item { margin: 0; padding: @component-padding*1.5 0; @@ -176,4 +188,19 @@ atom-dock .github-IssueishDetailView { } } + &-container > .github-DotComMarkdownHtml { + margin: @component-padding 0; + } + +} + +atom-dock .github-PrStatuses { + &-header, + &-list-item { + border-radius: 0; + padding-left: 0; + padding-right: 0; + border-left: none; + border-right: none; + } } diff --git a/styles/pr-statuses.less b/styles/pr-statuses.less index 7b8838a193..36fcab7e2b 100644 --- a/styles/pr-statuses.less +++ b/styles/pr-statuses.less @@ -1,22 +1,37 @@ @import 'variables'; +@donut-size: 26px; +@donut-stroke: 4px; + .github-PrStatuses { + &-header { display: flex; + align-items: center; + border: 1px solid @base-border-color; + padding: @component-padding; + border-radius: @component-border-radius @component-border-radius 0 0; + } + + &-donut-chart { + margin-right: @component-padding; svg { - width: 50px; - height: 50px; + display: block; + width: @donut-size; + height: @donut-size; circle { - stroke-width: 5; + cx: @donut-size/2; + cy: @donut-size/2; + r: @donut-size/2 - @donut-stroke/2; + stroke-width: @donut-stroke; } } } &-summary { font-weight: bold; - padding: @component-padding 0; flex: 1; } @@ -31,21 +46,36 @@ &-list-item { display: flex; flex-direction: row; - border-top: 1px solid @base-border-color; - padding: @component-padding / 2; + font-size: .9em; + padding: @component-padding/2 @component-padding; + border: 1px solid @base-border-color; + border-top: none; + + &:last-child { + border-radius: 0 0 @component-border-radius @component-border-radius; + } &-icon { - padding-right: @component-padding; - display: flex; - align-items: center; // hmm, does it look better centered vertically or not + width: @donut-size; + margin-right: @component-padding; + text-align: center; + .icon::before { margin-right: 0; } } &-context { flex: 1; + color: @text-color-subtle; + strong { + margin-right: .5em; + color: @text-color-highlight; + } } &-details-link { - margin-left: 5px; + margin-left: .5em; + a { + color: @text-color-info; + } } } From 8db59eccacba9f7d27b392e89a6a656501bafe1a Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 16 Jul 2018 15:03:06 +0900 Subject: [PATCH 10/12] Make reactions look less like buttons --- styles/issueish-detail-view.less | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/styles/issueish-detail-view.less b/styles/issueish-detail-view.less index a764e87411..251e6040f9 100644 --- a/styles/issueish-detail-view.less +++ b/styles/issueish-detail-view.less @@ -100,18 +100,15 @@ // Reactions ------------------------ &-reactions { - margin-top: @component-padding; + padding-top: @component-padding*3; + border-top: 1px solid @base-border-color; &:empty { display: none; } &Group { - display: inline-block; - margin-right: @component-padding; - padding: @component-padding/2 @component-padding; - border: 1px solid @base-border-color; - border-radius: @component-border-radius; + margin-right: @component-padding*2; } } @@ -167,6 +164,10 @@ atom-dock .github-IssueishDetailView { line-height: 1.3; } + &-reactions { + padding-top: @component-padding; + } + &-buildStatus { margin: @component-padding 0; @@ -175,6 +176,10 @@ atom-dock .github-IssueishDetailView { } } + .github-PrTimeline { + margin-top: @component-padding; + } + .timeline-item { margin: 0; padding: @component-padding*1.5 0; From 72bfa6f8e4cd0f04f7677bc0bd64c2e2c675c6a1 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 16 Jul 2018 16:03:03 +0900 Subject: [PATCH 11/12] Show co-authors stacked --- styles/pr-timeline.less | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/styles/pr-timeline.less b/styles/pr-timeline.less index 357f114916..7db789f812 100644 --- a/styles/pr-timeline.less +++ b/styles/pr-timeline.less @@ -59,19 +59,45 @@ } .commit-author { - display: table-cell; - white-space: nowrap; - text-align: right; + position: absolute; + display: flex; } .author-avatar { - flex-basis: @avatar-size; + @size: 20px; + position: relative; + margin-right: -@size + 4px; + width: @size; + height: @size; + border-radius: @component-border-radius; + background-color: mix(@text-color, @base-background-color, 15%); + box-shadow: 1px 0 @base-background-color; + transition: margin .12s cubic-bezier(.5,.1,0,1); + + &:nth-child(1) { z-index: 3; } + &:nth-child(2) { z-index: 2; opacity: .7; } + &:nth-child(3) { z-index: 1; opacity: .4; } + &:nth-child(n+4) { + display: none; + } + &:only-child, + &:last-child { + box-shadow: none; + } + } + + .commit-author:hover .author-avatar { + display: inline-block; + margin-right: 1px; + opacity: 1; } .commit-message-headline { display: table-cell; font-size: .9em; + line-height: @avatar-size + 4px; padding: 0 @component-padding/3; + padding-left: @avatar-size + @component-padding; max-height: @avatar-size; text-overflow: ellipsis; white-space: nowrap; From 0a9295ab09db4c1d666df8a0791e21729ae41f69 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 16 Jul 2018 16:11:23 +0900 Subject: [PATCH 12/12] De-emphasize headers --- styles/pr-timeline.less | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/styles/pr-timeline.less b/styles/pr-timeline.less index 7db789f812..a4d476e1c1 100644 --- a/styles/pr-timeline.less +++ b/styles/pr-timeline.less @@ -116,6 +116,11 @@ } } + .comment-message-header { + font-size: .9em; + color: @text-color-subtle; + } + .cross-referenced-events { // provides spacing between cross-referenced-event rows border-spacing: 0 @component-padding / 2; @@ -132,6 +137,11 @@ margin-bottom: 0; } + &-header { + font-size: .9em; + color: @text-color-subtle; + } + &-label { display: table-cell; width: 100%; @@ -199,10 +209,6 @@ .info-row { margin-bottom: @component-padding/1.5; } - .comment-message-header { - font-size: .9em; - color: @text-color-subtle; - } .github-DotComMarkdownHtml { pre > code {