simple-keyboard/simple-keyboard-layouts

Preventing re-layout on shift

Scotley opened this issue · 5 comments

Scotley commented

Hi,

First off this is a fantastic library which we are really enjoying using because of it's simplicity and the fact that it 'just works'.

One issue that we have though, is that when swapping between layouts there is always a visual change to the size of the buttons (clearly because the content change is causing a reflow). The visual change is slightly janky and is something that our customers have reported back while we have been trialling this keyboard (this is currently preventing us from settling on using it).

This is mostly a feature request to allow fixing the first layout style as it is rendered while swapping out with the exact key count/combination. Obviously a re-flow would be required if the key count differed.

Interested in your feedback on this and whether you would be interested in adding this. Also, if you are not, if you would accept a PR should we get time in the future to add it in.

hodgef commented

Hello @Scotley,

Thanks for the feedback. I personally have not noticed any jankiness of the kind. Could you post a video depicting the behavior you see?

Here's what I see (which looks quite normal to me):

gif

https://codesandbox.io/s/github/hodgef/simple-keyboard-layouts-languages-list-demo

Best,
Francisco Hodge

Scotley commented

@hodgef, Apologies, I also just realised I put this in the layouts repository, not the base project.

The GIF you added demonstrates the issue I am referring to, when hitting the shift key the layout changes slightly as the letters toggle between caps/not. Virtual keyboards normally don't do this, but simply swap out the displayed characters. It's not a real issue, but more or a layer of polish. You have closed the issue, so I guess you are not open to it. Regardless, below is what I have in mind.

The solution I have in mind for implementing is to follow the options pattern you have set, having the ability to set a key mask, which mirrors the keys but just using an * character to represent the size of the key:

  • When swapping between key layouts for the toggling of caps or shift the shape of the keyboard stays the same while the key content changes.
  • Single * character would be a small key that doesn't grow
  • More than one * would allow the key to grow to fill remaining space as required
  • This would give you better control over the fidelity of layouts (small keys next to a long space) that you currently cannot do without multiple keyboard instances.

eg: example for a simple layout:

const defaultLayout = {
  default: [
    "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
    "{tab} q w e r t y u i o p [ ] \\",
    "{lock} a s d f g h j k l ; ' {enter}",
    "{shift} z x c v b n m , . / {shift}",
    "{space}"
  ],
  shift: [
    "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
    "{tab} Q W E R T Y U I O P { } |",
    '{lock} A S D F G H J K L : " {enter}',
    "{shift} Z X C V B N M < > ? {shift}",
    "{space}"
  ],
  mask:  [
    "* * * * * * * * * * * * * **",
    "** * * * * * * * * * * * * *",
    "** * * * * * * * * * * * ***",
    "** * * * * * * * * * * **",
    "*****"
  ],
};
hodgef commented

Hey @Scotley, thank you for the details. I close the issue immediately after I respond because sometimes people never respond back. Please rest assured that I'm not dismissing your concerns and I will continue to respond. I generally re-open the issue when I flag it as a Bug or Enhancement. I treat issues more like to-do's and when there's a response I come back to it.

I believe the "changes" in layout you're seeing is the natural effect of display: flex. Basically the button letters have different sizes so the browser renders the buttons accordingly. For example if your default layout is the same as your shift layout, you'll see no change at all because the letters take the same space:

https://codesandbox.io/s/morning-sunset-jilhx?file=/src/index.js

I don't really consider it as a bug but just part of using flex for responsiveness. Another thing is that some layouts might have less keys. I'm not super strict with layout contributions but if there's a layout that's wrong I'm open to fix it.

Now, there are some virtual keyboards like this one where the keys don't change in size, and the reason for that is that the keys have a fixed size. You can do the same with CSS:

https://codesandbox.io/s/vibrant-saha-sdsp0?file=/src/index.css

However by doing so you lose the responsiveness.

I'm not sure if I answered the concern here, but I really hope I did. While I'm not very open to making radical changes in the core of the library (in order to limit maintenance/doc update time and future issues), I definitely want to help out and explore what approach makes sense for all.

Thanks,
Francisco Hodge

Scotley commented
hodgef commented

Sounds good! Thank you 👍