Merge pull request #142 from vector-im/bwindels/grid-and-other-css-polish

Grid and other css polish

.gitignore

@@ -6,3 +6,4 @@ sessionexports
 bundle.js
 target
 lib
+*.tar.gz

package.json

@@ -29,13 +29,14 @@
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-multi-entry": "^4.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
+    "autoprefixer": "^10.0.1",
     "cheerio": "^1.0.0-rc.3",
     "commander": "^6.0.0",
     "core-js": "^3.6.5",
     "finalhandler": "^1.1.1",
     "impunity": "^1.0.0",
     "mdn-polyfills": "^5.20.0",
-    "postcss": "^7.0.32",
+    "postcss": "^8.1.1",
     "postcss-css-variables": "^0.17.0",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-import": "^12.0.1",
@@ -47,11 +48,11 @@
     "xxhashjs": "^0.2.2"
   },
   "dependencies": {
-    "es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush",
     "aes-js": "^3.1.2",
     "another-json": "^0.2.0",
     "base64-arraybuffer": "^0.2.0",
     "bs58": "^4.0.1",
+    "es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz",
     "text-encoding": "^0.7.0"
   }

scripts/build.mjs

@@ -39,6 +39,7 @@ import removeJsComments from 'rollup-plugin-cleanup';
 import postcssUrl from "postcss-url";
 
 import cssvariables from "postcss-css-variables";
