From 35832e387aefb8f69525bf43736a1f926b44c0c6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 8 Oct 2020 16:14:59 +0200 Subject: [PATCH] Swap grid tile description based on focus swap RoomPlaceholderView for generic StaticView --- src/ui/web/css/layout.css | 7 ++++++- src/ui/web/css/room.css | 5 ----- src/ui/web/css/themes/bubbles/theme.css | 2 +- src/ui/web/css/themes/element/theme.css | 15 ++++++++++++++- .../StaticView.js} | 8 ++++---- src/ui/web/session/RoomGridView.js | 7 +++++-- src/ui/web/session/SessionView.js | 4 ++-- 7 files changed, 32 insertions(+), 16 deletions(-) rename src/ui/web/{session/RoomPlaceholderView.js => general/StaticView.js} (79%) diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css index 6d6feb07..2b95a29c 100644 --- a/src/ui/web/css/layout.css +++ b/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; } diff --git a/src/ui/web/css/room.css b/src/ui/web/css/room.css index 8c70edf2..27630728 100644 --- a/src/ui/web/css/room.css +++ b/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; } diff --git a/src/ui/web/css/themes/bubbles/theme.css b/src/ui/web/css/themes/bubbles/theme.css index d06b49f1..1cb3013d 100644 --- a/src/ui/web/css/themes/bubbles/theme.css +++ b/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; } diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 8c71a839..3ea34fa3 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/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; diff --git a/src/ui/web/session/RoomPlaceholderView.js b/src/ui/web/general/StaticView.js similarity index 79% rename from src/ui/web/session/RoomPlaceholderView.js rename to src/ui/web/general/StaticView.js index 3b79b7ef..ae4f0f98 100644 --- a/src/ui/web/session/RoomPlaceholderView.js +++ b/src/ui/web/general/StaticView.js @@ -1,5 +1,6 @@ /* Copyright 2020 Bruno Windels +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; } diff --git a/src/ui/web/session/RoomGridView.js b/src/ui/web/session/RoomGridView.js index d7b3e591..29eeb329 100644 --- a/src/ui/web/session/RoomGridView.js +++ b/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`), + ])); } }))); } diff --git a/src/ui/web/session/SessionView.js b/src/ui/web/session/SessionView.js index f997c0d0..a85ff3dd 100644 --- a/src/ui/web/session/SessionView.js +++ b/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); }