Layout changes to v9 (gnome < 43)

[poulou0]

Hello, I use ubuntu 22.04 LTS and the last compatible version 9 of this incredibly MUST extension!! I made some layout changes and I was wondering if you are interested and if you can update this version for us who still use gnome 42?

What happened

I downloaded the compatible version from the extension manager and start changing according to my likes and when I was happy with the result I came to this repository only to realize that the project went through a major rewrite for gnome 43!! (I was happily surprised to see that for some things we took the same route :)

Preview

(Play with the height in the options for optimal result)

Install Improved OSK v9 and apply patches:

My changes are only in the layout, no functionality was altered. For transparency I created two patches for extension.js and stylesheet.css

wget https://extensions.gnome.org/download-extension/improvedosk%40nick-shmyrev.dev.shell-extension.zip?version_tag=35584 \
    -O /tmp/improvedosknick-shmyrev.dev.v9.shell-extension.zip && \
gnome-extensions install /tmp/improvedosknick-shmyrev.dev.v9.shell-extension.zip && \
rm /tmp/improvedosknick-shmyrev.dev.v9.shell-extension.zip && \
wget -qO- https://github.com/nick-shmyrev/improved-osk-gnome-ext/files/11141363/extension.patch.txt | \
    patch ~/.local/share/gnome-shell/extensions/improvedosk@nick-shmyrev.dev/extension.js && \
wget -qO- https://github.com/nick-shmyrev/improved-osk-gnome-ext/files/11141950/stylesheet.patch.txt | \
    patch ~/.local/share/gnome-shell/extensions/improvedosk@nick-shmyrev.dev/stylesheet.css

extension.js patch

```diff --- extension.js 2022-10-18 17:37:58.000000000 +0200 +++ extension_updated.js 2023-04-03 20:07:23.217332802 +0200 @@ -207,110 +207,43 @@ function override_getDefaultKeysForRow(row, numRows, level) { let defaultKeysPreMod = [ [ - [{ label: "Esc", width: 1, keyval: Clutter.KEY_Escape }], - [{ label: "↹", width: 1.5, keyval: Clutter.KEY_Tab }], - [ - { - label: "⇑", - width: 1.5, - level: 1, - extraClassName: "shift-key-lowercase", - }, - ], - [ - { - label: "Ctrl", - width: 1, - keyval: Clutter.KEY_Control_L, - extraClassName: "control-key", - }, - { - label: "◆", - width: 1, - keyval: Clutter.KEY_Super_L, - extraClassName: "super-key", - }, - { - label: "Alt", - width: 1, - keyval: Clutter.KEY_Alt_L, - extraClassName: "alt-key", - }, + [{ label: "Esc", width: 1, keyval: Clutter.KEY_Escape, extraClassName: "medium-text" }], + [{ label: "Tab ↹", width: 1.5, keyval: Clutter.KEY_Tab, extraClassName: "medium-text" }], + [{label: "⇧ Shift", width: 2, level: 1, extraClassName: "shift-key-lowercase medium-text" }], + [ + { label: "Ctrl", width: 1, keyval: Clutter.KEY_Control_L, extraClassName: "control-key medium-text" }, + { label: "?123", width: 1, level: 2, extraClassName: "rounded-key medium-text" }, + { label: "Alt", width: 1, keyval: Clutter.KEY_Alt_L, extraClassName: "alt-key medium-text" }, ], ], [ - [{ label: "Esc", width: 1, keyval: Clutter.KEY_Escape }], - [{ label: "↹", width: 1.5, keyval: Clutter.KEY_Tab }], - [{ label: "⇑", width: 1.5, level: 0, extraClassName: "shift-key-uppercase" }], - [ - { - label: "Ctrl", - width: 1, - keyval: Clutter.KEY_Control_L, - extraClassName: "control-key", - }, - { - label: "◆", - width: 1, - keyval: Clutter.KEY_Super_L, - extraClassName: "super-key", - }, - { - label: "Alt", - width: 1, - keyval: Clutter.KEY_Alt_L, - extraClassName: "alt-key", - }, + [{ label: "Esc", width: 1, keyval: Clutter.KEY_Escape, extraClassName: "medium-text" }], + [{ label: "Tab ↹", width: 1.5, keyval: Clutter.KEY_Tab, extraClassName: "medium-text" }], + [{label: "⇧ Shift", width: 2, level: 0, extraClassName: "shift-key-uppercase medium-text" }], + [ + { label: "Ctrl", width: 1, keyval: Clutter.KEY_Control_L, extraClassName: "control-key medium-text" }, + { label: "❖", width: 1, keyval: Clutter.KEY_Super_L, extraClassName: "super-key" }, + { label: "Alt", width: 1, keyval: Clutter.KEY_Alt_L, extraClassName: "alt-key medium-text" }, ], ], [ - [{ label: "Esc", width: 1, keyval: Clutter.KEY_Escape }], - [{ label: "↹", width: 1.5, keyval: Clutter.KEY_Tab }], - [{ label: "=/ 9) { extraButton.setWidth(1.5); - } else if (!this._emojiKeyVisible && (action == 'hide' || action == 'languageMenu')) { - extraButton.setWidth(1.5); + // } else if (!this._emojiKeyVisible && (action == 'hide' || action == 'languageMenu')) { + // extraButton.setWidth(0.5); } layout.appendKey(extraButton, extraButton.keyButton.keyWidth); ```

