inspector: Style the property list

Make the property list look more like a list.
This commit is contained in:
Matthias Clasen 2019-05-07 22:04:41 +00:00
parent 725e7c7470
commit e1c1c46e34
5 changed files with 70 additions and 9 deletions

View File

@ -70,6 +70,7 @@ for f in get_files('inspector', '.ui'):
xml += '''
<file>inspector/logo.png</file>
<file>inspector/inspector.css</file>
<file>emoji/emoji.data</file>
</gresource>
</gresources>'''

View File

@ -0,0 +1,35 @@
/* some style for the inspector */
.header {
background: lightgray;
border: 1px solid gray;
}
.header>* {
padding: 2px;
font-weight: bold;
}
.header sort_indicator {
min-width: 16px;
}
.header>*:not(:last-child) {
border-right: 1px solid gray;
}
.list .cell {
font-size: smaller;
padding: 0 2px;
min-height: 24px;
}
.list .cell entry,
.list .cell spinbutton,
.list .cell button,
.list .cell combobox
{
min-height: 24px;
min-width: 0;
padding: 0 4px;
}

View File

@ -43,6 +43,7 @@
#include "gtksizegroup.h"
#include "gtkroot.h"
#include "gtkgesturemultipress.h"
#include "gtkstylecontext.h"
enum
{
@ -105,17 +106,13 @@ apply_sort (GtkInspectorPropList *pl,
if (column == COLUMN_NAME)
{
gtk_widget_hide (pl->priv->origin_sort_indicator);
gtk_widget_show (pl->priv->name_sort_indicator);
gtk_image_clear (GTK_IMAGE (pl->priv->origin_sort_indicator));
gtk_image_set_from_icon_name (GTK_IMAGE (pl->priv->name_sort_indicator),
icon_name);
}
else
{
gtk_widget_show (pl->priv->origin_sort_indicator);
gtk_widget_hide (pl->priv->name_sort_indicator);
gtk_image_clear (GTK_IMAGE (pl->priv->name_sort_indicator));
gtk_image_set_from_icon_name (GTK_IMAGE (pl->priv->origin_sort_indicator),
icon_name);
}
@ -540,24 +537,28 @@ gtk_inspector_prop_list_create_row (GtkInspectorPropList *pl,
gtk_container_add (GTK_CONTAINER (row), box);
label = gtk_label_new (prop->name);
gtk_style_context_add_class (gtk_widget_get_style_context (label), "cell");
gtk_widget_set_sensitive (label, writable);
gtk_label_set_xalign (GTK_LABEL (label), 0);
gtk_size_group_add_widget (pl->priv->names, label);
gtk_container_add (GTK_CONTAINER (box), label);
label = gtk_label_new (type ? type : "");
gtk_style_context_add_class (gtk_widget_get_style_context (label), "cell");
gtk_widget_set_sensitive (label, writable);
gtk_label_set_xalign (GTK_LABEL (label), 0);
gtk_size_group_add_widget (pl->priv->types, label);
gtk_container_add (GTK_CONTAINER (box), label);
label = gtk_label_new (g_type_name (prop->owner_type));
gtk_style_context_add_class (gtk_widget_get_style_context (label), "cell");
gtk_widget_set_sensitive (label, writable);
gtk_label_set_xalign (GTK_LABEL (label), 0);
gtk_size_group_add_widget (pl->priv->origins, label);
gtk_container_add (GTK_CONTAINER (box), label);
widget = gtk_inspector_prop_editor_new (pl->priv->object, prop->name, pl->priv->values);
gtk_style_context_add_class (gtk_widget_get_style_context (widget), "cell");
gtk_container_add (GTK_CONTAINER (box), widget);
g_signal_connect (widget, "show-object", G_CALLBACK (show_object), pl);

View File

@ -15,6 +15,7 @@
</style>
<child>
<object class="GtkBox" id="name_heading">
<property name="hexpand">0</property>
<child>
<object class="GtkGestureMultiPress">
<signal name="pressed" handler="sort_changed" swapped="no"/>
@ -30,6 +31,9 @@
</child>
<child>
<object class="GtkImage" id="name_sort_indicator">
<style>
<class name="sort_indicator"/>
</style>
</object>
</child>
</object>
@ -42,6 +46,7 @@
</child>
<child>
<object class="GtkBox" id="origin_heading">
<property name="hexpand">0</property>
<child>
<object class="GtkGestureMultiPress">
<signal name="pressed" handler="sort_changed" swapped="no"/>
@ -57,6 +62,9 @@
</child>
<child>
<object class="GtkImage" id="origin_sort_indicator">
<style>
<class name="sort_indicator"/>
</style>
</object>
</child>
</object>
@ -65,9 +73,7 @@
<object class="GtkLabel" id="value_heading">
<property name="label">Value</property>
<property name="xalign">0</property>
<property name="hexpand">1</property>
<property name="margin-start">6</property>
<property name="margin-end">6</property>
<property name="hexpand">0</property>
</object>
</child>
</object>
@ -78,6 +84,9 @@
<property name="hscrollbar-policy">never</property>
<child>
<object class="GtkListBox" id="list2">
<style>
<class name="list"/>
</style>
<property name="selection-mode">none</property>
</object>
</child>
@ -87,21 +96,25 @@
</child>
</template>
<object class="GtkSizeGroup" id="names">
<property name="mode">horizontal</property>
<widgets>
<widget name="name_heading"/>
</widgets>
</object>
<object class="GtkSizeGroup" id="types">
<property name="mode">horizontal</property>
<widgets>
<widget name="type_heading"/>
</widgets>
</object>
<object class="GtkSizeGroup" id="origins">
<property name="mode">horizontal</property>
<widgets>
<widget name="origin_heading"/>
</widgets>
</object>
<object class="GtkSizeGroup" id="values">
<property name="mode">horizontal</property>
<widgets>
<widget name="value_heading"/>
</widgets>

View File

@ -54,6 +54,9 @@
#include "gtkwindowgroup.h"
#include "gtkrevealer.h"
#include "gtklayoutmanager.h"
#include "gtkcssprovider.h"
#include "gtkstylecontext.h"
G_DEFINE_TYPE (GtkInspectorWindow, gtk_inspector_window, GTK_TYPE_WINDOW)
@ -290,11 +293,19 @@ static void
gtk_inspector_window_realize (GtkWidget *widget)
{
GskRenderer *renderer;
GtkCssProvider *provider;
GTK_WIDGET_CLASS (gtk_inspector_window_parent_class)->realize (widget);
renderer = gtk_root_get_renderer (GTK_ROOT (widget));
gsk_renderer_set_debug_flags (renderer, 0);
provider = gtk_css_provider_new ();
gtk_css_provider_load_from_resource (provider, "/org/gtk/libgtk/inspector/inspector.css");
gtk_style_context_add_provider_for_display (gtk_widget_get_display (widget),
GTK_STYLE_PROVIDER (provider),
800);
g_object_unref (provider);
}
static void