Skip to content

Improved Welcome Screen #56144

Closed
Closed
Improved Welcome Screen#56144
Assignees
chrmarti
Labels
feature-requestRequest for new features or functionalityworkbench-welcomeWelcome page issues

Description

@chpxu
chpxu (chpxu)
opened on Aug 10, 2018

Issue Type: Feature Request/UI
No relevant Issues found.

I believe that as a long-time user of VSCode, the Welcome screen is mere redundant to me, however I feel that for newer users, that the layout doesn't seem that appealing.

Note: * means more info at the bottom

  • First of all, the title and subtitle is hidden on viewport with a height < 685px (This was the css that dev tools showed:
[workbench.main.css:14]
.monaco-workbench>.part.editor>.content .welcomePageContainer.max-height-685px .title {
  display: none;
}

I understand that it may not be worth to show on small heights, but I don't think a little scrolling would harm anyone. I believe cramming a bunch of stuff could cause more confusion. The title and subtitle should be placed aligned in the middle, with the VSCode icon (coloured or the non-coloured version, I'm personally split on this and leave it up to you should you consider my suggestion) on top of the text
(maybe text sits on top, overlapping? Again, split).

  • Next is what comes under it, I believe this should be the "Help" box.
    • Some users may click the links given, some may just want to start coding right away
    • This could show to new users that the editor is very capable, and there is thorough help for anything needed. This could in turn quickly ease them into usage as they would have a definite source of help.
    • This should be its own container, definitely not full-width, but more center aligned like everything else, maybe set margins/padding around the container to present it neatly.*
  • Under the "Help" container, should be, in my opinion, a new category called "Files", which would be a merge of the current "Start" and "Recent" categories.
    • The layout of this is similar to the "Help" I mentioned above, and place the options inside said container and possibly separate them with title and a divider*
  • Finally, under those should be the 2 categories would be the "Customize" and "Learn"
  • In terms of layout, everything is aligned in the middle, with some padding at least on the left and right so everything is more to the center, and easier to read. Could be themable (not sure if it is or isn't, the buttons change but that just might be a take this background colour and darken it type thing)
    These blue texts should probably be buttons, or at least have more padding and either an underline, or if you go the button route, contain the main button with the main text, and the extra text outside it perhaps.

Even I know I didn't explain it clearly enough, and would be happy to provide a HTML/CSS Mockup of what I mean, please let me know if so!

TODO List:

  • Design
    • Create Design
    • Implement
  • Styling
    • Edit text sizes
  • Probs more stuff

Activity

  1. chpxu commented on Aug 10, 2018

    @chpxu
    chpxu (chpxu)
    on Aug 10, 2018
    Author

    Inspired by Atom, maybe something like this, but of course with the VSCode categories, links etc
    image

  2. Ramya Rao (ramya-rao-a)
    assigned
    Christof Marti (chrmarti)
    on Aug 10, 2018
  3. Ramya Rao (ramya-rao-a)
    added
    workbench-welcomeWelcome page issues
    on Aug 10, 2018
  4. Christof Marti (chrmarti)
    added
    feature-requestRequest for new features or functionality
    on Sep 4, 2018

  5. chrmarti commented on Sep 4, 2018

    @chrmarti
    Christof Marti (chrmarti)
    on Sep 4, 2018
    Collaborator

    MAHESH (@BeastDestroyer) Thanks for the write up! PRs would be best, if you want to give it a try.

  6. chpxu commented on Sep 4, 2018

    @chpxu
    chpxu (chpxu)
    on Sep 4, 2018
    Author

    Hey Christof Marti (@chrmarti) Sure I would love to! I haven't contributed to VSCode before, probably will take some time to get used to insert awkward laugh here

    Also where are the files which contribute to the Welcome screen at? I use the User setup.

  7. chrmarti commented on Sep 5, 2018

    @chrmarti
    Christof Marti (chrmarti)
    on Sep 5, 2018
    Collaborator

    It's all minified in the installs. https://github.com/Microsoft/vscode/wiki/How-to-Contribute will get you running out of source. You can then modify the Welcome page files on disk (there are 4: https://github.com/Microsoft/vscode/tree/master/src/vs/workbench/parts/welcome/page/electron-browser).

  8. chpxu commented on Sep 5, 2018

    @chpxu
    chpxu (chpxu)
    on Sep 5, 2018
    Author

    All right, thanks very much! laughs in excitement Time to put my newly learnt TS knowledge to use :)

  9. chpxu commented on Sep 5, 2018

    @chpxu
    chpxu (chpxu)
    on Sep 5, 2018
    Author

    Christof Marti (@chrmarti) Editing is going pretty well, although an unwanted CSS Class .max-hright-685px keeps appearing although I deleted its CSS, it isn't in the TS Template, any idea?

  10. chrmarti commented on Sep 6, 2018

    @chrmarti
    Christof Marti (chrmarti)
    on Sep 6, 2018
    Collaborator

    That is added/removed dynamically based on the height: https://github.com/Microsoft/vscode/blob/504c890ea1cb1d0ad310cf9ed620fc89264c18aa/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts#L207

  11. chpxu commented on Oct 3, 2018

    @chpxu
    chpxu (chpxu)
    on Oct 3, 2018
    Author

    Christof Marti (@chrmarti) Just curious, how do you get the VSCode logo onto the welcome screen. So far I've just been testing by relatively linking to an OSS img file but it's a bit hard to resize it (I think it was called letterbox or something)

    • Is this the right image to use?
    • How do I transfer it to use VSCode's icon?
    • How can I resize the image, similar to how the logo is displayed when there are. no tabs open?

    Thanks!

  12. chrmarti commented on Oct 3, 2018

    @chrmarti
    Christof Marti (chrmarti)
    on Oct 3, 2018
    Collaborator

    The background image is set here: https://github.com/Microsoft/vscode/blob/90171dab977e4cea933a01824ed0313d86eccdc8/src/vs/workbench/browser/parts/editor/editorGroupView.ts#L1427

    The default icon is replaced with the VS Code icon during our build process. To test what it will look like you could replace the letterpress SVGs in the source with those that you have in your installation folder.

  13. chrmarti commented on Oct 8, 2018

    @chrmarti
    Christof Marti (chrmarti)
    on Oct 8, 2018
    Collaborator

    MAHESH (@BeastDestroyer) Let us know if you are you working on this. It will make sense to submit PRs early so we can provide feedback.

  14. chpxu commented on Oct 8, 2018

    @chpxu
    chpxu (chpxu)
    on Oct 8, 2018
    Author

    Apologies, my build process broke since I had to reinstall VS2017, and then my vscode repo got corrupt so I had to redownload and refork. Also, I have been taking time slowly for school business too. Furthermore it's all just getting used to the code structure. If I don't make it by this month's iteration I'll probably aim for November. Thanks.

  15. chpxu commented on Oct 8, 2018

    @chpxu
    chpxu (chpxu)
    on Oct 8, 2018
    Author

    Christof Marti (@chrmarti) Getting this error after running yarn run watch, then the bat script:

    
