Commit Graph

2530 Commits

Author SHA1 Message Date
Alexander Zeijlon b9f172dcdb Update README.md with ExtendedMouseButtons feature 2025-01-28 11:01:53 +01:00
Alexander Zeijlon 9f727b7db8 Merge branch 'ui_refresh' 2025-01-28 09:42:00 +01:00
Samuel Mannehed 24835bdda4 Make the background of expanded settings lighter
A very slight change to the background color, to make the contrast
better with the light-grey input elements.
2025-01-23 15:51:11 +01:00
Samuel Mannehed 237a34dfb3 Add exceptions for CSS validator false positives
Some new CSS incorrectly give errors from validator.w3.org. Issues were
opened in that repo, so hopefully we can remove these exceptions soon.

I searched for alternative validators, but couldn't find a different one
that had a simple API like this one.

In order to reliably detect & handle these exceptions we unfortunately
need to make the validator output parsing quite a bit more complicated.
2025-01-23 15:51:11 +01:00
Samuel Mannehed 14f9ea5880 Fix settings panel layout on small screens
Both labels and inputs protruded outside the panel on for example a
phone in portrait mode. This commit fixes that by allowing wrapping and
setting a max-width.

Since the --input-xpadding variable is now used in two different CSS
files, it was moved to constants.css.
2025-01-23 15:51:11 +01:00
Samuel Mannehed 6db9dbcf90 Tweak design of noVNC connect button
Make the color contrast with the background and the button more rounded.
The goal is to make the button stand out.
2025-01-23 15:51:11 +01:00
Samuel Mannehed b5675bb5f6 Fix spacing between elements in dialogs
Dialogs have had text inputs and buttons cramped together without space
between, this fixes that.
2025-01-23 15:51:11 +01:00
Samuel Mannehed 4ab4286b25 Make text in panel headings bold
Makes the heading pop a bit more in the new airier layout.
2025-01-23 15:51:11 +01:00
Samuel Mannehed 88009230b6 Only color the left part of the range track
Makes it easier to envision the value is selected.
2025-01-23 15:51:11 +01:00
Samuel Mannehed abe3c7bce9 Make range slider thumbs circular
Fits better with the new slightly rounded and spacious style. The track
was made slightly thicker to ensure proper centering of the new thumb.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 20611b677f Add styling for multi-select lists
This is a type of select box that doesn't appear like a button, but more
like a textarea that lists options. It is not currently used, but added
for completeness.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 3a5dd22603 Add styling for checked options in select boxes 2025-01-23 15:40:52 +01:00
Samuel Mannehed 6c1e7bc507 Utilize toggle switch in settings
These settings are well suited to use toggle switches. This makes these
settings more approachable and user-friendly.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 24f99e548d Add styling for toggle switches
These are a type of checkbox that is suitable for ON/OFF-type switches.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 331ad34d90 Make interface airier by increasing line-height
Modern interfaces are less cramped, this makes noVNC feel more up to
date.

Note that this required some adjustments on noVNC_headings and
noVNC_connect_button since the text now takes up more height than the
images.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 2bc505741f Add styling for color pickers
Note that no color picker elements are currently in use, this is for
completeness.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 54e76817df Pointer cursor on buttons & grab on sliders
This makes buttons and slider stand out more.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 7b58cb96bc Add minimum width to buttons
This ensures they aren't too small, even if the text label is short.
2025-01-23 15:40:52 +01:00
Samuel Mannehed a2352b99c1 Standardize on ellipsis-type text-overflow 2025-01-23 15:40:52 +01:00
Samuel Mannehed 28e1717cf9 Remove number picker's increase/decrease buttons
We can't style them, and they don't fit the noVNC CSS style - we are
better off without them.
2025-01-23 15:40:52 +01:00
Samuel Mannehed deb76f97cd Add some sane default CSS for textareas 2025-01-23 15:40:52 +01:00
Samuel Mannehed f0ec3d62b5 Avoid 2 borders when focus-visible on text inputs
By having the focus-visible outline overlapping the regular border
things look a bit more sane on text input elements.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 91cd920266 Keep CSS for different input elements together
By moving the CSS for select buttons to the bottom, we keep a more
logical ordering of the elements.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 1c45fd8547 Capitalize CSS section headings
Makes them easier to distinguish from regular comments.
2025-01-23 15:40:52 +01:00
Samuel Mannehed d8199859d3 Support 'disabled' attribute on labels
Note that the :disabled selector only works on inputs, buttons and the
like.

The current method of applying .noVNC_disabled to the settings
labels is still used. This support is added mostly for completeness.

Note that when a label wraps an input, only the label should have the
disabled attribute. Otherwise the effect applies twice to the input.
2025-01-23 15:40:52 +01:00
Samuel Mannehed e092f06d01 Move general :disabled rules to common top section
Start with general stuff, followed by specific things.
2025-01-23 15:40:52 +01:00
Samuel Mannehed ee08032fe7 Put specific :disabled rules with its element
It makes more sense to group rules per element type.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 30d46a00fa Fix :disabled styling of file-selector-button
By applying the rule to the button within the input, we effectively
applied the opacity twice - making the button almost disappear. Applying
the opacity to the input element is enough.
2025-01-23 15:40:52 +01:00
Samuel Mannehed 33a2548fcb Make buttons flat by removing borders
Gives a more clean look that fits well with the new checkboxes and
radios. The old border was mostly used to contribute to a 3d-effect,
that was used for :active. That :active-styling has been replaced by
activation levels.
2025-01-23 15:40:40 +01:00
Samuel Mannehed 017888c9a8 Rework how buttons react to :hover and :active
Instead of having two different types of effects (hover had a different
color, and active had a 3d-effect simulating a pressed button), we now
have an increasing activation-level. That means the button goes a bit
dark for hover, and then even darker when pressed.

