calendar: Add MessageList and Section/Message base types

The message list is a scrollable list that will hold sections of
different types of time-related messages like notifications,
calendar events or birthday reminders. When no section displays
any content for the selected date, a placeholder is shown instead.

https://bugzilla.gnome.org/show_bug.cgi?id=744817

data/gnome-shell-theme.gresource.xml

@@ -19,6 +19,7 @@
     <file>gnome-shell-high-contrast.css</file>
     <file>logged-in-indicator.svg</file>
     <file>more-results.svg</file>
+    <file>no-events.svg</file>
     <file>noise-texture.png</file>
     <file>page-indicator-active.svg</file>
     <file>page-indicator-inactive.svg</file>

data/theme/gnome-shell.css

@@ -592,26 +592,41 @@ StScrollBar {
   margin-bottom: 1em; }
 
 .calendar,
-.datemenu-today-button {
+.datemenu-today-button,
+.message-list-sections {
   margin: 0 1.5em; }
 
 .datemenu-calendar-column {
   spacing: 0.5em;
   padding-bottom: 3em; }
 
-.datemenu-today-button {
+.datemenu-today-button,
+.message-list-section-title {
   border-radius: 4px;
   padding: .4em; }
 
-.datemenu-today-button:hover, .datemenu-today-button:focus {
+.message-list-section-list:ltr {
+  padding-left: .4em; }
+
+.message-list-section-list:rtl {
+  padding-right: .4em; }
+
+.datemenu-today-button:hover, .datemenu-today-button:focus,
+.message-list-section-title:hover,
+.message-list-section-title:focus {
   background-color: #454c4c; }
-.datemenu-today-button:active {
+.datemenu-today-button:active,
+.message-list-section-title:active {
   color: white;
   background-color: #215d9c; }
 
 .datemenu-today-button .date-label {
   font-size: 1.5em; }
 
+.message-list-section-title {
+  color: #8e8e80;
+  font-weight: bold; }
+
 .calendar-month-label {
   color: #e2e2df;
   font-weight: bold;
@@ -681,6 +696,55 @@ StScrollBar {
   color: rgba(238, 238, 236, 0.15);
   opacity: 0.5; }
 
+/* Message list */
+.message-list {
+  width: 340px; }
+
+.message-list-sections {
+  spacing: 1.5em; }
+
+.message-list-section,
+.message-list-section-list {
+  spacing: 0.7em; }
+
+.message-list-section-title-box {
+  spacing: 0.4em; }
+
+.message-list-section-close > StIcon {
+  icon-size: 16px;
+  border-radius: 8px;
+  color: #393f3f;
+  background-color: #59594f; }
+
+/* FIXME: how do you do this in sass? */
+.message-list-section-close:hover > StIcon,
+.message-list-section-close:focus > StIcon {
+  background-color: #8e8e80; }
+
+.message {
+  background-color: #454c4c; }
+  .message:hover, .message:focus {
+    background-color: #5d6767; }
+
+.message-icon-bin {
+  padding: 5px; }
+
+.message-icon-bin > StIcon {
+  icon-size: 48px; }
+
+.message-secondary-bin {
+  color: #8e8e80; }
+
+.message-secondary-bin > StIcon {
+  icon-size: 16px; }
+
+.message-title {
+  font-weight: bold; }
+
+.message-content {
+  padding: 5px;
+  spacing: 5px; }
+
 .events-table {
   width: 15em;
   spacing-columns: 1em;

data/theme/no-events.svg

@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64px"
+   height="64px"
+   id="svg3471"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="New document 5">
+  <defs
+     id="defs3473" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.5"
+     inkscape:cx="32"
+     inkscape:cy="32"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     inkscape:window-width="1461"
+     inkscape:window-height="772"
+     inkscape:window-x="37"
+     inkscape:window-y="64"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata3476">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <g
+       transform="matrix(4,0,0,4,1.9999997,2.3636364)"
+       id="g19145"
+       style="fill:#bebebe;fill-opacity:1;display:inline">
+      <g
+         id="g19147"
+         inkscape:label="status"
+         style="fill:#bebebe;fill-opacity:1;display:inline"
+         transform="translate(-541.0002,-301)" />
+      <g
+         style="fill:#bebebe;fill-opacity:1"
+         id="g19149"
+         inkscape:label="devices"
+         transform="translate(-541.0002,-301)" />
+      <g
+         style="fill:#bebebe;fill-opacity:1"
+         id="g19151"
+         inkscape:label="apps"
+         transform="translate(-541.0002,-301)" />
+      <g
+         style="fill:#bebebe;fill-opacity:1"
+         id="g19153"
+         inkscape:label="places"
+         transform="translate(-541.0002,-301)" />
+      <g
+         style="fill:#bebebe;fill-opacity:1"
+         id="g19155"
+         inkscape:label="mimetypes"
+         transform="translate(-541.0002,-301)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 543.0002,301 c -1.05237,0 -2,0.84508 -2,1.9375 l 0,11.125 c 0,1.09242 0.94763,1.9375 2,1.9375 l 11,0 c 1.05237,0 2,-0.84508 2,-1.9375 l 0,-11.125 c 0,-1.09242 -0.94763,-1.9375 -2,-1.9375 l -11,0 z m 0,5 3.03125,0 0,2 -3.03125,0 0,-2 z m 4.03125,0 2.96875,0 0,2 -2.96875,0 0,-2 z m 3.96875,0 3,0 0,2 -3,0 0,-2 z m -8,3 3.03125,0 0,2 -3.03125,0 0,-2 z m 4.03125,0 2.96875,0 0,2 -2.96875,0 0,-2 z m 3.96875,0 3,0 0,2 -3,0 0,-2 z m -8,3 3.03125,0 0,2 -3.03125,0 0,-2 z m 4.03125,0 2.96875,0 0,2 -2.96875,0 0,-2 z m 3.96875,0 3,0 0,2 -3,0 0,-2 z"
+           id="path19157"
+           style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
+        <rect
+           height="1.9999993"
+           id="rect19159"
+           style="opacity:0.35;color:#000000;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+           width="2.9999993"
+           x="551.00018"
+           y="309" />
+      </g>
+      <g
+         id="g19161"
+         inkscape:label="emblems"
+         style="fill:#bebebe;fill-opacity:1;display:inline"
+         transform="translate(-541.0002,-301)" />
+      <g
+         id="g19163"
+         inkscape:label="emotes"
+         style="fill:#bebebe;fill-opacity:1;display:inline"
+         transform="translate(-541.0002,-301)" />
+      <g
+         id="g19165"
+         inkscape:label="categories"
+         style="fill:#bebebe;fill-opacity:1;display:inline"
+         transform="translate(-541.0002,-301)" />
+      <g
+         id="g19167"
+         inkscape:label="actions"
+         style="fill:#bebebe;fill-opacity:1;display:inline"
+         transform="translate(-541.0002,-301)" />
+    </g>
+  </g>
+</svg>