[gnome-todo] task-row: improve aestethics of task rows
- From: Georges Basile Stavracas Neto <gbsneto src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-todo] task-row: improve aestethics of task rows
- Date: Fri, 22 Sep 2017 01:54:46 +0000 (UTC)
commit e23f7a789bf3a47cbd12ea4361b21b6fe3f05f87
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date: Thu Sep 21 19:11:16 2017 -0300
task-row: improve aestethics of task rows
The current behavior of task rows isn't really good. Because
it is transparent, the contents of the task row look odd with
crazy background colors. And the task priority colors become
basically useless.
This commit introduces a new layout to these task rows, where
priorities are shown in the beginning of the row and the background
color is completely opaque.
data/theme/Adwaita.css | 61 +++++--------
data/ui/list-view.ui | 1 +
data/ui/new-task-row.ui | 91 ++++++++------------
data/ui/task-row.ui | 219 ++++++++++++++---------------------------------
src/gtd-new-task-row.c | 10 +--
src/gtd-task-row.c | 32 +------
6 files changed, 130 insertions(+), 284 deletions(-)
---
diff --git a/data/theme/Adwaita.css b/data/theme/Adwaita.css
index dfdcf62..37219e3 100644
--- a/data/theme/Adwaita.css
+++ b/data/theme/Adwaita.css
@@ -2,10 +2,6 @@
background-color: transparent;
}
-taskrow {
- border-bottom: 1px solid alpha(@borders, 0.4);
-}
-
row.thumbnail {
border: solid 1px @borders;
box-shadow: 0px 0px 3px alpha(@borders, 0.8);;
@@ -29,30 +25,14 @@ grid-item {
background-color: transparent;
}
-grid-item.light,
-task-list-view.light taskrow label {
+grid-item.light {
color: #000003;
}
-task-list-view taskrow:hover {
- background-color: alpha(#ededed, 0.4);
-}
-
-grid-item.dark,
-task-list-view.dark taskrow,
-task-list-view.dark overlay label,
-task-list-view.dark overlay image {
+grid-item.dark {
color: #eeeeec;
}
-task-list-view taskrow image {
- color: #333333;
-}
-
-task-list-view.dark taskrow:hover {
- background-color: alpha(#393f3f, 0.4);
-}
-
arrow-frame {
border: solid 1px;
border-bottom-width: 0px;
@@ -73,29 +53,34 @@ label.main-title {
font-size: 28px;
}
-/* priority icons */
+
+/* GtdTaskRow */
+
taskrow {
- background-color: @transparent;
+ border-radius: 2px;
+ background-color: @theme_base_color;
+ box-shadow: 0 0 2px alpha(black, 0.33);
}
-taskrow frame.priority-low {
- background-color: #3465a4;
- box-shadow: 0 0 2px alpha(black, 0.25);
-}
+taskrow:dir(ltr) { padding-left: 6px; }
+taskrow:dir(rtl) { padding-right: 6px; }
-taskrow frame.priority-medium {
- background-color: #f57900;
- box-shadow: 0 0 2px alpha(black, 0.25);
+taskrow entry {
+ padding: 6px;
+ border-top: none;
+ border-bottom: none;
}
-taskrow frame.priority-hight {
- background-color: #cc0000;
- box-shadow: 0 0 2px alpha(black, 0.25);
-}
+taskrow.priority-low:dir(ltr) { border-left: solid 6px #3465a4; padding-left: 0; }
+taskrow.priority-low:dir(rtl) { border-right: solid 6px #3465a4; padding-right: 0; }
-taskrow.complete label {
- text-decoration-line: line-through;
-}
+taskrow.priority-medium:dir(ltr) { border-left: solid 6px #f57900; padding-left: 0; }
+taskrow.priority-medium:dir(rtl) { border-right: solid 6px #f57900; padding-right: 0; }
+
+taskrow.priority-hight:dir(ltr) { border-left: solid 6px #cc0000; padding-left: 0; }
+taskrow.priority-hight:dir(rtl) { border-right: solid 6px #cc0000; padding-right: 0; }
+
+taskrow.complete label { text-decoration-line: line-through; }
/* dnd row */
dndrow {
diff --git a/data/ui/list-view.ui b/data/ui/list-view.ui
index 2e7c35f..d34a7ac 100644
--- a/data/ui/list-view.ui
+++ b/data/ui/list-view.ui
@@ -37,6 +37,7 @@
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="vexpand">True</property>
+ <property name="margin">6</property>
<property name="selection_mode">none</property>
<signal name="drag-drop" handler="listbox_drag_drop" object="GtdTaskListView"
swapped="no" />
<signal name="drag-leave" handler="listbox_drag_leave" object="GtdTaskListView"
swapped="no" />
diff --git a/data/ui/new-task-row.ui b/data/ui/new-task-row.ui
index d205ece..8a51d8d 100644
--- a/data/ui/new-task-row.ui
+++ b/data/ui/new-task-row.ui
@@ -2,104 +2,87 @@
<interface>
<requires lib="gtk+" version="3.16"/>
<template class="GtdNewTaskRow" parent="GtkListBoxRow">
- <property name="width_request">100</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="activatable">True</property>
<property name="selectable">False</property>
+ <property name="margin">3</property>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="margin">6</property>
- <property name="margin_start">24</property>
- <property name="margin_end">24</property>
- <property name="spacing">12</property>
+ <property name="margin-start">12</property>
+ <property name="spacing">6</property>
+ <style>
+ <class name="linked" />
+ </style>
+
<child>
<object class="GtkImage" id="add_task_image">
- <property name="width_request">16</property>
- <property name="height_request">16</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">center</property>
<property name="valign">center</property>
<property name="icon_name">list-add-symbolic</property>
+ <property name="pixel-size">16</property>
</object>
</child>
+
<child>
- <object class="GtkStack" id="stack">
+ <object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="hexpand">True</property>
- <property name="transition_type">crossfade</property>
+ <style>
+ <class name="linked" />
+ </style>
+
<child>
- <object class="GtkLabel" id="label">
+ <object class="GtkEntry" id="entry">
<property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="label" translatable="yes">New task…</property>
- <property name="xalign">0</property>
+ <property name="can_focus">True</property>
+ <property name="hexpand">True</property>
+ <property name="placeholder-text" translatable="yes">New task…</property>
+ <signal name="activate" handler="entry_activated_cb" object="GtdNewTaskRow" swapped="yes" />
<style>
- <class name="dim-label"/>
+ <class name="flat" />
</style>
</object>
- <packing>
- <property name="name">label</property>
- </packing>
</child>
+
<child>
- <object class="GtkBox">
+ <object class="GtkMenuButton" id="list_selector_button">
<property name="visible">True</property>
- <property name="can_focus">False</property>
- <style>
- <class name="linked" />
- </style>
+ <property name="can_focus">True</property>
+ <property name="popover">tasklist_popover</property>
<child>
- <object class="GtkEntry" id="entry">
+ <object class="GtkBox">
<property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="hexpand">True</property>
- <signal name="activate" handler="entry_activated_cb" object="GtdNewTaskRow"
swapped="yes" />
- </object>
- </child>
- <child>
- <object class="GtkMenuButton" id="list_selector_button">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="popover">tasklist_popover</property>
+ <property name="can_focus">False</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkImage" id="list_color_icon">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ </object>
+ </child>
<child>
- <object class="GtkBox">
+ <object class="GtkLabel" id="list_name_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="spacing">6</property>
- <child>
- <object class="GtkImage" id="list_color_icon">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- </object>
- </child>
- <child>
- <object class="GtkLabel" id="list_name_label">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="max_width_chars">20</property>
- <property name="ellipsize">end</property>
- </object>
- </child>
+ <property name="max_width_chars">20</property>
+ <property name="ellipsize">end</property>
</object>
</child>
</object>
</child>
</object>
- <packing>
- <property name="name">entry</property>
- <property name="position">1</property>
- </packing>
</child>
</object>
</child>
</object>
</child>
</template>
+
<object class="GtkPopover" id="tasklist_popover">
<property name="can_focus">False</property>
<child>
diff --git a/data/ui/task-row.ui b/data/ui/task-row.ui
index 6be225e..2555025 100644
--- a/data/ui/task-row.ui
+++ b/data/ui/task-row.ui
@@ -6,6 +6,7 @@
<property name="can_focus">True</property>
<property name="activatable">True</property>
<property name="selectable">False</property>
+ <property name="margin">3</property>
<child>
<object class="GtkRevealer" id="revealer">
<property name="visible">True</property>
@@ -16,6 +17,11 @@
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
+ <property name="margin-end">12</property>
+ <property name="margin-start">12</property>
+ <property name="margin-top">3</property>
+ <property name="margin-bottom">3</property>
+ <property name="spacing">6</property>
<!-- Box with DnD margin -->
<child>
@@ -25,170 +31,75 @@
</object>
</child>
- <!-- Frame with the priority color -->
<child>
- <object class="GtkFrame" id="priority_frame">
+ <object class="GtkEventBox" id="dnd_event_box">
<property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="shadow_type">none</property>
- <property name="width_request">10</property>
- <property name="margin_end">18</property>
- </object>
- </child>
- <child>
- <object class="GtkBox" id="task_box">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="margin_top">2</property>
- <property name="margin_end">18</property>
- <property name="margin_bottom">2</property>
- <property name="spacing">12</property>
- <child>
- <object class="GtkEventBox" id="dnd_event_box">
- <property name="visible">True</property>
- <signal name="button-press-event" handler="button_press_event" object="GtdTaskRow"
swapped="no" />
- <signal name="drag-begin" handler="drag_begin_cb" object="GtdTaskRow" swapped="no" />
- <signal name="drag-failed" handler="drag_failed_cb" object="GtdTaskRow" swapped="no" />
- <signal name="enter-notify-event" handler="mouse_over_event" object="GtdTaskRow"
swapped="no" />
- <signal name="leave-notify-event" handler="mouse_out_event" object="GtdTaskRow"
swapped="no" />
- <child>
- <object class="GtkImage" id="dnd_icon">
- <property name="visible">True</property>
- <property name="icon-name">open-menu-symbolic</property>
- <property name="pixel-size">12</property>
- <style>
- <class name="dim-label" />
- </style>
- </object>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkCheckButton" id="done_check">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">False</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <property name="vexpand">True</property>
- <property name="draw_indicator">True</property>
- <signal name="toggled" handler="complete_check_toggled_cb" object="GtdTaskRow"
swapped="no" />
- </object>
- </child>
- <child>
- <object class="GtkStack" id="task_stack">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="transition_type">crossfade</property>
- <property name="hexpand">True</property>
- <child>
- <object class="GtkBox" id="title_label_box">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="spacing">12</property>
- <child>
- <object class="GtkLabel" id="title_label">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="xalign">0</property>
- <property name="label" bind-source="title_entry" bind-property="text" />
- </object>
- </child>
- <child>
- <object class="GtkSpinner" id="task_loading_spinner">
- <property name="visible">False</property>
- <property name="can_focus">False</property>
- <property name="active">True</property>
- <property name="halign">start</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="name">label</property>
- </packing>
- </child>
- <child>
- <object class="GtkEntry" id="title_entry">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="hexpand">True</property>
- </object>
- <packing>
- <property name="name">title</property>
- <property name="position">1</property>
- </packing>
- </child>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- </packing>
- </child>
+ <signal name="button-press-event" handler="button_press_event" object="GtdTaskRow"
swapped="no" />
+ <signal name="drag-begin" handler="drag_begin_cb" object="GtdTaskRow" swapped="no" />
+ <signal name="drag-failed" handler="drag_failed_cb" object="GtdTaskRow" swapped="no" />
+ <signal name="enter-notify-event" handler="mouse_over_event" object="GtdTaskRow"
swapped="no" />
+ <signal name="leave-notify-event" handler="mouse_out_event" object="GtdTaskRow" swapped="no"
/>
<child>
- <object class="GtkBox" id="task_extras_box">
- <property name="visible">False</property>
- <property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="valign">center</property>
- <property name="hexpand">True</property>
- <property name="spacing">6</property>
- <child>
- <object class="GtkButton" id="task_attachment_button">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="relief">none</property>
- <child>
- <object class="GtkImage" id="task_attachment_button_image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="icon_name">text-x-generic-symbolic</property>
- </object>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkButton" id="task_alarm_button">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="relief">none</property>
- <child>
- <object class="GtkImage" id="task_alarm_button_image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="icon_name">alarm-symbolic</property>
- </object>
- </child>
- </object>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkLabel" id="task_date_label">
+ <object class="GtkImage" id="dnd_icon">
<property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="xalign">0</property>
- <property name="margin-end">6</property>
+ <property name="icon-name">open-menu-symbolic</property>
+ <property name="pixel-size">12</property>
<style>
- <class name="dim-label"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel" id="task_list_label">
- <property name="visible">False</property>
- <property name="can_focus">False</property>
- <property name="xalign">0</property>
- <property name="max_width_chars">18</property>
- <property name="ellipsize">middle</property>
- <style>
- <class name="dim-label"/>
+ <class name="dim-label" />
</style>
</object>
</child>
</object>
</child>
+
+ <child>
+ <object class="GtkCheckButton" id="done_check">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">False</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <property name="vexpand">True</property>
+ <property name="draw_indicator">True</property>
+ <property name="margin-start">6</property>
+ <signal name="toggled" handler="complete_check_toggled_cb" object="GtdTaskRow" swapped="no"
/>
+ </object>
+ </child>
+
+ <child>
+ <object class="GtkEntry" id="title_entry">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="hexpand">True</property>
+ <style>
+ <class name="flat" />
+ </style>
+ </object>
+ </child>
+
+ <child>
+ <object class="GtkLabel" id="task_date_label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="xalign">0</property>
+ <style>
+ <class name="dim-label"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel" id="task_list_label">
+ <property name="visible">False</property>
+ <property name="can_focus">False</property>
+ <property name="xalign">0</property>
+ <property name="max_width_chars">18</property>
+ <property name="ellipsize">middle</property>
+ <style>
+ <class name="dim-label"/>
+ </style>
+ </object>
+ </child>
+
</object>
</child>
</object>
diff --git a/src/gtd-new-task-row.c b/src/gtd-new-task-row.c
index 2a32ae7..f004ed8 100644
--- a/src/gtd-new-task-row.c
+++ b/src/gtd-new-task-row.c
@@ -33,7 +33,6 @@ struct _GtdNewTaskRow
GtkLabel *list_name_label;
GtkWidget *list_selector_button;
GtkSizeGroup *sizegroup;
- GtkStack *stack;
GtkListBox *tasklist_list;
GtkPopover *tasklist_popover;
@@ -340,7 +339,6 @@ gtd_new_task_row_class_init (GtdNewTaskRowClass *klass)
gtk_widget_class_bind_template_child (widget_class, GtdNewTaskRow, list_name_label);
gtk_widget_class_bind_template_child (widget_class, GtdNewTaskRow, list_selector_button);
gtk_widget_class_bind_template_child (widget_class, GtdNewTaskRow, sizegroup);
- gtk_widget_class_bind_template_child (widget_class, GtdNewTaskRow, stack);
gtk_widget_class_bind_template_child (widget_class, GtdNewTaskRow, tasklist_list);
gtk_widget_class_bind_template_child (widget_class, GtdNewTaskRow, tasklist_popover);
@@ -393,7 +391,7 @@ gtd_new_task_row_get_active (GtdNewTaskRow *self)
{
g_return_val_if_fail (GTD_IS_NEW_TASK_ROW (self), FALSE);
- return g_str_equal (gtk_stack_get_visible_child_name (self->stack), "entry");
+ return gtk_widget_has_focus (GTK_WIDGET (self->entry));
}
void
@@ -404,15 +402,9 @@ gtd_new_task_row_set_active (GtdNewTaskRow *self,
if (active)
{
- gtk_stack_set_visible_child_name (self->stack, "entry");
gtk_widget_grab_focus (GTK_WIDGET (self->entry));
g_signal_emit (self, signals[ENTER], 0);
}
- else
- {
- gtk_stack_set_visible_child_name (self->stack, "label");
- gtk_widget_grab_focus (GTK_WIDGET (self->entry));
- }
}
void
diff --git a/src/gtd-task-row.c b/src/gtd-task-row.c
index 77d5c09..a52cfd4 100644
--- a/src/gtd-task-row.c
+++ b/src/gtd-task-row.c
@@ -33,15 +33,11 @@ struct _GtdTaskRow
GtkRevealer *revealer;
GtkWidget *done_check;
- GtkWidget *priority_frame;
/* task widgets */
GtkEntry *title_entry;
GtkLabel *task_date_label;
GtkLabel *task_list_label;
- GtkStack *task_stack;
- GtkSpinner *task_loading_spinner;
- GtkLabel *title_label;
/* dnd widgets */
GtkWidget *dnd_box;
@@ -224,7 +220,7 @@ gtd_task_row__priority_changed_cb (GtdTaskRow *row,
GtkStyleContext *context;
gint priority;
- context = gtk_widget_get_style_context (row->priority_frame);
+ context = gtk_widget_get_style_context (GTK_WIDGET (row));
priority = gtd_task_get_priority (GTD_TASK (object));
/* remove all styles */
@@ -313,8 +309,8 @@ depth_changed_cb (GtdTaskRow *self,
GParamSpec *pspec,
GtdTask *task)
{
- gtk_widget_set_margin_start (self->dnd_box,
- self->handle_subtasks ? 32 * gtd_task_get_depth (task) : 0);
+ gtk_widget_set_margin_start (GTK_WIDGET (self),
+ self->handle_subtasks ? 32 * gtd_task_get_depth (task) + 3: 3);
}
static gboolean
@@ -581,14 +577,10 @@ gtd_task_row_class_init (GtdTaskRowClass *klass)
gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, dnd_event_box);
gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, dnd_icon);
gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, done_check);
- gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, priority_frame);
gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, revealer);
gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, task_date_label);
gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, task_list_label);
- gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, task_stack);
- gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, task_loading_spinner);
gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, title_entry);
- gtk_widget_class_bind_template_child (widget_class, GtdTaskRow, title_label);
gtk_widget_class_bind_template_callback (widget_class, button_press_event);
gtk_widget_class_bind_template_callback (widget_class, complete_check_toggled_cb);
@@ -661,23 +653,11 @@ gtd_task_row_set_task (GtdTaskRow *row,
G_BINDING_BIDIRECTIONAL | G_BINDING_SYNC_CREATE);
g_object_bind_property (task,
- "title",
- row->title_label,
- "label",
- G_BINDING_DEFAULT | G_BINDING_SYNC_CREATE);
-
- g_object_bind_property (task,
"complete",
row->done_check,
"active",
G_BINDING_DEFAULT | G_BINDING_SYNC_CREATE);
- g_object_bind_property (task,
- "ready",
- row->task_loading_spinner,
- "visible",
- G_BINDING_INVERT_BOOLEAN | G_BINDING_SYNC_CREATE);
-
g_object_bind_property_full (task,
"due-date",
row->task_date_label,
@@ -838,15 +818,9 @@ gtd_task_row_set_active (GtdTaskRow *self,
if (active)
{
- gtk_stack_set_visible_child_name (self->task_stack, "title");
gtk_widget_grab_focus (GTK_WIDGET (self->title_entry));
-
g_signal_emit (self, signals[ENTER], 0);
}
- else
- {
- gtk_stack_set_visible_child_name (self->task_stack, "label");
- }
}
void
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
