From 6af111cbc7a796867232e1d9162b3f6f29597fce Mon Sep 17 00:00:00 2001 From: Robert Rossmann Date: Thu, 31 Jan 2019 10:02:10 +0100 Subject: [PATCH 01/11] Replace all Empty views' icons with new ones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The idea is to convey the view's purpose/meaning by showing an appropriate icon. The icons chosen do convey the intended meaning ToMe™️ and so they are subject to discussion. 😇 --- lib/views/git-logo.js | 17 ----------------- lib/views/git-tab-view.js | 13 +++---------- lib/views/github-tab-view.js | 2 +- lib/views/remote-selector-view.js | 3 +-- styles/git-tab.less | 12 ++++++++---- styles/github-tab.less | 2 +- 6 files changed, 14 insertions(+), 35 deletions(-) delete mode 100644 lib/views/git-logo.js diff --git a/lib/views/git-logo.js b/lib/views/git-logo.js deleted file mode 100644 index 51012c5618..0000000000 --- a/lib/views/git-logo.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -export default class GitLogo extends React.Component { - render() { - /* eslint-disable max-len */ - return ( - - - - - - - - ); - /* eslint-enable max-len */ - } -} diff --git a/lib/views/git-tab-view.js b/lib/views/git-tab-view.js index 4ec74fde66..514aa080a9 100644 --- a/lib/views/git-tab-view.js +++ b/lib/views/git-tab-view.js @@ -4,7 +4,6 @@ import cx from 'classnames'; import {CompositeDisposable} from 'atom'; import StagingView from './staging-view'; -import GitLogo from './git-logo'; import CommitController from '../controllers/commit-controller'; import RecentCommitsController from '../controllers/recent-commits-controller'; import RefHolder from '../models/ref-holder'; @@ -90,9 +89,7 @@ export default class GitTabView extends React.Component { return (
-
- -
+

Too many changes

The repository at {this.props.workingDirectoryPath} has too many changed files @@ -106,9 +103,7 @@ export default class GitTabView extends React.Component { return (
-
- -
+

Unsupported directory

Atom does not support managing Git repositories in your home or root directories. @@ -129,9 +124,7 @@ export default class GitTabView extends React.Component { return (
-
- -
+
{message}
@@ -55,13 +59,13 @@ export default class GithubLoginView extends React.Component { renderTokenInput() { return (
-

- Step 1: Visit github.atom.io/login to generate - an authentication token. -

-

- Step 2: Enter the token below: -

+
+
    +
  1. Visit github.atom.io/login to generate + an authentication token.
    2. +
  2. Enter the token below:
    3. +
+ -
- - -
+
    +
  • + +
    • +
  • + +
    • +
); } diff --git a/styles/github-login-view.less b/styles/github-login-view.less index 974ff37e4f..1124fc4971 100644 --- a/styles/github-login-view.less +++ b/styles/github-login-view.less @@ -1,40 +1,43 @@ -.github-GithubLoginView-Container { - height: 100%; - display: flex; -} - .github-GithubLoginView { - height: 100%; + flex: 1; display: flex; + flex-direction: column; + font-size: 1.25em; .github-GithubLoginView-Subview { flex: 1; display: flex; flex-direction: column; - align-self: center; - align-items: center; - padding: 20px; + justify-content: center; + text-align: center; + padding: @component-padding * 3; - > button, > input { - margin: @component-padding; + > * { + margin: @component-padding 0; } - } - p { - text-align: center; - font-size: @font-size * 1.25; - margin: 0; - - &:first-child { - margin-bottom: 20px; + button { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; } - a { - color: @text-color-info; + ol { + text-align: left; + padding: @component-padding 0; + + a { + color: @text-color-info; + } } - } - input[type=text] { - width: 100%; + ul { + list-style: none; + padding-left: 0; + + li:not(:last-child) { + margin-bottom: @component-padding; + } + } } } diff --git a/styles/github-tab.less b/styles/github-tab.less index 507de3e3d7..91bd36b2f3 100644 --- a/styles/github-tab.less +++ b/styles/github-tab.less @@ -43,10 +43,13 @@ button { width: 100%; - margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; } + + :not(:last-child) { + margin-bottom: 10px; + } } &-LargeIcon:before { From 890f08ed273ce7e27ce1abdd0b6c4d30dac944a6 Mon Sep 17 00:00:00 2001 From: Robert Rossmann Date: Thu, 31 Jan 2019 14:15:53 +0100 Subject: [PATCH 05/11] Align all modals with button controls to the pane's bottom --- lib/views/git-tab-view.js | 4 ++-- styles/git-tab.less | 10 ++++++++-- styles/github-login-view.less | 2 +- styles/github-tab.less | 2 ++ 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/lib/views/git-tab-view.js b/lib/views/git-tab-view.js index 514aa080a9..f055ea52d3 100644 --- a/lib/views/git-tab-view.js +++ b/lib/views/git-tab-view.js @@ -88,7 +88,7 @@ export default class GitTabView extends React.Component { if (this.props.repository.isTooLarge()) { return (
-
+

Too many changes

@@ -102,7 +102,7 @@ export default class GitTabView extends React.Component { !isValidWorkdir(this.props.repository.getWorkingDirectoryPath())) { return (
-
+

Unsupported directory

diff --git a/styles/git-tab.less b/styles/git-tab.less index 4ac04a96d5..db02accbe0 100644 --- a/styles/git-tab.less +++ b/styles/git-tab.less @@ -21,7 +21,9 @@ color: @text-color-subtle; } - &.no-repository { + &.no-repository, + &.too-many-changes, + &.unsupported-directory { display: flex; justify-content: center; font-size: 1.25em; @@ -32,12 +34,16 @@ margin: @component-padding 0; } - .btn.btn-primary { + button { overflow: hidden; text-overflow: ellipsis; } } + &.no-repository { + justify-content: flex-end; + } + &-LargeIcon:before { margin-right: 0; margin-bottom: 30px; diff --git a/styles/github-login-view.less b/styles/github-login-view.less index 1124fc4971..a1378dd7c5 100644 --- a/styles/github-login-view.less +++ b/styles/github-login-view.less @@ -8,7 +8,7 @@ flex: 1; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-end; text-align: center; padding: @component-padding * 3; diff --git a/styles/github-tab.less b/styles/github-tab.less index 91bd36b2f3..abee88c90e 100644 --- a/styles/github-tab.less +++ b/styles/github-tab.less @@ -36,6 +36,8 @@ } .github-RemoteSelector { + justify-content: flex-end; + ul { list-style: none; padding-left: 0; From 723fd446e12ceec5b473c8a2ce653b15cb3fc383 Mon Sep 17 00:00:00 2001 From: Robert Rossmann Date: Fri, 1 Feb 2019 10:20:25 +0100 Subject: [PATCH 06/11] Be more specific about margins on buttons on Remote Selector view --- styles/github-tab.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/styles/github-tab.less b/styles/github-tab.less index abee88c90e..4b81b2977a 100644 --- a/styles/github-tab.less +++ b/styles/github-tab.less @@ -41,6 +41,10 @@ ul { list-style: none; padding-left: 0; + + li:not(:last-child) { + margin-bottom: @component-padding; + } } button { @@ -48,10 +52,6 @@ overflow: hidden; text-overflow: ellipsis; } - - :not(:last-child) { - margin-bottom: 10px; - } } &-LargeIcon:before { From de16f7d69707f926bfb7b319132cc9f95ca4600c Mon Sep 17 00:00:00 2001 From: Robert Rossmann Date: Fri, 1 Feb 2019 10:28:33 +0100 Subject: [PATCH 07/11] Add headings to all informational & dialog views --- lib/views/git-tab-view.js | 5 +++-- lib/views/github-login-view.js | 2 ++ lib/views/github-tab-view.js | 1 + lib/views/remote-selector-view.js | 1 + styles/git-tab.less | 4 ++++ styles/github-login-view.less | 4 ++++ styles/github-tab.less | 4 ++++ 7 files changed, 19 insertions(+), 2 deletions(-) diff --git a/lib/views/git-tab-view.js b/lib/views/git-tab-view.js index f055ea52d3..20e54b9164 100644 --- a/lib/views/git-tab-view.js +++ b/lib/views/git-tab-view.js @@ -90,7 +90,7 @@ export default class GitTabView extends React.Component {
-

Too many changes

+

Too many changes

The repository at {this.props.workingDirectoryPath} has too many changed files to display in Atom. Ensure that you have set up an appropriate .gitignore file. @@ -104,7 +104,7 @@ export default class GitTabView extends React.Component {
-

Unsupported directory

+

Unsupported directory

Atom does not support managing Git repositories in your home or root directories.
@@ -125,6 +125,7 @@ export default class GitTabView extends React.Component {
+

Create Repository

{message}