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

GUI "gear" Blocked by Temporary Elements #2559

Closed
GuardianMajor opened this issue Apr 24, 2017 · 4 comments

Comments

@GuardianMajor
Copy link

commented Apr 24, 2017

Issue

When you are on a site and you make temporary decisions, you are presented with an "eraser" and "lock" to either undo or commit. However, depending on "how many" resources (entries) are present, you either get a scrollbar or you don't. The reason this matters?

On sites that have a lot of entries and you get a scrollbar, the placement of the the temporary icons does not block the setting/option/dashboard "gear" icon on the top left. But, on sites that have few entries and therefore don't get the scrollbar, the icons cover the gear icon and make it very tricky and difficult to click.

Visuals

IS GOOD (many entries/scrollbar)
scroll-good

NO GOOD (no scrollbar/few entries)
short-no-good

Steps

  1. Go to any site with lots of entries (bing.com/github.com/etc)
  2. Click on GUI icon and make a choice (just to get the temporary icons to pop up)
  3. Everything should be ok, the gear icon should be still accessible
  4. Now switch to any site that has little to no entries (wikipedia.org/etc)
  5. Repeat step 2
  6. You will have the gear blocked by the temporary icons

That should be all the relevant information you need. If I missed something, please let me know. I would have just done it for you and submitted a pull but figured for you this should be a lot quicker - as you know where all the dependencies (if any) are buried ;) but in all honesty I have personal matters that keep me and wanted to get this resolved before the current beta becomes final release. Merci et bonne chance.

@gorhill

This comment has been minimized.

Copy link
Owner

commented Apr 24, 2017

I resisted for long adding that gear icon originally because aside visual noise, people ended up thinking the gear itself must be clicked to open the dashboard, while it has always be anywhere in the title bar (along with a tooltip to inform about this).

@FatOrangutan

This comment has been minimized.

Copy link

commented Apr 25, 2017

people ended up thinking the gear itself must be clicked to open the dashboard, while it has always be anywhere in the title bar

I am aware that you don't want design ideas, but I just wanted to add this since it is only a tiny change: changing the background colour of #gotoPrefs upon hover and maybe moving the cog icon to be at the immediate left of the words 'uBlock Origin /version no./' might help better convey the message that the whole thing is clickable.

@GuardianMajor

This comment has been minimized.

Copy link
Author

commented Apr 25, 2017

@gorhill I know my friend that it is not entirely necessary to load it, but that being said, I like that it is there and just wanted to make sure it wouldn't get obstructed, that's all. I have always opened it my own way but I know a few people who told me - oh I lost my changes because the eraser got clicked, so I told them, click somewhere else. Professionally, I get it, but still to be accommodating to everyone, doesn't hurt to fix?

@FatOrangutan sounds reasonable, even though I agree, he probably doesn't want design ideas. However, never hurts to discuss it, that's how progress is made. Since @gorhill you already stated that the whole bar is clickable and the cog doesn't have to be clicked, then integrating them with the title might actually resolve the positioning issue above as well and still retain the "visual essence" of the current state.

You've already done the work, you just need to "tweak" it. I mean this sincerely, if you have something else higher priority and don't want to deal with it, I'd be happy to do it for you, just let me know.

@GuardianMajor

This comment has been minimized.

Copy link
Author

commented Apr 25, 2017

@gorhill I just did a quick edit on popup.html to remove the hard coded element for the cog and instead put it as a simple :before CSS rule in popup.css so it becomes integrated with the {icon} {appname} {version} format, inherently resolving the being covered issue.

This will reinforce the behavior that the whole title is clickable and also simplify by removing the obstruction issue, thoughts? Tweak the edits/pulls as necessary to fit your style but I kept the changes to a bare minimum as to not cause issues and have previewed it and works great.

Here is a quick and dirty pen: https://codepen.io/anon/pen/WjGYGg

@gorhill gorhill closed this in 599a827 Apr 25, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.