[gnome-logs] Various improvements to event compression UI
- From: Jonathan Kang <jonathankang src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-logs] Various improvements to event compression UI
- Date: Mon, 24 Jul 2017 11:19:59 +0000 (UTC)
commit 0552d30daf00398b8660645e5d383facb8b6d068
Author: Pranav Ganorkar <pranavg189 gmail com>
Date: Mon Jul 10 22:40:46 2017 +0530
Various improvements to event compression UI
The UI improvements as suggested by Allan
and Jakub are implemented in this commit:
* Use color theme suggested by Jakub for
expanded rows.
* Use row separator to indicate boundaries
of expanded header and it's group.
* Add hover effect to the expanded rows.
* Increase grid spacing and decrease label
padding in popover grid.
* Use regular text everywhere in the detailed
popover.
* Add padding for popover grid.
* Highlight the row pointed by detailed popover.
https://bugzilla.gnome.org/show_bug.cgi?id=709294
data/gl-eventviewdetail.ui | 15 ++---
data/gl-style.css | 23 ++++++-
src/gl-eventviewdetail.c | 31 +++++++++
src/gl-eventviewlist.c | 146 ++++++++++++++++++++++++++++++++++++++++++--
src/gl-eventviewrow.c | 10 +++
src/gl-eventviewrow.h | 1 +
6 files changed, 209 insertions(+), 17 deletions(-)
---
diff --git a/data/gl-eventviewdetail.ui b/data/gl-eventviewdetail.ui
index df548af..0da13b6 100644
--- a/data/gl-eventviewdetail.ui
+++ b/data/gl-eventviewdetail.ui
@@ -1,9 +1,11 @@
<interface domain="gnome-logs">
<template class="GlEventViewDetail" parent="GtkPopover">
<!-- The popover size is set such that it does not go beyond the window -->
- <property name="width-request">600</property>
- <property name="height-request">300</property>
- <property name="can_focus">False</property>
+ <property name="width-request">600</property>
+ <property name="height-request">300</property>
+ <property name="can_focus">False</property>
+ <property name="transitions-enabled">True</property>
+ <signal name="closed" handler="gl_event_view_detail_popover_closed"/>
<child>
<object class="GtkScrolledWindow">
<property name="visible">True</property>
@@ -14,6 +16,8 @@
<object class="GtkGrid" id="grid">
<property name="visible">True</property>
<property name="can_focus">False</property>
+ <property name="column-spacing">12</property>
+ <property name="margin">12</property>
<child>
<object class="GtkLabel" id="comm_field_label">
<property name="visible">False</property>
@@ -39,7 +43,6 @@
<property name="selectable">True</property>
<style>
<class name="detail-comm"/>
- <class name="event-monospace"/>
</style>
</object>
<packing>
@@ -245,7 +248,6 @@
<property name="xalign">0</property>
<style>
<class name="detail-subject"/>
- <class name="event-monospace"/>
</style>
</object>
<packing>
@@ -279,7 +281,6 @@
<property name="selectable">True</property>
<style>
<class name="detail-definedby"/>
- <class name="event-monospace"/>
</style>
</object>
<packing>
@@ -317,7 +318,6 @@
<property name="xalign">0</property>
<style>
<class name="detail-support"/>
- <class name="event-monospace"/>
</style>
</object>
<packing>
@@ -351,7 +351,6 @@
<property name="selectable">True</property>
<style>
<class name="detail-documentation"/>
- <class name="event-monospace"/>
</style>
</object>
<packing>
diff --git a/data/gl-style.css b/data/gl-style.css
index 10562f4..7d98c3b 100644
--- a/data/gl-style.css
+++ b/data/gl-style.css
@@ -9,11 +9,11 @@
}
.detail-comm, .detail-audit_session, .detail-kernel_device, .detail-message, .detail-priority, .detail-time,
.detail-subject, .detail-definedby, .detail-support, .detail-documentation {
- padding: 10px;
+ padding: 3px;
}
.detail-field-label {
- padding-left: 10px;
+ padding-left: 3px;
}
.event {
@@ -38,9 +38,26 @@
}
.compressed-row {
- background-color: #f9f9f9;
+ background-color: #fafafa;
+}
+
+.compressed-row:hover {
+ background-color: #f0f0f0;
}
.compressed-row-header {
+ background-color: #f5f5f5;
+}
+
+.compressed-row-header:hover {
background-color: #f0f0f0;
}
+
+.popover-activated-row {
+ color: @theme_selected_fg_color;
+ background-color: @theme_selected_bg_color;
+}
+
+.compressed-rows-group-separator {
+ background-color: #d7d7d7;
+}
diff --git a/src/gl-eventviewdetail.c b/src/gl-eventviewdetail.c
index 549af1f..4b43362 100644
--- a/src/gl-eventviewdetail.c
+++ b/src/gl-eventviewdetail.c
@@ -17,6 +17,7 @@
*/
#include "gl-eventviewdetail.h"
+#include "gl-eventviewrow.h"
#include <gio/gdesktopappinfo.h>
#include <glib/gi18n.h>
@@ -322,6 +323,33 @@ gl_event_view_detail_create_detail (GlEventViewDetail *detail)
}
static void
+gl_event_view_detail_popover_closed (GtkPopover *popover,
+ gpointer user_data)
+{
+ GtkWidget *row;
+ GtkWidget *category_label;
+ GtkWidget *time_label;
+ GtkStyleContext *context;
+
+ row = gtk_popover_get_relative_to (popover);
+
+ context = gtk_widget_get_style_context (row);
+ gtk_style_context_remove_class (context, "popover-activated-row");
+
+ category_label = gl_event_view_row_get_category_label (GL_EVENT_VIEW_ROW (row));
+
+ if (category_label)
+ {
+ context = gtk_widget_get_style_context (category_label);
+ gtk_style_context_add_class (context, "dim-label");
+ }
+
+ time_label = gl_event_view_row_get_time_label (GL_EVENT_VIEW_ROW (row));
+ context = gtk_widget_get_style_context (time_label);
+ gtk_style_context_add_class (context, "dim-label");
+}
+
+static void
gl_event_view_detail_finalize (GObject *object)
{
GlEventViewDetail *detail = GL_EVENT_VIEW_DETAIL (object);
@@ -456,6 +484,9 @@ gl_event_view_detail_class_init (GlEventViewDetailClass *klass)
documentation_label);
gtk_widget_class_bind_template_child_private (widget_class, GlEventViewDetail,
detailed_message_label);
+
+ gtk_widget_class_bind_template_callback (widget_class,
+ gl_event_view_detail_popover_closed);
}
static void
diff --git a/src/gl-eventviewlist.c b/src/gl-eventviewlist.c
index 71681e1..960ecee 100644
--- a/src/gl-eventviewlist.c
+++ b/src/gl-eventviewlist.c
@@ -155,6 +155,18 @@ listbox_update_header_func (GtkListBoxRow *row,
gtk_list_box_row_set_header (row, current);
}
}
+
+ row_entry = gl_event_view_row_get_entry (GL_EVENT_VIEW_ROW (before));
+
+ if (gl_row_entry_get_row_type (row_entry) == GL_ROW_ENTRY_TYPE_HEADER)
+ {
+ if (current == NULL)
+ {
+ current = gtk_separator_new (GTK_ORIENTATION_HORIZONTAL);
+ gtk_widget_show (current);
+ gtk_list_box_row_set_header (row, current);
+ }
+ }
}
@@ -174,6 +186,13 @@ on_listbox_row_activated (GtkListBox *listbox,
guint compressed_entries;
gint header_row_index;
gint index;
+ gboolean rows_expanded;
+ GtkStyleContext *context;
+ GtkListBoxRow *first_border_row;
+ GtkListBoxRow *last_border_row;
+ GtkWidget *row_separator;
+
+ rows_expanded = FALSE;
compressed_entries = gl_row_entry_get_compressed_entries (priv->entry);
header_row_index = gtk_list_box_row_get_index (row);
@@ -181,7 +200,6 @@ on_listbox_row_activated (GtkListBox *listbox,
for (index = header_row_index + 1; compressed_entries != 0; index++)
{
GtkListBoxRow *compressed_row;
- GtkStyleContext *context;
compressed_row = gtk_list_box_get_row_at_index (GTK_LIST_BOX (priv->entries_box),
index);
@@ -189,31 +207,147 @@ on_listbox_row_activated (GtkListBox *listbox,
context = gtk_widget_get_style_context (GTK_WIDGET (compressed_row));
gtk_style_context_add_class (context, "compressed-row");
- context = gtk_widget_get_style_context (GTK_WIDGET (row));
-
/* Toggle the visibility */
if (gtk_widget_get_visible (GTK_WIDGET (compressed_row)))
{
gtk_widget_hide (GTK_WIDGET (compressed_row));
- gtk_style_context_remove_class (context, "compressed-row-header");
+ rows_expanded = FALSE;
}
else
{
gtk_widget_show (GTK_WIDGET (compressed_row));
- gtk_style_context_add_class (context, "compressed-row-header");
+ rows_expanded = TRUE;
}
compressed_entries--;
}
+
+ first_border_row = gtk_list_box_get_row_at_index (GTK_LIST_BOX (priv->entries_box),
+ header_row_index + 1);
+
+ last_border_row = gtk_list_box_get_row_at_index (GTK_LIST_BOX (priv->entries_box),
+ index);
+
+ context = gtk_widget_get_style_context (GTK_WIDGET (row));
+
+ /* Set background color of group separator */
+ if (rows_expanded)
+ {
+ gtk_style_context_add_class (context, "compressed-row-header");
+
+ row_separator = gtk_list_box_row_get_header (row);
+
+ if (row_separator)
+ {
+ context = gtk_widget_get_style_context (row_separator);
+ gtk_style_context_add_class (context, "compressed-rows-group-separator");
+ }
+
+ row_separator = gtk_list_box_row_get_header (first_border_row);
+
+ context = gtk_widget_get_style_context (row_separator);
+ gtk_style_context_add_class (context, "compressed-rows-group-separator");
+
+ if (last_border_row)
+ {
+ row_separator = gtk_list_box_row_get_header (last_border_row);
+ context = gtk_widget_get_style_context (row_separator);
+ gtk_style_context_add_class (context, "compressed-rows-group-separator");
+ }
+ }
+ else
+ {
+ gtk_style_context_remove_class (context, "compressed-row-header");
+
+ row_separator = gtk_list_box_row_get_header (row);
+
+ if (row_separator)
+ {
+ GlRowEntry *previous_row_entry;
+ GtkListBoxRow *previous_row;
+
+ previous_row = gtk_list_box_get_row_at_index (GTK_LIST_BOX (priv->entries_box),
+ header_row_index - 1);
+
+
+ previous_row_entry = gl_event_view_row_get_entry (GL_EVENT_VIEW_ROW (previous_row));
+
+ /* Check if previous row is part of a compressed group and is visible */
+ if (gl_row_entry_get_row_type (previous_row_entry) == GL_ROW_ENTRY_TYPE_COMPRESSED)
+ {
+
+
+ /* If not visible, remove the style class from it's separator */
+ if (!gtk_widget_get_visible (GTK_WIDGET (previous_row)))
+ {
+ context = gtk_widget_get_style_context (row_separator);
+ gtk_style_context_remove_class (context, "compressed-rows-group-separator");
+ }
+ }
+ else
+ {
+ context = gtk_widget_get_style_context (row_separator);
+ gtk_style_context_remove_class (context, "compressed-rows-group-separator");
+ }
+ }
+
+ if (last_border_row)
+ {
+ GlRowEntry *border_row_entry;
+
+ border_row_entry = gl_event_view_row_get_entry (GL_EVENT_VIEW_ROW (last_border_row));
+
+ /* Check if this border row is a compressed header row and is expanded */
+ if (gl_row_entry_get_row_type (border_row_entry) == GL_ROW_ENTRY_TYPE_HEADER)
+ {
+ GtkListBoxRow *next_row;
+
+ next_row = gtk_list_box_get_row_at_index (GTK_LIST_BOX (priv->entries_box),
+ index + 1);
+
+ /* If not expanded, remove the style class from it's separator */
+ if (!gtk_widget_get_visible (GTK_WIDGET (next_row)))
+ {
+ row_separator = gtk_list_box_row_get_header (last_border_row);
+ context = gtk_widget_get_style_context (row_separator);
+ gtk_style_context_remove_class (context, "compressed-rows-group-separator");
+ }
+ }
+ else
+ {
+ row_separator = gtk_list_box_row_get_header (last_border_row);
+ context = gtk_widget_get_style_context (row_separator);
+ gtk_style_context_remove_class (context, "compressed-rows-group-separator");
+ }
+ }
+ }
}
else
{
GtkWidget *event_detail_popover;
+ GtkWidget *category_label;
+ GtkWidget *time_label;
+ GtkStyleContext *context;
event_detail_popover = gl_event_view_detail_new (priv->entry, priv->clock_format);
gtk_popover_set_relative_to (GTK_POPOVER (event_detail_popover), GTK_WIDGET (row));
- gtk_widget_show (event_detail_popover);
+ category_label = gl_event_view_row_get_category_label (GL_EVENT_VIEW_ROW (row));
+
+ if (category_label)
+ {
+ context = gtk_widget_get_style_context (category_label);
+ gtk_style_context_remove_class (context, "dim-label");
+ }
+
+ time_label = gl_event_view_row_get_time_label (GL_EVENT_VIEW_ROW (row));
+ context = gtk_widget_get_style_context (time_label);
+ gtk_style_context_remove_class (context, "dim-label");
+
+ context = gtk_widget_get_style_context (GTK_WIDGET (row));
+ gtk_style_context_add_class (context, "popover-activated-row");
+
+ gtk_popover_popup (GTK_POPOVER (event_detail_popover));
}
}
diff --git a/src/gl-eventviewrow.c b/src/gl-eventviewrow.c
index a838add..09160df 100644
--- a/src/gl-eventviewrow.c
+++ b/src/gl-eventviewrow.c
@@ -108,6 +108,16 @@ gl_event_view_row_get_category_label (GlEventViewRow *row)
return priv->category_label;
}
+GtkWidget *
+gl_event_view_row_get_time_label (GlEventViewRow *row)
+{
+ GlEventViewRowPrivate *priv;
+
+ priv = gl_event_view_row_get_instance_private (row);
+
+ return priv->time_label;
+}
+
static void
gl_event_view_row_finalize (GObject *object)
{
diff --git a/src/gl-eventviewrow.h b/src/gl-eventviewrow.h
index 941f4f4..723ea94 100644
--- a/src/gl-eventviewrow.h
+++ b/src/gl-eventviewrow.h
@@ -50,6 +50,7 @@ const gchar * gl_event_view_row_get_command_line (GlEventViewRow *row);
const gchar * gl_event_view_row_get_message (GlEventViewRow *row);
guint64 gl_event_view_row_get_timestamp (GlEventViewRow *row);
GtkWidget * gl_event_view_row_get_category_label (GlEventViewRow *row);
+GtkWidget * gl_event_view_row_get_time_label (GlEventViewRow *row);
G_END_DECLS
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
