[gnome-shell/wip/fmuellner/calendar-refresh: 5/12] calendar: Add "Clear All" button to message list

[Florian Müllner <fmuellner src gnome org>]

commit cd880bc7eedb6b6d62ae3b407b71292672f37cec
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Feb 26 03:33:26 2017 +0100

    calendar: Add "Clear All" button to message list
    
    We will eventually remove section titles from the message list to
    reduce visual noise and give the actual information provided by
    the messages more space. So in order to not lose the ability to
    mass-dismiss messages, the latest mockups spot a "Clear All" button
    at the bottom - implement that.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=775763

 data/theme/gnome-shell-high-contrast.css |    6 ++++++
 data/theme/gnome-shell.css               |    6 ++++++
 js/ui/calendar.js                        |   30 +++++++++++++++++++++++++++---
 3 files changed, 39 insertions(+), 3 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 33c95cc..cd216ad 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -861,6 +861,12 @@ StScrollBar {
 .message-list {
   width: 31.5em; }
 
+.message-list-clear-button.button {
+  background-color: transparent;
+  margin: 1.5em 1.5em 0; }
+  .message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
+    background-color: #0d0d0d; }
+
 .message-list-sections {
   spacing: 1.5em; }
 
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 88ec11b..7c70302 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -861,6 +861,12 @@ StScrollBar {
 .message-list {
   width: 31.5em; }
 
+.message-list-clear-button.button {
+  background-color: transparent;
+  margin: 1.5em 1.5em 0; }
+  .message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
+    background-color: #454c4c; }
+
 .message-list-sections {
   spacing: 1.5em; }
 
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 70252e2..8669efe 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -1098,12 +1098,26 @@ const CalendarMessageList = new Lang.Class({
         this._placeholder = new Placeholder();
         this.actor.add_actor(this._placeholder.actor);
 
+        let box = new St.BoxLayout({ vertical: true,
+                                     x_expand: true, y_expand: true });
+        this.actor.add_actor(box);
+
         this._scrollView = new St.ScrollView({ style_class: 'vfade',
                                                overlay_scrollbars: true,
                                                x_expand: true, y_expand: true,
                                                x_fill: true, y_fill: true });
         this._scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
-        this.actor.add_actor(this._scrollView);
+        box.add_actor(this._scrollView);
+
+        this._clearButton = new St.Button({ style_class: 'message-list-clear-button button',
+                                            label: _("Clear All"),
+                                            can_focus: true });
+        this._clearButton.set_x_align(Clutter.ActorAlign.END);
+        this._clearButton.connect('clicked', () => {
+            let sections = [...this._sections.keys()];
+            sections.forEach((s) => { s.clear(); });
+        });
+        box.add_actor(this._clearButton);
 
         this._sectionList = new St.BoxLayout({ style_class: 'message-list-sections',
                                                vertical: true,
@@ -1129,6 +1143,7 @@ const CalendarMessageList = new Lang.Class({
             destroyId: 0,
             visibleId:  0,
             emptyChangedId: 0,
+            canClearChangedId: 0,
             keyFocusId: 0
         };
         obj.destroyId = section.actor.connect('destroy', Lang.bind(this,
@@ -1139,6 +1154,8 @@ const CalendarMessageList = new Lang.Class({
                                               Lang.bind(this, this._sync));
         obj.emptyChangedId = section.connect('empty-changed',
                                              Lang.bind(this, this._sync));
+        obj.canClearChangedId = section.connect('can-clear-changed',
+                                                Lang.bind(this, this._sync));
         obj.keyFocusId = section.connect('key-focus-in',
                                          Lang.bind(this, this._onKeyFocusIn));
 
@@ -1152,6 +1169,7 @@ const CalendarMessageList = new Lang.Class({
         section.actor.disconnect(obj.destroyId);
         section.actor.disconnect(obj.visibleId);
         section.disconnect(obj.emptyChangedId);
+        section.disconnect(obj.canClearChangedId);
         section.disconnect(obj.keyFocusId);
 
         this._sections.delete(section);
@@ -1172,10 +1190,16 @@ const CalendarMessageList = new Lang.Class({
         if (!visible)
             return;
 
-        let showPlaceholder = sections.every(function(s) {
+        let empty = sections.every(function(s) {
             return s.empty || !s.actor.visible;
         });
-        this._placeholder.actor.visible = showPlaceholder;
+        this._placeholder.actor.visible = empty;
+        this._clearButton.visible = !empty;
+
+        let canClear = sections.some(function(s) {
+            return s.canClear && s.actor.visible;
+        });
+        this._clearButton.reactive = canClear;
     },
 
     setEventSource: function(eventSource) {