search

astroDimitrios / rose

:rose: Rose is a toolkit for writing, editing and running application configurations.
https://metomi.github.io/rose/
GNU General Public License v3.0
0 stars 1 forks source link

Insufficient distinction between neighbouring config options #33

Closed jfrost-mo closed 2 months ago

jfrost-mo commented 2 months ago

When you have config options next to each other in rose edit, there is no visual distinction between one and the next.

In the following example it is hard to tell where one radio button ends, and the next begins.

Screenshot from 2024-09-20 02-56-30

jfrost-mo commented 2 months ago

As a point of comparison, rose 2019 has a dividing line between these separate config options.

Screenshot from 2024-09-20 03-47-59

J-J-Abram commented 2 months ago

Looks like we need a separator widget:

https://docs.gtk.org/gtk3/class.Separator.html

and these will be needed between the keywidgets and their respective valuewudgets and the next key/valuewidget

J-J-Abram commented 2 months ago

The current issue with adding a separator widget is knowing when and when not to make them visible to match the variable widgets.

An alternative is to assign lines using css styling, the issue here is that GtK.Table has become depreciated (but not removed as of gtk3) so there is css support for it.

We are able to make a 'soft' distinction between the variables by increasing the vertical padding ypadding between them in variables.py file, lines 250-255:

            container.attach(self.contentwidget,
                             key_col + 1, key_col + 2,
                             row_index, row_index + 1,
                             xpadding=5, ypadding=5,
                             xoptions=Gtk.AttachOptions.EXPAND | Gtk.AttachOptions.FILL,
                             yoptions=self.yoptions)
J-J-Abram commented 2 months ago

Issue potentially solved by removing any vertical padding that was added from previous comment and adding the following to the css styling:

metomi/rose/etc/rose-config-edit/style.css

notebook box > paned > paned > scrolledwindow > viewport > box > widget > box{ 
  border-bottom: solid;
  border-width: 1px;
  border-color: lightgray;
  padding: .4em;
  margin: 0 -.3em;
}

example:

image