errorCode: 'load',
  moduleId: 'vs/code/electron-main/main',
  neededBy: [ '===anonymous1===' ],
  detail:
   { Error: ENOENT: no such file or directory, open 'C:\Users\John\Documents\GitHub\vscode\out\vs\code\electron-main\main.js'
     errno: -4058,
     code: 'ENOENT',
     syscall: 'open',
     path: 'C:\\Users\\John\\Documents\\GitHub\\vscode\\out\\vs\\code\\electron-main\\main.js' } }

    When I have time to work on it I'll investigate further, thanks.

  16. chrmarti commented on Oct 9, 2018

    @chrmarti
    Christof Marti (chrmarti)
    on Oct 9, 2018
    Collaborator

    MAHESH (@BeastDestroyer) It might be best to first make sure you are starting from a clean repository (careful this will delete files not checked in):

    git clean -xfd
yarn
yarn watch

    Also check if you have any local changes and stash these to ensure these are not the cause.

  17. chpxu commented on Oct 13, 2018

    @chpxu
    chpxu (chpxu)
    on Oct 13, 2018
    Author

    Thanks! It's all working properly now, will work as much as I can to get this going.

  18. chpxu commented on Oct 13, 2018

    @chpxu
    chpxu (chpxu)
    on Oct 13, 2018
    Author

    Christof Marti (@chrmarti) This is an initial test, without any logo because I wish to save finer details for later. There are a few questions I have regarding it:
    image

    image

    1. Does this meet Code's guidelines (if any)?
    2. Anything that may seem odd and could do with reworking?

    Thanks, I'll keep working on it

  19. usernamehw commented on Oct 14, 2018

    @usernamehw
    Alexander (usernamehw)
    on Oct 14, 2018
    Contributor

    Why would anybody want scroll on welcome page? The page layout is fine as it is... If you have a lot of energy, can you please make some small improvements to it? Like:

    • 5 recent projects is not enough... would be nice to have 10

    • It would be nice to have folder icon (from the active icon theme) for recent folders

    • Welcome page. Pin a project to the Recent Projects list Welcome page. Pin a project to the Recent Projects list #30646

    • Recent projects in Welcome should be sorted by last closed Recent projects in Welcome should be sorted by last closed #59090

    • Unselectable text on page is ... just why?

    • Using custom checkbox (like in Settings GUI) instead of native one?
      custom_checkbox

    • Recent should probably be renamed Recent folders or Recent workspaces since there is no recent files in that list

    • Why does it have different slogan than vscode webpage? Editing evolved vs Code editing. Redefined.

    • Is it possible to use icons for GitHub and StackOverflow? Printable keyboard cheatsheat can use pdf icon (from the active icon theme).

    • Missing keybinding hint for changing theme
      missing_keybinding_hint

    • Is it possible to use the same styling for keybindings as in Keybindings GUI?
      keybindings
      keybindings_gui

    • Interface overview doesn't care about items positions (also terminal position)
      interface_overview

  20. chpxu commented on Oct 14, 2018

    @chpxu
    chpxu (chpxu)
    on Oct 14, 2018
    Author

    I would like to say this is my first time exploring the codebase, but yes I m very optimistic. Thank you for your feedback.

    5 recent projects is not enough... would be nice to have 10

    I'll note that.

    Recent should probably be renamed Recent folders or Recent workspaces since there is no recent files in that list

    I done that originally but I remember I had a directory which pointed to a file, unless I am just tripping in which case I rest my point. I'll change it after.

    It would be nice to have folder icon (from the active icon theme) for recent folders

    Is it possible to use icons for GitHub and StackOverflow? Printable keyboard cheatsheat can use pdf icon (from the active icon theme).

    Folder icons stuff is definitely an area I have no experience with. But I'll definitely put StackOverflow and GitHub icons.

    Welcome page. Pin a project to the Recent Projects list #30646

    Recent projects in Welcome should be sorted by last closed #59090

    I agree with this too, despite the fact I usually disable the Welcome screen

    Why does it have different slogan than vscode webpage? Editing evolved vs Code editing. Redefined.
    I have no clue, I only noticed it recently, I'll definitely just use the website slogan.

    Missing keybinding hint for changing theme

    Will add it.

    Is it possible to use the same styling for keybindings as in Keybindings GUI?

    I think that it very doable, I'll experiment with layout too.

    Unselectable text on page is ... just why?

    No clue why, I think this is the case with the Settings GUI too.

    Interface overview doesn't care about items positions (also terminal position)

    I'll see what I can edit, I suppose this was introduced a while back and hasn't been updated since then.

    Using custom checkbox (like in Settings GUI) instead of native one?

    I tried doing that; it kinda works but I'll have to dig deeper to find the specific styling.

  21. usernamehw commented on Oct 14, 2018

    @usernamehw
    Alexander (usernamehw)
    on Oct 14, 2018
    Contributor

    I'm not from vscode team, so you should ask Christof Marti (@chrmarti) before implementing any of those items, I just wrote random stuff about welcome page that I don't like.

  22. chpxu commented on Oct 14, 2018

    @chpxu
    chpxu (chpxu)
    on Oct 14, 2018
    Author

    Yah I had actually planned to do some of them such as the checkbox, but yes I agree. You might try to open separate issues for some of them too

  23. chrmarti commented on Oct 14, 2018

    @chrmarti
    Christof Marti (chrmarti)
    on Oct 14, 2018
    Collaborator

    MAHESH (@BeastDestroyer) I think the Welcome page should work without scrolling, its main function is to give an overview of the main features of the product and a few important external resources. I'm also not a fan of making the title / link texts more verbose, they should be short so they are easy to skim through.

  24. chpxu commented on Oct 23, 2018

    @chpxu
    chpxu (chpxu)
    on Oct 23, 2018
    Author

    Christof Marti (@chrmarti) I have been. unable to do much progress due to life being more hectic. Unfortunately I muat unassign myself from this project. Sorry about that. I am still very optimistic for improvements and I hope someone else can take over. Again I apologise, have a great time

  25. JacksonKearl commented on Oct 22, 2021

    @JacksonKearl
    Jackson Kearl (JacksonKearl)
    on Oct 22, 2021
    Contributor

    We have since redesigned the welcome page.

  26. Jackson Kearl (JacksonKearl)
    closed this as completedon Oct 22, 2021
  27. github-actions
    locked and limited conversation to collaborators on Dec 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

feature-requestRequest for new features or functionalityworkbench-welcomeWelcome page issues

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions