GTK3 Theming modGTK3 Resolves layout corruption under ALL Linux Distros

  1. ‹ Older
  2. 3 weeks ago

    jim m

    Sep 25 Pre-Release Testers, Xojo Pro Phoenix, Arizona

    Ok, I think I've found the issue with textfields. There is a property "width-chars" that is used to size the entry. It defaults to -1 which means to use all available space. If it is set to 0 then the control sizes normally.

    So in the open event of a window, I put this:

    #if TargetLinux
      declare sub g_object_set Lib "libgtk-3" (obj as ptr, name as CString, value as int32,term as ptr=nil)
      declare Function gtk_bin_get_child Lib "libgtk-3" (obj as ptr) as ptr
      for i as integer=0 to ControlCount-1
        if Control(i) isa TextField then
          dim t As TextField=TextField(control(i))
          g_object_set(ptr(t.Handle),"width-chars",0)
        end if
        if Control(i) isa ComboBox then
          dim c as ComboBox=ComboBox(control(i))
          dim t as ptr=gtk_bin_get_child(ptr(c.Handle))
          g_object_set(t,"width-chars",0)
        end if
      next
    #endif

    and using this theme modification:

      Dim sStyleCSS As String = _
      "GtkButton, button {padding:0px;margin:0px; min-height:18px; min-width:18px} " _
      +" entry{margin:0px;padding-top:0px;padding-bottom:0px;min-height:1px;} " _
      +"scrollbar.horizontal trough slider{min-height:8px} scrollbar.vertical trough slider{min-width:8px;} " _
      +"progressbar trough {min-width:1px;}"
      

    I get:
    -image--image-
    -image-

  3. Tim J

    Sep 25 Pre-Release Testers, Xojo Pro Dehydrating in AZ

    Hi Jim - excellent sleuthing on your part. From a quick check on my end, we just need to add that to each window's Constructor and things can be a saner world under Linux.

  4. Jürg O

    Sep 26 Pre-Release Testers, Xojo Pro

    @jim m Ok, I think I've found the issue with textfields.
    in the open event of a window, I put...
    and using this theme modification...

    Then I get this on Ubuntu:

    • DropDown Arrows on Ubuntu 18 are too far right
    • TextField is clipped on bottom on Ubuntu 16
    • PopupMenu: Text is too far left on both Ubuntu 18 and 16

    -image-

    I'll try to mix both approaches together - let's see what it turns out on various distributions...

  5. Jürg O

    Sep 26 Pre-Release Testers, Xojo Pro

    @Jürg O I'll try to mix both approaches together - let's see what it turns out on various distributions...

    So here's an example project where I've tried to combine it all:

    • modGTK3: all Declares are in here
    • 1 global style (initialized in App.Open) (a mix of Jim and Jürg, now containing the Scrollbar style settings)
    • Controls are Subclasses - they call InitGTK3Control (to set the width-chars=0, and make sure their Height is 26). In our real-world projects, we're always using subclasses for Controls, so that we can easily and globally modify them with each Xojo version. I don't like to copy-paste code in all Window's Constructors (or other places) - I prefer once central place. Oh, and yes - I know - in this example, the ScrollBar's aren't subclassed.

    @jim m: The DropDown arrows and PopupMenu TextAlignment looks better to me on Ubuntu now. If you're running this example project as it is - do you still get the clipped TextFields on your Mint distributions? Or has your included width-chars=0 fixed that?

    It looks like this on the Distributions I have at hand:
    -image-

    Hopefully we can figure out a style combination that works acceptable on all "most common" distributions… for me Ubuntu and Debian are part of that, and Ubuntu is where Jim's previous style hasn't worked out well. So I'm wondering if this "mix" is looking good not only on Ubuntu, but Mint as well?

  6. Jürg O

    Sep 26 Pre-Release Testers, Xojo Pro

    Hmm, I've updated the example above: By pressing the PushButton, it shows MessageDialog, and to confirm it shows a MessageBox. Just why are the Buttons in these Message(Box) dialogs cut off, so that the bottom border is not fully visible (Ubuntu 14 and 16; Ubuntu 18 and Debian are OK)?
    It seems to me the difference is that Debian and Ubuntu 18 are using a kind of "use full with" layout for these buttons, which can be styled with messagedialog .dialog-action-area button { } . But Ubuntu 14/16 are just placing buttons in the "bottom-right area". And in this case, the dialog-action-area doesn't seem to have any effect. Still - the Buttons are clipped, but why…? The ones on the main window are ok, but those on MsgBox/Dialog not?

  7. jim m

    Sep 26 Pre-Release Testers, Xojo Pro Phoenix, Arizona

    Ok, I updated the example to include a syntax checking live editor.
    I did switch things around so the global setter returns a boolean to indicate success And added an error info class...
    -image-

    Looking pretty good!
    -image-

  8. jim m

    Sep 26 Pre-Release Testers, Xojo Pro Phoenix, Arizona

    I just remembered my error message checking isn't done yet though...

  9. jim m

    Sep 26 Pre-Release Testers, Xojo Pro Phoenix, Arizona

    Ok, fixed the error messages... Now it will give something meaningful.
    Here's the example.

  10. Jürg O

    Sep 27 Pre-Release Testers, Xojo Pro
    Edited 3 weeks ago

    @jim m Ok, I updated the example to include a syntax checking live editor.

    Cool, thanks! That makes it much more convenient to try different things :)

    I've updated the example to "v5" - you can get it here: 5_Linux-gtk3-style-test.zip

    Notes to the changes:

    • The "global GTK3 Style" is no longer in a Constant. It's now an Array. Why? For one, the various stylings can be "split". It makes it easier to add a default set, but in a dynamic way (e.g.: "Ubuntu 16.04" needs this part-style, too). And I've found that for example Ubuntu 14 can't parse "min-height/width". So this Array is now being fed to be initialized one-by-one. The style-parts that won't work in the current distribution get ignored, all the rest gets applied.
    • You see the result of this in the global String variable: GlobalGTK3CSS - and this is shown in your cool GTK3 CSS live editor. So it no longer contains the parts that can't be parsed anyway.
    • I have found a way to get the Buttons in MessageDialogs and MsgBoxes look good on Ubuntu 14, 16 - style is included in the example
    • Ubuntu 14 doesn't use the global "button" and "entry" styles, only ".button" and ".entry" - that's why both are in the list again
    • The Scrollbar Styles don't seem necessary on Ubuntu and Debian, so I've commented them out. In fact - the Scrollbars look worse on Ubuntu with the style applied. How about Mint? Can you create two screenshots with/without? Otherwise it might be good to figure out what environment needs this, so that an application can add this dynamically… (similar to my "Ubuntu 16.04" TextField-fix). It would be great to come up with a "default global style set" that works on all Mint, Debian, Ubuntu (and others).

    Here's what 5_Linux-gtk3-style-test.zip looks like on Debian and Ubuntu:
    -image-

    Oh, and just for fun: I've set Height=24 for the Controls in modGTK3.InitGTK3Control. And it looks acceptable - I certainly couldn't have this "small Height (for Linux standards)" before - not with Xojo's default implementation :)

  11. Tim J

    Sep 28 Pre-Release Testers, Xojo Pro Dehydrating in AZ

    One of my toughest targets is Fedora/CentOS with the default desktop settings. Your efforts kick its behind!!!

    -image-

    100 thank you's for this win!

  12. Andre K

    Sep 29 Pre-Release Testers

    -image-

    Via VNC looking at the result of the GTK3 Theming result on a Pine64 running Ubuntu 16 LTS with Mate desktop. The VNC-server shows the result on the XFCE4-desktop. As you can see it looks great!

    Just as Tim says: many MANY thanks for this fine solution.:D

  13. Tim J

    Sep 29 Pre-Release Testers, Xojo Pro Dehydrating in AZ

    And let's not forget @jim m 's dogged determination on the deeper details.

    I've also asked @Jason P to pin this conversation in the Linux target section.

  14. Jürg O

    Sep 29 Pre-Release Testers, Xojo Pro

    @Tim J And let's not forget @jim m 's dogged determination on the deeper details.

    Yup, thanks a lot - also for providing the CSS live editor, which makes it so much more convenient to try different things.

    @Tim J I've also asked @Jason P to pin this conversation in the Linux target section.

    Not with that title, please ;)
    I'd like to see this to be added to the example projects (in Platform-Specific/Linux/GTK3 Themes) that come along with Xojo.

  15. Tim J

    Sep 29 Pre-Release Testers, Xojo Pro Dehydrating in AZ

    @Jürg O Not with that title, please ;)
    I'd like to see this to be added to the example projects (in Platform-Specific/Linux/GTK3 Themes) that come along with Xojo.

    Why don't you start a fresh thread that introduces the modGTK3 module and we'll ask that they pin THAT one :).

  16. Tim J

    Sep 29 Pre-Release Testers, Xojo Pro Dehydrating in AZ

    ... and, I changed the name :P

  17. 2 weeks ago

    Jürg O

    Sep 30 Pre-Release Testers, Xojo Pro Answer

    Since 2017r2, Xojo uses GTK3 for Linux. The default GTK3 Controls are quite big. That makes a cross platform layout quite difficult.
    This example Xojo project shows how one can style Controls using CSS in Xojo-built Applications. The example is trying to just set a minimal amount of styles, so that Controls can be sized at .Height=26 and look good on most Linux distributions.
    This is achieved in two steps: A global theme, and some tweaks for a couple of Controls.

    Many thanks to @jim m for digging in the deeper details providing the CSS live editor, which makes it so much more convenient to try different style adjustments!

    The example Xojo project includes a Module modGTK3. All the required Declares and Styles are in there. If you intend to use it in your own projects, have a look at where the global theme is set, and where/how the Control tweaks are set:

    1. App.Open -> modGTK3.InitGlobalGTK3Style()
    2. Control.Open -> me.InitGTK3Control()

    Note: modGTK3 extends InitGTK3Control for Controls. In this example project, it's called from Control Subclasses. Subclassing your Controls is highly recommended anyway, as you get a single place for tweaks and workarounds for different XojoVersions or BuildTargets.

  18. Jürg O

    Sep 30 Pre-Release Testers, Xojo Pro

    You're probably wondering about the reply above ;)
    The main reason is that I usually don't keep my DropBox links alive for long... so I've moved the example project to a Webserver, where my "Xojo - some pieces 4u" are available.

    @Tim J I've also asked @Jason P to pin this conversation in the Linux target section.

    Since it is (for now), maybe you could mark it as the answer? So a link to the example project is right on top.

  19. Tim J

    Sep 30 Pre-Release Testers, Xojo Pro Dehydrating in AZ

    @Jürg O Since it is (for now), maybe you could mark it as the answer? So a link to the example project is right on top.

    Done!

  20. Garry P

    Oct 3 Pre-Release Testers, Xojo Pro Europe (Torquay, UK)

    Such a fantastic job with this module. Well done!

  21. jim m

    Oct 3 Pre-Release Testers, Xojo Pro Phoenix, Arizona

    Hey guys. I did a bunch more work on this (kind of got lost in it over the weekend)

    I eliminated the need to subclass controls by adding handlers for the GtkWidget and GtkEntry classes 'map' signals. All controls' height will be set to be at least their default 'min-height' property (not the css value) and all GtkEntries will have char-width set to zero.

    Added conditional parsing for the CSS. #IF - #END IF style

    I added a css nodes viewer and a GtkWidget properties viewer.

    I put up a BitBucket of the project . Please take a look and add css for any quirks you find for specific distro's, OS's, Desktops and Xojo versions. (Syntax is very simple and explained in the readme.)

    Be sure to add the init methods before any windows are shown or the 'map' signals will be missed.

or Sign Up to reply!