Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual tweaks to Github's Remote Selector & No Remote views #1927

Merged
merged 10 commits into from Jan 31, 2019

Conversation

5 participants
@robertrossmann
Copy link
Contributor

robertrossmann commented Jan 30, 2019

Please be sure to read the contributor's guide to the GitHub package before submitting any pull requests.

Requirements

  • Filling out the template is required. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion.
  • Suggestion: You can use checklists to keep track of progress for the sections on metrics, tests, documentation, and user research.

Description of the Change

This PR attempts to visually improve some of the less used views in the Github pane, namely:

  • NoRemotes view - shown when Github pane cannot detect any git remotes for the current workspace
  • RemoteSelector view - shown when there are multiple remotes configured for the current workspace

The overall idea behind all of these improvements was to make it as much consistent as possible with the Git tab's "Initialise git repository" view from the Git tab. Overall, the following changes have been made:

  • UI elements' text selection has been disabled and the cursor is now forced to the classic pointer
  • Content is now moved vertically to the centre of the pane
  • Buttons are now stretched to the full pane's width
  • All margins and paddings match those used in the Git tab's "initialise git repository" view
  • ⚠️ A git icon has been added to these views

    I would rather see a nice octocat icon there since the views are related to Github but I posses neither skills nor tools to craft such a vector graphic 🤷‍♂️

Screenshot/Gif

Baseline

The goal of this PR is to make the other views look more like this one.

baseline

Before

multiple remotes - before changes

buttons disappearing

no repo - before changes

After

multiple remotes - after changes

buttons are resized

no repo - after changes

Alternate Designs

N/A

Benefits

Visually more pleasant experience when these views appear. 🎨

Possible Drawbacks

🤷‍♂️

Applicable Issues

Could not find any.

Metrics

N/A

Tests

Documentation

N/A

Release Notes

N/A

User Experience Research (Optional)

N/A

robertrossmann added some commits Jan 30, 2019

Prevent text selection on UI elements of Github tab
This disables the possibility to select UI elements' text on the Github tab. It mirrors the behaviour of the Git tab (see _styles/git-tab.less_).
Fix font sizes on some Github views
The @font-size variable was not defined because the _variables.less_ stylesheet was not imported. I updated the sizes to match those defined in _git-tab.less_ for consistency.

@robertrossmann robertrossmann changed the title Feat/visual tweaks Visual tweaks to Github's Remote Selector & No Remote views Jan 30, 2019

@vanessayuenn

This comment has been minimized.

Copy link
Contributor

vanessayuenn commented Jan 30, 2019

Thanks for opening this PR @robertrossmann! 🎉 I think it's a great improvement on the remotes view. CC-ing @simurai for design 👀, maybe he will have input on which icon to use also:

⚠️ A git icon has been added to these views
I would rather see a nice octocat icon there since the views are related to Github but I possess neither skills nor tools to craft such a vector graphic 🤷‍♂️

@annthurium

This comment has been minimized.

Copy link
Contributor

annthurium commented Jan 30, 2019

thanks @robertrossmann ! Excited to have more visually appealing empty states, since we know those have been a bit neglected.

@simurai

This comment has been minimized.

Copy link
Member

simurai commented Jan 31, 2019

⚠️ A git icon has been added to these views
I would rather see a nice octocat icon there since the views are related to Github but I posses neither skills nor tools to craft such a vector graphic 🤷‍♂️

Luckily, the Octicons include a :octocat: logo. I added it with 92ed316.

screen shot 2019-01-31 at 11 29 59 am
screen shot 2019-01-31 at 11 44 13 am

@simurai
Copy link
Member

simurai left a comment

codecov seems down, otherwise, I think this is good to merge. 👍 Thanks @robertrossmann 🙇

@robertrossmann

This comment has been minimized.

Copy link
Contributor Author

robertrossmann commented Jan 31, 2019

Thanks @simurai for updating the icon! 👍

I do have some follow-up improvements in mind after I gave it some more thought during my sleep (😇), but I guess it would be best to merge this and I'll open up another PR, because those changes would be a bigger departure from current designs of these screens and you just might not like it 😄.

Thanks, looking forward to having this merged in! ❤️

@smashwilson

This comment has been minimized.

Copy link
Member

smashwilson commented Jan 31, 2019

codecov seems down

Weird. I think CodeCov having trouble with this PR because it's coming from a fork?

@smashwilson
Copy link
Member

smashwilson left a comment

👍

@smashwilson smashwilson merged commit a1af5c1 into atom:master Jan 31, 2019

@robertrossmann robertrossmann deleted the robertrossmann:feat/visual-tweaks branch Jan 31, 2019

@kuychaco kuychaco referenced this pull request Feb 5, 2019

Closed

v0.25.0-0 QA Review #1936

14 of 18 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.