There is also a variant that goes lighter for each activation level,
that can be used when the initial color is dark.

With this change, we can get rid of special :hover and :active styling
for the connect button and the control bar buttons. We can use the same
activation level principle for all buttons.
2025-01-23 15:39:19 +01:00
Samuel Mannehed 7fdcc66d2c Add indeterminate styling to checkboxes and radios
This is used when the control is neither checked or unchecked.
2025-01-23 15:39:19 +01:00
Samuel Mannehed 633b4c266d Redesign checkboxes and radiobuttons
Makes them bigger and gets rid of their borders. The change also allowed
for some shared styling between them.
2025-01-23 15:39:19 +01:00
Samuel Mannehed e1208b0939 Redesign select dropdown arrow
Makes it more of a "V"-shape rather than a triangle, suits better in the
new spacier select-buttons.
2025-01-23 15:39:19 +01:00
Samuel Mannehed 3f29c9d993 Differentiate buttons from text inputs
By making buttons grey with bold text, they are easy to distinguish from
text inputs.
2025-01-23 15:39:19 +01:00
Samuel Mannehed e9b48ae409 Get rid of gradients on buttons and inputs
Lets make things more flat and modern.
2025-01-23 15:39:19 +01:00
Samuel Mannehed ca270efcc3 Standardize on 6px or 12px border-radius
This results in a few things becoming slighly more rounded, for example
the controlbar, the settings panel and buttons/inputs. Increased
rounding gives a more friendly feel.
2025-01-23 15:38:57 +01:00
Alexander Zeijlon 4f284c2f15 Remove bold styling tags in vnc.html
We aren't emphasizing important information with bold tags anywhere
else, so we shouldn't do it here either.
2025-01-17 11:29:07 +01:00
Pierre Ossman 83a5e9e9db Also test Ctrl+AltGr, as that is what browsers use
Modern browsers now send the odd sequence of Ctrl+AltGr, rather than the
raw Ctrl+Alt, or the fully adjusted just AltGr.

Make sure we have a test for this scenario and don't break it.
2025-01-15 12:43:44 +01:00
Pierre Ossman c7bd247daa Merge branch 'extra-mouse-buttons' of https://github.com/CendioHalim/noVNC 2025-01-15 10:10:15 +01:00
Adam Halim e081d1415a Add support for forward and back mouse buttons
This commit implements the extendedMouseButtons pseudo-encoding, which
makes it possible to use the forward and back mouse buttons.
2025-01-15 09:11:48 +01:00
Adam Halim e8602f23ab Move sendFbuMsg() to broader scope
This is needed if we want to use this function elsewhere in our tests.
2025-01-14 16:27:14 +01:00
Pierre Ossman 9cdbd28761 Merge branch 'mouse-buttonstate-remove' of https://github.com/CendioHalim/noVNC 2025-01-14 12:56:19 +01:00
Adam Halim 6383fa6384 Flush mouseMove when initiating viewport dragging
We want to flush pending mouse moves before we initiate viewport
dragging.

Before this commit, there were scenarios where the _mouseButtonMask
would track a released button as being down.
2025-01-14 12:32:51 +01:00
Adam Halim d1548c12ec Don't send mouse events when dragging viewport
We don't want to send any mouse events to the server when dragging the
viewport. Instead, we treat them as a client-only operation.
2025-01-14 12:14:59 +01:00
Adam Halim b9230cf23e Use MouseEvent.buttons for button state tracking
Instead of keeping track of button states ourselves by looking at
MouseEvent.button, we can use the MouseEvent.buttons which already
contains the state of all buttons.
2025-01-14 12:14:59 +01:00
Adam Halim f9eb476f6d Add tests for dragging with gestures
There were no test for viewport dragging using gesture previously, so
let's add some.

Note that there currently are some viewport dragging behaviours that we
don't want to have, so some tests have commented out what our desired
behaviour should be.
2025-01-14 12:14:59 +01:00
Adam Halim ea057d0793 Move gesture event help functions to broader scope
This is needed if we want to test gestures with dragging.
2025-01-14 12:14:59 +01:00
Adam Halim 31d6a77af6 Check for correct button events in dragging tests
Previously, these unit tests did not check which events were sent to the
server, only how many events were sent. This commit adds checks to see
that the expected button events are sent.
2025-01-14 12:14:59 +01:00
Adam Halim dce8ab395b Dispatch mouse events in dragging unit tests
This makes our tests reflect the real world better, as we now send real
mouse events instead of calling private methods directly.
2025-01-14 12:14:59 +01:00
Adam Halim c3934e0938 Move mouse move flushing to separate function 2025-01-14 12:14:34 +01:00