Merge pull request #5079 from matrix-org/bwindels/alert-file-panel-empty-state

Add title and icon to empty state of file and notification panel

res/css/structures/_FilePanel.scss

@@ -109,3 +109,7 @@ limitations under the License.
 .mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
     background-color: $primary-bg-color;
 }
+
+.mx_FilePanel_empty::before {
+    mask-image: url('$(res)/img/element-icons/room/files.svg');
+}

res/css/structures/_NotificationPanel.scss

@@ -99,3 +99,7 @@ limitations under the License.
 .mx_NotificationPanel .mx_EventTile_content {
     margin-right: 0px;
 }
+
+.mx_NotificationPanel_empty::before {
+    mask-image: url('$(res)/img/element-icons/notifications.svg');
+}

res/css/structures/_RightPanel.scss

@@ -144,3 +144,28 @@ limitations under the License.
     order: 2;
     margin: auto;
 }
+
+.mx_RightPanel_empty {
+    margin-right: -42px;
+
+    h2 {
+        font-weight: 700;
+        margin: 16px 0;
+    }
+
+    h2, p {
+        font-size: $font-14px;
+    }
+
+    &::before {
+        content: '';
+        display: block;
+        margin: 11px auto 29px auto;
+        height: 42px;
+        width: 42px;
+        background-color: $rightpanel-button-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+    }
+}

src/components/structures/FilePanel.js

@@ -210,6 +210,11 @@ const FilePanel = createReactClass({
         const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
         const Loader = sdk.getComponent("elements.Spinner");
 
+        const emptyState = (<div className="mx_RightPanel_empty mx_FilePanel_empty">
+            <h2>{_t('No files visible in this room')}</h2>
+            <p>{_t('Attach files from chat or just drag and drop them anywhere in a room.')}</p>
+        </div>);
+
         if (this.state.timelineSet) {
             // console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
             //             "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
@@ -223,7 +228,7 @@ const FilePanel = createReactClass({
                         onPaginationRequest={this.onPaginationRequest}
                         tileShape="file_grid"
                         resizeNotifier={this.props.resizeNotifier}
-                        empty={_t('There are no visible files in this room')}
+                        empty={emptyState}
                     />
                 </div>
             );

src/components/structures/NotificationPanel.js

@@ -36,6 +36,11 @@ const NotificationPanel = createReactClass({
         const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
         const Loader = sdk.getComponent("elements.Spinner");
 
+        const emptyState = (<div className="mx_RightPanel_empty mx_NotificationPanel_empty">
+            <h2>{_t('You’re all caught up')}</h2>
+            <p>{_t('You have no visible notifications in this room.')}</p>
+        </div>);
+
         const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
         if (timelineSet) {
             return (
@@ -46,7 +51,7 @@ const NotificationPanel = createReactClass({
                         timelineSet={timelineSet}
                         showUrlPreview={false}
                         tileShape="notif"
-                        empty={_t('You have no visible notifications')}
+                        empty={emptyState}
                     />
                 </div>
             );

src/i18n/strings/en_EN.json

@@ -1974,7 +1974,8 @@
     "Couldn't load page": "Couldn't load page",
     "You must <a>register</a> to use this functionality": "You must <a>register</a> to use this functionality",
     "You must join the room to see its files": "You must join the room to see its files",
-    "There are no visible files in this room": "There are no visible files in this room",
+    "No files visible in this room": "No files visible in this room",
+    "Attach files from chat or just drag and drop them anywhere in a room.": "Attach files from chat or just drag and drop them anywhere in a room.",
     "<h1>HTML for your community's page</h1>\n<p>\n    Use the long description to introduce new members to the community, or distribute\n    some important <a href=\"foo\">links</a>\n</p>\n<p>\n    You can even use 'img' tags\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n    Use the long description to introduce new members to the community, or distribute\n    some important <a href=\"foo\">links</a>\n</p>\n<p>\n    You can even use 'img' tags\n</p>\n",
     "Add rooms to the community summary": "Add rooms to the community summary",
     "Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?",
@@ -2047,7 +2048,8 @@
     "Communities": "Communities",
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
-    "You have no visible notifications": "You have no visible notifications",
+    "You’re all caught up": "You’re all caught up",
+    "You have no visible notifications in this room.": "You have no visible notifications in this room.",
     "%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.": "%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.",
     "%(brand)s failed to get the public room list.": "%(brand)s failed to get the public room list.",
     "The homeserver may be unavailable or overloaded.": "The homeserver may be unavailable or overloaded.",