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

Scroll lock icon does not fit with the rest of the icon set #19362

Closed
bpasero opened this issue Jan 25, 2017 · 14 comments
Closed

Scroll lock icon does not fit with the rest of the icon set #19362

bpasero opened this issue Jan 25, 2017 · 14 comments
Assignees
Labels
help wanted Issues identified as good community contribution opportunities polish Cleanup and polish issue
Milestone

Comments

@bpasero
Copy link
Member

bpasero commented Jan 25, 2017

image

Is this temporary until we have a real icon? Imho it does not fit to any other icon we have there, neither in size nor in shape.

@isidorn
Copy link
Contributor

isidorn commented Jan 25, 2017

This is the final icon which we got from the icon people. I agree it looks alien, but I think we can ship with it.
Will also add a help wanted label - maybe some friednyl user draws a nice icon for us :)

@chrisdias do we have a contact from the icon folk that we can ping for issues like this?

@isidorn isidorn added help wanted Issues identified as good community contribution opportunities polish Cleanup and polish issue labels Jan 25, 2017
@isidorn isidorn added this to the February 2017 milestone Jan 25, 2017
@isidorn
Copy link
Contributor

isidorn commented Jan 31, 2017

@kieferrm do we have a contact from the icon folk who we can ping for issues like this?

@chrisdias
Copy link
Member

@bpasero @isidorn is it the clear output icon or the scroll lock icon that is out of place? the same "clear" icon is used in the debug console, the Find viewlet, and the extension viewlet.

the scroll lock icon looks out of place to me compared to the others.

@bpasero bpasero changed the title Clear output icon does not fit with the rest of the icon set Scroll lock icon does not fit with the rest of the icon set Feb 1, 2017
@bpasero
Copy link
Member Author

bpasero commented Feb 1, 2017

Sorry, the scroll lock is what I meant.

@isidorn
Copy link
Contributor

isidorn commented Feb 1, 2017

@chrisdias yeah the scroll lock. Do we have someone to bother for icons or should I invest in icon designing skills :)

@chrisdias
Copy link
Member

@isidorn @bpasero

I updated the icon with bolder ones, but i still don't like it.

Why not use a lock? Something like these?

When "on" it is in the locked state:

image

when "off" use the open lock icon:

image

Here is what it would look in the locked state on the light theme:

image

thoughts?

@bpasero
Copy link
Member Author

bpasero commented Feb 2, 2017

Looks good, I also like that there are two versions. Currently we keep the button with a blue outline when clicked which imho looks too much like the focus outline.

@isidorn
Copy link
Contributor

isidorn commented Feb 2, 2017

Look at @chrisdias closing bugs like a boss left and right - thanks a lot!
I agree that I prefer just the lock as it is simpler, though the empty lock might be my choice as it is not so heavy

screen shot 2017-02-02 at 10 48 31

The only issue I encountered while browsing through https://vsicons.azurewebsites.net/ is that I could not find the inverse version of the icons - in our case for the use in the dark theme. How can I get those? I figured I could manually edit the svg but hopefully there is a better way :)
Ping @chryw as I understand he is responsible for that site

fyi @ArtemGovorov for possible feedback on the icon

@isidorn isidorn reopened this Feb 2, 2017
@chrisdias
Copy link
Member

We have to get the inverse icon created.

I'll do that for the empty lock icons and give you the open and the close so that you can toggle it instead of using the blue outline.

@chryw
Copy link
Contributor

chryw commented Feb 2, 2017

@isidorn that site only shows standard light theme icons created for Visual Studio. VS Code icons are similar in concept but produced in a slightly different way. If there is any icon need for VS Code, a Microsoft member will reach out to the UX and the UX will create proper light theme and dark theme svg files.

@chrisdias
Copy link
Member

@isidorn here are the lock/unlock icons:

lockicons.zip

@chrisdias chrisdias removed their assignment Feb 2, 2017
@isidorn isidorn closed this as completed in 5aa30a0 Feb 3, 2017
@isidorn
Copy link
Contributor

isidorn commented Feb 3, 2017

Thanks @chrisdias for the icons! What is the process of making the inverse - just manual work in some tool? Asking because I would like to be able to do that myself :)
You can try this out in tomorrow's insiders. Feels good imho

@chryw
Copy link
Contributor

chryw commented Feb 4, 2017

@isidorn I have some gulp tasks to make VS Code icon from a regular VS icon.
https://github.com/chryw/iconutil/blob/master/gulpfile.js#L104

Inversion is just find & replace. You can see the hex color mapping here
https://github.com/chryw/iconutil/blob/master/gulpfile.js#L135

@isidorn
Copy link
Contributor

isidorn commented Feb 6, 2017

@chryw awesome - thanks a lot!

@vscodebot vscodebot bot locked and limited conversation to collaborators Nov 18, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
help wanted Issues identified as good community contribution opportunities polish Cleanup and polish issue
Projects
None yet
Development

No branches or pull requests

4 participants