Feature request - Make drag handle more obvious and add key labels

[rogercreagh]

Quite often I find the keyboard covers a part of the screen I need to see. Is it feasible to make the keyboard pane movable so it could be dragged to a new location.

As an alternative you could make it full width and then make the top part of the screen scroll so the cursor stays visible.

[rogercreagh]

Doh! I've just discovered that what I thought were dedicated divide and multiply keys at the bottom right are actually move and close! The icon you have used for move doesn't look at all like a move icon because it is too small (see previous issue). And the close (multiply) is in an unusual place for a close key so it never occured to me that that was what it was.

Could those two be moved to the top , perhaps in the frame, where window sizing and closing buttons usually are? That would give space for the fourth special key that my keyboard has.

[Vishram1123]

What layout do you use that has the 4th special key?

[rogercreagh]

Here's two examples. Actually the fn key turns out not to be a real key, it is purely a modifier to the function keys to make them produce the action indicated on the icons (mute sound, volume fdown, volume up, switch screen, rewind, play etc etc.

The lock key at the top right toggles the function keys between actions or function keycode and the fn selects the other option on the key when pressed in combination.

I guess they are not that common, and I can live without the functionality on the onscreen keyboard. But I'm still confused about the icons you are using - I guess the branch icon is the alt key since there are two of them, and the smaller shift up icon is probably ctrl since there are two of them - but perhaps they are the other way around? The other one is perhaps the super key which is the one that is a windows icon on a microsoft keyboard?. Text would make it clearer.

[Vishram1123]

The double up arrow is the capslock, the single wide up arrow is the shift keys, the tiny up arrow is a control key, the divided diamond is the super key, and the road path thing that is next to the space bar on either side is the alt key. I based these icons off of a MacOS keyboard:

(Option refers to the same thing as Alt, functionally) Sorry if that was confusing. I will add dedicated labels when I get the chance.

[loteque]

I would like if this keyboard was more inline with draggables in mobile interfaces.
either:

• the panel is draggable by interaction with any of its borders
• the panel has at least one edge/border that visually and functionally is a handle for dragging

This would make the drag and reposition functionality more discoverable for users.
I think that it actually might increase usability of drag to reposition by removing a point of friction that is clicking a button and then drag to reposition.
Using a handle instead makes dragging to reposition an immediate action.

some draggable handle examples

• https://codepen.io/zachariab/pen/gOZwPZ
• https://blog.prototypr.io/building-a-responsive-drag-and-drop-ui-5761fd5281d5#453d

[Vishram1123]

@loteque I had problems with using a handle or the borders of the keyboard for moving it. With a handle, the keyboard would not leave the dragging state if the hand left the touchscreen while the keyboard was being dragged. If the draggable region is placed within the border, the space between keys can be dragged. As such, I would not be able to implement the UI change that you are requesting. There needs to be a deliberate action of toggling a dragging mode, otherwise event management gets messed up.

[loteque]

I understand.

Perhaps we can make a slightly different approach?

Does Gnome/Wayland provide an event signal when the users hand leaves the screen?

Edit: I'm new to JS gnome extensions, but I will look into this further.

Perhaps we could double tap the handle to put it in the drag state and double tap to exit.

The idea is to do something to make the drag state more discoverable and lower the friction to enter/exit the state.

[Vishram1123]

@loteque I figured out how to make it drag without having to toggle a drag mode; I just connected the event handlers to a drag handle instead of the keyboard as a whole, so you don't have to toggle a drag mode.

1fad5fd adds that drag toggle, and adds the option to replace icons with labels.