Skip to content
This repository was archived by the owner on Dec 15, 2022. It is now read-only.

Commit 2c4b288

Browse files
simuraisimurai
authored
Merge pull request #1928 from robertrossmann/feat/improve-empty-views
Further improvements to "empty" views/modals
2 parents 1e9ccef + 56847e3 commit 2c4b288

8 files changed

Lines changed: 98 additions & 88 deletions

File tree

‎lib/views/git-logo.js‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎lib/views/git-tab-view.js‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import cx from 'classnames';
44
import {CompositeDisposable} from 'atom';
55

66
import StagingView from './staging-view';
7-
import GitLogo from './git-logo';
87
import CommitController from '../controllers/commit-controller';
98
import RecentCommitsController from '../controllers/recent-commits-controller';
109
import RefHolder from '../models/ref-holder';
@@ -89,11 +88,9 @@ export default class GitTabView extends React.Component {
8988
if (this.props.repository.isTooLarge()) {
9089
return (
9190
<div className="github-Git is-empty" tabIndex="-1" ref={this.props.refRoot.setter}>
92-
<div ref="noRepoMessage" className="github-Git no-repository">
93-
<div className="large-icon">
94-
<GitLogo />
95-
</div>
96-
<h3>Too many changes</h3>
91+
<div ref="noRepoMessage" className="github-Git too-many-changes">
92+
<div className="github-Git-LargeIcon icon icon-diff" />
93+
<h1>Too many changes</h1>
9794
<div className="initialize-repo-description">
9895
The repository at <strong>{this.props.workingDirectoryPath}</strong> has too many changed files
9996
to display in Atom. Ensure that you have set up an appropriate <code>.gitignore</code> file.
@@ -105,11 +102,9 @@ export default class GitTabView extends React.Component {
105102
!isValidWorkdir(this.props.repository.getWorkingDirectoryPath())) {
106103
return (
107104
<div className="github-Git is-empty" tabIndex="-1" ref={this.props.refRoot.setter}>
108-
<div ref="noRepoMessage" className="github-Git no-repository">
109-
<div className="large-icon">
110-
<GitLogo />
111-
</div>
112-
<h3>Unsupported directory</h3>
105+
<div ref="noRepoMessage" className="github-Git unsupported-directory">
106+
<div className="github-Git-LargeIcon icon icon-alert" />
107+
<h1>Unsupported directory</h1>
113108
<div className="initialize-repo-description">
114109
Atom does not support managing Git repositories in your home or root directories.
115110
</div>
@@ -129,9 +124,8 @@ export default class GitTabView extends React.Component {
129124
return (
130125
<div className="github-Git is-empty" tabIndex="-1" ref={this.props.refRoot.setter}>
131126
<div ref="noRepoMessage" className="github-Git no-repository">
132-
<div className="large-icon">
133-
<GitLogo />
134-
</div>
127+
<div className="github-Git-LargeIcon icon icon-repo" />
128+
<h1>Create Repository</h1>
135129
<div className="initialize-repo-description">{message}</div>
136130
<button onClick={this.initializeRepo} disabled={inProgress} className="btn btn-primary">
137131
{inProgress ? 'Creating repository...' : 'Create repository'}

‎lib/views/github-login-view.js‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ export default class GithubLoginView extends React.Component {
1010
}
1111

1212
static defaultProps = {
13-
children: <p>Log in to GitHub to access PR information and more!</p>,
13+
children:
14+
<div className="initialize-repo-description">
15+
<span>Log in to GitHub to access PR information and more!</span>
16+
</div>,
1417
onLogin: token => {},
1518
}
1619

@@ -44,8 +47,10 @@ export default class GithubLoginView extends React.Component {
4447
renderLogin() {
4548
return (
4649
<div className="github-GithubLoginView-Subview">
50+
<div className="github-GitHub-LargeIcon icon icon-mark-github" />
51+
<h1>Log in to GitHub</h1>
4752
{this.props.children}
48-
<button onClick={this.handleLoginClick} className="btn btn-primary btn-lg icon icon-octoface">
53+
<button onClick={this.handleLoginClick} className="btn btn-primary icon icon-octoface">
4954
Login
5055
</button>
5156
</div>
@@ -55,30 +60,34 @@ export default class GithubLoginView extends React.Component {
5560
renderTokenInput() {
5661
return (
5762
<form className="github-GithubLoginView-Subview" onSubmit={this.handleSubmitToken}>
58-
<p>
59-
Step 1: Visit <a href="https://github.atom.io/login">github.atom.io/login</a> to generate
60-
an authentication token.
61-
</p>
62-
<p>
63-
Step 2: Enter the token below:
64-
</p>
63+
<div className="github-GitHub-LargeIcon icon icon-mark-github" />
64+
<h1>Enter Token</h1>
65+
<ol>
66+
<li>Visit <a href="https://github.atom.io/login">github.atom.io/login</a> to generate
67+
an authentication token.</li>
68+
<li>Enter the token below:</li>
69+
</ol>
70+
6571
<input
6672
type="text"
6773
className="input-text native-key-bindings"
6874
placeholder="Enter your token..."
6975
value={this.state.token}
7076
onChange={this.handleTokenChange}
7177
/>
72-
<div>
73-
<button type="button" onClick={this.handleCancelTokenClick} className="btn icon inline-block-tight">
74-
Cancel
75-
</button>
76-
<input
77-
type="submit"
78-
value="Login"
79-
onClick={this.handleSubmitTokenClick} className="btn btn-primary icon icon-check inline-block-tight"
80-
/>
81-
</div>
78+
<ul>
79+
<li>
80+
<button type="button" onClick={this.handleCancelTokenClick} className="btn icon icon-remove-close">
81+
Cancel
82+
</button>
83+
</li>
84+
<li>
85+
<button
86+
type="submit" onClick={this.handleSubmitTokenClick} className="btn btn-primary icon icon-check">
87+
Login
88+
</button>
89+
</li>
90+
</ul>
8291
</form>
8392
);
8493
}

‎lib/views/github-tab-view.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ export default class GitHubTabView extends React.Component {
8181
// TODO: display a view that lets you create a repository on GitHub
8282
return (
8383
<div className="github-GitHub-noRemotes">
84-
<div className="github-GitHub-largeGitHubLogo icon icon-mark-github" />
84+
<div className="github-GitHub-LargeIcon icon icon-mark-github" />
85+
<h1>No Remotes</h1>
8586
<div className="initialize-repo-description">
8687
<span>This repository does not have any remotes hosted at GitHub.com.</span>
8788
</div>

‎lib/views/remote-selector-view.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export default class RemoteSelectorView extends React.Component {
1515
// todo: ask Ash how to test this before merging.
1616
return (
1717
<div className="github-RemoteSelector">
18-
<div className="github-GitHub-largeGitHubLogo icon icon-mark-github" />
19-
18+
<div className="github-GitHub-LargeIcon icon icon-mirror" />
19+
<h1>Select a Remote</h1>
2020
<div className="initialize-repo-description">
2121
<span>This repository has multiple remotes hosted at GitHub.com.
2222
Select a remote to see pull requests associated

‎styles/git-tab.less‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,31 +17,39 @@
1717
-webkit-user-select: none;
1818
cursor: default;
1919

20-
&.no-repository {
21-
padding: @component-padding * 3;
22-
text-align: center;
23-
}
24-
2520
&.is-loading {
2621
color: @text-color-subtle;
2722
}
2823

29-
&.no-repository {
24+
&.no-repository,
25+
&.too-many-changes,
26+
&.unsupported-directory {
3027
display: flex;
3128
justify-content: center;
3229
font-size: 1.25em;
30+
padding: @component-padding * 3;
31+
text-align: center;
3332

3433
> * {
3534
margin: @component-padding 0;
3635
}
3736

38-
.git-logo-path {
39-
fill: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
37+
h1 {
38+
margin-bottom: @component-padding * 3;
4039
}
4140

42-
.btn.btn-primary {
41+
button {
4342
overflow: hidden;
4443
text-overflow: ellipsis;
4544
}
4645
}
46+
47+
&-LargeIcon:before {
48+
margin-right: 0;
49+
margin-bottom: @component-padding * 5;
50+
width: auto;
51+
height: auto;
52+
font-size: 8em;
53+
color: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
54+
}
4755
}

‎styles/github-login-view.less‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,47 @@
1-
.github-GithubLoginView-Container {
2-
height: 100%;
3-
display: flex;
4-
}
5-
61
.github-GithubLoginView {
7-
height: 100%;
2+
flex: 1;
83
display: flex;
4+
flex-direction: column;
5+
font-size: 1.25em;
96

107
.github-GithubLoginView-Subview {
118
flex: 1;
129
display: flex;
1310
flex-direction: column;
14-
align-self: center;
15-
align-items: center;
16-
padding: 20px;
11+
justify-content: center;
12+
text-align: center;
13+
padding: @component-padding * 3;
1714

18-
> button, > input {
19-
margin: @component-padding;
15+
> * {
16+
margin: @component-padding 0;
2017
}
21-
}
2218

23-
p {
24-
text-align: center;
25-
font-size: @font-size * 1.25;
26-
margin: 0;
19+
h1 {
20+
margin-bottom: @component-padding * 3;
21+
}
2722

28-
&:first-child {
29-
margin-bottom: 20px;
23+
button {
24+
width: 100%;
25+
overflow: hidden;
26+
text-overflow: ellipsis;
3027
}
3128

32-
a {
33-
color: @text-color-info;
29+
ol {
30+
text-align: left;
31+
padding: @component-padding 0;
32+
33+
a {
34+
color: @text-color-info;
35+
}
3436
}
35-
}
3637

37-
input[type=text] {
38-
width: 100%;
38+
ul {
39+
list-style: none;
40+
padding-left: 0;
41+
42+
li:not(:last-child) {
43+
margin-bottom: @component-padding;
44+
}
45+
}
3946
}
4047
}

‎styles/github-tab.less‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,27 +33,35 @@
3333
> * {
3434
margin: @component-padding 0;
3535
}
36+
37+
h1 {
38+
margin-bottom: @component-padding * 3;
39+
}
3640
}
3741

3842
.github-RemoteSelector {
3943
ul {
4044
list-style: none;
4145
padding-left: 0;
46+
47+
li:not(:last-child) {
48+
margin-bottom: @component-padding;
49+
}
4250
}
4351

4452
button {
4553
width: 100%;
46-
margin-bottom: 10px;
4754
overflow: hidden;
4855
text-overflow: ellipsis;
4956
}
5057
}
5158

52-
&-largeGitHubLogo:before {
59+
&-LargeIcon:before {
5360
margin-right: 0;
61+
margin-bottom: @component-padding * 5;
5462
width: auto;
5563
height: auto;
56-
font-size: 6em;
64+
font-size: 8em;
5765
color: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
5866
}
5967
}

0 commit comments

Comments
 (0)