Add show-icon setting for keyboard-layout applet

[kostoskistefan]

Description

This pull request adds an option to show/hide the icon of the keyboard-layout applet. I think it's a nice option to have and it is especially useful for smaller screens, where we need all the space we can get for other applets on the panel.

Additionally, I also noticed that the icon for the applet was a bit off in a vertical panel, therefore I've changed the code that handles the margins based on the orientation.

Keep in mind that I've only started using Budgie a week ago and I'm not very familiar with the code. I used the other applets as a reference to implement this feature. If there's anything wrong with the code I wrote, please let me know, I'd love to learn more and improve!

Submitter Checklist

• Squashed commits with git rebase -i (if needed)
• Built budgie-desktop and verified that the patch worked (if needed)

[serebit]

Code looks good at a glance (especially for a first attempt!), but will need to clone and properly test this.

[serebit]

It works perfectly as far as I can tell, but the settings page doesn't look right - looking at the XML, it doesn't use the same widgets/margins as the other built-in applets' settings pages. I'd recommend copying another applet's settings.ui, like the tray applet, and just replace the labels/controls with the one you've implemented. Just for consistency's sake, that's all.

[kostoskistefan]

First of all, thank you for testing the code and notifying me about the inconsistencies.

I've changed the ui file based on the tray applet as you've suggested and I've also compared it to some other applets (like the clock applet for example). After recompiling and testing the code, the margins seem to be correct and consistent with the other applets.

Please let me know if there's anything else that needs to be done!

[JoshStrobl]

LGTM. Did some cleanup of the spacing on the applet layout children while I was pixel peeping. Will be consistent now.

Settings section looked good too.

[kostoskistefan]

Hey Josh, thanks for checking out the code.

I compiled and ran your changes and noticed something.

Whenever the icon is shown, everything looks great. If I hide the icon, there's a 2px margin on the left side of the text, which makes it look a bit uneven. Looking at it using the GTK Inspector, I can see that the horizontal box that contains the GTK Image and GTK Stack has a left margin of 2px set inside the theme_3.20.css file. Since this is the compiled css file, I did some minor digging and found out that it is actually set in the src/theme/common/widgets/_base.scss file and it looks like the following: &.horizontal > widget > widget > * { margin-left: 2px; }.

In the GTK Inspector I added a red border around all of the elements inside the keyboard-indicator applet just so you can better see the left margin that I'm talking about:
Icon shown:
Icon hidden:

Here's what happens if I directly set the margin to 0 within the GTK Inspector:
Icon shown:
Icon hidden:

Just for completeness sake, here's what I'm actually doing with the CSS inside the GTK Inspector:

.keyboard-indicator * {
    border: 1px solid red;
}

.keyboard-indicator .horizontal {
    margin: 0;
}

And here is my panels' applet order from left to right: system tray, keyboard indicator, status indicator, network, spacer, clock, raven and the user indicator applet.

Could you please confirm/deny that this happens on other systems as well and it's not something specific to my system and the gtk theme that I am using?

Please let me know what you think and what the next steps should be.