+import autoprefixer from "autoprefixer";
 import flexbugsFixes from "postcss-flexbugs-fixes";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -302,6 +303,8 @@ async function buildCssLegacy(entryPath, urlMapper = null) {
     const preCss = await fs.readFile(entryPath, "utf8");
     const options = [
         postcssImport,
+        cssvariables(),
+        autoprefixer({overrideBrowserslist: ["IE 11"], grid: "no-autoplace"}),
         flexbugsFixes()
     ];
     if (urlMapper) {

src/domain/session/RoomGridViewModel.js

@@ -25,39 +25,15 @@ export class RoomGridViewModel extends ViewModel {
         this._viewModels = [];
     }
 
-    _posToIdx(x, y) {
+    roomViewModelAt(i) {
-        return (y * this.width) + x;
+        return this._viewModels[i]?.vm;
     }
 
-    _idxToX(idx) {
+    get focusIndex() {
-        return idx % this.width;
+        return this._selectedIndex;
     }
 
-    _idxToY(idx) {
+    setFocusIndex(idx) {
-        return Math.floor(idx / this.width);
-    }
-
-    roomViewModelAt(x, y) {
-        return this._viewModels[this._posToIdx(x, y)]?.vm;
-    }
-
-    get focusX() {
-        return this._idxToX(this._selectedIndex);
-    }
-
-    get focusY() {
-        return this._idxToY(this._selectedIndex);
-    }
-
-    isFocusAt(x, y) {
-        return this._posToIdx(x, y) === this._selectedIndex;
-    }
-
-    setFocusAt(x, y) {
-        this._setFocusedIndex(this._posToIdx(x, y));
-    }
-
-    _setFocusedIndex(idx) {
         if (idx === this._selectedIndex) {
             return;
         }
@@ -97,9 +73,9 @@ export class RoomGridViewModel extends ViewModel {
      * @package
      */
     tryFocusRoom(roomId) {
-        const index = this._viewModels.findIndex(vms => vms?.vm._room.id === roomId);
+        const index = this._viewModels.findIndex(vms => vms?.vm.id === roomId);
         if (index >= 0) {
-            this._setFocusedIndex(index);
+            this.setFocusIndex(index);
             return true;
         }
         return false;

src/ui/web/css/avatar.css

@@ -21,9 +21,6 @@ limitations under the License.
     height: var(--avatar-size);
     overflow: hidden;
     flex-shrink: 0;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     line-height: var(--avatar-size);
     font-size: calc(var(--avatar-size) * 0.6);

src/ui/web/css/form.css

@@ -18,6 +18,7 @@ limitations under the License.
 .form input {
   display: block;
   width: 100%;
+  min-width: 0;
   box-sizing: border-box;
 }
 

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;
 }
@@ -94,16 +99,26 @@ html {
 
 .RoomGridView {
     display: grid;
-    grid-template-columns: repeat(var(--columns), 1fr);
-    grid-template-rows: repeat(var(--rows), 1fr);
 }
 
+.RoomGridView.layout3x2 {
+    grid-template:
+        "t0  t1  t2" 1fr
+        "t3  t4  t5" 1fr /
+         1fr 1fr 1fr;
+}
+
+.RoomGridView > .tile0 {grid-area: t0;}
+.RoomGridView > .tile1 {grid-area: t1;}
+.RoomGridView > .tile2 {grid-area: t2;}
+.RoomGridView > .tile3 {grid-area: t3;}
+.RoomGridView > .tile4 {grid-area: t4;}
+.RoomGridView > .tile5 {grid-area: t5;}
+
 .RoomGridView > div {
     display: flex;
     min-width: 0;
     min-height: 0;
-    grid-column: var(--column);
-    grid-row: var(--row);
 }
 
 .RoomGridView > div.focus-ring {

src/ui/web/css/left-panel.css

@@ -25,6 +25,7 @@ limitations under the License.
 
 .LeftPanel .utilities .FilterField {
     flex: 1;
+    min-width: 0;
 }
 
 .LeftPanel ul {

src/ui/web/css/login.css

@@ -34,7 +34,10 @@ limitations under the License.
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 10px;
+}
+
+.SessionPickerView .session-info > :not(:first-child) {
+    margin-left: 8px;
 }
 
 .SessionPickerView li .user-id {
@@ -53,9 +56,13 @@ limitations under the License.
     display: flex;
 }
 
+.SessionLoadView > :not(:first-child) {
+    margin-left: 12px;
+}
+
 .SessionLoadView p {
     flex: 1;
-    margin: 0 0 0 10px;
+    margin: 0;
 }
 
 .SessionLoadView .spinner {

src/ui/web/css/room.css

@@ -15,22 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.RoomPlaceholderView {
-    display: flex;
-    flex-direction: row;
-}
-
 .RoomHeader {
     align-items: center;
 }
 
-.RoomHeader > *:last-child {
+.RoomHeader h2 {
-    margin-right: 0;
+    flex: 1;
-}
-
-.RoomHeader > * {
-    margin-right: 10px;
-    flex: 0 0 auto;
 }
 
 .RoomHeader button {
@@ -66,11 +56,13 @@ limitations under the License.
 
 .MessageComposer {
     display: flex;
+    align-items: center;
 }
 
 .MessageComposer > input {
     display: block;
     flex: 1;
+    min-width: 0;
     box-sizing: border-box;
 }
 
@@ -80,6 +72,6 @@ limitations under the License.
     justify-content: center;
 }
 
-.TimelineLoadingView div {
+.TimelineLoadingView > :not(:first-child) {
-    margin-right: 10px;
+    margin-left: 12px;
 }

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/icons/chevron-left.svg

@@ -0,0 +1,10 @@
+<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#8D99A5"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

src/ui/web/css/themes/element/icons/disable-grid.svg

@@ -1,5 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 0.75H12C13.7949 0.75 15.25 2.20507 15.25 4V12C15.25 13.7949 13.7949 15.25 12 15.25H4C2.20507 15.25 0.75 13.7949 0.75 12V4C0.75 2.20507 2.20507 0.75 4 0.75Z" stroke="#8D99A5" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4ZM1.5 4.75C1.5 4.19772 1.94772 3.75 2.5 3.75H3.5C4.05228 3.75 4.5 4.19772 4.5 4.75V11.25C4.5 11.8023 4.05228 12.25 3.5 12.25H2.5C1.94772 12.25 1.5 11.8023 1.5 11.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V11.25C6 11.8023 6.44772 12.25 7 12.25H13.5C14.0523 12.25 14.5 11.8023 14.5 11.25V4.75C14.5 4.19772 14.0523 3.75 13.5 3.75H7Z" fill="#8D99A5"/>
-<path d="M0 12H16V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V12Z" fill="#8D99A5"/>
-<path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V5H0V4Z" fill="#8D99A5"/>
 </svg>

src/ui/web/css/themes/element/icons/enable-grid.svg

@@ -1,6 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V12C0 14.2091 1.79086 16 4 16H12C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0H4ZM2.5 3.75C1.94772 3.75 1.5 4.19772 1.5 4.75V11.25C1.5 11.8023 1.94772 12.25 2.5 12.25H3.5C4.05228 12.25 4.5 11.8023 4.5 11.25V4.75C4.5 4.19772 4.05228 3.75 3.5 3.75H2.5ZM11 9.75C11 9.19771 11.4477 8.75 12 8.75H13.5C14.0523 8.75 14.5 9.19772 14.5 9.75V11.25C14.5 11.8023 14.0523 12.25 13.5 12.25H12C11.4477 12.25 11 11.8023 11 11.25V9.75ZM7 8.75C6.44772 8.75 6 9.19771 6 9.75V11.25C6 11.8023 6.44772 12.25 7 12.25H8.5C9.05228 12.25 9.5 11.8023 9.5 11.25V9.75C9.5 9.19772 9.05229 8.75 8.5 8.75H7ZM11 4.75C11 4.19772 11.4477 3.75 12 3.75H13.5C14.0523 3.75 14.5 4.19772 14.5 4.75V6.25C14.5 6.80228 14.0523 7.25 13.5 7.25H12C11.4477 7.25 11 6.80228 11 6.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V6.25C6 6.80228 6.44772 7.25 7 7.25H8.5C9.05228 7.25 9.5 6.80228 9.5 6.25V4.75C9.5 4.19772 9.05229 3.75 8.5 3.75H7Z" fill="#8D99A5"/>
-<rect x="9.59998" y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
-<rect y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
-<rect width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
 </svg>

src/ui/web/css/themes/element/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1333 6.06667C10.1333 8.31262 8.31262 10.1333 6.06667 10.1333C3.82071 10.1333 2 8.31262 2 6.06667C2 3.82071 3.82071 2 6.06667 2C8.31262 2 10.1333 3.82071 10.1333 6.06667ZM10.9992 9.59936C11.7131 8.60443 12.1333 7.38463 12.1333 6.06667C12.1333 2.71614 9.41719 0 6.06667 0C2.71614 0 0 2.71614 0 6.06667C0 9.41719 2.71614 12.1333 6.06667 12.1333C7.38457 12.1333 8.60431 11.7131 9.59922 10.9993C9.62742 11.0369 9.65861 11.0729 9.6928 11.1071L12.2928 13.7071C12.6833 14.0977 13.3165 14.0977 13.707 13.7071C14.0975 13.3166 14.0975 12.6834 13.707 12.2929L11.107 9.69292C11.0728 9.65874 11.0368 9.62756 10.9992 9.59936Z" fill="#8D99A5"/>
+</svg>

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

@@ -136,22 +136,26 @@ button.utility.grid.on {
 }
 
 .FilterField {
+    background-image: url('icons/search.svg');
+    background-repeat: no-repeat;
+    background-position: 8px center;
     background-color: #e1e3e6;
+    /* to prevent jumps when adding a border on focus */
+    border: 1px solid transparent;
     border-radius: 16px;
     height: 32px;
     align-items: center;
-    padding: 0 8px;
+    padding-left: 30px; /* 8 + 14 (icon) + 8*/
     box-sizing: border-box;
 }
 
-.FilterField :not(:first-child) {
-    margin-left: 8px;
-}
-
 .FilterField:focus-within {
     border: 1px #e1e3e6 solid;
     background-color: white;
 }
+.FilterField:focus-within button {
+    border-color: white;
+}
 
 /*.FilterField:not(:focus-within) button {
     display: none;
@@ -169,14 +173,15 @@ button.utility.grid.on {
 }
 
 .FilterField button {
-    width: 16px;
+    width: 30px; /* 32 - 1 (top) - 1 (bottom) */
-    height: 16px;
+    height: 30px; /* 32 - 1 (top) - 1 (bottom) */
     background-position: center;
     background-color: #e1e3e6;
     background-repeat: no-repeat;
     background-image: url('icons/clear.svg');
-    border: none;
+    border: 7px solid transparent; /* 8 - 1 */
     border-radius: 100%;
+    box-sizing: border-box;
 }
 
 .PreSessionScreen {
@@ -203,14 +208,14 @@ button.utility.grid.on {
 .LeftPanel {
     background: rgba(245, 245, 245, 0.90);
     font-size: 1.5rem;
-    padding: 12px 0 0 8px;
+    padding: 12px 8px 0 8px;
 }
 
-.LeftPanel .utilities {
+.LeftPanel > :not(:first-child) {
-    margin-right: 8px;
+    margin-top: 12px;
 }
 
-.LeftPanel .utilities :not(:first-child) {
+.LeftPanel .utilities > :not(:first-child) {
     margin-left: 8px;
 }
 
@@ -223,36 +228,40 @@ button.utility.grid.on {
     border: none;
 }
 
-.LeftPanel ul {
+.LeftPanel .RoomList {
     padding: 0;
-    margin: 0;
+    margin-right: -8px; /* make scrollbar hit right edge of parent */
 }
 
-.LeftPanel li {
+.RoomList li {
-    margin: 12px 0;
+    margin: 0;
-    padding-right: 5px;
+    padding-right: 8px;
     /* vertical align */
     align-items: center;
 }
 
-.LeftPanel li.active {
+.RoomList li:not(:first-child) {
+    margin-top: 12px;
+}
+
+.RoomList li.active {
     background: rgba(141, 151, 165, 0.1);
     border-radius: 5px;
 }
 
-.LeftPanel li > * {
+.RoomList li > * {
-    margin-right: 10px;
+    margin-right: 8px;
 }
 
-.LeftPanel .description {
+.RoomList .description {
     align-items: baseline;
 }
 
-.LeftPanel .name.unread {
+.RoomList .name.unread {
     font-weight: 600;
 }
 
-.LeftPanel .badge {
+.RoomList .badge {
     min-width: 1.6rem;
     height: 1.6rem;
     border-radius: 1.6rem;
@@ -266,7 +275,7 @@ button.utility.grid.on {
     text-align: center;
 }
 
-.LeftPanel .badge.highlighted {
+.RoomList .badge.highlighted {
     background-color: #ff4b55;
 }
 
@@ -289,7 +298,7 @@ a {
     top: 72px;
 }
 
-.RoomPlaceholderView {
+.room-placeholder {
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -337,14 +346,30 @@ 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;
 }
 
 .RoomHeader {
-    background: rgba(245, 245, 245, 0.90);
+    box-sizing: border-box;
-    padding: 10px;
+    height: 58px; /* 12 + 36 + 12 to align with filter field + margin */
+    background: white;
+    padding: 0 16px;
+    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
 }
 
 .RoomHeader h2 {
@@ -352,23 +377,16 @@ a {
     font-weight: 600;
 }
 
-.RoomHeader button {
+.RoomHeader > :not(:last-child) {
-    width: 40px;
+    /* use margin-right because the first item,
-    height: 40px;
+    button.back might be hidden and then we don't
-    font-size: 1.5em;
+    want a margin-left on the second item*/
-    padding: 0;
+    margin-right: 8px;
-    background: white;
-    border: none;
-    font-weight: bolder;
-    line-height: 40px;
 }
 
-.back::before {
+button.back {
-    content: "☰";
+    background-image: url('icons/chevron-left.svg');
-}
+    background-position-x: 10px;
-
-.more::before {
-    content: "⋮";
 }
 
 .RoomHeader .topic {
@@ -381,15 +399,25 @@ a {
 
 .MessageComposer {
     border-top: 1px solid rgba(245, 245, 245, 0.90);
+    padding: 8px 16px;
+}
+
+.MessageComposer > :not(:first-child) {
+    margin-left: 12px;
 }
 
 .MessageComposer > input {
-    padding: 0.8em;
+    padding: 0 16px;
     border: none;
+    border-radius: 24px;
+    background: #F6F6F6;
+    height: 48px;
+    line-height: 48px;
+    font-size: 14px;
+    font-family: "Inter", sans-serif;
 }
 
 .MessageComposer > button.send {
-    margin: 8px;
     width: 32px;
     height: 32px;
     display: block;
@@ -492,3 +520,7 @@ ul.Timeline > li.messageStatus .message-container > p {
     text-align: center;
     border-radius: 10px;
 }
+
+.GapView > :not(:first-child) {
+    margin-left: 12px;
+}

src/ui/web/css/timeline.css

@@ -76,7 +76,6 @@ limitations under the License.
     visibility: visible;
 }
 
-.GapView > div {
+.GapView > :nth-child(2) {
-    flex: 1 1 0;
+    flex: 1;
-    margin-right: 10px;
 }

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 {
+export class StaticView {
-    constructor() {
+    constructor(render) {
-        this._root = null;
+        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,35 +15,33 @@ 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) {
         const children = [];
-        for (let y = 0; y < vm.height; y+=1) {
+        for (let i = 0; i < (vm.height * vm.width); i+=1) {
-            for (let x = 0; x < vm.width; x+=1) {
+            children.push(t.div({
-                children.push(t.div({
+                onClick: () => vm.setFocusIndex(i),
-                    onClick: () => vm.setFocusAt(x, y),
+                onFocusin: () => vm.setFocusIndex(i),
-                    onFocusin: () => vm.setFocusAt(x, y),
+                className: {
-                    className: {
+                    "container": true,
-                        "container": true,
+                    [`tile${i}`]: true,
-                        "focused": vm => vm.isFocusAt(x, y)
+                    "focused": vm => vm.focusIndex === i
-                    },
+                },
-                    style: `--column: ${x + 1}; --row: ${y + 1}`
+            },t.mapView(vm => vm.roomViewModelAt(i), roomVM => {
-                },t.mapView(vm => vm.roomViewModelAt(x, y), roomVM => {
+                if (roomVM) {
-                    if (roomVM) {
+                    return new RoomView(roomVM);
-                        return new RoomView(roomVM);
+                } else {
-                    } else {
+                    return new StaticView(t => t.div({className: "room-placeholder"}, [
-                        return new RoomPlaceholderView();
+                        t.h2({className: "focused"}, vm.i18n`Select a room on the left`),
-                    }
+                        t.h2({className: "unfocused"}, vm.i18n`Click to select this tile`),
-                })));
+                    ]));
-            }
+                }
+            })));
         }
-        children.push(t.div({className: "focus-ring", style: vm => `--column: ${vm.focusX + 1}; --row: ${vm.focusY + 1}`}));
+        children.push(t.div({className: vm => `focus-ring tile${vm.focusIndex}`}));
-        return t.div({
+        return t.div({className: "RoomGridView layout3x2"}, children);
-            className: "RoomGridView",
-            style: `--columns: ${vm.width}; --rows: ${vm.height}`
-        }, children);
     }
 }

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);
                     }

src/ui/web/session/room/RoomView.js

@@ -26,7 +26,7 @@ export class RoomView extends TemplateView {
         return t.div({className: "RoomView"}, [
             t.div({className: "TimelinePanel"}, [
                 t.div({className: "RoomHeader"}, [
-                    t.button({className: "back", onClick: () => vm.close()}),
+                    t.button({className: "utility back", onClick: () => vm.close()}),
                     renderAvatar(t, vm, 32),
                     t.div({className: "room-description"}, [
                         t.h2(vm => vm.name),

yarn.lock

@@ -933,6 +933,18 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+autoprefixer@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.0.1.tgz#e2d9000f84ebd98d77b7bc16f8adb2ff1f7bb946"
+  integrity sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==
+  dependencies:
+    browserslist "^4.14.5"
+    caniuse-lite "^1.0.30001137"
+    colorette "^1.2.1"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss-value-parser "^4.1.0"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -980,6 +992,16 @@ browserslist@^4.12.0, browserslist@^4.8.5:
     escalade "^3.0.2"
     node-releases "^1.1.60"
 
+browserslist@^4.14.5:
+  version "4.14.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.5.tgz#1c751461a102ddc60e40993639b709be7f2c4015"
+  integrity sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==
+  dependencies:
+    caniuse-lite "^1.0.30001135"
+    electron-to-chromium "^1.3.571"
+    escalade "^3.1.0"
+    node-releases "^1.1.61"
+
 bs58@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
@@ -997,6 +1019,11 @@ caniuse-lite@^1.0.30001111:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001115.tgz#c04cd828883ba47f6f776312e0817bcc9040cfa4"
   integrity sha512-NZrG0439ePYna44lJX8evHX2L7Z3/z3qjVLnHgbBb/duNEnGo348u+BQS5o4HTWcrb++100dHFrU36IesIrC1Q==
 
+caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
+  version "1.0.30001144"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001144.tgz#bca0fffde12f97e1127a351fec3bfc1971aa3b3d"
+  integrity sha512-4GQTEWNMnVZVOFG3BK0xvGeaDAtiPAbG2N8yuMXuXzx/c2Vd4XoMPO8+E918zeXn5IF0FRVtGShBfkfQea2wHQ==
+
 chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1030,6 +1057,11 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
+colorette@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
+  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
+
 colors@^1.3.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
@@ -1190,6 +1222,11 @@ electron-to-chromium@^1.3.523:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.534.tgz#fc7af8518dd00a5b22a24aed3f116b5d097e2330"
   integrity sha512-7x2S3yUrspNHQOoPk+Eo+iHViSiJiEGPI6BpmLy1eT2KRNGCkBt/NUYqjfXLd1DpDCQp7n3+LfA1RkbG+LqTZQ==
 
+electron-to-chromium@^1.3.571:
+  version "1.3.578"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.578.tgz#e6671936f4571a874eb26e2e833aa0b2c0b776e0"
+  integrity sha512-z4gU6dA1CbBJsAErW5swTGAaU2TBzc2mPAonJb00zqW1rOraDo2zfBMDRvaz9cVic+0JEZiYbHWPw/fTaZlG2Q==
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -1214,6 +1251,11 @@ escalade@^3.0.2:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
   integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
 
+escalade@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e"
+  integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -1382,6 +1424,18 @@ is-reference@^1.2.1:
   dependencies:
     "@types/estree" "*"
 
+isarray@1.0.0, isarray@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
+  dependencies:
+    isarray "1.0.0"
+
 js-cleanup@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-cleanup/-/js-cleanup-1.0.1.tgz#1d38080c7ee92e1d2d2b94054d0a33c48951e0df"
@@ -1425,6 +1479,14 @@ levenary@^1.1.1:
   dependencies:
     leven "^3.1.0"
 
+line-column@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
+  integrity sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=
+  dependencies:
+    isarray "^1.0.0"
+    isobject "^2.0.0"
+
 lodash@^4.15.0:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
@@ -1506,11 +1568,26 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+nanoid@^3.1.12:
+  version "3.1.12"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
+  integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==
+
 node-releases@^1.1.60:
   version "1.1.60"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
   integrity sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
 
+node-releases@^1.1.61:
+  version "1.1.61"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e"
+  integrity sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
 nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -1518,6 +1595,11 @@ nth-check@~1.0.1:
   dependencies:
     boolbase "~1.0.0"
 
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
 object-keys@^1.0.11, object-keys@^1.0.12:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -1631,6 +1713,11 @@ postcss-value-parser@^3.2.3:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
+postcss-value-parser@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+
 postcss@^6.0.8:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
@@ -1649,7 +1736,7 @@ postcss@^7.0.1:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32:
+postcss@^7.0.2, postcss@^7.0.26:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -1658,6 +1745,16 @@ postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.1.tgz#c3a287dd10e4f6c84cb3791052b96a5d859c9389"
+  integrity sha512-9DGLSsjooH3kSNjTZUOt2eIj2ZTW0VI2PZ/3My+8TC7KIbH2OKwUlISfDsf63EP4aiRUt3XkEWMWvyJHvJelEg==
+  dependencies:
+    colorette "^1.2.1"
+    line-column "^1.0.2"
+    nanoid "^3.1.12"
+    source-map "^0.6.1"
+
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"