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

UX: switch to octicons for all icons in the status bar #74285

Closed
bpasero opened this issue May 24, 2019 · 10 comments
Closed

UX: switch to octicons for all icons in the status bar #74285

bpasero opened this issue May 24, 2019 · 10 comments
Assignees
Labels
feature-request Request for new features or functionality ux User experience issues verification-needed Verification of issue is requested verified Verification succeeded
Milestone

Comments

@bpasero
Copy link
Member

bpasero commented May 24, 2019

This ensures that everything in the status bar is nicely aligned. Currently I always feel like the problems entry as well as the "Send Feedback" smiley are not aligned properly:

image

Steps:

  • add required icons to our font
  • adopt in everywhere we use a SVG icon

PR: 350708a

@bpasero bpasero added the ux User experience issues label May 24, 2019
@bpasero bpasero added this to the May 2019 milestone May 24, 2019
@bpasero bpasero modified the milestones: May 2019, June 2019 May 25, 2019
@miguelsolorio
Copy link
Contributor

miguelsolorio commented May 26, 2019

I've updated Octicons and it should include all of the status bar icons we were using:

image

@bpasero
Copy link
Member Author

bpasero commented May 26, 2019

@misolori can you give me a hint where we are using the gear icon and where we are using the download icon? I could only find the task icons and smiley.

PS: we would also need an info icon, tasks can show info/warning/error.

@miguelsolorio
Copy link
Contributor

I got the gear from the tasks folder here:

https://github.com/microsoft/vscode/tree/master/src/vs/workbench/contrib/tasks/common/media

It appears though that it's used in the quick pick only. I also didn't realize we already have a gear in Octicons so I can remove this. The download/task icon is from here:

.task-statusbar-item-icon {
background: url('task.svg') 50% 2px no-repeat;
background-size: 18px;
cursor: pointer;
height: 22px;
width: 24px;
vertical-align: top;
}

I've seen that task icon before but can't get it to come up again, maybe @alexr00 can tell us.

For the info, can we use the existing info Octicon?

image

@bpasero
Copy link
Member Author

bpasero commented May 27, 2019

@misolori yeah I guess we can use existing icons for that

@alexr00
Copy link
Member

alexr00 commented May 27, 2019

I don't see the download/task icon used anywhere.

pull bot pushed a commit to Pandinosaurus/vscode that referenced this issue May 28, 2019
@bpasero bpasero added the verification-needed Verification of issue is requested label May 28, 2019
@bpasero bpasero modified the milestones: June 2019, May 2019 May 28, 2019
@bpasero
Copy link
Member Author

bpasero commented May 28, 2019

Verification: there are no more SVGs used in the status bar, specifically:

  • errors, warnings and infos are shown with the correct number and with their icons and clicking toggles the problems view
  • you see the "Send Feedback" smiley properly and can click it
  • running something from debug shows the current launch config in the status bar with a play icon to the left
  • running something from the debug shows "Building" briefly and indicates active tasks (try with typescript generated extension)

@bpasero bpasero closed this as completed May 28, 2019
@bpasero bpasero added the feature-request Request for new features or functionality label May 28, 2019
@bpasero
Copy link
Member Author

bpasero commented May 28, 2019

/cc @dbaeumer @alexr00 on 8c35807 and af9cd4e. The task related status bar contributions are no longer in need to render the full contents, rather they now use the more lightweight IStatusBarEntry where you can set properties as JSON.

The biggest change was around the status bar entry for showing errors, warnings and infos. Previously this where a couple of HTML elements / icons, and now it is just one label with octicons. I tried to preserve the behaviour we currently have. One thing to reconsider is to maybe move the "Building..." decoration that seems to be there when a task is active out. We have a progress service that can render progress messages on the status bar.

Maybe you could give it a quick smoke test and verify the experience is still OK for you.

@dbaeumer
Copy link
Member

Will make sure I have an eye on it the next days.

@bpasero
Copy link
Member Author

bpasero commented May 29, 2019

Thanks, just fyi the fact that the info icon is not right is already covered in #74510 (comment)

@jrieken jrieken added the verified Verification succeeded label May 29, 2019
@alexr00
Copy link
Member

alexr00 commented May 29, 2019

I've taken a look at the task use of the status bar and it still looks ok!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature-request Request for new features or functionality ux User experience issues verification-needed Verification of issue is requested verified Verification succeeded
Projects
None yet
Development

No branches or pull requests

5 participants