[gnome-shell/wip/fmuellner/notification-redux: 12/93] messageList foo

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

commit 2bbe6ef27901941debfc4375cf43395826d40883
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Dec 11 15:29:06 2014 +0100

    messageList foo

 data/theme/gnome-shell.css |   15 +++
 js/ui/calendar.js          |  205 +++++++++++++++++++++++++++++---------------
 2 files changed, 149 insertions(+), 71 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 2d2ccfc..55bf703 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1531,6 +1531,21 @@ StScrollBar StButton#vhandle:active {
     padding-right: 8pt;
 }
 
+.message-list-section-list {
+    spacing: 6px;
+}
+
+.message-list-section-close > StIcon {
+    icon-size: 16px;
+    color: rgba(0, 0, 0, 0.9);
+    background-color: #2c2c2c;
+    border-radius: 8px;
+}
+
+.message-list-section-close:hover > StIcon {
+    background-color: #4c4c4c;
+}
+
 /* Message Tray */
 
 #message-tray {
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index b597dbd..8fb86bd 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -739,71 +739,92 @@ const EventEntry = new Lang.Class({
     }
 });
 
-const EventsList = new Lang.Class({
-    Name: 'EventsList',
-
-    _init: function() {
-        let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
-        this.actor = new St.Widget({ style_class: 'events-table',
-                                     layout_manager: layout });
-        layout.hookup_style(this.actor);
+const MessageListSection = new Lang.Class({
+    Name: 'MessageListSection',
+
+    _init: function(title, callback) {
+        this.actor = new St.BoxLayout({ style_class: 'message-list-section',
+                                        x_expand: true, vertical: true });
+        let titleBox = new St.BoxLayout();
+        this.actor.add_actor(titleBox);
+
+        let hasCallback = typeof callback == 'function';
+        this._title = new St.Button({ style_class: 'message-list-section-title',
+                                      reactive: hasCallback,
+                                      x_expand: true });
+        this._title.set_x_align(Clutter.ActorAlign.START);
+        titleBox.add_actor(this._title);
+
+        let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic' });
+        this._closeButton = new St.Button({ style_class: 'message-list-section-close',
+                                            child: closeIcon });
+        this._closeButton.set_x_align(Clutter.ActorAlign.END);
+        titleBox.add_actor(this._closeButton);
+
+        this._list = new St.BoxLayout({ style_class: 'message-list-section-list',
+                                        vertical: true });
+        this.actor.add_actor(this._list);
+
+        this._title.connect('clicked', Lang.bind(this,
+            function() {
+                if (hasCallback)
+                    callback();
+            }));
+        this._closeButton.connect('clicked', Lang.bind(this, this.clear));
+        this._list.connect('actor-added', Lang.bind(this, this._sync));
+        this._list.connect('actor-removed', Lang.bind(this, this._sync));
         this._date = new Date();
-        this._desktopSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.interface' });
-        this._desktopSettings.connect('changed', Lang.bind(this, this._update));
-        this._weekStart = Shell.util_get_week_start();
+        this._sync();
     },
 
-    setEventSource: function(eventSource) {
-        this._eventSource = eventSource;
-        this._eventSource.connect('changed', Lang.bind(this, this._update));
+    setDate: function(date) {
+        if (!_sameDay(date, this._date)) {
+            this._date = date;
+            this._sync();
+        }
     },
 
-    _addEvent: function(event, index, periodBegin, periodEnd) {
-        let clockFormat = this._desktopSettings.get_string(CLOCK_FORMAT_KEY);
-        let title = _formatEventTime(event, clockFormat, periodBegin, periodEnd);
-
-        let rtl = this.actor.get_text_direction() == Clutter.TextDirection.RTL;
-        if (event.date < periodBegin && !event.allDay) {
-            if (rtl)
-                title = title + ELLIPSIS_CHAR;
-            else
-                title = ELLIPSIS_CHAR + title;
-        }
-        if (event.end > periodEnd && !event.allDay) {
-            if (rtl)
-                title = ELLIPSIS_CHAR + title;
-            else
-                title = title + ELLIPSIS_CHAR;
-        }
-        let eventEntry = new EventEntry(title, event.summary);
+    clear: function() {
+        this._list.destroy_all_children();
+    },
 
-        let layout = this.actor.layout_manager;
-        layout.attach(eventEntry.actor, 0, index, 1, 1);
+    _shouldShowForDate: function() {
+        let today = new Date();
+        return _sameDay(this._date, today);
     },
 
-    _addPeriod: function(header, periodBegin, periodEnd) {
-        let events = this._eventSource.getEvents(periodBegin, periodEnd);
+    _sync: function() {
+        this.actor.visible = this._list.get_n_children() > 0 &&
+                             this._shouldShowForDate();
+    }
+});
 
-        if (events.length == 0)
-            return;
+const EventsSection = new Lang.Class({
+    Name: 'EventsSection',
+    Extends: MessageListSection,
 
-        let label = new St.Label({ style_class: 'events-day-header', text: header });
-        let layout = this.actor.layout_manager;
-        layout.attach(label, 0, 0, 3, 1);
+    _init: function() {
+        this._desktopSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.interface' });
+        this._desktopSettings.connect('changed', Lang.bind(this, this._reloadEvents));
+        this._eventSource = new EmptyEventSource();
 
-        for (let n = 0; n < events.length; n++)
-            this._addEvent(events[n], n + 1, periodBegin, periodEnd);
+        this.parent('', null);
     },
 
-    _showOtherDay: function(day) {
-        this.actor.destroy_all_children();
+    setEventSource: function(eventSource) {
+        this._eventSource = eventSource;
+        this._eventSource.connect('changed', Lang.bind(this, this._reloadEvents));
+    },
 
-        let dayBegin = _getBeginningOfDay(day);
-        let dayEnd = _getEndOfDay(day);
+    _updateTitle: function() {
+        let now = new Date();
+        if (_sameDay(this._date, now)) {
+            this._title.label = _("Events");
+            return;
+        }
 
         let dayFormat;
-        let now = new Date();
-        if (_sameYear(day, now))
+        if (_sameYear(this._date, now))
             /* Translators: Shown on calendar heading when selected day occurs on current year */
             dayFormat = Shell.util_translate_time_string(NC_("calendar heading",
                                                              "%A, %B %d"));
@@ -811,36 +832,78 @@ const EventsList = new Lang.Class({
             /* Translators: Shown on calendar heading when selected day occurs on different year */
             dayFormat = Shell.util_translate_time_string(NC_("calendar heading",
                                                              "%A, %B %d, %Y"));
-        let dayString = day.toLocaleFormat(dayFormat);
-        this._addPeriod(dayString, dayBegin, dayEnd);
+        this._title.label = this._date.toLocaleFormat(dayFormat);
     },
 
-    _showToday: function() {
-        this.actor.destroy_all_children();
+    _reloadEvents: function() {
+        if (this._eventSource.isLoading)
+            return;
 
-        let now = new Date();
-        let dayBegin = _getBeginningOfDay(now);
-        let dayEnd = _getEndOfDay(now);
-        this._addPeriod(_("Events"), dayBegin, dayEnd);
+        this.clear();
+
+        let periodBegin = _getBeginningOfDay(this._date);
+        let periodEnd = _getEndOfDay(this._date);
+        let events = this._eventSource.getEvents(periodBegin, periodEnd);
+
+        if (events.length == 0)
+            return;
+
+        let clockFormat = this._desktopSettings.get_string(CLOCK_FORMAT_KEY);
+        for (let i = 0; i < events.length; i++) {
+            let event = events[i];
+            let title = _formatEventTime(event, clockFormat, periodBegin, periodEnd);
+
+            let rtl = this.actor.get_text_direction() == Clutter.TextDirection.RTL;
+            if (event.date < periodBegin && !event.allDay) {
+                if (rtl)
+                    title = title + ELLIPSIS_CHAR;
+                else
+                    title = ELLIPSIS_CHAR + title;
+            }
+            if (event.end > periodEnd && !event.allDay) {
+                if (rtl)
+                    title = ELLIPSIS_CHAR + title;
+                else
+                    title = title + ELLIPSIS_CHAR;
+            }
+            let eventEntry = new EventEntry(title, event.summary);
+            this._list.add(eventEntry.actor);
+        }
     },
 
-    // Sets the event list to show events from a specific date
     setDate: function(date) {
-        if (!_sameDay(date, this._date)) {
-            this._date = date;
-            this._update();
-        }
+        this.parent(date);
+        this._updateTitle();
+        this._reloadEvents();
     },
 
-    _update: function() {
-        if (this._eventSource.isLoading)
-            return;
+    _sync: function() {
+        this.parent();
+    },
 
-        let today = new Date();
-        if (_sameDay (this._date, today)) {
-            this._showToday();
-        } else {
-            this._showOtherDay(this._date);
-        }
+    _shouldShowForDate: function() {
+        return true;
+    }
+});
+
+const EventsList = new Lang.Class({
+    Name: 'EventsList',
+
+    _init: function() {
+        let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
+        this.actor = new St.Widget({ style_class: 'events-table',
+                                     layout_manager: layout });
+        layout.hookup_style(this.actor);
+
+        this._eventsSection = new EventsSection();
+        layout.attach(this._eventsSection.actor, 0, 0, 1, 1);
+    },
+
+    setEventSource: function(eventSource) {
+        this._eventsSection.setEventSource(eventSource);
+    },
+
+    setDate: function(date) {
+        this._eventsSection.setDate(date);
     }
 });