[gnome-shell: 7/14] calendar: Add "Clear All" button to message list

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

commit d3bb7903e2442bb63cee3fd8f2c3683fc4153f2c
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-sass              |    2 +-
 data/theme/gnome-shell.css               |    6 ++++++
 js/ui/calendar.js                        |   30 +++++++++++++++++++++++++++---
 4 files changed, 40 insertions(+), 4 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-sass b/data/theme/gnome-shell-sass
index 2af7107..e7d72f3 160000
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 2af71071ae2f4e4e89851dee93befd5007d4d693
+Subproject commit e7d72f3d2dbc4ed6382a619b9c6abc1590a8144e
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) {