From 11a5e7720dc71228997af59a45801a2222fdbf71 Mon Sep 17 00:00:00 2001 From: Vanessa Yuen Date: Tue, 14 May 2019 14:00:28 +0200 Subject: [PATCH 1/2] generalize the classnames used for `github-IssueishDetailView-tab*` to pave road for usage in review authoring feature --- lib/views/pr-detail-view.js | 26 +++++++------- styles/issueish-detail-view.less | 61 -------------------------------- styles/tabs.less | 59 ++++++++++++++++++++++++++++++ 3 files changed, 73 insertions(+), 73 deletions(-) create mode 100644 styles/tabs.less diff --git a/lib/views/pr-detail-view.js b/lib/views/pr-detail-view.js index eade642bab..e4923000a0 100644 --- a/lib/views/pr-detail-view.js +++ b/lib/views/pr-detail-view.js @@ -136,25 +136,27 @@ export class BarePullRequestDetailView extends React.Component { return ( - - - Overview - - + + + Overview + + Build Status - + Commits - {pullRequest.countedCommits.totalCount} + + {pullRequest.countedCommits.totalCount} + - + - Files{pullRequest.changedFiles} + className="github-tab-icon github-IssueishDetailView-tab-icon" + />Files + {pullRequest.changedFiles} {/* 'Reviews' tab to be added in the future. */} diff --git a/styles/issueish-detail-view.less b/styles/issueish-detail-view.less index 7e46a6fece..bcd2d146d0 100644 --- a/styles/issueish-detail-view.less +++ b/styles/issueish-detail-view.less @@ -17,18 +17,6 @@ height: 100%; } - .react-tabs { - flex: 1; - display: flex; - flex-direction: column; - } - - .react-tabs__tab-panel--selected { - flex: 1; - overflow: auto; - } - - // Header ------------------------ &-header { @@ -137,55 +125,6 @@ } - // Tabs ------------------------ - - &-tablist { - flex: none; - display: flex; - justify-content: center; - padding: 0; - margin: 0; - list-style: none; - border-bottom: 1px solid @base-border-color; - background-color: @app-background-color; - } - - &-tab { - padding: @component-padding/2 @component-padding*1.5; - text-align: center; - font-weight: 600; - color: mix(@text-color, @app-background-color, 75%); - cursor: default; - user-select: none; - } - - &-tab-icon { - color: mix(@text-color, @app-background-color, 33%); - vertical-align: middle; - &:before { - margin-right: .4em; - } - } - - &-tab-count { - display: inline-block; - background-color: mix(@text-color-subtle, @app-background-color, 20%); - border-radius: @component-border-radius; - padding: 0 .25em; - margin-left: @component-padding/2; - } - - - // Selected tab - &-tab.react-tabs__tab--selected { - color: @text-color-selected; - box-shadow: 0 1px 0 @button-background-color-selected; - - .github-IssueishDetailView-tab-icon { - color: @text-color; - } - } - // Footer ------------------------ &-footer { diff --git a/styles/tabs.less b/styles/tabs.less new file mode 100644 index 0000000000..13c161de90 --- /dev/null +++ b/styles/tabs.less @@ -0,0 +1,59 @@ +@import 'variables'; + +.react-tabs { + flex: 1; + display: flex; + flex-direction: column; +} + +.react-tabs__tab-panel--selected { + flex: 1; + overflow: auto; +} + +.github-tab { + padding: @component-padding/2 @component-padding*1.5; + text-align: center; + font-weight: 600; + color: mix(@text-color, @app-background-color, 75%); + cursor: default; + user-select: none; + + &list { + flex: none; + display: flex; + justify-content: center; + padding: 0; + margin: 0; + list-style: none; + border-bottom: 1px solid @base-border-color; + background-color: @app-background-color; + } + + &-icon { + color: mix(@text-color, @app-background-color, 33%); + vertical-align: middle; + &:before { + margin-right: .4em; + } + } + + &-count { + display: inline-block; + background-color: mix(@text-color-subtle, @app-background-color, 20%); + border-radius: @component-border-radius; + padding: 0 .25em; + margin-left: @component-padding/2; + } + + + // Selected tab + &.react-tabs__tab--selected { + color: @text-color-selected; + box-shadow: 0 1px 0 @button-background-color-selected; + + .github-tab-icon { + color: @text-color; + } + } +} From 98d246b2d455e080e1278cbc756032153b799f7d Mon Sep 17 00:00:00 2001 From: Vanessa Yuen Date: Tue, 14 May 2019 14:52:43 +0200 Subject: [PATCH 2/2] whoops missed some classes --- lib/views/pr-detail-view.js | 12 ++++++------ test/views/pr-detail-view.test.js | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/lib/views/pr-detail-view.js b/lib/views/pr-detail-view.js index e4923000a0..a29848efdc 100644 --- a/lib/views/pr-detail-view.js +++ b/lib/views/pr-detail-view.js @@ -138,25 +138,25 @@ export class BarePullRequestDetailView extends React.Component { - Overview + Overview - + Build Status Commits - + {pullRequest.countedCommits.totalCount} Files - {pullRequest.changedFiles} + {pullRequest.changedFiles} {/* 'Reviews' tab to be added in the future. */} diff --git a/test/views/pr-detail-view.test.js b/test/views/pr-detail-view.test.js index d2c8a0ade8..de34de4001 100644 --- a/test/views/pr-detail-view.test.js +++ b/test/views/pr-detail-view.test.js @@ -182,22 +182,22 @@ describe('PullRequestDetailView', function() { assert.lengthOf(tabs, 4); const tab0Children = tabs[0].props.children; - assert.deepEqual(tab0Children[0].props, {icon: 'info', className: 'github-IssueishDetailView-tab-icon'}); + assert.deepEqual(tab0Children[0].props, {icon: 'info', className: 'github-tab-icon'}); assert.deepEqual(tab0Children[1], 'Overview'); const tab1Children = tabs[1].props.children; - assert.deepEqual(tab1Children[0].props, {icon: 'checklist', className: 'github-IssueishDetailView-tab-icon'}); + assert.deepEqual(tab1Children[0].props, {icon: 'checklist', className: 'github-tab-icon'}); assert.deepEqual(tab1Children[1], 'Build Status'); const tab2Children = tabs[2].props.children; - assert.deepEqual(tab2Children[0].props, {icon: 'git-commit', className: 'github-IssueishDetailView-tab-icon'}); + assert.deepEqual(tab2Children[0].props, {icon: 'git-commit', className: 'github-tab-icon'}); assert.deepEqual(tab2Children[1], 'Commits'); const tab3Children = tabs[3].props.children; - assert.deepEqual(tab3Children[0].props, {icon: 'diff', className: 'github-IssueishDetailView-tab-icon'}); + assert.deepEqual(tab3Children[0].props, {icon: 'diff', className: 'github-tab-icon'}); assert.deepEqual(tab3Children[1], 'Files'); - const tabCounts = wrapper.find('.github-IssueishDetailView-tab-count'); + const tabCounts = wrapper.find('.github-tab-count'); assert.lengthOf(tabCounts, 2); assert.strictEqual(tabCounts.at(0).text(), '11'); assert.strictEqual(tabCounts.at(1).text(), '22');