mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-22 19:14:52 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Grid and other css polish
This commit is contained in:
Bruno Windels 2020-10-08 14:18:08 +00:00 committed by GitHub
commit 30ffe72a7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 272 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

5
package.json
View File

@ -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"
}

3
scripts/build.mjs
View File

@ -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) {

38
src/domain/session/RoomGridViewModel.js
View File

@ -25,39 +25,15 @@ export class RoomGridViewModel extends ViewModel {
this._viewModels = [];
}
_posToIdx(x, y) {
return (y * this.width) + x;
roomViewModelAt(i) {
return this._viewModels[i]?.vm;
}
_idxToX(idx) {
return idx % this.width;
get focusIndex() {
return this._selectedIndex;
}
_idxToY(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) {
setFocusIndex(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;

3
src/ui/web/css/avatar.css
View File

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

1
src/ui/web/css/form.css
View File

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

25
src/ui/web/css/layout.css
View File

@ -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 {

1
src/ui/web/css/left-panel.css
View File

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

11
src/ui/web/css/login.css
View File

@ -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 {

20
src/ui/web/css/room.css
View File

@ -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 {
margin-right: 0;
}
.RoomHeader > * {
margin-right: 10px;
flex: 0 0 auto;
.RoomHeader h2 {
flex: 1;
}
.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 {
margin-right: 10px;
.TimelineLoadingView > :not(:first-child) {
margin-left: 12px;
}

2
src/ui/web/css/themes/bubbles/theme.css
View File

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

10
src/ui/web/css/themes/element/icons/chevron-left.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 657 B

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

@ -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 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"/>
<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"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 501 B

After

Width:  |  Height:  |  Size: 621 B

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

@ -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"/>
<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"/>
<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"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 379 B

After

Width:  |  Height:  |  Size: 1.1 KiB

3
src/ui/web/css/themes/element/icons/search.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 785 B

120
src/ui/web/css/themes/element/theme.css
View File

@ -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;
height: 16px;
width: 30px; /* 32 - 1 (top) - 1 (bottom) */
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 {
margin-right: 8px;
.LeftPanel > :not(:first-child) {
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 {
margin: 12px 0;
padding-right: 5px;
.RoomList li {
margin: 0;
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 > * {
margin-right: 10px;
.RoomList li > * {
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);
padding: 10px;
box-sizing: border-box;
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 {
width: 40px;
height: 40px;
font-size: 1.5em;
padding: 0;
background: white;
border: none;
font-weight: bolder;
line-height: 40px;
.RoomHeader > :not(:last-child) {
/* use margin-right because the first item,
button.back might be hidden and then we don't
want a margin-left on the second item*/
margin-right: 8px;
}
.back::before {
content: "☰";
}
.more::before {
content: "⋮";
button.back {
background-image: url('icons/chevron-left.svg');
background-position-x: 10px;
}
.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;
}

5
src/ui/web/css/timeline.css
View File

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

8
src/ui/web/session/RoomPlaceholderView.js → src/ui/web/general/StaticView.js
View File

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

46
src/ui/web/session/RoomGridView.js
View File

@ -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 x = 0; x < vm.width; x+=1) {
children.push(t.div({
onClick: () => vm.setFocusAt(x, y),
onFocusin: () => vm.setFocusAt(x, y),
className: {
"container": true,
"focused": vm => vm.isFocusAt(x, y)
},
style: `--column: ${x + 1}; --row: ${y + 1}`
},t.mapView(vm => vm.roomViewModelAt(x, y), roomVM => {
if (roomVM) {
return new RoomView(roomVM);
} else {
return new RoomPlaceholderView();
}
})));
}
for (let i = 0; i < (vm.height * vm.width); i+=1) {
children.push(t.div({
onClick: () => vm.setFocusIndex(i),
onFocusin: () => vm.setFocusIndex(i),
className: {
"container": true,
[`tile${i}`]: true,
"focused": vm => vm.focusIndex === i
},
},t.mapView(vm => vm.roomViewModelAt(i), roomVM => {
if (roomVM) {
return new RoomView(roomVM);
} else {
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`),
]));
}
})));
}
children.push(t.div({className: "focus-ring", style: vm => `--column: ${vm.focusX + 1}; --row: ${vm.focusY + 1}`}));
return t.div({
className: "RoomGridView",
style: `--columns: ${vm.width}; --rows: ${vm.height}`
}, children);
children.push(t.div({className: vm => `focus-ring tile${vm.focusIndex}`}));
return t.div({className: "RoomGridView layout3x2"}, children);
}
}

4
src/ui/web/session/SessionView.js
View File

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

2
src/ui/web/session/room/RoomView.js
View File

@ -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),

99
yarn.lock
View File

@ -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"