CSS

[arjunmenon]

Hey
Since 3.2 is build upon GTK3, how can we leverage CSS for styling widget elements?

[ccoupe]

Hi,
OSX is not gtk3 and css. That said the next release 3,3,6 beta here does have some support for setting the font and stroke color of native widgets.

[arjunmenon]

Hey
Styling is, at present, extremely limited.
Native widgets generally look ugly, particularly in linux setups. Their UI has not kept pace with Windows or OSx
For example, if I wanted to add some thin borders and drop-shadow to a search bar. I can't do that.
Also, from the docs I doubt I can style the buttons pretty.
So, some options for these would be good, even if it is platform dependent.

Otherwise, another option could be allowing combining code with GTK3 and shoes. Similarly for other platforms.
This would address any limitations for a platform.

[ccoupe]

in issue #354 I identified the possibility of using different css themes on windows. It may be possible to do that in Linux but it's a low priority because shoes doesn't work like normal gtk3 programs and there are major issues to fix with Gtk 3.20+ before we get around to theme support.

[ccoupe]

I'm thinking of a scheme - inside a shoes linux/windows expanded distribution would be a themes/ directory and a small shoes.ini or something like that. Only two entries in the ini - the app name (useful for some custom app buildling I've been thinking about and "Theme: xxxxx". A custom css would live in themes/xxxxx/ If there is no shoes.ini or no theme given then Shoes acts normally - use the desktop chosen theme. If there is theme with the given name the gtk can be convinced to use it.

Shoes 3.3.6 uses the gtk_css_provider_load_from_data() to do some of the font/coloring for some of the widgets it seems likely we could style with another provider and theme. Not all widgets will be amenable to all tweaks which will be a big testing problem so I'm not going to do it soon since there are more pressing issues.

[arjunmenon]

This would be acceptable.
As a start, some common CSS properties like border-color, border-width, background-color, image styling, using images as buttons, are pretty common.
Finishing a GUI for distribution gets stuck because these required functionality can't be achieved.

Granted GTK3 is messy and bloated. But if only basic properties are made available, which also do not have much issues implementing in a pure GTK3 app, we can leverage them.

While using, ruby-gtk3, particular styling like setting icon height in an input equal to font-size, is literally a pain. So stuff like this can be avoided. Basic-properties on the other hand translates easily.

[ccoupe]

Added a wiki article for Shoes 3.3.7 that touches on theme.

[ccoupe]

I'm going to close this issue as a duplicate of #354. There is some progress on the issue.

[ccoupe]

@arjunmenon

Now that I can actually load a theme into Shoes there is some bad news. Most existing themes don't appear to work and when they do load they will be limited in functionality. The really bad news is that you need to craft your own Theme and see what works for you.

Buttons made completely from images, via css won't , and probably never will. Fortunately, its easy to do it with existing Shoes - image and click {block} There's a wiki article for that FAQ.

[arjunmenon]

Good to know.
I facing an entirely different issue. After packaging an app, all layout, styles get messed up. Text, content, images appear outside the window, like they are floating.

[ccoupe]

That certainly is odd. I never seen anything like it. What platforms (from and to, OS versions....) Gtk versions if both a Linux.

[arjunmenon]

I think it is because of the Shoes platform and packager mismatch.
I am using Shoes 3.2.5 and the packer is using 3.3.6
I am developing on the Gtk2 version because I find it extremely stable. This is what the shoes Walkabout looks like in my setup, Elementary OS 0.4.1/Ubuntu 16.04 Build

You can see that the mouse is over Read the Manual but the highlighted option is Package an App. To actually select Run an App, I have to move the mouse towards the top edge of the window., somewhere around Welcome to....

here is a simple app with a simple layout

The left is Shoes Federales(Gtk2) and the right is the newer Shoes Walkabout(Gtk3)
Also on walkabout, I can't drag and move the window. It's just fixed.

Walkabout is jumbled, atleast on my platform.

Anyway to force the packager to use the Gtk2 version of Shoes?

[ccoupe]

There are many things that are wrong in those screen shots. It's like Shoes and Gtk believe the window drawing surface is wider and shorter than the Window outline is drawn, and Gtk also drawing past that right hand border. I use Mint 18.2 (Ubuntu 16.04) so our gtk3 versions are probably similar but I'd like know what gtk3 version you have.

Anyway to force the packager to use the Gtk2 version of Shoes?

Only if you have your own webserver for packaging and only populate it with 3.2.25. It would be better to fix 3.3.x or your code/system or whatever the real problem is than to stay in the frozen past. Building Shoes from source is pretty easy on Linux and something you might consider.

[ccoupe]

Try launching the walkabout 3.3.6 Shoes from the command line - I'll bet you get a load of complaints from Gtk.

[arjunmenon]

Here is the Gtk version