stylesheet.css patch

```diff --- stylesheet.css 2022-10-17 16:12:48.000000000 +0200 +++ stylesheet_updated.css 2023-04-03 21:50:39.605878736 +0200 @@ -9,11 +9,14 @@ .alt-key-latched #keyboard .keyboard-key.default-key.alt-key, #keyboard .keyboard-key.default-key.shift-key-uppercase { background-color: #55a54c; + color: #fff; } #keyboard .keyboard-key.default-key.enter-key { border-color: #55a54c; background-color: #55a54c; + border-radius: 0; + color: #fff; } #keyboard .keyboard-key.default-key.enter-key:active { border-color: #43823c; @@ -28,5 +31,44 @@ } #keyboard .keyboard-key.default-key:active { border-color: #121212; - background-color: #121212; +/* background-color: #121212;*/ +} + +#keyboard .keyboard-key { + border-radius: 0; +} + +#keyboard .keyboard-key.rounded-key { + border-radius: 20px; + color: #43823c; +} + +#keyboard .keyboard-key.hide-key { + text-align: center; +} + +#keyboard .keyboard-key.spacer { + background-color: transparent; + border: 0; +} + +#keyboard .keyboard-key.highlighted { + background-color: #43823c; + color: #fff; +} + +#keyboard .keyboard-key.margin-left { + margin-left: 5px; +} + +#keyboard .keyboard-key.small-text { + font-size: 10pt; +} + +#keyboard .keyboard-key.medium-text { + font-size: 14pt; +} + +#keyboard .keyboard-key.big-text { + font-size: 18pt; } ```

[nick-shmyrev]

Thanks for the contribution! There's a gnome_42 branch, can you make this into a PR targeting than branch? Also, a few quick notes:

• Can you provide some static screenshots of your changes to the layout? The .gif you made looks nice, but it's hard to compare changes when the image keeps changing :)
• It seems you've replaced the SUPER key with the level switch button in the lowercase level, but you still have the SUPER key present in the uppercase level in the same spot.
• Instead of commenting code/styles out, it's best to just delete those lines.
• I can see you've tried to align the outer edges of the keyboard and the arrow keys together. It looks much nicer that way! Unfortunately, it might not work that well with non-en-us layouts, especially in cases where the bottom line of characters might have a different number of keys present.
• Similarly, hard-coding button colors and/or shapes might not look good on non-ubuntu distros (for example, take a look at Pop_OS, the last time I checked they had while background for alphanumeric keys, and dark for all other buttons).

[poulou0]

Hey, thank you for the quick reply! If there is interest indeed I'm sure we can iron things out! :)

I'm not very familiar but this should be enough https://github.com/nick-shmyrev/improved-osk-gnome-ext/pull/45 Feel free to change or suggest any further fixes. I like putting attention to details and I want to respect the coding style of this project. Lastly I'm not a native English speaker so you might want to name things differently!

• Screenshots, sure, also included them in the pull request

  Static screenhots

     
• SUPER-key, yes, I'm not using it too much and I needed the space, but I also wanted to include it for others (same for the "insert" button, its toggled with the "delete" button)
• Delete commented out, done! (I tried to make the least invasive changes, now with your blessings, yes!)
• Align outer edges, I tried some different layouts and to my surprise the keys were the same. I will try with more when I have the time, any pointer is welcome of course. (my everyday use-case is english-us with greek and it works :)

• Hard-coding shapes/colors, Indeed I changed the arrows and one color (I was expecting problems with the "🖮" or "🌐" but they appear normally).

  I checked with:

  ✓ Debian 11, GNOME 3.38

  
  ✓ Ubuntu 22.04, GNOME 42.5

  
  ✓ Pop!_OS 22.04, GNOME 42.5

  
  ✕ openSUSE, Leap 15.4, GNOME 41 (nothing worked there)

  

[poulou0]

I already want to make some small fixes.. 😇

I installed ubuntu 22.04.2 on a VM and its different than my dev machine 🤦 (Looks exactly as you described above for Pop!OS)

ubuntu 22.04.2 on a VM screenshot


Is it okay to git commit --amend in my last commit? The pull request will update automatically or should I make another commit?

[nick-shmyrev]

@poulou0 Sorry for a late response, I've been really busy for the last couple of weeks. Yeah, if I recall correctly, amend-ing works fine as long as there aren't any code reviews or code comments on the PR. Also, let's move code-related discussion into PR comments, much easier to keep track of everything that way. Thanks!

[poulou0]

No problem, the timing was perfect because I was also a bit busy.

I agree, lets continue here https://github.com/nick-shmyrev/improved-osk-gnome-ext/pull/45