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

[Ready for Review] GUI - Login with GitHub #876

Open
wants to merge 15 commits into
base: v3.3.0
from

Conversation

Projects
None yet
3 participants
@arnohovhannisyan
Copy link
Contributor

commented May 4, 2019

Short description of what this resolves:

This PR allows the user to log in to GitHub using a button, and the extension will automatically generate a token with the correct scopes and find the gist id.

Changes proposed in this pull request:

  • Login to GitHub using OAuth
  • Create a GUI for Settings and Welcome page
  • Allow user to choose from a list of available gists

Fixes: #506

How Has This Been Tested?

I have tested this by logging in to GitHub and checking if the token and gist id has been saved properly.

Screenshots (if appropriate):

Landing Page
Settings Page
Gist Selection Page

Checklist:

  • I have read the contribution guidelines.
  • My change requires a change to the documentation and GitHub Wiki.
  • I have updated the documentation and Wiki accordingly.

Status:

  • Authenticate with OAuth
  • Save Token
  • GUI for Gist Selection page
  • GUI for Settings page
  • GUI for Welcome page
@arnohovhannisyan

This comment has been minimized.

Copy link
Contributor Author

commented May 5, 2019

@shanalikhan As you can see by the title, this PR is ready for extensive review. I just wanted to bring this to your attention because it has been a while since the release of v3.2.9.

@shanalikhan

This comment has been minimized.

Copy link
Owner

commented May 6, 2019

Yes i know, give me some time. I will provide a review in detail.

@shanalikhan

This comment has been minimized.

Copy link
Owner

commented May 8, 2019

Here is the original UI layout:
#825 (comment)
I am using the check box to make sure the the status.
You can copy this checklist and post in later posts to show the status.

Overall:

  • It should be the same font / style the image i posted. Reference : Image

Title

  • Title as same color, size and font with the logo.
  • The Image in Title should be large like the Bookmark's ribbon logo and should be on middle.
  • Settings Sync text size should be small compared to cloud image but should be placed in the middle of the cloud - See the image ribbon and Bookmarks place over there.
  • Transparent logo should be placed on repo as another file ( we dont want to use the external link )
  • The Text contrast should be aligned with the background e.g Black or Grey Text on White Background , White Text on black background or any other color to achieve the contrast ratio.

Description:

  • Description should be "Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist"
  • Below to description , please add "By @shanalikhan"
  • Description should be same color, size and font as above image.

Two Columns

  • There should be two columns.
  • Both columns should be scroll able.
  • Height of those columns should be dynamic and then apply scroll bar when more content is available. Height should be till bottom while keeping the space for 'HelpandSponsor` section.
  • Both columns should have white text or any text while keeping the contrast with the background.
  • Links can be blue , prominent

Left Column

  • "Whats new in Settings Sync" should be on center on left column. It should have same font size, color as in the reference image for bookmarks.
  • Use same green button for "New", light red for "Fix"

Right Column

  • "Configurations" needs to have same size and style as reference image.
  • Some description like "Login via github to setup the Settings Sync or change configurations manually"
  • There should be two buttons after description
  • Buttons should be in one row , left and right
  • Title "Show Your Support"
  • Description
  • Two buttons Payment and sponsor
  • Two buttons should be one row, left and right.
  • Add Link
    • Write a Review
    • Star on Github
    • Follow me on Twitter

Below to columns
Left

  • "Need Help ?"
  • It should have same color and style

Right

  • Add Sponsors section
  • Description for Sponsors "Settings Sync Looking for sponsors to display here. Contact me on twitter or github."

Edit Configuration Page

  • It will a two columns, the title, description and all things will be the stay on same location.

  • Only welcome page 2 columns and below it should be replaced with configuration page.

  • Please fix the description section to show that same title and description

  • Are these two columns are scroll able.

Left Column

  • Title "Environment Settings"
  • Center Aligned and same font name and color, size as above reference.
  • Add textboxes and checkbox for each configuration present in settings.json
  • Put some padding in the checkboxes as currently they are all merged.