>$ apt-cache policy libgtk2.0-0 libgtk-3-0
libgtk2.0-0:
  Installed: 2.24.30-1ubuntu1.16.04.2
  Candidate: 2.24.30-1ubuntu1.16.04.2
  Version table:
 *** 2.24.30-1ubuntu1.16.04.2 500
        500 http://ubuntu.ipserverone.com/ubuntu xenial-updates/main amd64 Packages
        100 /var/lib/dpkg/status
     2.24.30-1ubuntu1 500
        500 http://ubuntu.ipserverone.com/ubuntu xenial/main amd64 Packages
libgtk-3-0:
  Installed: 3.18.9-1ubuntu3.3
  Candidate: 3.18.9-1ubuntu3.3
  Version table:
 *** 3.18.9-1ubuntu3.3 500
        500 http://ubuntu.ipserverone.com/ubuntu xenial-updates/main amd64 Packages
        100 /var/lib/dpkg/status
     3.18.9-1ubuntu3 500
        500 http://ubuntu.ipserverone.com/ubuntu xenial/main amd64 Packages

---

Only if you have your own webserver for packaging and only populate it with 3.2.25.

But if I am using a previous version of Shoes, shoudn't the packager also do its stuff with the version installed? No point though for distributing multiple versions of Shoes, whatever the reason.

[ccoupe]

Thanks for gtk info. That's the same version I'm using for development. We differ in themes or theme engines (my guess is Shoes is not playing nice with your engine - I'll try to get an ElementOS VM setup in a day or so.

But if I am using a previous version of Shoes, shoudn't the packager also do its stuff with the version installed? No point though for distributing multiple versions of Shoes, whatever the reason.

I thought about doing that but it turned out to be a lot of work and even more testing for little gain.

[arjunmenon]

Hmmm. It could possibly be. Using ruby gtk2 and gtk3 are totally different for me as well. Both behave differently on their final execution.
Hard to say if Elementary OS is causing this, 'coz there are loads of Gtk3 apps from the app store and otherwise, installed. No weird behavior with differing themes.

Also I tried building hello world type apps in C as well in Python, they dont differ in their output.

[ccoupe]

There are lots of things going on with gtk3. Your copy of Shoes is compiled against an old Gtk3 (3.8.?) but uses the systems .so to run. A lot of crud can sneak in there. It's also less fun on 3.22 on freebsd.

[ccoupe]

I can recreate your problems and if you start shoes from the terminal you get a critical Gtk err. Sadly it seems like a difficult OS for me to get around in without a lot of learning. Try $ ~/.shoes/walkabout/shoes -c to get the error message.

After poking around ElemOS even more, the less I like.

[arjunmenon]

No I dont have any error messages.

[ccoupe]

The error message might be from Shoes 3.3.7 wihich exercises Gtk3 more than 3.3.6. Oh well. I find elementary OS too closed to spend any time on. From what I've read it doesn't have ppa/deb and uses snap. OK. Shoes doesn't do that yet and that's way down my my priority list. If you, @arjunmenon want to debug Shoes on Elementary you need to build Shoes from source on Elementary and see if anything improves. Install rvm, ruby 2.3.3 properly, install git and build-essentials, gtk3-dev and a few others and then clone the Shoes repo. Then 'rake'. Too much work for me on a bare elementary OS that I don't see a future with.

[arjunmenon]

Elementary OS supports deb, it's based on Ubuntu after all. I use it all day.
I contacted the dev team this is what they had to say

this was a weird bug in the version of GTK or Mutter (I forget which) that is in Loki. It's fixed in Juno, but right now for Loki you have to either request a larger size window, or request the wanted size on a child widget and let the window get sized naturally by its children. It's because allocating the window is including the shadow in the calculation.

I can't do much here. What I would like to know is if a gtk3 app packaged in your system works as intended in mine. This way, if the bug is in isolation, probably it would render correct.

[ccoupe]

Sigh, an other gtk3 bug for developers to deal with compatibly (somehow) Shoes heavily depends on the Gtk Fixed layout, which is being deprecated (as the Elementary OS answer above believes) Shoes will have to break compatibility with all scripts to move to a different layout. Call it something other than Shoes - it won't be easy or quick to write. Might as well switch to Qt and Shoes4.

[arjunmenon]

There suggestion that to declare the size in a child widget does work. But it's still horrible in its final form, text and content look jagged.

So shoes should silently include a container stack with the window size allocated by the user.

[arjunmenon]

Call it something other than Shoes - it won't be easy or quick to write. Might as well switch to Qt and Shoes4.

Lol. I wonder if this is a cue for the gray-bearded Tk to make a comeback

[ccoupe]

Tk

GridBag was first seen in TK and it certainly is high on my list of additional layouts. And a tree layout sort of thing Gtk can do them and OSX knows about trees layouts. That doesn't mean they can be unified in Shoes w/o knowing the details of each. Then you have to design a Shoes dsl that makes them simple. There's nothing simple about them.

[ccoupe]

@arjunmenon

Have you read this wiki article? The bottom half describes Shoes::Widget and how to build your own layout.

[ccoupe]

Closing 3.3.7 issues.