Rework some of the visual layout

Signed-off-by: David Zeuthen <davidz@redhat.com>

data/theme/gnome-shell.css

@@ -737,7 +737,11 @@ StTooltip StLabel {
 }
 
 #calendarHBox {
-    padding: 20px;
+    padding: 10px 20px;
+}
+
+#calendarVBox1 {
+    spacing: 20px;
 }
 
 .calendar {
@@ -791,8 +795,7 @@ StTooltip StLabel {
 
 .datemenu-date-label {
     font-size: 16px;
-    font-weight: bold;
+    color: #ffffff;
-    color: #999999;
 }
 
 .calendar-day-base {
@@ -842,6 +845,11 @@ StTooltip StLabel {
     font-weight: bold;
 }
 
+.events-header-vbox {
+    spacing: 10px;
+    width: 300px;
+}
+
 .events-header {
     height: 40px;
 }
@@ -851,7 +859,6 @@ StTooltip StLabel {
 }
 
 .events-day-header {
-    font-weight: bold;
     font-size: 14px;
     color: rgba(153, 153, 153, 1.0);
 }
@@ -859,7 +866,6 @@ StTooltip StLabel {
 .events-day-dayname {
     font-size: 12px;
     color: rgba(153, 153, 153, 1.0);
-    font-weight: bold;
     text-align: left;
 }
 
@@ -871,13 +877,12 @@ StTooltip StLabel {
 }
 
 .events-day-task {
-    font-weight: bold;
     font-size: 12px;
     color: rgba(153, 153, 153, 1.0);
 }
 
 .events-day-name-box {
-    width: 50px;
+    width: 20px;
 }
 
 .events-time-box {
@@ -885,7 +890,7 @@ StTooltip StLabel {
 }
 
 .events-event-box {
-    width: 300px;
+    width: 200px;
 }
 
 .events-no-events {

js/ui/calendar.js

@@ -510,7 +510,7 @@ function EventsList() {
 
 EventsList.prototype = {
     _init: function() {
-        this.actor = new St.BoxLayout({ vertical: true });
+        this.actor = new St.BoxLayout({ vertical: true, style_class: 'events-header-vbox'});
         // FIXME: Evolution backend is currently disabled
         // this.evolutionTasks = new EvolutionEventsSource();
 
@@ -586,7 +586,10 @@ EventsList.prototype = {
         if (tasks.length == 0)
             return;
 
-        this.actor.add(new St.Label({ style_class: 'events-day-header', text: header }));
+        let vbox = new St.BoxLayout( {vertical: true} );
+        this.actor.add(vbox);
+
+        vbox.add(new St.Label({ style_class: 'events-day-header', text: header }));
         let box = new St.BoxLayout({style_class: 'events-header-hbox'});
         let dayNameBox = new St.BoxLayout({ vertical: true, style_class: 'events-day-name-box' });
         let timeBox = new St.BoxLayout({ vertical: true, style_class: 'events-time-box' });
@@ -594,8 +597,7 @@ EventsList.prototype = {
         box.add(dayNameBox, {x_fill: false});
         box.add(timeBox, {x_fill: false});
         box.add(eventTitleBox, {expand: true});
-
+        vbox.add(box);
-        this.actor.add(box);
 
         for (let n = 0; n < tasks.length; n++) {
             let task = tasks[n];
@@ -625,8 +627,6 @@ EventsList.prototype = {
     showDay: function(day) {
         this.actor.destroy_children();
 
-        this.actor.add(new St.Bin({ style_class: 'events-header' }));
-
         let dayBegin = new Date(day.getTime());
         let dayEnd = new Date(day.getTime());
         dayBegin.setHours(0);
@@ -639,8 +639,6 @@ EventsList.prototype = {
     update: function() {
         this.actor.destroy_children();
 
-        this.actor.add(new St.Bin({ style_class: 'events-header' }));
-
         let dayBegin = new Date();
         let dayEnd = new Date();
         dayBegin.setHours(0);

js/ui/dateMenu.js

@@ -67,7 +67,7 @@ DateMenuButton.prototype = {
 
         // Fill up the first column
         //
-        vbox = new St.BoxLayout({vertical: true});
+        vbox = new St.BoxLayout({vertical: true, name: 'calendarVBox1'});
         hbox.add(vbox);
 
         // Date
@@ -91,13 +91,8 @@ DateMenuButton.prototype = {
 
         // Fill up the second column
         //
-        vbox = new St.BoxLayout({vertical: true});
-        hbox.add(vbox);
-
         // Event list
-        this._taskList.actor.set_width(400); // TODO: Don't hardcode the width of the list
+        hbox.add(this._taskList.actor);
-        vbox.add(this._taskList.actor, { x_fill: true,
-                                         y_fill: true });
         // Update event list when opening the menu ..
         this.menu.connect('open-state-changed', Lang.bind(this, function(menu, is_open) {
             if (is_open) {