mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
Merge pull request #141 from vector-im/bwindels/grid-view
Grid view for up to 6 rooms
This commit is contained in:
commit
76028578a7
@ -302,7 +302,6 @@ async function buildCssLegacy(entryPath, urlMapper = null) {
|
|||||||
const preCss = await fs.readFile(entryPath, "utf8");
|
const preCss = await fs.readFile(entryPath, "utf8");
|
||||||
const options = [
|
const options = [
|
||||||
postcssImport,
|
postcssImport,
|
||||||
cssvariables(),
|
|
||||||
flexbugsFixes()
|
flexbugsFixes()
|
||||||
];
|
];
|
||||||
if (urlMapper) {
|
if (urlMapper) {
|
||||||
|
@ -40,6 +40,12 @@ export class ViewModel extends EventEmitter {
|
|||||||
return this.disposables.track(disposable);
|
return this.disposables.track(disposable);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
untrack(disposable) {
|
||||||
|
if (this.disposables) {
|
||||||
|
return this.disposables.untrack(disposable);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose() {
|
||||||
if (this.disposables) {
|
if (this.disposables) {
|
||||||
this.disposables.dispose();
|
this.disposables.dispose();
|
||||||
|
121
src/domain/session/RoomGridViewModel.js
Normal file
121
src/domain/session/RoomGridViewModel.js
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
/*
|
||||||
|
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.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {ViewModel} from "../ViewModel.js";
|
||||||
|
|
||||||
|
export class RoomGridViewModel extends ViewModel {
|
||||||
|
constructor(options) {
|
||||||
|
super(options);
|
||||||
|
this._width = options.width;
|
||||||
|
this._height = options.height;
|
||||||
|
this._selectedIndex = 0;
|
||||||
|
this._viewModels = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
_posToIdx(x, y) {
|
||||||
|
return (y * this.width) + x;
|
||||||
|
}
|
||||||
|
|
||||||
|
_idxToX(idx) {
|
||||||
|
return idx % this.width;
|
||||||
|
}
|
||||||
|
|
||||||
|
_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) {
|
||||||
|
if (idx === this._selectedIndex) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const oldItem = this._viewModels[this._selectedIndex];
|
||||||
|
oldItem?.tileVM?.close();
|
||||||
|
this._selectedIndex = idx;
|
||||||
|
const newItem = this._viewModels[this._selectedIndex];
|
||||||
|
if (newItem) {
|
||||||
|
newItem.vm.focus();
|
||||||
|
newItem.tileVM.open();
|
||||||
|
}
|
||||||
|
this.emitChange("focusedIndex");
|
||||||
|
}
|
||||||
|
get width() {
|
||||||
|
return this._width;
|
||||||
|
}
|
||||||
|
|
||||||
|
get height() {
|
||||||
|
return this._height;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets a pair of room and room tile view models at the current index
|
||||||
|
* @param {RoomViewModel} vm
|
||||||
|
* @param {RoomTileViewModel} tileVM
|
||||||
|
* @package
|
||||||
|
*/
|
||||||
|
setRoomViewModel(vm, tileVM) {
|
||||||
|
const old = this._viewModels[this._selectedIndex];
|
||||||
|
this.disposeTracked(old?.vm);
|
||||||
|
old?.tileVM?.close();
|
||||||
|
this._viewModels[this._selectedIndex] = {vm: this.track(vm), tileVM};
|
||||||
|
this.emitChange(`${this._selectedIndex}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @package
|
||||||
|
*/
|
||||||
|
tryFocusRoom(roomId) {
|
||||||
|
const index = this._viewModels.findIndex(vms => vms?.vm._room.id === roomId);
|
||||||
|
if (index >= 0) {
|
||||||
|
this._setFocusedIndex(index);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the first set of room and room tile vm,
|
||||||
|
* and untracking them so they are not owned by this view model anymore.
|
||||||
|
* @package
|
||||||
|
*/
|
||||||
|
getAndUntrackFirst() {
|
||||||
|
for (const item of this._viewModels) {
|
||||||
|
if (item) {
|
||||||
|
this.untrack(item.vm);
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -18,6 +18,7 @@ limitations under the License.
|
|||||||
import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js";
|
import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js";
|
||||||
import {RoomViewModel} from "./room/RoomViewModel.js";
|
import {RoomViewModel} from "./room/RoomViewModel.js";
|
||||||
import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
|
import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
|
||||||
|
import {RoomGridViewModel} from "./RoomGridViewModel.js";
|
||||||
import {ViewModel} from "../ViewModel.js";
|
import {ViewModel} from "../ViewModel.js";
|
||||||
|
|
||||||
export class SessionViewModel extends ViewModel {
|
export class SessionViewModel extends ViewModel {
|
||||||
@ -32,16 +33,34 @@ export class SessionViewModel extends ViewModel {
|
|||||||
})));
|
})));
|
||||||
this._leftPanelViewModel = new LeftPanelViewModel(this.childOptions({
|
this._leftPanelViewModel = new LeftPanelViewModel(this.childOptions({
|
||||||
rooms: this._session.rooms,
|
rooms: this._session.rooms,
|
||||||
openRoom: this._openRoom.bind(this)
|
openRoom: this._openRoom.bind(this),
|
||||||
|
gridEnabled: {
|
||||||
|
get: () => !!this._gridViewModel,
|
||||||
|
set: value => this._enabledGrid(value)
|
||||||
|
}
|
||||||
}));
|
}));
|
||||||
this._currentRoomTileViewModel = null;
|
this._currentRoomTileViewModel = null;
|
||||||
this._currentRoomViewModel = null;
|
this._currentRoomViewModel = null;
|
||||||
|
this._gridViewModel = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
start() {
|
start() {
|
||||||
this._sessionStatusViewModel.start();
|
this._sessionStatusViewModel.start();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get selectionId() {
|
||||||
|
if (this._currentRoomViewModel) {
|
||||||
|
return this._currentRoomViewModel.id;
|
||||||
|
} else if (this._gridViewModel) {
|
||||||
|
return "roomgrid";
|
||||||
|
}
|
||||||
|
return "placeholder";
|
||||||
|
}
|
||||||
|
|
||||||
|
get roomGridViewModel() {
|
||||||
|
return this._gridViewModel;
|
||||||
|
}
|
||||||
|
|
||||||
get leftPanelViewModel() {
|
get leftPanelViewModel() {
|
||||||
return this._leftPanelViewModel;
|
return this._leftPanelViewModel;
|
||||||
}
|
}
|
||||||
@ -58,24 +77,60 @@ export class SessionViewModel extends ViewModel {
|
|||||||
return this._currentRoomViewModel;
|
return this._currentRoomViewModel;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_enabledGrid(enabled) {
|
||||||
|
if (enabled) {
|
||||||
|
this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({width: 3, height: 2})));
|
||||||
|
// transfer current room
|
||||||
|
if (this._currentRoomViewModel) {
|
||||||
|
this.untrack(this._currentRoomViewModel);
|
||||||
|
this._gridViewModel.setRoomViewModel(this._currentRoomViewModel, this._currentRoomTileViewModel);
|
||||||
|
this._currentRoomViewModel = null;
|
||||||
|
this._currentRoomTileViewModel = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const VMs = this._gridViewModel.getAndUntrackFirst();
|
||||||
|
if (VMs) {
|
||||||
|
this._currentRoomViewModel = this.track(VMs.vm);
|
||||||
|
this._currentRoomTileViewModel = VMs.tileVM;
|
||||||
|
this._currentRoomTileViewModel.open();
|
||||||
|
}
|
||||||
|
this._gridViewModel = this.disposeTracked(this._gridViewModel);
|
||||||
|
}
|
||||||
|
this.emitChange("middlePanelViewType");
|
||||||
|
}
|
||||||
|
|
||||||
_closeCurrentRoom() {
|
_closeCurrentRoom() {
|
||||||
this._currentRoomTileViewModel?.close();
|
// no closing in grid for now as it is disabled on narrow viewports
|
||||||
this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
|
if (!this._gridViewModel) {
|
||||||
|
this._currentRoomTileViewModel?.close();
|
||||||
|
this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_openRoom(room, roomTileVM) {
|
_openRoom(room, roomTileVM) {
|
||||||
this._closeCurrentRoom();
|
if (this._gridViewModel?.tryFocusRoom(room.id)) {
|
||||||
this._currentRoomTileViewModel = roomTileVM;
|
return;
|
||||||
this._currentRoomViewModel = this.track(new RoomViewModel(this.childOptions({
|
} else if (this._currentRoomViewModel?.id === room.id) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const roomVM = new RoomViewModel(this.childOptions({
|
||||||
room,
|
room,
|
||||||
ownUserId: this._session.user.id,
|
ownUserId: this._session.user.id,
|
||||||
closeCallback: () => {
|
closeCallback: () => {
|
||||||
this._closeCurrentRoom();
|
if (this._closeCurrentRoom()) {
|
||||||
this.emitChange("currentRoom");
|
this.emitChange("currentRoom");
|
||||||
|
}
|
||||||
},
|
},
|
||||||
})));
|
}));
|
||||||
this._currentRoomViewModel.load();
|
roomVM.load();
|
||||||
this.emitChange("currentRoom");
|
if (this._gridViewModel) {
|
||||||
|
this._gridViewModel.setRoomViewModel(roomVM, roomTileVM);
|
||||||
|
} else {
|
||||||
|
this._closeCurrentRoom();
|
||||||
|
this._currentRoomTileViewModel = roomTileVM;
|
||||||
|
this._currentRoomViewModel = this.track(roomVM);
|
||||||
|
this.emitChange("currentRoom");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -23,7 +23,8 @@ import {ApplyMap} from "../../../observable/map/ApplyMap.js";
|
|||||||
export class LeftPanelViewModel extends ViewModel {
|
export class LeftPanelViewModel extends ViewModel {
|
||||||
constructor(options) {
|
constructor(options) {
|
||||||
super(options);
|
super(options);
|
||||||
const {rooms, openRoom} = options;
|
const {rooms, openRoom, gridEnabled} = options;
|
||||||
|
this._gridEnabled = gridEnabled;
|
||||||
const roomTileVMs = rooms.mapValues((room, emitChange) => {
|
const roomTileVMs = rooms.mapValues((room, emitChange) => {
|
||||||
return new RoomTileViewModel({
|
return new RoomTileViewModel({
|
||||||
room,
|
room,
|
||||||
@ -35,6 +36,15 @@ export class LeftPanelViewModel extends ViewModel {
|
|||||||
this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b));
|
this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get gridEnabled() {
|
||||||
|
return this._gridEnabled.get();
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleGrid() {
|
||||||
|
this._gridEnabled.set(!this._gridEnabled.get());
|
||||||
|
this.emitChange("gridEnabled");
|
||||||
|
}
|
||||||
|
|
||||||
get roomList() {
|
get roomList() {
|
||||||
return this._roomList;
|
return this._roomList;
|
||||||
}
|
}
|
||||||
|
@ -51,10 +51,18 @@ export class RoomViewModel extends ViewModel {
|
|||||||
this._timelineError = err;
|
this._timelineError = err;
|
||||||
this.emitChange("error");
|
this.emitChange("error");
|
||||||
}
|
}
|
||||||
|
this._clearUnreadAfterDelay();
|
||||||
|
}
|
||||||
|
|
||||||
|
async _clearUnreadAfterDelay() {
|
||||||
|
if (this._clearUnreadTimout) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
this._clearUnreadTimout = this.clock.createTimeout(2000);
|
this._clearUnreadTimout = this.clock.createTimeout(2000);
|
||||||
try {
|
try {
|
||||||
await this._clearUnreadTimout.elapsed();
|
await this._clearUnreadTimout.elapsed();
|
||||||
await this._room.clearUnread();
|
await this._room.clearUnread();
|
||||||
|
this._clearUnreadTimout = null;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
if (err.name !== "AbortError") {
|
if (err.name !== "AbortError") {
|
||||||
throw err;
|
throw err;
|
||||||
@ -62,6 +70,10 @@ export class RoomViewModel extends ViewModel {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
focus() {
|
||||||
|
this._clearUnreadAfterDelay();
|
||||||
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose() {
|
||||||
super.dispose();
|
super.dispose();
|
||||||
if (this._clearUnreadTimout) {
|
if (this._clearUnreadTimout) {
|
||||||
@ -86,6 +98,10 @@ export class RoomViewModel extends ViewModel {
|
|||||||
return this._room.name || this.i18n`Empty Room`;
|
return this._room.name || this.i18n`Empty Room`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get id() {
|
||||||
|
return this._room.id;
|
||||||
|
}
|
||||||
|
|
||||||
get timelineViewModel() {
|
get timelineViewModel() {
|
||||||
return this._timelineVM;
|
return this._timelineVM;
|
||||||
}
|
}
|
||||||
|
@ -20,3 +20,13 @@ limitations under the License.
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.FilterField {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterField input {
|
||||||
|
display: block;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
@ -48,8 +48,11 @@ html {
|
|||||||
|
|
||||||
/* mobile layout */
|
/* mobile layout */
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
|
/* show back button */
|
||||||
.RoomHeader button.back { display: block; }
|
.RoomHeader button.back { display: block; }
|
||||||
div.RoomView, div.RoomPlaceholderView { display: none; }
|
/* hide grid button */
|
||||||
|
.LeftPanel button.grid { display: none; }
|
||||||
|
div.RoomView, div.RoomPlaceholderView, div.RoomGridView { display: none; }
|
||||||
div.LeftPanel {flex-grow: 1;}
|
div.LeftPanel {flex-grow: 1;}
|
||||||
div.room-shown div.RoomView { display: flex; }
|
div.room-shown div.RoomView { display: flex; }
|
||||||
div.room-shown div.LeftPanel { display: none; }
|
div.room-shown div.LeftPanel { display: none; }
|
||||||
@ -61,7 +64,7 @@ html {
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.RoomPlaceholderView, .RoomView {
|
.RoomPlaceholderView, .RoomView, .RoomGridView {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
@ -88,3 +91,22 @@ html {
|
|||||||
.RoomHeader {
|
.RoomHeader {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.RoomGridView {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(var(--columns), 1fr);
|
||||||
|
grid-template-rows: repeat(var(--rows), 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.RoomGridView > div {
|
||||||
|
display: flex;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
grid-column: var(--column);
|
||||||
|
grid-row: var(--row);
|
||||||
|
}
|
||||||
|
|
||||||
|
.RoomGridView > div.focus-ring {
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
@ -19,14 +19,12 @@ limitations under the License.
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.LeftPanel .filter {
|
.LeftPanel .utilities {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.LeftPanel .filter input {
|
.LeftPanel .utilities .FilterField {
|
||||||
display: block;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.LeftPanel ul {
|
.LeftPanel ul {
|
||||||
|
4
src/ui/web/css/themes/element/icons/clear.svg
Normal file
4
src/ui/web/css/themes/element/icons/clear.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 307 B |
5
src/ui/web/css/themes/element/icons/disable-grid.svg
Normal file
5
src/ui/web/css/themes/element/icons/disable-grid.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<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"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 501 B |
6
src/ui/web/css/themes/element/icons/enable-grid.svg
Normal file
6
src/ui/web/css/themes/element/icons/enable-grid.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<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"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 379 B |
@ -117,6 +117,68 @@ button.styled {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.utility {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-position: center;
|
||||||
|
background-color: #e1e3e6;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
border: none;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.utility.grid {
|
||||||
|
background-image: url('icons/enable-grid.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
button.utility.grid.on {
|
||||||
|
background-image: url('icons/disable-grid.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterField {
|
||||||
|
background-color: #e1e3e6;
|
||||||
|
border-radius: 16px;
|
||||||
|
height: 32px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterField :not(:first-child) {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterField:focus-within {
|
||||||
|
border: 1px #e1e3e6 solid;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.FilterField:not(:focus-within) button {
|
||||||
|
display: none;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
.FilterField input {
|
||||||
|
font-family: "Inter";
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.573rem;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterField button {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-position: center;
|
||||||
|
background-color: #e1e3e6;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url('icons/clear.svg');
|
||||||
|
border: none;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.PreSessionScreen {
|
.PreSessionScreen {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
@ -141,6 +203,15 @@ button.styled {
|
|||||||
.LeftPanel {
|
.LeftPanel {
|
||||||
background: rgba(245, 245, 245, 0.90);
|
background: rgba(245, 245, 245, 0.90);
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
padding: 12px 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LeftPanel .utilities {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LeftPanel .utilities :not(:first-child) {
|
||||||
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.LeftPanel .filter {
|
.LeftPanel .filter {
|
||||||
@ -158,8 +229,8 @@ button.styled {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.LeftPanel li {
|
.LeftPanel li {
|
||||||
margin: 3px 10px;
|
margin: 12px 0;
|
||||||
padding: 5px;
|
padding-right: 5px;
|
||||||
/* vertical align */
|
/* vertical align */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@ -211,6 +282,7 @@ a {
|
|||||||
background-color: #3D88FA;
|
background-color: #3D88FA;
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.room-shown .SessionStatusView {
|
.room-shown .SessionStatusView {
|
||||||
@ -220,6 +292,8 @@ a {
|
|||||||
.RoomPlaceholderView {
|
.RoomPlaceholderView {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.SessionPickerView li {
|
.SessionPickerView li {
|
||||||
@ -258,6 +332,16 @@ a {
|
|||||||
color: #FF4B55;
|
color: #FF4B55;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.RoomGridView > div.container {
|
||||||
|
border-right: 1px solid rgba(245, 245, 245, 0.90);
|
||||||
|
border-bottom: 1px solid rgba(245, 245, 245, 0.90);
|
||||||
|
}
|
||||||
|
|
||||||
|
.RoomGridView > div.focus-ring {
|
||||||
|
border: 2px solid rgba(134, 193, 165, 1);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.RoomHeader {
|
.RoomHeader {
|
||||||
background: rgba(245, 245, 245, 0.90);
|
background: rgba(245, 245, 245, 0.90);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
49
src/ui/web/session/RoomGridView.js
Normal file
49
src/ui/web/session/RoomGridView.js
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
/*
|
||||||
|
Copyright 2020 Bruno Windels <bruno@windels.cloud>
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {RoomView} from "./room/RoomView.js";
|
||||||
|
import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
|
||||||
|
import {TemplateView} from "../general/TemplateView.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();
|
||||||
|
}
|
||||||
|
})));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
@ -19,23 +19,27 @@ import {RoomView} from "./room/RoomView.js";
|
|||||||
import {TemplateView} from "../general/TemplateView.js";
|
import {TemplateView} from "../general/TemplateView.js";
|
||||||
import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
|
import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
|
||||||
import {SessionStatusView} from "./SessionStatusView.js";
|
import {SessionStatusView} from "./SessionStatusView.js";
|
||||||
|
import {RoomGridView} from "./RoomGridView.js";
|
||||||
|
|
||||||
export class SessionView extends TemplateView {
|
export class SessionView extends TemplateView {
|
||||||
render(t, vm) {
|
render(t, vm) {
|
||||||
return t.div({
|
return t.div({
|
||||||
className: {
|
className: {
|
||||||
"SessionView": true,
|
"SessionView": true,
|
||||||
"room-shown": vm => !!vm.currentRoom
|
"room-shown": vm => vm.selectionId !== "placeholder"
|
||||||
},
|
},
|
||||||
}, [
|
}, [
|
||||||
t.view(new SessionStatusView(vm.sessionStatusViewModel)),
|
t.view(new SessionStatusView(vm.sessionStatusViewModel)),
|
||||||
t.div({className: "main"}, [
|
t.div({className: "main"}, [
|
||||||
t.view(new LeftPanelView(vm.leftPanelViewModel)),
|
t.view(new LeftPanelView(vm.leftPanelViewModel)),
|
||||||
t.mapView(vm => vm.currentRoom, currentRoom => {
|
t.mapView(vm => vm.selectionId, selectionId => {
|
||||||
if (currentRoom) {
|
switch (selectionId) {
|
||||||
return new RoomView(currentRoom);
|
case "roomgrid":
|
||||||
} else {
|
return new RoomGridView(vm.roomGridViewModel);
|
||||||
return new RoomPlaceholderView();
|
case "placeholder":
|
||||||
|
return new RoomPlaceholderView();
|
||||||
|
default: //room id
|
||||||
|
return new RoomView(vm.currentRoom);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
])
|
])
|
||||||
|
@ -18,30 +18,67 @@ import {ListView} from "../../general/ListView.js";
|
|||||||
import {TemplateView} from "../../general/TemplateView.js";
|
import {TemplateView} from "../../general/TemplateView.js";
|
||||||
import {RoomTileView} from "./RoomTileView.js";
|
import {RoomTileView} from "./RoomTileView.js";
|
||||||
|
|
||||||
export class LeftPanelView extends TemplateView {
|
class FilterField extends TemplateView {
|
||||||
render(t, vm) {
|
render(t, options) {
|
||||||
|
const clear = () => {
|
||||||
|
filterInput.value = "";
|
||||||
|
filterInput.blur();
|
||||||
|
clearButton.blur();
|
||||||
|
options.clear();
|
||||||
|
};
|
||||||
const filterInput = t.input({
|
const filterInput = t.input({
|
||||||
type: "text",
|
type: "text",
|
||||||
placeholder: vm.i18n`Filter rooms…`,
|
placeholder: options?.label,
|
||||||
"aria-label": vm.i18n`Filter rooms by name`,
|
"aria-label": options?.label,
|
||||||
autocomplete: true,
|
autocomplete: options?.autocomplete,
|
||||||
name: "room-filter",
|
name: options?.name,
|
||||||
onInput: event => vm.setFilter(event.target.value),
|
onInput: event => options.set(event.target.value),
|
||||||
onKeydown: event => {
|
onKeydown: event => {
|
||||||
if (event.key === "Escape" || event.key === "Esc") {
|
if (event.key === "Escape" || event.key === "Esc") {
|
||||||
filterInput.value = "";
|
clear();
|
||||||
vm.clearFilter();
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
onFocus: () => filterInput.select()
|
||||||
});
|
});
|
||||||
|
const clearButton = t.button({
|
||||||
|
onClick: clear,
|
||||||
|
title: options.i18n`Clear`,
|
||||||
|
"aria-label": options.i18n`Clear`
|
||||||
|
});
|
||||||
|
return t.div({className: "FilterField"}, [filterInput, clearButton]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class LeftPanelView extends TemplateView {
|
||||||
|
render(t, vm) {
|
||||||
|
const gridButtonLabel = vm => {
|
||||||
|
return vm.gridEnabled ?
|
||||||
|
vm.i18n`Show single room` :
|
||||||
|
vm.i18n`Enable grid layout`;
|
||||||
|
};
|
||||||
|
const utilitiesRow = t.div({className: "utilities"}, [
|
||||||
|
t.view(new FilterField({
|
||||||
|
i18n: vm.i18n,
|
||||||
|
label: vm.i18n`Filter rooms…`,
|
||||||
|
name: "room-filter",
|
||||||
|
autocomplete: true,
|
||||||
|
set: query => vm.setFilter(query),
|
||||||
|
clear: () => vm.clearFilter()
|
||||||
|
})),
|
||||||
|
t.button({
|
||||||
|
onClick: () => vm.toggleGrid(),
|
||||||
|
className: {
|
||||||
|
utility: true,
|
||||||
|
grid: true,
|
||||||
|
on: vm => vm.gridEnabled
|
||||||
|
},
|
||||||
|
title: gridButtonLabel,
|
||||||
|
"aria-label": gridButtonLabel
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
|
||||||
return t.div({className: "LeftPanel"}, [
|
return t.div({className: "LeftPanel"}, [
|
||||||
t.div({className: "filter"}, [
|
utilitiesRow,
|
||||||
filterInput,
|
|
||||||
t.button({onClick: () => {
|
|
||||||
filterInput.value = "";
|
|
||||||
vm.clearFilter();
|
|
||||||
}}, vm.i18n`Clear`)
|
|
||||||
]),
|
|
||||||
t.view(new ListView(
|
t.view(new ListView(
|
||||||
{
|
{
|
||||||
className: "RoomList",
|
className: "RoomList",
|
||||||
|
@ -35,6 +35,13 @@ export class Disposables {
|
|||||||
return disposable;
|
return disposable;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
untrack(disposable) {
|
||||||
|
const idx = this._disposables.indexOf(disposable);
|
||||||
|
if (idx >= 0) {
|
||||||
|
this._disposables.splice(idx, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose() {
|
||||||
if (this._disposables) {
|
if (this._disposables) {
|
||||||
for (const d of this._disposables) {
|
for (const d of this._disposables) {
|
||||||
|
Loading…
Reference in New Issue
Block a user