library: Add Frame Entry

[SoNiC-HeRE]

Currently implemented a simple UI to demonstrate usage of Gtk.Frame but can be implemented in a more interactive way that shows more complex use of Gtk.Frame such as:

• Collapsible Frame Sections:
  Divide the frame's content into collapsible sections using Gtk.Expander widgets. Each section can be expanded or collapsed individually, allowing users to focus on specific parts of the frame's content.
• Frame with Toolbar:
  Embed a Gtk.Toolbar within the frame to provide additional functionality or actions related to the frame's contents. The toolbar can contain buttons, icons, or dropdown menus to perform specific tasks.
• Or just for enhancing UI

Closes #316

Open to suggestions and looking for an early review

[andyholmes]

I like the idea of toolbars and revealers. It might be interesting to contrast this demo with the TextView demo where you put it in a scrollable frame.

For example, in the TextView demo everything will fit on "one page" and you can scroll in the area. But other situations you want the page to scroll, which is usually what you want for fixed content like labels and images.

One thing I'd try to avoid is duplicating the use-case of Adw.ExpanderRow too closely, because it might add some confusion about which one to use.

Side-note: Gtk.Toolbar doesn't exist in GTK4, because it was basically just a Gtk.Box with some special styling. So we just use Gtk.Box (or Gtk.CenterBox) with the toolbar CSS class.

[SoNiC-HeRE]

I like the idea of toolbars and revealers. It might be interesting to contrast this demo with the TextView demo where you put it in a scrollable frame.

For example, in the TextView demo everything will fit on "one page" and you can scroll in the area. But other situations you want the page to scroll, which is usually what you want for fixed content like labels and images.

One thing I'd try to avoid is duplicating the use-case of Adw.ExpanderRow too closely, because it might add some confusion about which one to use.

Side-note: Gtk.Toolbar doesn't exist in GTK4, because it was basically just a Gtk.Box with some special styling. So we just use Gtk.Box (or Gtk.CenterBox) with the toolbar CSS class.

How about demonstrating different usecases in a scrollable view?

1. Layout only
2. Toolbar
3. TextView

wdyt?

[andyholmes]

Yeah, that sounds good. Let's give that a try and see how it looks.

[SoNiC-HeRE]

Made the following changes:

• Divided the examples in 3 sections with different usecases
• Implemented a clean UI
• Added necessary JS Code

P.S: Thought of adding an example with Gtk.Label but did'nt go well with the UI.

[sonnyp]

Looks great.

Only issue is we need to use an image in public domain.

What about this one https://www.publicdomainpictures.net/en/view-image.php?image=508689&picture=vintage-illustration-cat-kitten ?

[SoNiC-HeRE]

Looks great.

Only issue is we need to use an image in public domain.

What about this one https://www.publicdomainpictures.net/en/view-image.php?image=508689&picture=vintage-illustration-cat-kitten ?

works

[andyholmes]

Looks good, just a few tweaks and it's good to go!

[sonnyp]

@SoNiC-HeRE please update the image #317 (review)

[andyholmes]

Nice one!

[sonnyp]

One last thing

the label needs to be center with the widget on top in the first and last examples

[SoNiC-HeRE]

Fixed Spacing ,removed arbitrary margins and used box properties

[sonnyp]

Labels are still not centered vertically with the widget they describe

[sonnyp]

This is also considered an arbitrary number

please use box layout for centering
ask if you need help

[sonnyp]

Please be more thorough

[SoNiC-HeRE]

Please be more thorough

Yes, i think i misunderstood something ; fixed the error
Updated with Box layout

I think the label of textview without frame is slightly above when compared to label with frame but I did'nt change the box spacing from 12 to 18 neither bottom-margin of textview without frame as it would create a significant bigger gap