Swap grid tile description based on focus

swap RoomPlaceholderView for generic StaticView

src/ui/web/css/layout.css

@@ -28,6 +28,11 @@ html {
     }
 }
 
+.room-placeholder {
+    display: flex;
+    flex-direction: row;
+}
+
 .SessionView {
     display: flex;
     flex-direction: column;
@@ -64,7 +69,7 @@ html {
     min-width: 0;
 }
 
-.RoomPlaceholderView, .RoomView, .RoomGridView {
+.room-placeholder, .RoomView, .RoomGridView {
     flex: 1 0 0;
     min-width: 0;
 }

src/ui/web/css/room.css

@@ -15,11 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.RoomPlaceholderView {
-    display: flex;
-    flex-direction: row;
-}
-
 .RoomHeader {
     align-items: center;
 }

src/ui/web/css/themes/bubbles/theme.css

@@ -70,7 +70,7 @@ a {
     background-color: #555;
 }
 
-.RoomPlaceholderView {
+.room-placeholder {
     align-items: center;
     justify-content: center;
 }

src/ui/web/css/themes/element/theme.css

@@ -298,7 +298,7 @@ a {
     top: 72px;
 }
 
-.RoomPlaceholderView {
+.room-placeholder {
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -346,6 +346,19 @@ a {
     border-bottom: 1px solid rgba(245, 245, 245, 0.90);
 }
 
+.RoomGridView > .focused > .room-placeholder .unfocused {
+    display: none;
+}
+
+.RoomGridView > :not(.focused) > .room-placeholder .focused {
+    display: none;
+}
+
+.room-placeholder .unfocused {
+    color: #8D99A5;
+}
+
+
 .RoomGridView > div.focus-ring {
     border: 2px solid rgba(134, 193, 165, 1);
     border-radius: 12px;

src/ui/web/general/StaticView.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,13 +17,12 @@ limitations under the License.
 
 import {tag} from "../general/html.js";
 
-export class RoomPlaceholderView {
-    constructor() {
-        this._root = null;
+export class StaticView {
+    constructor(render) {
+        this._root = render(tag);
     }
 
     mount() {
-        this._root = tag.div({className: "RoomPlaceholderView"}, tag.h2("Choose a room on the left side."));
         return this._root;
     }
 

src/ui/web/session/RoomGridView.js

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import {RoomView} from "./room/RoomView.js";
-import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
 import {TemplateView} from "../general/TemplateView.js";
+import {StaticView} from "../general/StaticView.js";
 
 export class RoomGridView extends TemplateView {
     render(t, vm) {
@@ -34,7 +34,10 @@ export class RoomGridView extends TemplateView {
                 if (roomVM) {
                     return new RoomView(roomVM);
                 } else {
-                    return new RoomPlaceholderView();
+                    return new StaticView(t => t.div({className: "room-placeholder"}, [
+                        t.h2({className: "focused"}, vm.i18n`Select a room on the left`),
+                        t.h2({className: "unfocused"}, vm.i18n`Click to select this tile`),
+                    ]));
                 }
             })));
         }

src/ui/web/session/SessionView.js

@@ -17,7 +17,7 @@ limitations under the License.
 import {LeftPanelView} from "./leftpanel/LeftPanelView.js";
 import {RoomView} from "./room/RoomView.js";
 import {TemplateView} from "../general/TemplateView.js";
-import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
+import {StaticView} from "../general/StaticView.js";
 import {SessionStatusView} from "./SessionStatusView.js";
 import {RoomGridView} from "./RoomGridView.js";
 
@@ -37,7 +37,7 @@ export class SessionView extends TemplateView {
                         case "roomgrid":
                             return new RoomGridView(vm.roomGridViewModel);
                         case "placeholder":
-                            return new RoomPlaceholderView();
+                            return new StaticView(t => t.div({className: "room-placeholder"}, t.h2(vm.i18n`Choose a room on the left side.`)));
                         default: //room id
                             return new RoomView(vm.currentRoom);
                     }