Visually hint that you can drag the control bar to the other side #732
Conversation
|
How it looks while moving the control bar handle, while the control bar is open. |
| background-color: rgb(83, 99, 122); | ||
| background-image: url("../images/handle_bg.svg"); | ||
| background-repeat: no-repeat; | ||
| background-position: right; | ||
| box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5); | ||
| } | ||
| #noVNC_control_bar_handle:hover { | ||
| box-shadow: 0px 0px 7px 3px rgba(255, 255, 255, 0.6); | ||
| } |
There was a problem hiding this comment.
This removes the original shadow and just looks weird. Why this hover effect?
There was a problem hiding this comment.
I assume this is also what causes the outline to be asymmetrical? Any specific reason for that? I think it looks odd.
There was a problem hiding this comment.
The reason I added it in the first place was to emphasize that it could be interacted with.. But now as I think more about it, I don't mind removing this.
Another reason to remove it is how poorly hovers work on mobile.
| if (handleHint === null || controlBarHint === null) return; | ||
|
|
||
| handleHint.style.display = "none"; | ||
| controlBarHint.style.display = "none"; |
There was a problem hiding this comment.
We did a lot of work to get stuff like this out of the code an in to CSS. It would be a shame if we regress on that.
Any reason why you cannot put the look of the hint in CSS and just let JavaScript control when it is visible?
There was a problem hiding this comment.
Fixed, in most cases. Some of the style manipulation has to be done in JavaScript since the silhouettes needs the dimensions and positions of the target elements.
|
An animation to fade the hint in and out would be nice as well. :) |
Instead of having it stick out on both sides, let's make it as wide as it appears.
The control bar can be dragged to the other side, this isn't obvious however. This adds a hint on the opposite side in the form of a silhouette of the control bar.
|
Good points! I fixed the shadow (with a pseudo element), added a fade-in and out animation and moved as much of the style manipulation as possible to css. I'll probably make a new PR with another alternative, a more simple hint. I'm personally not 100% sold on this one due to the complexity of the solution and the questionable value. |
|
I'm going to close this one, I don't like this approach. |
It's not obvious, so I thought I would add a hint for it.