Right Column

  • Title - Global Settings

  • All the custom json settings should be available like in above picture.

  • Saving automatically.

Conclusion:

  • We need to make sure the font color, style should be the same as reference image.
  • Page background is transparent, can be changed by theme settings.
  • Once the welcome and configuration page layout is completed, i will move to code review and github sync process.

Thanks

@93Akkord

This comment has been minimized.

Copy link

commented May 8, 2019

I built this as well to check it out. I agree with @shanalikhan about the style. It should flow with other other popular extensions that use a webview. I have a couple of notes from my experience so far:

  • Login to my Github account via OAuth worked just fine.
  • Creating the token worked as well, but there is no indication that it did. I had to check out the syncLocalSettings.json file to see that it was there. Some indication that it worked and that it was created should be added.

I haven't had a chance to go over the other stuff yet. Will post more feedback when I get a chance.

@arnohovhannisyan

This comment has been minimized.

Copy link
Contributor Author

commented May 10, 2019

Overall:

  • It should be the same font / style the image i posted. Reference : Image

Title

  • Title as same color, size and font with the logo.
  • The Image in Title should be large like the Bookmark's ribbon logo and should be on middle.
  • Settings Sync text size should be small compared to cloud image but should be placed in the middle of the cloud - See the image ribbon and Bookmarks place over there.
  • Transparent logo should be placed on repo as another file ( we dont want to use the external link )
  • The Text contrast should be aligned with the background e.g Black or Grey Text on White Background , White Text on black background or any other color to achieve the contrast ratio.

Description:

  • Description should be "Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist"
  • Below to description , please add "By @shanalikhan"
  • Description should be same color, size and font as above image.

Two Columns

  • There should be two columns.
  • Both columns should be scroll able.
  • Height of those columns should be dynamic and then apply scroll bar when more content is available. Height should be till bottom while keeping the space for 'HelpandSponsor` section.
  • Both columns should have white text or any text while keeping the contrast with the background.
  • Links can be blue , prominent

Left Column

  • "Whats new in Settings Sync" should be on center on left column. It should have same font size, color as in the reference image for bookmarks.
  • Use same green button for "New", light red for "Fix"

Right Column

  • "Configurations" needs to have same size and style as reference image.

  • Some description like "Login via github to setup the Settings Sync or change configurations manually"

  • There should be two buttons after description

  • Buttons should be in one row , left and right

  • Title "Show Your Support"

  • Description

  • Two buttons Payment and sponsor

  • Two buttons should be one row, left and right.

  • Add Link

    • Write a Review
    • Star on Github
    • Follow me on Twitter

Below to columns
Left

  • "Need Help ?"
  • It should have same color and style

Right

  • Add Sponsors section
  • Description for Sponsors "Settings Sync Looking for sponsors to display here. Contact me on twitter or github."

Edit Configuration Page

  • It will a two columns, the title, description and all things will be the stay on same location.
  • Only welcome page 2 columns and below it should be replaced with configuration page.
  • Please fix the description section to show that same title and description
  • Are these two columns are scroll able.

Left Column

  • Title "Environment Settings"
  • Center Aligned and same font name and color, size as above reference.
  • Add textboxes and checkbox for each configuration present in settings.json
  • Put some padding in the checkboxes as currently they are all merged.

Right Column

  • Title - Global Settings
  • All the custom json settings should be available like in above picture.
  • Saving automatically.

Gist Selection:

  • Fix layout

Conclusion:

  • We need to make sure the font color, style should be the same as reference image.
  • Page background is transparent, can be changed by theme settings.
  • Once the welcome and configuration page layout is completed, i will move to code review and github sync process.

Preview:
Landing
Settings
Gist Select

arnohovhannisyan added some commits May 10, 2019

@shanalikhan

This comment has been minimized.

Copy link
Owner

commented May 17, 2019

Let me know once you complete all the checklist so i will start the UI review.

@arnohovhannisyan

This comment has been minimized.

Copy link
Contributor Author

commented May 22, 2019

@shanalikhan I have completed your checklist.

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.