From c7ba47204254a3b1563f3399470428d3567da009 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 23 May 2021 15:49:31 +0530 Subject: [PATCH 01/90] Add view and vm for RoomInformation Signed-off-by: RMidhunSuresh --- .../session/rightpanel/RoomInfoViewModel.js | 25 +++++++++++++++++++ .../web/ui/session/rightpanel/RoomInfoView.js | 13 ++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/domain/session/rightpanel/RoomInfoViewModel.js create mode 100644 src/platform/web/ui/session/rightpanel/RoomInfoView.js diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js new file mode 100644 index 00000000..c132acf8 --- /dev/null +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -0,0 +1,25 @@ +import { ViewModel } from "../../ViewModel.js"; + +export class RoomInfoViewModel extends ViewModel { + constructor(options) { + super(options); + this._room = options.room; + this._roomSummary = this._room._summary._data; + } + + get roomId() { + return this._room.id; + } + + get name() { + return this._roomSummary.name || this._room._heroes._roomName; + } + + get isEncrypted() { + return !!this._roomSummary.encryption; + } + + get memberCount() { + return this._roomSummary.joinCount; + } +} diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js new file mode 100644 index 00000000..226b6c5e --- /dev/null +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -0,0 +1,13 @@ +import { TemplateView } from "../../general/TemplateView.js"; +import { text } from "../../general/html.js"; + +export class RoomInfoView extends TemplateView { + render(t, vm) { + return t.div({ className: "RoomInfo" }, [ + t.div({ className: "RoomName" }, [text(vm.name)]), + t.div({ className: "RoomId" }, [text(vm.roomId)]), + t.div({ className: "RoomMemberCount" }, [text(vm.memberCount)]), + t.div({ className: "RoomEncryption" }, [vm.isEncrypted ? "Encrypted" : "Not Encrypted"]) + ]); + } +} From c7fd0fac0757161446dcdc570a19001a08199933 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 23 May 2021 15:50:12 +0530 Subject: [PATCH 02/90] Allow details to be child of room Signed-off-by: RMidhunSuresh --- src/domain/navigation/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/navigation/index.js b/src/domain/navigation/index.js index 3a9b4a07..310ae694 100644 --- a/src/domain/navigation/index.js +++ b/src/domain/navigation/index.js @@ -37,7 +37,7 @@ function allowsChild(parent, child) { // downside of the approach: both of these will control which tile is selected return type === "room" || type === "empty-grid-tile"; case "room": - return type === "lightbox"; + return type === "lightbox" || type === "details"; default: return false; } From 986271d02a8b56fcac18c3aa071ba1ce1b8def97 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 23 May 2021 17:17:24 +0530 Subject: [PATCH 03/90] Add code to toggle RoomInformation panel Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 7a84e67b..eae63acd 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -16,7 +16,8 @@ limitations under the License. */ import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js"; -import {RoomViewModel} from "./room/RoomViewModel.js"; +import { RoomViewModel } from "./room/RoomViewModel.js"; +import { RoomInfoViewModel } from "./rightpanel/RoomInfoViewModel.js"; import {UnknownRoomViewModel} from "./room/UnknownRoomViewModel.js"; import {InviteViewModel} from "./room/InviteViewModel.js"; import {LightboxViewModel} from "./room/LightboxViewModel.js"; @@ -78,6 +79,10 @@ export class SessionViewModel extends ViewModel { this._updateLightbox(eventId); })); this._updateLightbox(lightbox.get()); + + const details = this.navigation.observe("details"); + this.track(details.subscribe(() => this._toggleRoomInformationPanel())); + } get id() { @@ -112,6 +117,10 @@ export class SessionViewModel extends ViewModel { return this._roomViewModelObservable?.get(); } + get roomInfoViewModel() { + return this._roomInfoViewModel; + } + _updateGrid(roomIds) { const changed = !(this._gridViewModel && roomIds); const currentRoomId = this.navigation.path.get("room"); @@ -240,4 +249,18 @@ export class SessionViewModel extends ViewModel { get lightboxViewModel() { return this._lightboxViewModel; } + + _toggleRoomInformationPanel() { + const roomId = this.navigation.path.get("room").value; + const room = this._sessionContainer.session.rooms.get(roomId); + const enable = !!this.navigation.path.get("details"); + if (!room) { + return; + } + this._roomInfoViewModel = enable ? + this.track(new RoomInfoViewModel(this.childOptions({ room }))) : + this.disposeTracked(this._roomInfoViewModel); + this.emitChange(); + } + } From e39572b98ba4b459dad5a12073848a4a860a5c5a Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 23 May 2021 17:18:14 +0530 Subject: [PATCH 04/90] Create RoomInformationView on toggle Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/SessionView.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js index c8a77a1b..1208e0b3 100644 --- a/src/platform/web/ui/session/SessionView.js +++ b/src/platform/web/ui/session/SessionView.js @@ -25,6 +25,7 @@ import {StaticView} from "../general/StaticView.js"; import {SessionStatusView} from "./SessionStatusView.js"; import {RoomGridView} from "./RoomGridView.js"; import {SettingsView} from "./settings/SettingsView.js"; +import { RoomInfoView } from "./rightpanel/RoomInfoView.js"; export class SessionView extends TemplateView { render(t, vm) { @@ -53,6 +54,7 @@ export class SessionView extends TemplateView { return new StaticView(t => t.div({className: "room-placeholder"}, t.h2(vm.i18n`Choose a room on the left side.`))); } }), + t.mapView(vm => vm.roomInfoViewModel, roomInfoViewModel => roomInfoViewModel ? new RoomInfoView(roomInfoViewModel) : null), t.mapView(vm => vm.lightboxViewModel, lightboxViewModel => lightboxViewModel ? new LightboxView(lightboxViewModel) : null) ]); } From 96959a3c4ced1a967a99cad4370c0b4ccae63030 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 23 May 2021 17:59:47 +0530 Subject: [PATCH 05/90] Put name of property in emitChange Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index eae63acd..260a98e6 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -260,7 +260,7 @@ export class SessionViewModel extends ViewModel { this._roomInfoViewModel = enable ? this.track(new RoomInfoViewModel(this.childOptions({ room }))) : this.disposeTracked(this._roomInfoViewModel); - this.emitChange(); + this.emitChange("roomInfoViewModel"); } } From 439910f6caa5821cfb9b7cb9c9e0f8030b7687a7 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 23 May 2021 20:24:39 +0530 Subject: [PATCH 06/90] Handle case when path.get() may be null Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 260a98e6..b32355ef 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -251,7 +251,7 @@ export class SessionViewModel extends ViewModel { } _toggleRoomInformationPanel() { - const roomId = this.navigation.path.get("room").value; + const roomId = this.navigation.path.get("room")?.value; const room = this._sessionContainer.session.rooms.get(roomId); const enable = !!this.navigation.path.get("details"); if (!room) { From 98d8d44695ffe9f15c689a505e11882df3af5c90 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 23 May 2021 20:27:17 +0530 Subject: [PATCH 07/90] Allow details to be child of rooms Signed-off-by: RMidhunSuresh --- src/domain/navigation/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/navigation/index.js b/src/domain/navigation/index.js index 310ae694..2dab6f0c 100644 --- a/src/domain/navigation/index.js +++ b/src/domain/navigation/index.js @@ -35,7 +35,7 @@ function allowsChild(parent, child) { return type === "room" || type === "rooms" || type === "settings"; case "rooms": // downside of the approach: both of these will control which tile is selected - return type === "room" || type === "empty-grid-tile"; + return type === "room" || type === "empty-grid-tile" || type === "details"; case "room": return type === "lightbox" || type === "details"; default: From 7e38c3ea88fe2a22a0328d6f25cb2bae526169f6 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 23 May 2021 20:27:58 +0530 Subject: [PATCH 08/90] Remove right panel on grid update if needed Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index b32355ef..1194bff4 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -124,6 +124,8 @@ export class SessionViewModel extends ViewModel { _updateGrid(roomIds) { const changed = !(this._gridViewModel && roomIds); const currentRoomId = this.navigation.path.get("room"); + // Close right-panel if needed + this._toggleRoomInformationPanel(); if (roomIds) { if (!this._gridViewModel) { this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({ From ddaa9b46c07937e92f8f09dc8919138097f54348 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 24 May 2021 16:38:28 +0530 Subject: [PATCH 09/90] Dispose vm preemptively Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 1194bff4..e96ef6f9 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -253,15 +253,16 @@ export class SessionViewModel extends ViewModel { } _toggleRoomInformationPanel() { + this._roomInfoViewModel = this.disposeTracked(this._roomInfoViewModel); const roomId = this.navigation.path.get("room")?.value; const room = this._sessionContainer.session.rooms.get(roomId); - const enable = !!this.navigation.path.get("details"); if (!room) { return; } - this._roomInfoViewModel = enable ? - this.track(new RoomInfoViewModel(this.childOptions({ room }))) : - this.disposeTracked(this._roomInfoViewModel); + const enable = !!this.navigation.path.get("details"); + if (enable) { + this._roomInfoViewModel = this.track(new RoomInfoViewModel(this.childOptions({ room }))); + } this.emitChange("roomInfoViewModel"); } From c3333f5fe8d02753fc0a4ff2e39b2e795f620226 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 24 May 2021 17:01:29 +0530 Subject: [PATCH 10/90] Extract method Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index e96ef6f9..6570cd54 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -241,8 +241,7 @@ export class SessionViewModel extends ViewModel { this._lightboxViewModel = this.disposeTracked(this._lightboxViewModel); } if (eventId) { - const roomId = this.navigation.path.get("room").value; - const room = this._sessionContainer.session.rooms.get(roomId); + const room = this._roomFromNavigation(); this._lightboxViewModel = this.track(new LightboxViewModel(this.childOptions({eventId, room}))); } this.emitChange("lightboxViewModel"); @@ -252,10 +251,15 @@ export class SessionViewModel extends ViewModel { return this._lightboxViewModel; } - _toggleRoomInformationPanel() { - this._roomInfoViewModel = this.disposeTracked(this._roomInfoViewModel); + _roomFromNavigation() { const roomId = this.navigation.path.get("room")?.value; const room = this._sessionContainer.session.rooms.get(roomId); + return room; + } + + _toggleRoomInformationPanel() { + this._roomInfoViewModel = this.disposeTracked(this._roomInfoViewModel); + const room = this._roomFromNavigation(); if (!room) { return; } From 9a605cc6c6688bb45f913c000c7ea62684141607 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 24 May 2021 17:13:51 +0530 Subject: [PATCH 11/90] Remove unnecessary check Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 6570cd54..77c63d6c 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -260,9 +260,6 @@ export class SessionViewModel extends ViewModel { _toggleRoomInformationPanel() { this._roomInfoViewModel = this.disposeTracked(this._roomInfoViewModel); const room = this._roomFromNavigation(); - if (!room) { - return; - } const enable = !!this.navigation.path.get("details"); if (enable) { this._roomInfoViewModel = this.track(new RoomInfoViewModel(this.childOptions({ room }))); From 0d11f85ab3b03793036d6f7cd3bbb246380760df Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 24 May 2021 22:19:05 +0530 Subject: [PATCH 12/90] Add CSS to display sidebar to the right Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/layout.css | 7 +++++++ src/platform/web/ui/css/main.css | 1 + src/platform/web/ui/css/right-panel.css | 3 +++ src/platform/web/ui/session/SessionView.js | 3 ++- 4 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 src/platform/web/ui/css/right-panel.css diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css index 9670afad..1eba5270 100644 --- a/src/platform/web/ui/css/layout.css +++ b/src/platform/web/ui/css/layout.css @@ -54,6 +54,13 @@ main { min-width: 0; } +.SideBarActive{ + grid-template: + "status status status" auto + "left middle right" 1fr / + 300px 1fr 300px; +} + /* resize and reposition session view to account for mobile Safari which shifts the layout viewport up without resizing it when the keyboard shows */ .hydrogen.ios .SessionView { diff --git a/src/platform/web/ui/css/main.css b/src/platform/web/ui/css/main.css index aa22839e..82b849c8 100644 --- a/src/platform/web/ui/css/main.css +++ b/src/platform/web/ui/css/main.css @@ -18,6 +18,7 @@ limitations under the License. @import url('layout.css'); @import url('login.css'); @import url('left-panel.css'); +@import url('right-panel.css'); @import url('room.css'); @import url('timeline.css'); @import url('avatar.css'); diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css new file mode 100644 index 00000000..4334ffb1 --- /dev/null +++ b/src/platform/web/ui/css/right-panel.css @@ -0,0 +1,3 @@ +.RoomInfo{ + grid-area: right; +} diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js index 1208e0b3..2c2a3cd1 100644 --- a/src/platform/web/ui/session/SessionView.js +++ b/src/platform/web/ui/session/SessionView.js @@ -32,7 +32,8 @@ export class SessionView extends TemplateView { return t.div({ className: { "SessionView": true, - "middle-shown": vm => !!vm.activeMiddleViewModel + "middle-shown": vm => !!vm.activeMiddleViewModel, + "SideBarActive": vm => !!vm.roomInfoViewModel }, }, [ t.view(new SessionStatusView(vm.sessionStatusViewModel)), From 191eb09a76f5c6a6f0b725a0dd8ebf7a8d90b961 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 24 May 2021 22:50:17 +0530 Subject: [PATCH 13/90] Fallback to canonical alias if no names found Signed-off-by: RMidhunSuresh --- src/domain/session/rightpanel/RoomInfoViewModel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js index c132acf8..951f10c0 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -12,7 +12,7 @@ export class RoomInfoViewModel extends ViewModel { } get name() { - return this._roomSummary.name || this._room._heroes._roomName; + return this._roomSummary.name || this._room._heroes?._roomName || this._roomSummary.canonicalAlias; } get isEncrypted() { From 0ea2843454c281a7b6a041de8db33ffecb65fe63 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 25 May 2021 12:05:12 +0530 Subject: [PATCH 14/90] Add background for sidebar Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/right-panel.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css index 4334ffb1..cc6432e1 100644 --- a/src/platform/web/ui/css/right-panel.css +++ b/src/platform/web/ui/css/right-panel.css @@ -1,3 +1,4 @@ .RoomInfo{ grid-area: right; + background : rgba(245, 245, 245, 0.90); } From 6f1b77b6fa7074cd78c63d4e0ea8955dd0271edb Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 25 May 2021 12:06:09 +0530 Subject: [PATCH 15/90] Add room avatar to RoomInfoView Signed-off-by: RMidhunSuresh --- .../session/rightpanel/RoomInfoViewModel.js | 17 +++++++++++++++++ .../web/ui/session/rightpanel/RoomInfoView.js | 2 ++ 2 files changed, 19 insertions(+) diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js index 951f10c0..a2b7eaf4 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -1,4 +1,5 @@ import { ViewModel } from "../../ViewModel.js"; +import { avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl } from "../../avatar.js"; export class RoomInfoViewModel extends ViewModel { constructor(options) { @@ -22,4 +23,20 @@ export class RoomInfoViewModel extends ViewModel { get memberCount() { return this._roomSummary.joinCount; } + + get avatarLetter() { + return avatarInitials(this.name); + } + + get avatarColorNumber() { + return getIdentifierColorNumber(this.roomId) + } + + avatarUrl(size) { + return getAvatarHttpUrl(this._room.avatarUrl, size, this.platform, this._room.mediaRepository); + } + + get avatarTitle() { + return this.name; + } } diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index 226b6c5e..fc09d5c6 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -1,9 +1,11 @@ import { TemplateView } from "../../general/TemplateView.js"; import { text } from "../../general/html.js"; +import { AvatarView } from "../../avatar.js"; export class RoomInfoView extends TemplateView { render(t, vm) { return t.div({ className: "RoomInfo" }, [ + t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 50))]), t.div({ className: "RoomName" }, [text(vm.name)]), t.div({ className: "RoomId" }, [text(vm.roomId)]), t.div({ className: "RoomMemberCount" }, [text(vm.memberCount)]), From aece82dff640e86082ea369d74984558bf2e2157 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 25 May 2021 12:18:30 +0530 Subject: [PATCH 16/90] Make room avatar larger in RoomInfoView Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/rightpanel/RoomInfoView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index fc09d5c6..692176fa 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -5,7 +5,7 @@ import { AvatarView } from "../../avatar.js"; export class RoomInfoView extends TemplateView { render(t, vm) { return t.div({ className: "RoomInfo" }, [ - t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 50))]), + t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 128))]), t.div({ className: "RoomName" }, [text(vm.name)]), t.div({ className: "RoomId" }, [text(vm.roomId)]), t.div({ className: "RoomMemberCount" }, [text(vm.memberCount)]), From d502a7f911adb9d378deb7d2576b5a9784576c05 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 25 May 2021 16:09:47 +0530 Subject: [PATCH 17/90] Make display name bold Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/rightpanel/RoomInfoView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index 692176fa..f591e0c1 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -6,7 +6,7 @@ export class RoomInfoView extends TemplateView { render(t, vm) { return t.div({ className: "RoomInfo" }, [ t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 128))]), - t.div({ className: "RoomName" }, [text(vm.name)]), + t.div({ className: "RoomName" }, [t.h2(vm.name)]), t.div({ className: "RoomId" }, [text(vm.roomId)]), t.div({ className: "RoomMemberCount" }, [text(vm.memberCount)]), t.div({ className: "RoomEncryption" }, [vm.isEncrypted ? "Encrypted" : "Not Encrypted"]) From a23e2c361a2a41b615baf4c520265a3a6f93e675 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 25 May 2021 16:10:05 +0530 Subject: [PATCH 18/90] Better styling Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/right-panel.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css index cc6432e1..23f140c3 100644 --- a/src/platform/web/ui/css/right-panel.css +++ b/src/platform/web/ui/css/right-panel.css @@ -1,4 +1,8 @@ .RoomInfo{ grid-area: right; background : rgba(245, 245, 245, 0.90); + display: flex; + flex-direction: column; + align-items: center; + padding:10px; } From 0a4f8aff7961a5ca2b1ffa70e555d7c0d51b7026 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 15:36:29 +0530 Subject: [PATCH 19/90] Create method to add sidebar element Signed-off-by: RMidhunSuresh --- .../web/ui/session/rightpanel/RoomInfoView.js | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index f591e0c1..ef70762d 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -1,15 +1,29 @@ import { TemplateView } from "../../general/TemplateView.js"; -import { text } from "../../general/html.js"; +import { text, classNames, tag } from "../../general/html.js"; import { AvatarView } from "../../avatar.js"; export class RoomInfoView extends TemplateView { + render(t, vm) { + const encryptionString = vm.isEncrypted ? "On" : "Off"; return t.div({ className: "RoomInfo" }, [ t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 128))]), t.div({ className: "RoomName" }, [t.h2(vm.name)]), + t.div({ className: "RoomId" }, [text(vm.roomId)]), - t.div({ className: "RoomMemberCount" }, [text(vm.memberCount)]), - t.div({ className: "RoomEncryption" }, [vm.isEncrypted ? "Encrypted" : "Not Encrypted"]) + + this._createSideBarRow("People", vm.memberCount, { MemberCount: true }), + + this._createSideBarRow("Encryption", encryptionString, { EncryptionStatus: true }) + ]); + } + + _createSideBarRow(label, value, labelClass, valueClass) { + const labelClassString = classNames({ SidebarLabel: true, ...labelClass }); + const valueClassString = classNames({ SidebarValue: true, ...valueClass }); + return tag.div({ className: "SidebarRow" }, [ + tag.div({ className: labelClassString }, [text(label)]), + tag.div({ className: valueClassString }, [text(value)]) ]); } } From 653fcbbb1f883a429a0605bff06953dfc225b263 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 15:38:26 +0530 Subject: [PATCH 20/90] Add method to create avatar section Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/rightpanel/RoomInfoView.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index ef70762d..79753295 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -7,7 +7,10 @@ export class RoomInfoView extends TemplateView { render(t, vm) { const encryptionString = vm.isEncrypted ? "On" : "Off"; return t.div({ className: "RoomInfo" }, [ - t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 128))]), + + t.div({ className: "RoomAvatar" }, + [t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]), + t.div({ className: "RoomName" }, [t.h2(vm.name)]), t.div({ className: "RoomId" }, [text(vm.roomId)]), @@ -26,4 +29,9 @@ export class RoomInfoView extends TemplateView { tag.div({ className: valueClassString }, [text(value)]) ]); } + + _createEncryptionIcon(isEncrypted) { + return tag.div({ className: "RoomEncryption" }, + [tag.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]) + } } From ee29d7f799dc353883145ed72d8283b427bae5b5 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 15:39:19 +0530 Subject: [PATCH 21/90] Bring in icon assets Signed-off-by: RMidhunSuresh --- .../web/ui/css/themes/element/icons/e2ee-disabled.svg | 5 +++++ .../web/ui/css/themes/element/icons/e2ee-normal.svg | 3 +++ .../web/ui/css/themes/element/icons/encryption-status.svg | 3 +++ .../web/ui/css/themes/element/icons/room-members.svg | 7 +++++++ 4 files changed, 18 insertions(+) create mode 100644 src/platform/web/ui/css/themes/element/icons/e2ee-disabled.svg create mode 100644 src/platform/web/ui/css/themes/element/icons/e2ee-normal.svg create mode 100644 src/platform/web/ui/css/themes/element/icons/encryption-status.svg create mode 100644 src/platform/web/ui/css/themes/element/icons/room-members.svg diff --git a/src/platform/web/ui/css/themes/element/icons/e2ee-disabled.svg b/src/platform/web/ui/css/themes/element/icons/e2ee-disabled.svg new file mode 100644 index 00000000..26e669fc --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/e2ee-disabled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/platform/web/ui/css/themes/element/icons/e2ee-normal.svg b/src/platform/web/ui/css/themes/element/icons/e2ee-normal.svg new file mode 100644 index 00000000..9d981ee7 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/e2ee-normal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/platform/web/ui/css/themes/element/icons/encryption-status.svg b/src/platform/web/ui/css/themes/element/icons/encryption-status.svg new file mode 100644 index 00000000..8c81d4cd --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/encryption-status.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/platform/web/ui/css/themes/element/icons/room-members.svg b/src/platform/web/ui/css/themes/element/icons/room-members.svg new file mode 100644 index 00000000..bc03be13 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/room-members.svg @@ -0,0 +1,7 @@ + + + + + + + From f42553f8cb3d1195ddcae1c6f3918a8950e85f72 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 15:40:25 +0530 Subject: [PATCH 22/90] Add avatar size for design Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/avatar.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/platform/web/ui/css/avatar.css b/src/platform/web/ui/css/avatar.css index 6e68236f..b2405896 100644 --- a/src/platform/web/ui/css/avatar.css +++ b/src/platform/web/ui/css/avatar.css @@ -37,6 +37,7 @@ limitations under the License. } /* work around postcss-css-variables limitations and repeat variable usage */ + .hydrogen .avatar.size-128 { --avatar-size: 128px; width: var(--avatar-size); @@ -53,6 +54,14 @@ limitations under the License. font-size: calc(var(--avatar-size) * 0.6); } +.hydrogen .avatar.size-52 { + --avatar-size: 52px; + width: var(--avatar-size); + height: var(--avatar-size); + line-height: var(--avatar-size); + font-size: calc(var(--avatar-size) * 0.6); +} + .hydrogen .avatar.size-30 { --avatar-size: 30px; width: var(--avatar-size); From c96abc889205cda589f1d4afa7ffcc626ebb63f7 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 15:41:23 +0530 Subject: [PATCH 23/90] Add css to place items appropriately Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/right-panel.css | 28 ++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css index 23f140c3..76cf3091 100644 --- a/src/platform/web/ui/css/right-panel.css +++ b/src/platform/web/ui/css/right-panel.css @@ -1,8 +1,26 @@ -.RoomInfo{ +.RoomInfo { grid-area: right; - background : rgba(245, 245, 245, 0.90); - display: flex; flex-direction: column; - align-items: center; - padding:10px; +} + +.RoomAvatar { + display: flex; +} + +.RoomName h2 { + text-align: center; +} + +.SidebarRow { + justify-content: space-between; +} + +.SidebarLabel, .SidebarRow, +.RoomInfo, .RoomEncryption { + display: flex; + align-items: center; +} + +.RoomEncryption { + justify-content: center; } From b0535b5d7d501107cddd2625e1624d9f8e4f1673 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 15:43:01 +0530 Subject: [PATCH 24/90] Add styling for RoomInfoView Signed-off-by: RMidhunSuresh --- .../web/ui/css/themes/element/theme.css | 210 ++++++++++++------ 1 file changed, 148 insertions(+), 62 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index b0bf7854..eea30fc0 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -22,7 +22,6 @@ limitations under the License. font-size: 10px; } - .hydrogen { font-family: 'Inter', sans-serif, 'emoji'; background-color: white; @@ -48,14 +47,37 @@ limitations under the License. color: white; } -.hydrogen .avatar.usercolor1 { background-color: var(--usercolor1); } -.hydrogen .avatar.usercolor2 { background-color: var(--usercolor2); } -.hydrogen .avatar.usercolor3 { background-color: var(--usercolor3); } -.hydrogen .avatar.usercolor4 { background-color: var(--usercolor4); } -.hydrogen .avatar.usercolor5 { background-color: var(--usercolor5); } -.hydrogen .avatar.usercolor6 { background-color: var(--usercolor6); } -.hydrogen .avatar.usercolor7 { background-color: var(--usercolor7); } -.hydrogen .avatar.usercolor8 { background-color: var(--usercolor8); } +.hydrogen .avatar.usercolor1 { + background-color: var(--usercolor1); +} + +.hydrogen .avatar.usercolor2 { + background-color: var(--usercolor2); +} + +.hydrogen .avatar.usercolor3 { + background-color: var(--usercolor3); +} + +.hydrogen .avatar.usercolor4 { + background-color: var(--usercolor4); +} + +.hydrogen .avatar.usercolor5 { + background-color: var(--usercolor5); +} + +.hydrogen .avatar.usercolor6 { + background-color: var(--usercolor6); +} + +.hydrogen .avatar.usercolor7 { + background-color: var(--usercolor7); +} + +.hydrogen .avatar.usercolor8 { + background-color: var(--usercolor8); +} .logo { height: 48px; @@ -66,13 +88,16 @@ limitations under the License. } /** buttons */ + .button-row { display: flex; } -.button-row > * { + +.button-row>* { margin-right: 10px; } -.button-row > *:last-child { + +.button-row>*:last-child { margin-right: 0px; } @@ -107,7 +132,6 @@ a.button-action { display: block; } - .button-action.secondary { color: #03B381; } @@ -172,7 +196,8 @@ a.button-action { border-radius: 16px; height: 32px; align-items: center; - padding-left: 30px; /* 8 + 14 (icon) + 8*/ + padding-left: 30px; + /* 8 + 14 (icon) + 8*/ box-sizing: border-box; } @@ -180,6 +205,7 @@ a.button-action { border: 1px #e1e3e6 solid; background-color: white; } + .FilterField:focus-within button { border-color: white; } @@ -200,13 +226,16 @@ a.button-action { } .FilterField button { - width: 30px; /* 32 - 1 (top) - 1 (bottom) */ - height: 30px; /* 32 - 1 (top) - 1 (bottom) */ + 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: 7px solid transparent; /* 8 - 1 */ + border: 7px solid transparent; + /* 8 - 1 */ border-radius: 100%; box-sizing: border-box; } @@ -242,11 +271,11 @@ a.button-action { padding: 12px 8px 0 8px; } -.LeftPanel > :not(:first-child) { +.LeftPanel> :not(:first-child) { margin-top: 12px; } -.LeftPanel .utilities > :not(:first-child) { +.LeftPanel .utilities> :not(:first-child) { margin-left: 8px; } @@ -266,14 +295,14 @@ a.button-action { margin-right: -8px; } -.RoomList > li { +.RoomList>li { margin: 0; padding: 4px 8px 4px 0; /* vertical align */ align-items: center; } -.RoomList > li > a { +.RoomList>li>a { text-decoration: none; /* vertical align */ align-items: center; @@ -290,7 +319,7 @@ a.button-action { border-radius: 5px; } -.RoomList li > a > * { +.RoomList li>a>* { margin-right: 8px; } @@ -332,13 +361,12 @@ a { align-items: center; } - .SessionStatusView button.link { color: currentcolor; text-align: left; } -.SessionStatusView > .end { +.SessionStatusView>.end { flex: 1; display: flex; justify-content: flex-end; @@ -364,7 +392,7 @@ a { } .SessionPickerView li { - font-size: 1.2em; + font-size: 1.2em; } .SessionPickerView .session-info { @@ -383,10 +411,11 @@ a { display: flex; } -.SessionPickerView .session-actions > * { +.SessionPickerView .session-actions>* { margin-right: 10px; } -.SessionPickerView .session-actions > *:last-child { + +.SessionPickerView .session-actions>*:last-child { margin-right: 0px; } @@ -400,16 +429,16 @@ a { color: #FF4B55; } -.RoomGridView > div.container { +.RoomGridView>div.container { border-right: 1px solid rgba(245, 245, 245, 0.90); border-bottom: 1px solid rgba(245, 245, 245, 0.90); } -.RoomGridView > .focused > .room-placeholder .unfocused { +.RoomGridView>.focused>.room-placeholder .unfocused { display: none; } -.RoomGridView > :not(.focused) > .room-placeholder .focused { +.RoomGridView> :not(.focused)>.room-placeholder .focused { display: none; } @@ -417,15 +446,15 @@ a { color: #8D99A5; } - -.RoomGridView > div.focus-ring { +.RoomGridView>div.focus-ring { border: 2px solid rgba(134, 193, 165, 1); border-radius: 12px; } .middle-header { box-sizing: border-box; - flex: 0 0 56px; /* 12 + 32 + 12 to align with filter field + margin */ + flex: 0 0 56px; + /* 12 + 32 + 12 to align with filter field + margin */ background: white; padding: 0 16px; border-bottom: 1px solid rgba(245, 245, 245, 0.90); @@ -436,7 +465,7 @@ a { font-weight: 600; } -.middle-header > :not(:last-child) { +.middle-header> :not(:last-child) { /* use margin-right because the first item, .close-middle might be hidden and then we don't want a margin-left on the second item*/ @@ -465,11 +494,11 @@ a { padding: 8px 16px; } -.MessageComposer > :not(:first-child) { +.MessageComposer> :not(:first-child) { margin-left: 12px; } -.MessageComposer > input { +.MessageComposer>input { padding: 0 16px; border: none; border-radius: 24px; @@ -479,7 +508,7 @@ a { font-family: "Inter", sans-serif; } -.MessageComposer > button.send { +.MessageComposer>button.send { width: 32px; height: 32px; display: block; @@ -487,14 +516,13 @@ a { border: none; text-indent: 200%; overflow: hidden; - background-color: #03B381; background-image: url('icons/send.svg'); background-repeat: no-repeat; background-position: center; } -.MessageComposer > button.sendFile { +.MessageComposer>button.sendFile { width: 32px; height: 32px; display: block; @@ -508,7 +536,7 @@ a { background-position: center; } -.MessageComposer > button.send:disabled { +.MessageComposer>button.send:disabled { background-color: #E3E8F0; } @@ -521,7 +549,7 @@ a { } .Settings p { - max-width: 700px; + max-width: 700px; } .Settings .row .label { @@ -543,14 +571,14 @@ a { } .Settings .row .content button { - display: inline-block; - margin: 0 8px; + display: inline-block; + margin: 0 8px; } .Settings .row .content input[type=range] { - width: 100%; - max-width: 300px; - min-width: 160px; + width: 100%; + max-width: 300px; + min-width: 160px; } .Settings .row { @@ -585,25 +613,17 @@ button.link { } .lightbox { - background-color: rgba(0,0,0,0.75); + background-color: rgba(0, 0, 0, 0.75); display: grid; - grid-template: - "content close" auto - "content details" 1fr / - 1fr auto; + grid-template: "content close" auto "content details" 1fr / 1fr auto; color: white; padding: 4px; } @media (max-aspect-ratio: 1/1) { .lightbox { - grid-template: - "close" auto - "content" 1fr - "details" auto / - 1fr; + grid-template: "close" auto "content" 1fr "details" auto / 1fr; } - .lightbox .details { width: 100% !important; } @@ -627,7 +647,7 @@ button.link { display: flex; } -.lightbox .loading > :not(:first-child) { +.lightbox .loading> :not(:first-child) { margin-left: 8px; } @@ -653,7 +673,7 @@ button.link { .menu { border-radius: 8px; - box-shadow: 2px 2px 10px rgba(0,0,0,0.5); + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); padding: 4px; background-color: white; list-style: none; @@ -693,10 +713,7 @@ button.link { .InviteView_roomProfile { display: grid; gap: 4px; - grid-template: - "avatar name" auto - "avatar description" 1fr / - 72px 1fr; + grid-template: "avatar name" auto "avatar description" 1fr / 72px 1fr; align-self: center; margin-bottom: 24px; } @@ -769,3 +786,72 @@ button.link { max-width: 200px; width: 100%; } + +/* Right Panel */ + +.RoomInfo { + background: rgba(245, 245, 245, 0.90); + padding: 10px; +} + +.RoomAvatar { + margin-top: 44px; +} + +.RoomId { + color: #737D8C; + font-size: 12px; + margin-bottom: 36px; +} + +.RoomName h2 { + margin-bottom: 4px; +} + +.SidebarRow { + width: 90%; + margin-bottom: 20px; + font-weight: 500; + font-size: 15px; +} + +.SidebarLabel::before { + padding-right: 16px; + height: 20px; + width: 20px; +} + +.SidebarValue { + color: #737D8C; +} + +.MemberCount::before { + content: url("./icons/room-members.svg"); +} + +.EncryptionStatus::before { + content: url("./icons/encryption-status.svg"); +} + +/* Encryption icon next to avatar */ +.RoomEncryption { + width: 52px; + height: 52px; + border-radius: 100%; + background: #737D8C; + border: 3px solid #F2F5F8; + margin-left: -16px; +} + +.encrypted, .unencrypted { + height: 24px; + width: 24px; +} + +.encrypted { + content: url("./icons/e2ee-normal.svg"); +} + +.unencrypted { + content: url("./icons/e2ee-disabled.svg"); +} From 91f083a2458bf0779bca38620fe42a50ab287c15 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 15:58:31 +0530 Subject: [PATCH 25/90] Add close button to RoomInfoView Signed-off-by: RMidhunSuresh --- .../web/ui/session/rightpanel/RoomInfoView.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index 79753295..57190e7c 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -6,17 +6,14 @@ export class RoomInfoView extends TemplateView { render(t, vm) { const encryptionString = vm.isEncrypted ? "On" : "Off"; - return t.div({ className: "RoomInfo" }, [ + return t.div({ className: "RoomInfo" }, [ + this._createButton(), t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]), - t.div({ className: "RoomName" }, [t.h2(vm.name)]), - t.div({ className: "RoomId" }, [text(vm.roomId)]), - this._createSideBarRow("People", vm.memberCount, { MemberCount: true }), - this._createSideBarRow("Encryption", encryptionString, { EncryptionStatus: true }) ]); } @@ -34,4 +31,8 @@ export class RoomInfoView extends TemplateView { return tag.div({ className: "RoomEncryption" }, [tag.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]) } + + _createButton() { + return tag.div({ className: "buttons" }, [tag.div({ className: "close button-utility" })]); + } } From c65e26ec4c65d97aa3246ac12fd788b1a645ac7d Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 15:59:04 +0530 Subject: [PATCH 26/90] Position the close button to right end Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/right-panel.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css index 76cf3091..ab2879fc 100644 --- a/src/platform/web/ui/css/right-panel.css +++ b/src/platform/web/ui/css/right-panel.css @@ -15,12 +15,17 @@ justify-content: space-between; } -.SidebarLabel, .SidebarRow, -.RoomInfo, .RoomEncryption { +.SidebarLabel, .SidebarRow, .RoomInfo, .RoomEncryption { display: flex; align-items: center; -} +} .RoomEncryption { justify-content: center; } + +.buttons { + display: flex; + justify-content: right; + width: 100%; +} From 20a250dfc0d5c0ac893d2dbbd137d11b1041e891 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 15:59:28 +0530 Subject: [PATCH 27/90] Style close button Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index eea30fc0..954af9a2 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -834,8 +834,9 @@ button.link { } /* Encryption icon next to avatar */ + .RoomEncryption { - width: 52px; + width: 52px; height: 52px; border-radius: 100%; background: #737D8C; @@ -855,3 +856,12 @@ button.link { .unencrypted { content: url("./icons/e2ee-disabled.svg"); } + +.RoomInfo .button-utility { + width: 24px; + height: 24px; +} + +.RoomInfo .close { + background-image: url("./icons/clear.svg"); +} From 37367cde652f50ed4bb04d72ee9e8a0e2f74a6dd Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 16:11:49 +0530 Subject: [PATCH 28/90] Make close button close the view Signed-off-by: RMidhunSuresh --- src/domain/session/rightpanel/RoomInfoViewModel.js | 4 ++++ src/platform/web/ui/session/rightpanel/RoomInfoView.js | 7 ++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js index a2b7eaf4..c74ae826 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -39,4 +39,8 @@ export class RoomInfoViewModel extends ViewModel { get avatarTitle() { return this.name; } + + get closeLink() { + return this.urlCreator.urlUntilSegment("room"); + } } diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index 57190e7c..04520602 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -8,7 +8,7 @@ export class RoomInfoView extends TemplateView { const encryptionString = vm.isEncrypted ? "On" : "Off"; return t.div({ className: "RoomInfo" }, [ - this._createButton(), + this._createButton(vm), t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]), t.div({ className: "RoomName" }, [t.h2(vm.name)]), @@ -32,7 +32,8 @@ export class RoomInfoView extends TemplateView { [tag.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]) } - _createButton() { - return tag.div({ className: "buttons" }, [tag.div({ className: "close button-utility" })]); + _createButton(vm) { + return tag.div({ className: "buttons" }, + [tag.a({ className: "close button-utility", href: vm.closeLink })]); } } From ecd5505af9c5cfd24dfbfe8f71dfd51e62e30c3d Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 16:40:21 +0530 Subject: [PATCH 29/90] Bring in info icon Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/icons/info.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/platform/web/ui/css/themes/element/icons/info.svg diff --git a/src/platform/web/ui/css/themes/element/icons/info.svg b/src/platform/web/ui/css/themes/element/icons/info.svg new file mode 100644 index 00000000..d55e9356 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/info.svg @@ -0,0 +1,3 @@ + + + From 4edc58ebcf2c65a1c93bab361f866813a0912bcf Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 16:40:50 +0530 Subject: [PATCH 30/90] Add button in Room header to open details Signed-off-by: RMidhunSuresh --- src/domain/session/room/RoomViewModel.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index d2d46c32..20ba8034 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -104,6 +104,10 @@ export class RoomViewModel extends ViewModel { get timelineViewModel() { return this._timelineVM; } get isEncrypted() { return this._room.isEncrypted; } + get roomDetailsLink() { + return this.urlCreator.urlForSegment("details"); + } + get error() { if (this._timelineError) { return `Something went wrong loading the timeline: ${this._timelineError.message}`; @@ -383,4 +387,4 @@ class ArchivedViewModel extends ViewModel { get kind() { return "archived"; } -} \ No newline at end of file +} From b5480b018b0c07eaa7e38f66d56bf68fd995e398 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 16:41:10 +0530 Subject: [PATCH 31/90] Style open button Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 954af9a2..8264963f 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -485,6 +485,10 @@ a { background-image: url("./icons/vertical-ellipsis.svg"); } +.RoomHeader .room-info { + background-image: url("./icons/info.svg"); +} + .RoomView_error { color: red; } From 9ac415fa4f288da11aa1da5418910d33332d90de Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 17:59:50 +0530 Subject: [PATCH 32/90] Show panel when first visit contains /details Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 77c63d6c..a570e14f 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -82,6 +82,7 @@ export class SessionViewModel extends ViewModel { const details = this.navigation.observe("details"); this.track(details.subscribe(() => this._toggleRoomInformationPanel())); + this._toggleRoomInformationPanel(); } From eab6ca3baf808a03552b7cca600228ef838766e9 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 22:23:09 +0530 Subject: [PATCH 33/90] Make side-bar responsive Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/layout.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css index 1eba5270..71274a31 100644 --- a/src/platform/web/ui/css/layout.css +++ b/src/platform/web/ui/css/layout.css @@ -72,7 +72,7 @@ the layout viewport up without resizing it when the keyboard shows */ .middle .close-middle { display: none; } /* mobile layout */ @media screen and (max-width: 800px) { - .SessionView:not(.middle-shown) { + .SessionView:not(.middle-shown, .SideBarActive) { grid-template: "status" auto "left" 1fr / @@ -86,8 +86,17 @@ the layout viewport up without resizing it when the keyboard shows */ 1fr; } + .SessionView.SideBarActive{ + grid-template: + "status" auto + "right" 1fr / + 1fr; + + } + .SessionView:not(.middle-shown) .room-placeholder { display: none; } .SessionView.middle-shown .LeftPanel { display: none; } + .SessionView.SideBarActive .middle { display: none; } /* show back button */ .middle .close-middle { display: block !important; } From d782c9e0bb92af68398283775600bf85124bebce Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 26 May 2021 22:50:27 +0530 Subject: [PATCH 34/90] Justify content to flex-end instead Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/right-panel.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css index ab2879fc..19b45596 100644 --- a/src/platform/web/ui/css/right-panel.css +++ b/src/platform/web/ui/css/right-panel.css @@ -26,6 +26,6 @@ .buttons { display: flex; - justify-content: right; + justify-content: flex-end; width: 100%; } From 2dcec6343d0cc6d6de8496c623b0ed25a2acb82e Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 27 May 2021 23:57:28 +0530 Subject: [PATCH 35/90] Info icon should open/close view alternatively Signed-off-by: RMidhunSuresh --- src/domain/session/room/RoomViewModel.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index 20ba8034..00008039 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -287,6 +287,13 @@ export class RoomViewModel extends ViewModel { console.error(err.stack); } } + + toggleDetailsPanel() { + const isPanelOpen = !!this.navigation.path.get("details"); + const link = isPanelOpen ? this.urlCreator.urlUntilSegment("room"): + this.urlCreator.urlForSegment("details"); + window.location.href = link; + } get composerViewModel() { return this._composerVM; From 02d79b52a4ad77738606da51f0d85bc6e1cc4690 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 28 May 2021 12:58:46 +0530 Subject: [PATCH 36/90] Prefer canonical alias over room_id if available Signed-off-by: RMidhunSuresh --- src/domain/session/rightpanel/RoomInfoViewModel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js index c74ae826..dd74e110 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -9,7 +9,7 @@ export class RoomInfoViewModel extends ViewModel { } get roomId() { - return this._room.id; + return this._roomSummary.canonicalAlias || this._room.id; } get name() { From 426d0779ee68677679783b3e4f3aef9a5628c3d9 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 31 May 2021 22:14:43 +0530 Subject: [PATCH 37/90] Keep RoomInfoView open across room/grid changes Signed-off-by: RMidhunSuresh --- src/domain/navigation/index.js | 3 +++ src/domain/session/RoomGridViewModel.js | 16 ++++++++++------ src/domain/session/SessionViewModel.js | 3 +-- .../session/leftpanel/LeftPanelViewModel.js | 3 +++ 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/domain/navigation/index.js b/src/domain/navigation/index.js index 2dab6f0c..5e1a1b62 100644 --- a/src/domain/navigation/index.js +++ b/src/domain/navigation/index.js @@ -113,6 +113,9 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) { segments.push(roomsSegmentWithRoom(rooms, roomId, currentNavPath)); } segments.push(new Segment("room", roomId)); + if (currentNavPath.get("details")?.value) { + segments.push(new Segment("details")); + } } else if (type === "last-session") { let sessionSegment = currentNavPath.get("session"); if (typeof sessionSegment?.value !== "string" && defaultSessionId) { diff --git a/src/domain/session/RoomGridViewModel.js b/src/domain/session/RoomGridViewModel.js index aee80b6a..8fce26ad 100644 --- a/src/domain/session/RoomGridViewModel.js +++ b/src/domain/session/RoomGridViewModel.js @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {ViewModel} from "../ViewModel.js"; +import { ViewModel } from "../ViewModel.js"; function dedupeSparse(roomIds) { return roomIds.map((id, idx) => { @@ -84,7 +84,11 @@ export class RoomGridViewModel extends ViewModel { } const vmo = this._viewModelsObservables[index]; if (vmo) { + const detailsShown = !!this.navigation.path.get("details"); this.navigation.push("room", vmo.id); + if (detailsShown) { + this.navigation.push("details", true); + } } else { this.navigation.push("empty-grid-tile", index); } @@ -146,7 +150,7 @@ export class RoomGridViewModel extends ViewModel { this.emitChange(); viewModel?.focus(); } - + /** called from SessionViewModel */ releaseRoomViewModel(roomId) { const index = this._viewModelsObservables.findIndex(vmo => vmo && vmo.id === roomId); @@ -177,10 +181,10 @@ export class RoomGridViewModel extends ViewModel { } } -import {createNavigation} from "../navigation/index.js"; -import {ObservableValue} from "../../observable/ObservableValue.js"; +import { createNavigation } from "../navigation/index.js"; +import { ObservableValue } from "../../observable/ObservableValue.js"; -export function tests() { +export function tests() { class RoomVMMock { constructor(id) { this.id = id; @@ -196,7 +200,7 @@ export function tests() { } class RoomViewModelObservableMock extends ObservableValue { - async initialize() {} + async initialize() { } dispose() { this.get()?.dispose(); } get id() { return this.get()?.id; } } diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index a570e14f..1ad5d50e 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -63,6 +63,7 @@ export class SessionViewModel extends ViewModel { if (!this._gridViewModel) { this._updateRoom(roomId); } + this._toggleRoomInformationPanel(); })); if (!this._gridViewModel) { this._updateRoom(currentRoomId.get()); @@ -125,8 +126,6 @@ export class SessionViewModel extends ViewModel { _updateGrid(roomIds) { const changed = !(this._gridViewModel && roomIds); const currentRoomId = this.navigation.path.get("room"); - // Close right-panel if needed - this._toggleRoomInformationPanel(); if (roomIds) { if (!this._gridViewModel) { this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({ diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js index 6503c124..96becf2a 100644 --- a/src/domain/session/leftpanel/LeftPanelViewModel.js +++ b/src/domain/session/leftpanel/LeftPanelViewModel.js @@ -93,11 +93,13 @@ export class LeftPanelViewModel extends ViewModel { } toggleGrid() { + const details = this.navigation.path.get("details"); if (this.gridEnabled) { let path = this.navigation.path.until("session"); const room = this.navigation.path.get("room"); if (room) { path = path.with(room); + path = path.with(details); } this.navigation.applyPath(path); } else { @@ -106,6 +108,7 @@ export class LeftPanelViewModel extends ViewModel { if (room) { path = path.with(this.navigation.segment("rooms", [room.value])); path = path.with(room); + path = path.with(details); } else { path = path.with(this.navigation.segment("rooms", [])); path = path.with(this.navigation.segment("empty-grid-tile", 0)); From 1e96b58f85b39cb2a4cc2c4b75d86eb393d741a5 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 31 May 2021 22:53:00 +0530 Subject: [PATCH 38/90] Add link support to menu Signed-off-by: RMidhunSuresh --- src/platform/web/ui/general/Menu.js | 35 +++++++++++++++++--- src/platform/web/ui/session/room/RoomView.js | 6 ++-- 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/src/platform/web/ui/general/Menu.js b/src/platform/web/ui/general/Menu.js index 2fed5e2d..62849908 100644 --- a/src/platform/web/ui/general/Menu.js +++ b/src/platform/web/ui/general/Menu.js @@ -15,10 +15,19 @@ limitations under the License. */ import {TemplateView} from "./TemplateView.js"; +import { tag } from "./html.js"; export class Menu extends TemplateView { - static option(label, callback) { - return new MenuOption(label, callback); + static optionWithButton(label, callback) { + const option = new MenuOption(label); + option.setCallback(callback); + return option; + } + + static optionWithLink(label, link) { + const option = new MenuOption(label); + option.setLink(link); + return option; } constructor(options) { @@ -26,6 +35,15 @@ export class Menu extends TemplateView { this._options = options; } + _convertToDOM(option) { + if (option.callback) { + return tag.button({ onClick: option.callback }, option.label); + } + else if (option.link) { + return tag.a({ href: option.link }, option.label); + } + } + render(t) { return t.ul({className: "menu", role: "menu"}, this._options.map(o => { const className = { @@ -37,19 +55,26 @@ export class Menu extends TemplateView { } return t.li({ className, - }, t.button({onClick: o.callback}, o.label)); + }, this._convertToDOM(o)); })); } } class MenuOption { - constructor(label, callback) { + constructor(label) { this.label = label; - this.callback = callback; this.icon = null; this.destructive = false; } + setCallback(callback) { + this.callback = callback; + } + + setLink(link) { + this.link = link; + } + setIcon(className) { this.icon = className; return this; diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js index 40d7d3c4..dc8335e0 100644 --- a/src/platform/web/ui/session/room/RoomView.js +++ b/src/platform/web/ui/session/room/RoomView.js @@ -69,13 +69,13 @@ export class RoomView extends TemplateView { const vm = this.value; const options = []; if (vm.canLeave) { - options.push(Menu.option(vm.i18n`Leave room`, () => vm.leaveRoom()).setDestructive()); + options.push(Menu.optionWithButton(vm.i18n`Leave room`, () => vm.leaveRoom()).setDestructive()); } if (vm.canForget) { - options.push(Menu.option(vm.i18n`Forget room`, () => vm.forgetRoom()).setDestructive()); + options.push(Menu.optionWithButton(vm.i18n`Forget room`, () => vm.forgetRoom()).setDestructive()); } if (vm.canRejoin) { - options.push(Menu.option(vm.i18n`Rejoin room`, () => vm.rejoinRoom())); + options.push(Menu.optionWithButton(vm.i18n`Rejoin room`, () => vm.rejoinRoom())); } if (!options.length) { return; From 00dbd3db060eb57bbcdd35ede7888984da82455b Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 31 May 2021 22:54:52 +0530 Subject: [PATCH 39/90] Add menu entry to launch RoomInfoView Signed-off-by: RMidhunSuresh --- src/domain/session/room/RoomViewModel.js | 9 +++------ src/platform/web/ui/session/room/RoomView.js | 1 + 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index 00008039..a0028674 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -288,13 +288,10 @@ export class RoomViewModel extends ViewModel { } } - toggleDetailsPanel() { - const isPanelOpen = !!this.navigation.path.get("details"); - const link = isPanelOpen ? this.urlCreator.urlUntilSegment("room"): - this.urlCreator.urlForSegment("details"); - window.location.href = link; + get detailsLink() { + return this.urlCreator.urlForSegment("details"); } - + get composerViewModel() { return this._composerVM; } diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js index dc8335e0..3b775c82 100644 --- a/src/platform/web/ui/session/room/RoomView.js +++ b/src/platform/web/ui/session/room/RoomView.js @@ -77,6 +77,7 @@ export class RoomView extends TemplateView { if (vm.canRejoin) { options.push(Menu.optionWithButton(vm.i18n`Rejoin room`, () => vm.rejoinRoom())); } + options.push(Menu.optionWithLink(vm.i18n`Room Details`, vm.detailsLink)) if (!options.length) { return; } From 040c744b6a69d5c9bdf0265587df2b8485ad0a03 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 1 Jun 2021 16:55:10 +0530 Subject: [PATCH 40/90] Style links and buttons similarly in menu Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/layout.css | 5 +++++ src/platform/web/ui/css/themes/element/theme.css | 9 ++++++--- src/platform/web/ui/general/Menu.js | 4 ++-- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css index 71274a31..802ae329 100644 --- a/src/platform/web/ui/css/layout.css +++ b/src/platform/web/ui/css/layout.css @@ -195,6 +195,11 @@ the layout viewport up without resizing it when the keyboard shows */ z-index: 2; } +.menu .menu-item{ + box-sizing: border-box; + width: 100%; +} + .Settings { display: flex; flex-direction: column; diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 8264963f..b972021a 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -684,14 +684,17 @@ button.link { margin: 0; } -.menu button { +.menu li{ + margin-bottom: 10px; +} + +.menu .menu-item{ border-radius: 4px; - display: block; border: none; - width: 100%; background-color: transparent; text-align: left; padding: 8px 32px 8px 8px; + text-decoration: none; } .menu .destructive button { diff --git a/src/platform/web/ui/general/Menu.js b/src/platform/web/ui/general/Menu.js index 62849908..d7e1ce09 100644 --- a/src/platform/web/ui/general/Menu.js +++ b/src/platform/web/ui/general/Menu.js @@ -37,10 +37,10 @@ export class Menu extends TemplateView { _convertToDOM(option) { if (option.callback) { - return tag.button({ onClick: option.callback }, option.label); + return tag.button({ className: "menu-item", onClick: option.callback }, option.label); } else if (option.link) { - return tag.a({ href: option.link }, option.label); + return tag.a({ className: "menu-item", href: option.link }, option.label); } } From f1fe17fe652f0084de134fc502bb0e431a6c6ea1 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 1 Jun 2021 20:46:59 +0530 Subject: [PATCH 41/90] Make font-size equal to that of room-header Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index b972021a..d4aa695a 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -813,6 +813,7 @@ button.link { .RoomName h2 { margin-bottom: 4px; + font-size: 1.8rem; } .SidebarRow { From d3d65d89baac2ca3ff44905731c9ce48b52bfe52 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 1 Jun 2021 21:06:22 +0530 Subject: [PATCH 42/90] Put sidebar rows into container Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 6 +++++- src/platform/web/ui/session/rightpanel/RoomInfoView.js | 7 +++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index d4aa695a..7a536b53 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -808,7 +808,11 @@ button.link { .RoomId { color: #737D8C; font-size: 12px; - margin-bottom: 36px; +} + +.SidebarRow_collection{ + margin-top: 36px; + width: 100%; } .RoomName h2 { diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index 04520602..27d97693 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -13,8 +13,11 @@ export class RoomInfoView extends TemplateView { [t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]), t.div({ className: "RoomName" }, [t.h2(vm.name)]), t.div({ className: "RoomId" }, [text(vm.roomId)]), - this._createSideBarRow("People", vm.memberCount, { MemberCount: true }), - this._createSideBarRow("Encryption", encryptionString, { EncryptionStatus: true }) + t.div({ className: "SidebarRow_collection" }, + [ + this._createSideBarRow("People", vm.memberCount, { MemberCount: true }), + this._createSideBarRow("Encryption", encryptionString, { EncryptionStatus: true }) + ]) ]); } From 32736821554ceab31cdc401bc1b63e88b9335a11 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 1 Jun 2021 21:08:07 +0530 Subject: [PATCH 43/90] Do not show room id instead of canonical alias Signed-off-by: RMidhunSuresh --- src/domain/session/rightpanel/RoomInfoViewModel.js | 6 +++++- src/platform/web/ui/session/rightpanel/RoomInfoView.js | 7 ++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js index dd74e110..7170a803 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -9,7 +9,11 @@ export class RoomInfoViewModel extends ViewModel { } get roomId() { - return this._roomSummary.canonicalAlias || this._room.id; + return this._room.id; + } + + get canonicalAlias() { + return this._roomSummary.canonicalAlias; } get name() { diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index 27d97693..c54cc978 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -12,7 +12,7 @@ export class RoomInfoView extends TemplateView { t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]), t.div({ className: "RoomName" }, [t.h2(vm.name)]), - t.div({ className: "RoomId" }, [text(vm.roomId)]), + this._createRoomAliasDisplay(vm), t.div({ className: "SidebarRow_collection" }, [ this._createSideBarRow("People", vm.memberCount, { MemberCount: true }), @@ -21,6 +21,11 @@ export class RoomInfoView extends TemplateView { ]); } + _createRoomAliasDisplay(vm) { + return vm.canonicalAlias ? tag.div({ className: "RoomId" }, [text(vm.canonicalAlias)]) : + ""; + } + _createSideBarRow(label, value, labelClass, valueClass) { const labelClassString = classNames({ SidebarLabel: true, ...labelClass }); const valueClassString = classNames({ SidebarValue: true, ...valueClass }); From 8d254c91e3c7859c5c026816d33b9c78140c02e3 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Jun 2021 21:03:02 +0530 Subject: [PATCH 44/90] Undo formatting/stylistic changes Signed-off-by: RMidhunSuresh --- src/domain/session/RoomGridViewModel.js | 10 +- src/domain/session/SessionViewModel.js | 4 +- .../session/rightpanel/RoomInfoViewModel.js | 4 +- .../web/ui/css/themes/element/theme.css | 130 ++++++++---------- 4 files changed, 65 insertions(+), 83 deletions(-) diff --git a/src/domain/session/RoomGridViewModel.js b/src/domain/session/RoomGridViewModel.js index 8fce26ad..8610f197 100644 --- a/src/domain/session/RoomGridViewModel.js +++ b/src/domain/session/RoomGridViewModel.js @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { ViewModel } from "../ViewModel.js"; +import {ViewModel} from "../ViewModel.js"; function dedupeSparse(roomIds) { return roomIds.map((id, idx) => { @@ -181,10 +181,10 @@ export class RoomGridViewModel extends ViewModel { } } -import { createNavigation } from "../navigation/index.js"; -import { ObservableValue } from "../../observable/ObservableValue.js"; +import {createNavigation} from "../navigation/index.js"; +import {ObservableValue} from "../../observable/ObservableValue.js"; -export function tests() { +export function tests() { class RoomVMMock { constructor(id) { this.id = id; @@ -200,7 +200,7 @@ export function tests() { } class RoomViewModelObservableMock extends ObservableValue { - async initialize() { } + async initialize() {} dispose() { this.get()?.dispose(); } get id() { return this.get()?.id; } } diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 1ad5d50e..2c0d65bf 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -16,8 +16,8 @@ limitations under the License. */ import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js"; -import { RoomViewModel } from "./room/RoomViewModel.js"; -import { RoomInfoViewModel } from "./rightpanel/RoomInfoViewModel.js"; +import {RoomViewModel} from "./room/RoomViewModel.js"; +import {RoomInfoViewModel} from "./rightpanel/RoomInfoViewModel.js"; import {UnknownRoomViewModel} from "./room/UnknownRoomViewModel.js"; import {InviteViewModel} from "./room/InviteViewModel.js"; import {LightboxViewModel} from "./room/LightboxViewModel.js"; diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js index 7170a803..0765c293 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -1,5 +1,5 @@ -import { ViewModel } from "../../ViewModel.js"; -import { avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl } from "../../avatar.js"; +import {ViewModel} from "../../ViewModel.js"; +import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js"; export class RoomInfoViewModel extends ViewModel { constructor(options) { diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 7a536b53..dd2ae1c4 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -47,37 +47,14 @@ limitations under the License. color: white; } -.hydrogen .avatar.usercolor1 { - background-color: var(--usercolor1); -} - -.hydrogen .avatar.usercolor2 { - background-color: var(--usercolor2); -} - -.hydrogen .avatar.usercolor3 { - background-color: var(--usercolor3); -} - -.hydrogen .avatar.usercolor4 { - background-color: var(--usercolor4); -} - -.hydrogen .avatar.usercolor5 { - background-color: var(--usercolor5); -} - -.hydrogen .avatar.usercolor6 { - background-color: var(--usercolor6); -} - -.hydrogen .avatar.usercolor7 { - background-color: var(--usercolor7); -} - -.hydrogen .avatar.usercolor8 { - background-color: var(--usercolor8); -} +.hydrogen .avatar.usercolor1 { background-color: var(--usercolor1); } +.hydrogen .avatar.usercolor2 { background-color: var(--usercolor2); } +.hydrogen .avatar.usercolor3 { background-color: var(--usercolor3); } +.hydrogen .avatar.usercolor4 { background-color: var(--usercolor4); } +.hydrogen .avatar.usercolor5 { background-color: var(--usercolor5); } +.hydrogen .avatar.usercolor6 { background-color: var(--usercolor6); } +.hydrogen .avatar.usercolor7 { background-color: var(--usercolor7); } +.hydrogen .avatar.usercolor8 { background-color: var(--usercolor8); } .logo { height: 48px; @@ -93,11 +70,11 @@ limitations under the License. display: flex; } -.button-row>* { +.button-row > * { margin-right: 10px; } -.button-row>*:last-child { +.button-row > *:last-child { margin-right: 0px; } @@ -196,8 +173,7 @@ a.button-action { border-radius: 16px; height: 32px; align-items: center; - padding-left: 30px; - /* 8 + 14 (icon) + 8*/ + padding-left: 30px; /* 8 + 14 (icon) + 8*/ box-sizing: border-box; } @@ -226,16 +202,13 @@ a.button-action { } .FilterField button { - width: 30px; - /* 32 - 1 (top) - 1 (bottom) */ - height: 30px; - /* 32 - 1 (top) - 1 (bottom) */ + 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: 7px solid transparent; - /* 8 - 1 */ + border: 7px solid transparent; /* 8 - 1 */ border-radius: 100%; box-sizing: border-box; } @@ -271,11 +244,11 @@ a.button-action { padding: 12px 8px 0 8px; } -.LeftPanel> :not(:first-child) { +.LeftPanel > :not(:first-child) { margin-top: 12px; } -.LeftPanel .utilities> :not(:first-child) { +.LeftPanel .utilities > :not(:first-child) { margin-left: 8px; } @@ -295,14 +268,14 @@ a.button-action { margin-right: -8px; } -.RoomList>li { +.RoomList > li { margin: 0; padding: 4px 8px 4px 0; /* vertical align */ align-items: center; } -.RoomList>li>a { +.RoomList > li > a { text-decoration: none; /* vertical align */ align-items: center; @@ -319,7 +292,7 @@ a.button-action { border-radius: 5px; } -.RoomList li>a>* { +.RoomList li > a > * { margin-right: 8px; } @@ -366,7 +339,7 @@ a { text-align: left; } -.SessionStatusView>.end { +.SessionStatusView > .end { flex: 1; display: flex; justify-content: flex-end; @@ -392,7 +365,7 @@ a { } .SessionPickerView li { - font-size: 1.2em; + font-size: 1.2em; } .SessionPickerView .session-info { @@ -411,11 +384,11 @@ a { display: flex; } -.SessionPickerView .session-actions>* { +.SessionPickerView .session-actions > * { margin-right: 10px; } -.SessionPickerView .session-actions>*:last-child { +.SessionPickerView .session-actions > *:last-child { margin-right: 0px; } @@ -429,16 +402,16 @@ a { color: #FF4B55; } -.RoomGridView>div.container { +.RoomGridView > div.container { border-right: 1px solid rgba(245, 245, 245, 0.90); border-bottom: 1px solid rgba(245, 245, 245, 0.90); } -.RoomGridView>.focused>.room-placeholder .unfocused { +.RoomGridView > .focused > .room-placeholder .unfocused { display: none; } -.RoomGridView> :not(.focused)>.room-placeholder .focused { +.RoomGridView > :not(.focused) > .room-placeholder .focused { display: none; } @@ -446,15 +419,14 @@ a { color: #8D99A5; } -.RoomGridView>div.focus-ring { +.RoomGridView > div.focus-ring { border: 2px solid rgba(134, 193, 165, 1); border-radius: 12px; } .middle-header { box-sizing: border-box; - flex: 0 0 56px; - /* 12 + 32 + 12 to align with filter field + margin */ + flex: 0 0 56px; /* 12 + 32 + 12 to align with filter field + margin */ background: white; padding: 0 16px; border-bottom: 1px solid rgba(245, 245, 245, 0.90); @@ -465,7 +437,7 @@ a { font-weight: 600; } -.middle-header> :not(:last-child) { +.middle-header > :not(:last-child) { /* use margin-right because the first item, .close-middle might be hidden and then we don't want a margin-left on the second item*/ @@ -498,11 +470,11 @@ a { padding: 8px 16px; } -.MessageComposer> :not(:first-child) { +.MessageComposer > :not(:first-child) { margin-left: 12px; } -.MessageComposer>input { +.MessageComposer > input { padding: 0 16px; border: none; border-radius: 24px; @@ -512,7 +484,7 @@ a { font-family: "Inter", sans-serif; } -.MessageComposer>button.send { +.MessageComposer > button.send { width: 32px; height: 32px; display: block; @@ -526,7 +498,7 @@ a { background-position: center; } -.MessageComposer>button.sendFile { +.MessageComposer > button.sendFile { width: 32px; height: 32px; display: block; @@ -540,7 +512,7 @@ a { background-position: center; } -.MessageComposer>button.send:disabled { +.MessageComposer > button.send:disabled { background-color: #E3E8F0; } @@ -553,7 +525,7 @@ a { } .Settings p { - max-width: 700px; + max-width: 700px; } .Settings .row .label { @@ -575,14 +547,14 @@ a { } .Settings .row .content button { - display: inline-block; - margin: 0 8px; + display: inline-block; + margin: 0 8px; } .Settings .row .content input[type=range] { - width: 100%; - max-width: 300px; - min-width: 160px; + width: 100%; + max-width: 300px; + min-width: 160px; } .Settings .row { @@ -617,16 +589,23 @@ button.link { } .lightbox { - background-color: rgba(0, 0, 0, 0.75); + background-color: rgba(0,0,0,0.75); display: grid; - grid-template: "content close" auto "content details" 1fr / 1fr auto; + grid-template: + "content close" auto + "content details" 1fr / + 1fr auto; color: white; padding: 4px; } @media (max-aspect-ratio: 1/1) { .lightbox { - grid-template: "close" auto "content" 1fr "details" auto / 1fr; + grid-template: + "close" auto + "content" 1fr + "details" auto / + 1fr; } .lightbox .details { width: 100% !important; @@ -651,7 +630,7 @@ button.link { display: flex; } -.lightbox .loading> :not(:first-child) { +.lightbox .loading > :not(:first-child) { margin-left: 8px; } @@ -677,7 +656,7 @@ button.link { .menu { border-radius: 8px; - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); + box-shadow: 2px 2px 10px rgba(0,0,0,0.5); padding: 4px; background-color: white; list-style: none; @@ -720,7 +699,10 @@ button.link { .InviteView_roomProfile { display: grid; gap: 4px; - grid-template: "avatar name" auto "avatar description" 1fr / 72px 1fr; + grid-template: + "avatar name" auto + "avatar description" 1fr / + 72px 1fr; align-self: center; margin-bottom: 24px; } From a3271fb9166f84a7ef0bf4c0684212e6830c795a Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Jun 2021 21:03:45 +0530 Subject: [PATCH 45/90] Fix Menu: Use t instead of tag to get events - Also move constructor up Signed-off-by: RMidhunSuresh --- src/platform/web/ui/general/Menu.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/platform/web/ui/general/Menu.js b/src/platform/web/ui/general/Menu.js index d7e1ce09..8a57a7fc 100644 --- a/src/platform/web/ui/general/Menu.js +++ b/src/platform/web/ui/general/Menu.js @@ -15,9 +15,14 @@ limitations under the License. */ import {TemplateView} from "./TemplateView.js"; -import { tag } from "./html.js"; export class Menu extends TemplateView { + + constructor(options) { + super(); + this._options = options; + } + static optionWithButton(label, callback) { const option = new MenuOption(label); option.setCallback(callback); @@ -30,17 +35,12 @@ export class Menu extends TemplateView { return option; } - constructor(options) { - super(); - this._options = options; - } - - _convertToDOM(option) { + _convertToDOM(t, option) { if (option.callback) { - return tag.button({ className: "menu-item", onClick: option.callback }, option.label); + return t.button({ className: "menu-item", onClick: option.callback }, option.label); } else if (option.link) { - return tag.a({ className: "menu-item", href: option.link }, option.label); + return t.a({ className: "menu-item", href: option.link }, option.label); } } @@ -55,7 +55,7 @@ export class Menu extends TemplateView { } return t.li({ className, - }, this._convertToDOM(o)); + }, this._convertToDOM(t, o)); })); } } From 98ef6f432183ffbdc263339909b4d11a851cb9b5 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Jun 2021 21:05:54 +0530 Subject: [PATCH 46/90] Use optionWithButton Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/room/timeline/BaseMessageView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js index 60b39048..4ecde2ba 100644 --- a/src/platform/web/ui/session/room/timeline/BaseMessageView.js +++ b/src/platform/web/ui/session/room/timeline/BaseMessageView.js @@ -93,9 +93,9 @@ export class BaseMessageView extends TemplateView { createMenuOptions(vm) { const options = []; if (vm.canAbortSending) { - options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending())); + options.push(Menu.optionWithButton(vm.i18n`Cancel`, () => vm.abortSending())); } else if (vm.canRedact) { - options.push(Menu.option(vm.i18n`Delete`, () => vm.redact()).setDestructive()); + options.push(Menu.optionWithButton(vm.i18n`Delete`, () => vm.redact()).setDestructive()); } return options; } From 65bd74442f598a4770611584b94b9907485f6963 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Jun 2021 22:34:13 +0530 Subject: [PATCH 47/90] Make menu-items uniform - Same font ,font-size and height. Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index dd2ae1c4..6d747e96 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -674,6 +674,10 @@ button.link { text-align: left; padding: 8px 32px 8px 8px; text-decoration: none; + font-size: 1.6rem; + height: 24px; + display: block; + cursor: pointer; } .menu .destructive button { From 9074caf443589dd99fca0a657db236f18c1d0b18 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Jun 2021 22:39:11 +0530 Subject: [PATCH 48/90] Change Room Details --> Room details Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/room/RoomView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js index 3b775c82..7ecf73b1 100644 --- a/src/platform/web/ui/session/room/RoomView.js +++ b/src/platform/web/ui/session/room/RoomView.js @@ -77,7 +77,7 @@ export class RoomView extends TemplateView { if (vm.canRejoin) { options.push(Menu.optionWithButton(vm.i18n`Rejoin room`, () => vm.rejoinRoom())); } - options.push(Menu.optionWithLink(vm.i18n`Room Details`, vm.detailsLink)) + options.push(Menu.optionWithLink(vm.i18n`Room details`, vm.detailsLink)) if (!options.length) { return; } From 986f04aac022fa0c27fdf3c310e3ff25fa9466a9 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Jun 2021 22:42:23 +0530 Subject: [PATCH 49/90] Move Room details menu entry to top Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/room/RoomView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js index 7ecf73b1..c08d4b72 100644 --- a/src/platform/web/ui/session/room/RoomView.js +++ b/src/platform/web/ui/session/room/RoomView.js @@ -68,6 +68,7 @@ export class RoomView extends TemplateView { } else { const vm = this.value; const options = []; + options.push(Menu.optionWithLink(vm.i18n`Room details`, vm.detailsLink)) if (vm.canLeave) { options.push(Menu.optionWithButton(vm.i18n`Leave room`, () => vm.leaveRoom()).setDestructive()); } @@ -77,7 +78,6 @@ export class RoomView extends TemplateView { if (vm.canRejoin) { options.push(Menu.optionWithButton(vm.i18n`Rejoin room`, () => vm.rejoinRoom())); } - options.push(Menu.optionWithLink(vm.i18n`Room details`, vm.detailsLink)) if (!options.length) { return; } From a3587a80c6fa0fa2ba79b5efd39d055076bb370b Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Jun 2021 22:56:49 +0530 Subject: [PATCH 50/90] Use internationalization for user facing strings Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/rightpanel/RoomInfoView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index c54cc978..1e047401 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -5,7 +5,7 @@ import { AvatarView } from "../../avatar.js"; export class RoomInfoView extends TemplateView { render(t, vm) { - const encryptionString = vm.isEncrypted ? "On" : "Off"; + const encryptionString = vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`; return t.div({ className: "RoomInfo" }, [ this._createButton(vm), @@ -15,8 +15,8 @@ export class RoomInfoView extends TemplateView { this._createRoomAliasDisplay(vm), t.div({ className: "SidebarRow_collection" }, [ - this._createSideBarRow("People", vm.memberCount, { MemberCount: true }), - this._createSideBarRow("Encryption", encryptionString, { EncryptionStatus: true }) + this._createSideBarRow(vm.i18n`People`, vm.memberCount, { MemberCount: true }), + this._createSideBarRow(vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true }) ]) ]); } From 04933acbfbff32767389f5844d7c3f3be356af32 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Jun 2021 23:14:17 +0530 Subject: [PATCH 51/90] Add missing checks Signed-off-by: RMidhunSuresh --- src/domain/session/leftpanel/LeftPanelViewModel.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js index 96becf2a..eee53512 100644 --- a/src/domain/session/leftpanel/LeftPanelViewModel.js +++ b/src/domain/session/leftpanel/LeftPanelViewModel.js @@ -99,7 +99,9 @@ export class LeftPanelViewModel extends ViewModel { const room = this.navigation.path.get("room"); if (room) { path = path.with(room); - path = path.with(details); + if (details) { + path = path.with(details); + } } this.navigation.applyPath(path); } else { @@ -108,7 +110,9 @@ export class LeftPanelViewModel extends ViewModel { if (room) { path = path.with(this.navigation.segment("rooms", [room.value])); path = path.with(room); - path = path.with(details); + if (details) { + path = path.with(details); + } } else { path = path.with(this.navigation.segment("rooms", [])); path = path.with(this.navigation.segment("empty-grid-tile", 0)); From 7f922afe790bcacb9e95fed3b532deb51eeb901b Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 3 Jun 2021 23:18:45 +0530 Subject: [PATCH 52/90] Reduce duplication in code Signed-off-by: RMidhunSuresh --- src/domain/session/leftpanel/LeftPanelViewModel.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js index eee53512..c1696d26 100644 --- a/src/domain/session/leftpanel/LeftPanelViewModel.js +++ b/src/domain/session/leftpanel/LeftPanelViewModel.js @@ -93,20 +93,17 @@ export class LeftPanelViewModel extends ViewModel { } toggleGrid() { + const room = this.navigation.path.get("room"); const details = this.navigation.path.get("details"); + let path = this.navigation.path.until("session"); if (this.gridEnabled) { - let path = this.navigation.path.until("session"); - const room = this.navigation.path.get("room"); if (room) { path = path.with(room); if (details) { path = path.with(details); } } - this.navigation.applyPath(path); } else { - let path = this.navigation.path.until("session"); - const room = this.navigation.path.get("room"); if (room) { path = path.with(this.navigation.segment("rooms", [room.value])); path = path.with(room); @@ -117,8 +114,8 @@ export class LeftPanelViewModel extends ViewModel { path = path.with(this.navigation.segment("rooms", [])); path = path.with(this.navigation.segment("empty-grid-tile", 0)); } - this.navigation.applyPath(path); } + this.navigation.applyPath(path); } get tileViewModels() { From a4bcb21a85afcfbc95b3cb8197c2db49d9f537e5 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 12:43:03 +0530 Subject: [PATCH 53/90] Move details handling to separate function Signed-off-by: RMidhunSuresh --- src/domain/session/leftpanel/LeftPanelViewModel.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js index c1696d26..9f7b85ab 100644 --- a/src/domain/session/leftpanel/LeftPanelViewModel.js +++ b/src/domain/session/leftpanel/LeftPanelViewModel.js @@ -92,24 +92,24 @@ export class LeftPanelViewModel extends ViewModel { } } + _pathForDetails(path) { + const details = this.navigation.path.get("details"); + return details ? path.with(details) : path; + } + toggleGrid() { const room = this.navigation.path.get("room"); - const details = this.navigation.path.get("details"); let path = this.navigation.path.until("session"); if (this.gridEnabled) { if (room) { path = path.with(room); - if (details) { - path = path.with(details); - } + path = this._pathForDetails(path); } } else { if (room) { path = path.with(this.navigation.segment("rooms", [room.value])); path = path.with(room); - if (details) { - path = path.with(details); - } + path = this._pathForDetails(path); } else { path = path.with(this.navigation.segment("rooms", [])); path = path.with(this.navigation.segment("empty-grid-tile", 0)); From 37e052c0617fef4b4c396ab3f5f7e878267775cb Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 13:15:55 +0530 Subject: [PATCH 54/90] details do not need to be child of rooms Signed-off-by: RMidhunSuresh --- src/domain/navigation/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/navigation/index.js b/src/domain/navigation/index.js index 5e1a1b62..899fc53a 100644 --- a/src/domain/navigation/index.js +++ b/src/domain/navigation/index.js @@ -35,7 +35,7 @@ function allowsChild(parent, child) { return type === "room" || type === "rooms" || type === "settings"; case "rooms": // downside of the approach: both of these will control which tile is selected - return type === "room" || type === "empty-grid-tile" || type === "details"; + return type === "room" || type === "empty-grid-tile"; case "room": return type === "lightbox" || type === "details"; default: From b2448e1207932146a4ba98bd4ab0946012d9cee4 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 13:21:49 +0530 Subject: [PATCH 55/90] Calculate path when button is clicked Signed-off-by: RMidhunSuresh --- src/domain/session/rightpanel/RoomInfoViewModel.js | 5 +++-- src/platform/web/ui/session/rightpanel/RoomInfoView.js | 10 ++++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js index 0765c293..4525838c 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -44,7 +44,8 @@ export class RoomInfoViewModel extends ViewModel { return this.name; } - get closeLink() { - return this.urlCreator.urlUntilSegment("room"); + closePanel() { + const path = this.navigation.path.until("room"); + this.navigation.applyPath(path); } } diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index 1e047401..fd2ba58e 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -8,7 +8,7 @@ export class RoomInfoView extends TemplateView { const encryptionString = vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`; return t.div({ className: "RoomInfo" }, [ - this._createButton(vm), + this._createButton(t, vm), t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]), t.div({ className: "RoomName" }, [t.h2(vm.name)]), @@ -40,8 +40,10 @@ export class RoomInfoView extends TemplateView { [tag.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]) } - _createButton(vm) { - return tag.div({ className: "buttons" }, - [tag.a({ className: "close button-utility", href: vm.closeLink })]); + _createButton(t, vm) { + return t.div({ className: "buttons" }, + [ + t.button({ className: "close button-utility", onClick: () => vm.closePanel() }) + ]); } } From 5b740389129dcd147b1ede41a0b4b1d7769e437a Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 14:27:43 +0530 Subject: [PATCH 56/90] Check value of details everywhere Signed-off-by: RMidhunSuresh --- src/domain/session/RoomGridViewModel.js | 2 +- src/domain/session/SessionViewModel.js | 2 +- src/domain/session/leftpanel/LeftPanelViewModel.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/domain/session/RoomGridViewModel.js b/src/domain/session/RoomGridViewModel.js index 8610f197..c2608680 100644 --- a/src/domain/session/RoomGridViewModel.js +++ b/src/domain/session/RoomGridViewModel.js @@ -84,7 +84,7 @@ export class RoomGridViewModel extends ViewModel { } const vmo = this._viewModelsObservables[index]; if (vmo) { - const detailsShown = !!this.navigation.path.get("details"); + const detailsShown = !!this.navigation.path.get("details")?.value; this.navigation.push("room", vmo.id); if (detailsShown) { this.navigation.push("details", true); diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 2c0d65bf..decc0b86 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -260,7 +260,7 @@ export class SessionViewModel extends ViewModel { _toggleRoomInformationPanel() { this._roomInfoViewModel = this.disposeTracked(this._roomInfoViewModel); const room = this._roomFromNavigation(); - const enable = !!this.navigation.path.get("details"); + const enable = !!this.navigation.path.get("details")?.value; if (enable) { this._roomInfoViewModel = this.track(new RoomInfoViewModel(this.childOptions({ room }))); } diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js index 9f7b85ab..061c640c 100644 --- a/src/domain/session/leftpanel/LeftPanelViewModel.js +++ b/src/domain/session/leftpanel/LeftPanelViewModel.js @@ -94,7 +94,7 @@ export class LeftPanelViewModel extends ViewModel { _pathForDetails(path) { const details = this.navigation.path.get("details"); - return details ? path.with(details) : path; + return details?.value ? path.with(details) : path; } toggleGrid() { From 0d63ce9a3a1d6e12d52335329725108697695baa Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 14:43:48 +0530 Subject: [PATCH 57/90] Change SideBarActive --> right-shown Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/layout.css | 8 ++++---- src/platform/web/ui/session/SessionView.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css index 802ae329..38e7155e 100644 --- a/src/platform/web/ui/css/layout.css +++ b/src/platform/web/ui/css/layout.css @@ -54,7 +54,7 @@ main { min-width: 0; } -.SideBarActive{ +.right-shown{ grid-template: "status status status" auto "left middle right" 1fr / @@ -72,7 +72,7 @@ the layout viewport up without resizing it when the keyboard shows */ .middle .close-middle { display: none; } /* mobile layout */ @media screen and (max-width: 800px) { - .SessionView:not(.middle-shown, .SideBarActive) { + .SessionView:not(.middle-shown, .right-shown) { grid-template: "status" auto "left" 1fr / @@ -86,7 +86,7 @@ the layout viewport up without resizing it when the keyboard shows */ 1fr; } - .SessionView.SideBarActive{ + .SessionView.right-shown{ grid-template: "status" auto "right" 1fr / @@ -96,7 +96,7 @@ the layout viewport up without resizing it when the keyboard shows */ .SessionView:not(.middle-shown) .room-placeholder { display: none; } .SessionView.middle-shown .LeftPanel { display: none; } - .SessionView.SideBarActive .middle { display: none; } + .SessionView.right-shown .middle { display: none; } /* show back button */ .middle .close-middle { display: block !important; } diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js index 2c2a3cd1..a6830fa7 100644 --- a/src/platform/web/ui/session/SessionView.js +++ b/src/platform/web/ui/session/SessionView.js @@ -33,7 +33,7 @@ export class SessionView extends TemplateView { className: { "SessionView": true, "middle-shown": vm => !!vm.activeMiddleViewModel, - "SideBarActive": vm => !!vm.roomInfoViewModel + "right-shown": vm => !!vm.roomInfoViewModel }, }, [ t.view(new SessionStatusView(vm.sessionStatusViewModel)), From 4c962943b2442d82eeb6c0f620cb2cf6127a9377 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 14:54:53 +0530 Subject: [PATCH 58/90] Modify setters in MenuOption to support chaining Signed-off-by: RMidhunSuresh --- src/platform/web/ui/general/Menu.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/platform/web/ui/general/Menu.js b/src/platform/web/ui/general/Menu.js index 8a57a7fc..baf7b1a9 100644 --- a/src/platform/web/ui/general/Menu.js +++ b/src/platform/web/ui/general/Menu.js @@ -69,10 +69,12 @@ class MenuOption { setCallback(callback) { this.callback = callback; + return this; } setLink(link) { this.link = link; + return this; } setIcon(className) { From 4700009c68beae5c4f68b8d9f17d96682e0c78d6 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 16:01:33 +0530 Subject: [PATCH 59/90] Add new test for parseUrlPath Make sure that the details panel stays open during room change. Signed-off-by: RMidhunSuresh --- src/domain/navigation/index.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/domain/navigation/index.js b/src/domain/navigation/index.js index 899fc53a..fab91c11 100644 --- a/src/domain/navigation/index.js +++ b/src/domain/navigation/index.js @@ -257,6 +257,25 @@ export function tests() { assert.equal(segments[2].type, "room"); assert.equal(segments[2].value, "a"); }, + "parse open-room action changing focus to an existing room with details open": assert => { + const nav = new Navigation(allowsChild); + const path = nav.pathFrom([ + new Segment("session", 1), + new Segment("rooms", ["a", "b", "c"]), + new Segment("room", "b"), + new Segment("details", true) + ]); + const segments = parseUrlPath("/session/1/open-room/a", path); + assert.equal(segments.length, 4); + assert.equal(segments[0].type, "session"); + assert.equal(segments[0].value, "1"); + assert.equal(segments[1].type, "rooms"); + assert.deepEqual(segments[1].value, ["a", "b", "c"]); + assert.equal(segments[2].type, "room"); + assert.equal(segments[2].value, "a"); + assert.equal(segments[3].type, "details"); + assert.equal(segments[3].value, true); + }, "parse open-room action setting a room in an empty tile": assert => { const nav = new Navigation(allowsChild); const path = nav.pathFrom([ From c6f3b1fbbe0834ffaffa5130bc6d03b96d5a20df Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 16:42:39 +0530 Subject: [PATCH 60/90] Do not use private props from room summary Signed-off-by: RMidhunSuresh --- src/domain/session/rightpanel/RoomInfoViewModel.js | 9 ++++----- src/matrix/room/BaseRoom.js | 8 ++++++++ 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js index 4525838c..d45c4994 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -5,7 +5,6 @@ export class RoomInfoViewModel extends ViewModel { constructor(options) { super(options); this._room = options.room; - this._roomSummary = this._room._summary._data; } get roomId() { @@ -13,19 +12,19 @@ export class RoomInfoViewModel extends ViewModel { } get canonicalAlias() { - return this._roomSummary.canonicalAlias; + return this._room.canonicalAlias; } get name() { - return this._roomSummary.name || this._room._heroes?._roomName || this._roomSummary.canonicalAlias; + return this._room.name; } get isEncrypted() { - return !!this._roomSummary.encryption; + return !!this._room.isEncrypted; } get memberCount() { - return this._roomSummary.joinCount; + return this._room.joinedMemberCount; } get avatarLetter() { diff --git a/src/matrix/room/BaseRoom.js b/src/matrix/room/BaseRoom.js index 531f6a1a..a6a59278 100644 --- a/src/matrix/room/BaseRoom.js +++ b/src/matrix/room/BaseRoom.js @@ -354,6 +354,14 @@ export class BaseRoom extends EventEmitter { return this.membership === "leave"; } + get canonicalAlias() { + return this._summary.data.canonicalAlias; + } + + get joinedMemberCount() { + return this._summary.data.joinCount; + } + get mediaRepository() { return this._mediaRepository; } From 04065847dc0ded1dc188164c0a1da62ff9bb40f6 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 16:47:15 +0530 Subject: [PATCH 61/90] Remove unused getter Signed-off-by: RMidhunSuresh --- src/domain/session/room/RoomViewModel.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index a0028674..16d9b4c0 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -104,10 +104,6 @@ export class RoomViewModel extends ViewModel { get timelineViewModel() { return this._timelineVM; } get isEncrypted() { return this._room.isEncrypted; } - get roomDetailsLink() { - return this.urlCreator.urlForSegment("details"); - } - get error() { if (this._timelineError) { return `Something went wrong loading the timeline: ${this._timelineError.message}`; From fcc2afba08d0a69399188f5a4f89829389b175a5 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 17:58:44 +0530 Subject: [PATCH 62/90] Do not compute link in getter Signed-off-by: RMidhunSuresh --- src/domain/session/room/RoomViewModel.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index 16d9b4c0..47bc0c7b 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -36,6 +36,7 @@ export class RoomViewModel extends ViewModel { } this._clearUnreadTimout = null; this._closeUrl = this.urlCreator.urlUntilSegment("session"); + this._detailsLink = this.urlCreator.urlForSegment("details"); } async load() { @@ -103,6 +104,7 @@ export class RoomViewModel extends ViewModel { get id() { return this._room.id; } get timelineViewModel() { return this._timelineVM; } get isEncrypted() { return this._room.isEncrypted; } + get detailsLink() { return this._detailsLink; } get error() { if (this._timelineError) { @@ -284,10 +286,6 @@ export class RoomViewModel extends ViewModel { } } - get detailsLink() { - return this.urlCreator.urlForSegment("details"); - } - get composerViewModel() { return this._composerVM; } From eb870cfc23d1b09577fc04e728918ae0cb54a222 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 18:04:07 +0530 Subject: [PATCH 63/90] Use url instead of link Signed-off-by: RMidhunSuresh --- src/domain/session/room/RoomViewModel.js | 4 ++-- src/platform/web/ui/session/room/RoomView.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index 47bc0c7b..60cd0055 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -36,7 +36,7 @@ export class RoomViewModel extends ViewModel { } this._clearUnreadTimout = null; this._closeUrl = this.urlCreator.urlUntilSegment("session"); - this._detailsLink = this.urlCreator.urlForSegment("details"); + this._detailsUrl = this.urlCreator.urlForSegment("details"); } async load() { @@ -104,7 +104,7 @@ export class RoomViewModel extends ViewModel { get id() { return this._room.id; } get timelineViewModel() { return this._timelineVM; } get isEncrypted() { return this._room.isEncrypted; } - get detailsLink() { return this._detailsLink; } + get detailsUrl() { return this._detailsUrl; } get error() { if (this._timelineError) { diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js index c08d4b72..c1a1ed74 100644 --- a/src/platform/web/ui/session/room/RoomView.js +++ b/src/platform/web/ui/session/room/RoomView.js @@ -68,7 +68,7 @@ export class RoomView extends TemplateView { } else { const vm = this.value; const options = []; - options.push(Menu.optionWithLink(vm.i18n`Room details`, vm.detailsLink)) + options.push(Menu.optionWithLink(vm.i18n`Room details`, vm.detailsUrl)) if (vm.canLeave) { options.push(Menu.optionWithButton(vm.i18n`Leave room`, () => vm.leaveRoom()).setDestructive()); } From 7fbcf8953984b8bfc3d06f189e6297fb14185ccf Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 18:29:12 +0530 Subject: [PATCH 64/90] Remove unncessary empty line Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index decc0b86..21b88e8a 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -84,7 +84,6 @@ export class SessionViewModel extends ViewModel { const details = this.navigation.observe("details"); this.track(details.subscribe(() => this._toggleRoomInformationPanel())); this._toggleRoomInformationPanel(); - } get id() { From 332fbdda846b4e046f741fdcc4a3a7a459519864 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 18:37:32 +0530 Subject: [PATCH 65/90] Move variable to scope of conditional Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 21b88e8a..ab59c2af 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -258,9 +258,9 @@ export class SessionViewModel extends ViewModel { _toggleRoomInformationPanel() { this._roomInfoViewModel = this.disposeTracked(this._roomInfoViewModel); - const room = this._roomFromNavigation(); const enable = !!this.navigation.path.get("details")?.value; if (enable) { + const room = this._roomFromNavigation(); this._roomInfoViewModel = this.track(new RoomInfoViewModel(this.childOptions({ room }))); } this.emitChange("roomInfoViewModel"); From 008f3601ca187ff4fbd1d8475fa8cf995e3da8ad Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 4 Jun 2021 23:19:25 +0530 Subject: [PATCH 66/90] Remove link support from Menu - Not needed anymore since every link item has been rewritten as a button. Signed-off-by: RMidhunSuresh --- src/domain/session/room/RoomViewModel.js | 8 +++- .../web/ui/css/themes/element/theme.css | 2 - src/platform/web/ui/general/Menu.js | 39 +++---------------- src/platform/web/ui/session/room/RoomView.js | 8 ++-- .../session/room/timeline/BaseMessageView.js | 4 +- 5 files changed, 18 insertions(+), 43 deletions(-) diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index 60cd0055..ef103255 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -36,7 +36,6 @@ export class RoomViewModel extends ViewModel { } this._clearUnreadTimout = null; this._closeUrl = this.urlCreator.urlUntilSegment("session"); - this._detailsUrl = this.urlCreator.urlForSegment("details"); } async load() { @@ -104,7 +103,6 @@ export class RoomViewModel extends ViewModel { get id() { return this._room.id; } get timelineViewModel() { return this._timelineVM; } get isEncrypted() { return this._room.isEncrypted; } - get detailsUrl() { return this._detailsUrl; } get error() { if (this._timelineError) { @@ -289,6 +287,12 @@ export class RoomViewModel extends ViewModel { get composerViewModel() { return this._composerVM; } + + toggleDetailsPanel() { + let path = this.navigation.path.until("room"); + path = path.with(this.navigation.segment("details", true)); + this.navigation.applyPath(path); + } } class ComposerViewModel extends ViewModel { diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 6d747e96..4a397d13 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -673,10 +673,8 @@ button.link { background-color: transparent; text-align: left; padding: 8px 32px 8px 8px; - text-decoration: none; font-size: 1.6rem; height: 24px; - display: block; cursor: pointer; } diff --git a/src/platform/web/ui/general/Menu.js b/src/platform/web/ui/general/Menu.js index baf7b1a9..34a90c09 100644 --- a/src/platform/web/ui/general/Menu.js +++ b/src/platform/web/ui/general/Menu.js @@ -17,33 +17,15 @@ limitations under the License. import {TemplateView} from "./TemplateView.js"; export class Menu extends TemplateView { + static option(label, callback) { + return new MenuOption(label, callback); + } constructor(options) { super(); this._options = options; } - static optionWithButton(label, callback) { - const option = new MenuOption(label); - option.setCallback(callback); - return option; - } - - static optionWithLink(label, link) { - const option = new MenuOption(label); - option.setLink(link); - return option; - } - - _convertToDOM(t, option) { - if (option.callback) { - return t.button({ className: "menu-item", onClick: option.callback }, option.label); - } - else if (option.link) { - return t.a({ className: "menu-item", href: option.link }, option.label); - } - } - render(t) { return t.ul({className: "menu", role: "menu"}, this._options.map(o => { const className = { @@ -55,28 +37,19 @@ export class Menu extends TemplateView { } return t.li({ className, - }, this._convertToDOM(t, o)); + }, t.button({className:"menu-item", onClick: o.callback}, o.label)); })); } } class MenuOption { - constructor(label) { + constructor(label, callback) { this.label = label; + this.callback = callback; this.icon = null; this.destructive = false; } - setCallback(callback) { - this.callback = callback; - return this; - } - - setLink(link) { - this.link = link; - return this; - } - setIcon(className) { this.icon = className; return this; diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js index c1a1ed74..13259a08 100644 --- a/src/platform/web/ui/session/room/RoomView.js +++ b/src/platform/web/ui/session/room/RoomView.js @@ -68,15 +68,15 @@ export class RoomView extends TemplateView { } else { const vm = this.value; const options = []; - options.push(Menu.optionWithLink(vm.i18n`Room details`, vm.detailsUrl)) + options.push(Menu.option(vm.i18n`Room details`, () => vm.toggleDetailsPanel())) if (vm.canLeave) { - options.push(Menu.optionWithButton(vm.i18n`Leave room`, () => vm.leaveRoom()).setDestructive()); + options.push(Menu.option(vm.i18n`Leave room`, () => vm.leaveRoom()).setDestructive()); } if (vm.canForget) { - options.push(Menu.optionWithButton(vm.i18n`Forget room`, () => vm.forgetRoom()).setDestructive()); + options.push(Menu.option(vm.i18n`Forget room`, () => vm.forgetRoom()).setDestructive()); } if (vm.canRejoin) { - options.push(Menu.optionWithButton(vm.i18n`Rejoin room`, () => vm.rejoinRoom())); + options.push(Menu.option(vm.i18n`Rejoin room`, () => vm.rejoinRoom())); } if (!options.length) { return; diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js index 4ecde2ba..60b39048 100644 --- a/src/platform/web/ui/session/room/timeline/BaseMessageView.js +++ b/src/platform/web/ui/session/room/timeline/BaseMessageView.js @@ -93,9 +93,9 @@ export class BaseMessageView extends TemplateView { createMenuOptions(vm) { const options = []; if (vm.canAbortSending) { - options.push(Menu.optionWithButton(vm.i18n`Cancel`, () => vm.abortSending())); + options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending())); } else if (vm.canRedact) { - options.push(Menu.optionWithButton(vm.i18n`Delete`, () => vm.redact()).setDestructive()); + options.push(Menu.option(vm.i18n`Delete`, () => vm.redact()).setDestructive()); } return options; } From efd37d811f34f4d48c82d36770be552a49da04dc Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 6 Jun 2021 23:18:16 +0530 Subject: [PATCH 67/90] Update on changes to vm Signed-off-by: RMidhunSuresh --- .../session/rightpanel/RoomInfoViewModel.js | 1 + .../web/ui/session/rightpanel/RoomInfoView.js | 34 +++++++++++-------- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js index d45c4994..281c557b 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomInfoViewModel.js @@ -5,6 +5,7 @@ export class RoomInfoViewModel extends ViewModel { constructor(options) { super(options); this._room = options.room; + this._room.on("change", () => this.emitChange()); } get roomId() { diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index fd2ba58e..c70454e7 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -5,18 +5,20 @@ import { AvatarView } from "../../avatar.js"; export class RoomInfoView extends TemplateView { render(t, vm) { - const encryptionString = vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`; - + const encryptionString = () => vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`; return t.div({ className: "RoomInfo" }, [ this._createButton(t, vm), t.div({ className: "RoomAvatar" }, - [t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]), - t.div({ className: "RoomName" }, [t.h2(vm.name)]), + [ + t.view(new AvatarView(vm, 52)), + t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionAvatarView(isEncrypted)) + ]), + t.div({ className: "RoomName" }, [t.h2(vm => vm.name)]), this._createRoomAliasDisplay(vm), t.div({ className: "SidebarRow_collection" }, [ - this._createSideBarRow(vm.i18n`People`, vm.memberCount, { MemberCount: true }), - this._createSideBarRow(vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true }) + this._createSideBarRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }), + this._createSideBarRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true }) ]) ]); } @@ -26,20 +28,15 @@ export class RoomInfoView extends TemplateView { ""; } - _createSideBarRow(label, value, labelClass, valueClass) { + _createSideBarRow(t, label, value, labelClass, valueClass) { const labelClassString = classNames({ SidebarLabel: true, ...labelClass }); const valueClassString = classNames({ SidebarValue: true, ...valueClass }); - return tag.div({ className: "SidebarRow" }, [ - tag.div({ className: labelClassString }, [text(label)]), - tag.div({ className: valueClassString }, [text(value)]) + return t.div({ className: "SidebarRow" }, [ + t.div({ className: labelClassString }, [text(label)]), + t.div({ className: valueClassString }, value) ]); } - _createEncryptionIcon(isEncrypted) { - return tag.div({ className: "RoomEncryption" }, - [tag.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]) - } - _createButton(t, vm) { return t.div({ className: "buttons" }, [ @@ -47,3 +44,10 @@ export class RoomInfoView extends TemplateView { ]); } } + +class EncryptionAvatarView extends TemplateView{ + render(t, isEncrypted) { + return t.div({ className: "RoomEncryption" }, + [t.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]); + } +} From f917730a21c7446e317f08cd12e5c88c7c92cac9 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 6 Jun 2021 23:52:24 +0530 Subject: [PATCH 68/90] Stick to naming convention for css/html classes Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/right-panel.css | 14 ++++---- .../web/ui/css/themes/element/theme.css | 28 ++++++++-------- .../web/ui/session/rightpanel/RoomInfoView.js | 32 +++++++++---------- 3 files changed, 37 insertions(+), 37 deletions(-) diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css index 19b45596..f3f34e38 100644 --- a/src/platform/web/ui/css/right-panel.css +++ b/src/platform/web/ui/css/right-panel.css @@ -1,30 +1,30 @@ -.RoomInfo { +.RoomDetailsView { grid-area: right; flex-direction: column; } -.RoomAvatar { +.RoomDetailsView_avatar { display: flex; } -.RoomName h2 { +.RoomDetailsView_name h2 { text-align: center; } -.SidebarRow { +.RoomDetailsView_row { justify-content: space-between; } -.SidebarLabel, .SidebarRow, .RoomInfo, .RoomEncryption { +.RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .EncryptionIconView { display: flex; align-items: center; } -.RoomEncryption { +.EncryptionIconView { justify-content: center; } -.buttons { +.RoomDetailsView_buttons { display: flex; justify-content: flex-end; width: 100%; diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 4a397d13..f41570d4 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -780,44 +780,44 @@ button.link { /* Right Panel */ -.RoomInfo { +.RoomDetailsView { background: rgba(245, 245, 245, 0.90); padding: 10px; } -.RoomAvatar { +.RoomDetailsView_avatar { margin-top: 44px; } -.RoomId { +.RoomDetailsView_id { color: #737D8C; font-size: 12px; } -.SidebarRow_collection{ +.RoomDetailsView_rows{ margin-top: 36px; width: 100%; } -.RoomName h2 { +.RoomDetailsView_name h2 { margin-bottom: 4px; font-size: 1.8rem; } -.SidebarRow { +.RoomDetailsView_row { width: 90%; margin-bottom: 20px; font-weight: 500; font-size: 15px; } -.SidebarLabel::before { +.RoomDetailsView_label::before { padding-right: 16px; height: 20px; width: 20px; } -.SidebarValue { +.RoomDetailsView_value { color: #737D8C; } @@ -831,7 +831,7 @@ button.link { /* Encryption icon next to avatar */ -.RoomEncryption { +.EncryptionIconView { width: 52px; height: 52px; border-radius: 100%; @@ -840,24 +840,24 @@ button.link { margin-left: -16px; } -.encrypted, .unencrypted { +.EncryptionIconView_encrypted, .EncryptionIconView_unencrypted { height: 24px; width: 24px; } -.encrypted { +.EncryptionIconView_encrypted { content: url("./icons/e2ee-normal.svg"); } -.unencrypted { +.EncryptionIconView_unencrypted { content: url("./icons/e2ee-disabled.svg"); } -.RoomInfo .button-utility { +.RoomDetailsView .button-utility { width: 24px; height: 24px; } -.RoomInfo .close { +.RoomDetailsView .close { background-image: url("./icons/clear.svg"); } diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js index c70454e7..43a0f994 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js @@ -6,48 +6,48 @@ export class RoomInfoView extends TemplateView { render(t, vm) { const encryptionString = () => vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`; - return t.div({ className: "RoomInfo" }, [ + return t.div({ className: "RoomDetailsView" }, [ this._createButton(t, vm), - t.div({ className: "RoomAvatar" }, + t.div({ className: "RoomDetailsView_avatar" }, [ t.view(new AvatarView(vm, 52)), - t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionAvatarView(isEncrypted)) + t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionIconView(isEncrypted)) ]), - t.div({ className: "RoomName" }, [t.h2(vm => vm.name)]), + t.div({ className: "RoomDetailsView_name" }, [t.h2(vm => vm.name)]), this._createRoomAliasDisplay(vm), - t.div({ className: "SidebarRow_collection" }, + t.div({ className: "RoomDetailsView_rows" }, [ - this._createSideBarRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }), - this._createSideBarRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true }) + this._createRightPanelRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }), + this._createRightPanelRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true }) ]) ]); } _createRoomAliasDisplay(vm) { - return vm.canonicalAlias ? tag.div({ className: "RoomId" }, [text(vm.canonicalAlias)]) : + return vm.canonicalAlias ? tag.div({ className: "RoomDetailsView_id" }, [text(vm.canonicalAlias)]) : ""; } - _createSideBarRow(t, label, value, labelClass, valueClass) { - const labelClassString = classNames({ SidebarLabel: true, ...labelClass }); - const valueClassString = classNames({ SidebarValue: true, ...valueClass }); - return t.div({ className: "SidebarRow" }, [ + _createRightPanelRow(t, label, value, labelClass, valueClass) { + const labelClassString = classNames({ RoomDetailsView_label: true, ...labelClass }); + const valueClassString = classNames({ RoomDetailsView_value: true, ...valueClass }); + return t.div({ className: "RoomDetailsView_row" }, [ t.div({ className: labelClassString }, [text(label)]), t.div({ className: valueClassString }, value) ]); } _createButton(t, vm) { - return t.div({ className: "buttons" }, + return t.div({ className: "RoomDetailsView_buttons" }, [ t.button({ className: "close button-utility", onClick: () => vm.closePanel() }) ]); } } -class EncryptionAvatarView extends TemplateView{ +class EncryptionIconView extends TemplateView{ render(t, isEncrypted) { - return t.div({ className: "RoomEncryption" }, - [t.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]); + return t.div({ className: "EncryptionIconView" }, + [t.div({ className: isEncrypted ? "EncryptionIconView_encrypted" : "EncryptionIconView_unencrypted" })]); } } From f3f1436bb01c47a1d176d6cc9475a59f4a626ac3 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 00:19:31 +0530 Subject: [PATCH 69/90] Rename room info to room details everywhere Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 20 +++++++++---------- ...foViewModel.js => RoomDetailsViewModel.js} | 2 +- src/platform/web/ui/session/SessionView.js | 6 +++--- .../{RoomInfoView.js => RoomDetailsView.js} | 2 +- 4 files changed, 15 insertions(+), 15 deletions(-) rename src/domain/session/rightpanel/{RoomInfoViewModel.js => RoomDetailsViewModel.js} (95%) rename src/platform/web/ui/session/rightpanel/{RoomInfoView.js => RoomDetailsView.js} (97%) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index ab59c2af..e5755a21 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -17,7 +17,7 @@ limitations under the License. import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js"; import {RoomViewModel} from "./room/RoomViewModel.js"; -import {RoomInfoViewModel} from "./rightpanel/RoomInfoViewModel.js"; +import {RoomDetailsViewModel} from "./rightpanel/RoomDetailsViewModel.js"; import {UnknownRoomViewModel} from "./room/UnknownRoomViewModel.js"; import {InviteViewModel} from "./room/InviteViewModel.js"; import {LightboxViewModel} from "./room/LightboxViewModel.js"; @@ -63,7 +63,7 @@ export class SessionViewModel extends ViewModel { if (!this._gridViewModel) { this._updateRoom(roomId); } - this._toggleRoomInformationPanel(); + this._toggleRoomDetailsPanel(); })); if (!this._gridViewModel) { this._updateRoom(currentRoomId.get()); @@ -82,8 +82,8 @@ export class SessionViewModel extends ViewModel { this._updateLightbox(lightbox.get()); const details = this.navigation.observe("details"); - this.track(details.subscribe(() => this._toggleRoomInformationPanel())); - this._toggleRoomInformationPanel(); + this.track(details.subscribe(() => this._toggleRoomDetailsPanel())); + this._toggleRoomDetailsPanel(); } get id() { @@ -118,8 +118,8 @@ export class SessionViewModel extends ViewModel { return this._roomViewModelObservable?.get(); } - get roomInfoViewModel() { - return this._roomInfoViewModel; + get roomDetailsViewModel() { + return this._roomDetailsViewModel; } _updateGrid(roomIds) { @@ -256,14 +256,14 @@ export class SessionViewModel extends ViewModel { return room; } - _toggleRoomInformationPanel() { - this._roomInfoViewModel = this.disposeTracked(this._roomInfoViewModel); + _toggleRoomDetailsPanel() { + this._roomDetailsViewModel = this.disposeTracked(this._roomDetailsViewModel); const enable = !!this.navigation.path.get("details")?.value; if (enable) { const room = this._roomFromNavigation(); - this._roomInfoViewModel = this.track(new RoomInfoViewModel(this.childOptions({ room }))); + this._roomDetailsViewModel = this.track(new RoomDetailsViewModel(this.childOptions({ room }))); } - this.emitChange("roomInfoViewModel"); + this.emitChange("roomDetailsViewModel"); } } diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomDetailsViewModel.js similarity index 95% rename from src/domain/session/rightpanel/RoomInfoViewModel.js rename to src/domain/session/rightpanel/RoomDetailsViewModel.js index 281c557b..6430b922 100644 --- a/src/domain/session/rightpanel/RoomInfoViewModel.js +++ b/src/domain/session/rightpanel/RoomDetailsViewModel.js @@ -1,7 +1,7 @@ import {ViewModel} from "../../ViewModel.js"; import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js"; -export class RoomInfoViewModel extends ViewModel { +export class RoomDetailsViewModel extends ViewModel { constructor(options) { super(options); this._room = options.room; diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js index a6830fa7..31d5befa 100644 --- a/src/platform/web/ui/session/SessionView.js +++ b/src/platform/web/ui/session/SessionView.js @@ -25,7 +25,7 @@ import {StaticView} from "../general/StaticView.js"; import {SessionStatusView} from "./SessionStatusView.js"; import {RoomGridView} from "./RoomGridView.js"; import {SettingsView} from "./settings/SettingsView.js"; -import { RoomInfoView } from "./rightpanel/RoomInfoView.js"; +import { RoomDetailsView } from "./rightpanel/RoomDetailsView.js"; export class SessionView extends TemplateView { render(t, vm) { @@ -33,7 +33,7 @@ export class SessionView extends TemplateView { className: { "SessionView": true, "middle-shown": vm => !!vm.activeMiddleViewModel, - "right-shown": vm => !!vm.roomInfoViewModel + "right-shown": vm => !!vm.roomDetailsViewModel }, }, [ t.view(new SessionStatusView(vm.sessionStatusViewModel)), @@ -55,7 +55,7 @@ export class SessionView extends TemplateView { return new StaticView(t => t.div({className: "room-placeholder"}, t.h2(vm.i18n`Choose a room on the left side.`))); } }), - t.mapView(vm => vm.roomInfoViewModel, roomInfoViewModel => roomInfoViewModel ? new RoomInfoView(roomInfoViewModel) : null), + t.mapView(vm => vm.roomDetailsViewModel, roomDetailsViewModel => roomDetailsViewModel ? new RoomDetailsView(roomDetailsViewModel) : null), t.mapView(vm => vm.lightboxViewModel, lightboxViewModel => lightboxViewModel ? new LightboxView(lightboxViewModel) : null) ]); } diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js similarity index 97% rename from src/platform/web/ui/session/rightpanel/RoomInfoView.js rename to src/platform/web/ui/session/rightpanel/RoomDetailsView.js index 43a0f994..3bbeb2da 100644 --- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js +++ b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js @@ -2,7 +2,7 @@ import { TemplateView } from "../../general/TemplateView.js"; import { text, classNames, tag } from "../../general/html.js"; import { AvatarView } from "../../avatar.js"; -export class RoomInfoView extends TemplateView { +export class RoomDetailsView extends TemplateView { render(t, vm) { const encryptionString = () => vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`; From 2c0176f3f2c13639d7b051c901ed0b15f1063617 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 00:23:38 +0530 Subject: [PATCH 70/90] Remove unwanted width Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index f41570d4..e21c8be0 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -805,7 +805,6 @@ button.link { } .RoomDetailsView_row { - width: 90%; margin-bottom: 20px; font-weight: 500; font-size: 15px; From 6086d157e2fe190d38b6d515b963201cdb29aeeb Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 00:24:29 +0530 Subject: [PATCH 71/90] Make value multiple of 4 Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index e21c8be0..ed426865 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -782,7 +782,7 @@ button.link { .RoomDetailsView { background: rgba(245, 245, 245, 0.90); - padding: 10px; + padding: 16px; } .RoomDetailsView_avatar { From 95512b51442497a7f1d7eb9ea31af4bfa3797bbf Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 00:26:18 +0530 Subject: [PATCH 72/90] Remove margin from top Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index ed426865..dd09b0f1 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -785,10 +785,6 @@ button.link { padding: 16px; } -.RoomDetailsView_avatar { - margin-top: 44px; -} - .RoomDetailsView_id { color: #737D8C; font-size: 12px; From fa67c5e248a08b4a72264638250cd9f25ff7882f Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 13:39:58 +0530 Subject: [PATCH 73/90] Refactor function - Move related parameters closer together. - Remove unused parameter. Signed-off-by: RMidhunSuresh --- .../web/ui/session/rightpanel/RoomDetailsView.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomDetailsView.js b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js index 3bbeb2da..503ebf49 100644 --- a/src/platform/web/ui/session/rightpanel/RoomDetailsView.js +++ b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js @@ -17,8 +17,8 @@ export class RoomDetailsView extends TemplateView { this._createRoomAliasDisplay(vm), t.div({ className: "RoomDetailsView_rows" }, [ - this._createRightPanelRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }), - this._createRightPanelRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true }) + this._createRightPanelRow(t, vm.i18n`People`, { MemberCount: true }, vm => vm.memberCount), + this._createRightPanelRow(t, vm.i18n`Encryption`, { EncryptionStatus: true }, encryptionString) ]) ]); } @@ -28,12 +28,11 @@ export class RoomDetailsView extends TemplateView { ""; } - _createRightPanelRow(t, label, value, labelClass, valueClass) { + _createRightPanelRow(t, label, labelClass, value) { const labelClassString = classNames({ RoomDetailsView_label: true, ...labelClass }); - const valueClassString = classNames({ RoomDetailsView_value: true, ...valueClass }); return t.div({ className: "RoomDetailsView_row" }, [ t.div({ className: labelClassString }, [text(label)]), - t.div({ className: valueClassString }, value) + t.div({ className: "RoomDetailsView_value" }, value) ]); } From 4005d70bb96f5bba0e61761a2482f8ca4a37d15d Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 13:45:33 +0530 Subject: [PATCH 74/90] Increase height to make element more centered Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index dd09b0f1..b0847b37 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -808,7 +808,7 @@ button.link { .RoomDetailsView_label::before { padding-right: 16px; - height: 20px; + height: 24px; width: 20px; } From dd9a19b7f0d7853b4a4e2aeb059be72ed3bf9563 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 14:53:36 +0530 Subject: [PATCH 75/90] Make formatting consistent Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/rightpanel/RoomDetailsView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomDetailsView.js b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js index 503ebf49..8e33f5b9 100644 --- a/src/platform/web/ui/session/rightpanel/RoomDetailsView.js +++ b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js @@ -44,9 +44,9 @@ export class RoomDetailsView extends TemplateView { } } -class EncryptionIconView extends TemplateView{ +class EncryptionIconView extends TemplateView { render(t, isEncrypted) { - return t.div({ className: "EncryptionIconView" }, + return t.div({ className: "EncryptionIconView" }, [t.div({ className: isEncrypted ? "EncryptionIconView_encrypted" : "EncryptionIconView_unencrypted" })]); } } From 0c5d118bfd71a698b95e49a44f8ba95bc43fe84c Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 15:30:50 +0530 Subject: [PATCH 76/90] Add rule to warn on wrong formatting Signed-off-by: RMidhunSuresh --- .eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.js b/.eslintrc.js index 2a14eac6..90c0f3fd 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,5 +13,6 @@ module.exports = { "no-empty": "off", "no-prototype-builtins": "off", "no-unused-vars": "warn", + "object-curly-spacing": ["warn", "never"] } }; From b2f2d51594067c503f5ae3fa15a258a0ad9bb586 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 15:33:55 +0530 Subject: [PATCH 77/90] Make formatting consistent with the codebase Signed-off-by: RMidhunSuresh --- .../ui/session/rightpanel/RoomDetailsView.js | 37 +++++++++---------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomDetailsView.js b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js index 8e33f5b9..3b8f0077 100644 --- a/src/platform/web/ui/session/rightpanel/RoomDetailsView.js +++ b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js @@ -1,52 +1,51 @@ -import { TemplateView } from "../../general/TemplateView.js"; -import { text, classNames, tag } from "../../general/html.js"; -import { AvatarView } from "../../avatar.js"; +import {TemplateView} from "../../general/TemplateView.js"; +import {text, classNames, tag} from "../../general/html.js"; +import {AvatarView} from "../../avatar.js"; export class RoomDetailsView extends TemplateView { - render(t, vm) { const encryptionString = () => vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`; - return t.div({ className: "RoomDetailsView" }, [ + return t.div({className: "RoomDetailsView"}, [ this._createButton(t, vm), - t.div({ className: "RoomDetailsView_avatar" }, + t.div({className: "RoomDetailsView_avatar"}, [ t.view(new AvatarView(vm, 52)), t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionIconView(isEncrypted)) ]), - t.div({ className: "RoomDetailsView_name" }, [t.h2(vm => vm.name)]), + t.div({className: "RoomDetailsView_name"}, [t.h2(vm => vm.name)]), this._createRoomAliasDisplay(vm), - t.div({ className: "RoomDetailsView_rows" }, + t.div({className: "RoomDetailsView_rows"}, [ - this._createRightPanelRow(t, vm.i18n`People`, { MemberCount: true }, vm => vm.memberCount), - this._createRightPanelRow(t, vm.i18n`Encryption`, { EncryptionStatus: true }, encryptionString) + this._createRightPanelRow(t, vm.i18n`People`, {MemberCount: true}, vm => vm.memberCount), + this._createRightPanelRow(t, vm.i18n`Encryption`, {EncryptionStatus: true}, encryptionString) ]) ]); } _createRoomAliasDisplay(vm) { - return vm.canonicalAlias ? tag.div({ className: "RoomDetailsView_id" }, [text(vm.canonicalAlias)]) : + return vm.canonicalAlias ? tag.div({className: "RoomDetailsView_id"}, [text(vm.canonicalAlias)]) : ""; } _createRightPanelRow(t, label, labelClass, value) { - const labelClassString = classNames({ RoomDetailsView_label: true, ...labelClass }); - return t.div({ className: "RoomDetailsView_row" }, [ - t.div({ className: labelClassString }, [text(label)]), - t.div({ className: "RoomDetailsView_value" }, value) + const labelClassString = classNames({RoomDetailsView_label: true, ...labelClass}); + return t.div({className: "RoomDetailsView_row"}, [ + t.div({className: labelClassString}, [text(label)]), + t.div({className: "RoomDetailsView_value"}, value) ]); } _createButton(t, vm) { - return t.div({ className: "RoomDetailsView_buttons" }, + return t.div({className: "RoomDetailsView_buttons"}, [ - t.button({ className: "close button-utility", onClick: () => vm.closePanel() }) + t.button({className: "close button-utility", onClick: () => vm.closePanel()}) ]); } } class EncryptionIconView extends TemplateView { render(t, isEncrypted) { - return t.div({ className: "EncryptionIconView" }, - [t.div({ className: isEncrypted ? "EncryptionIconView_encrypted" : "EncryptionIconView_unencrypted" })]); + return t.div({className: "EncryptionIconView"}, + [t.div({className: isEncrypted ? "EncryptionIconView_encrypted" : "EncryptionIconView_unencrypted"})]); } } From e2443a8b09bebc1ea187c9d1c0f634e5885bfe8a Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 7 Jun 2021 16:09:13 +0530 Subject: [PATCH 78/90] Undo spillover from earlier formatting havoc Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/avatar.css | 1 - src/platform/web/ui/css/layout.css | 1 - src/platform/web/ui/css/themes/element/theme.css | 11 +++++------ 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/platform/web/ui/css/avatar.css b/src/platform/web/ui/css/avatar.css index b2405896..d369f85f 100644 --- a/src/platform/web/ui/css/avatar.css +++ b/src/platform/web/ui/css/avatar.css @@ -37,7 +37,6 @@ limitations under the License. } /* work around postcss-css-variables limitations and repeat variable usage */ - .hydrogen .avatar.size-128 { --avatar-size: 128px; width: var(--avatar-size); diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css index 38e7155e..413d53ec 100644 --- a/src/platform/web/ui/css/layout.css +++ b/src/platform/web/ui/css/layout.css @@ -91,7 +91,6 @@ the layout viewport up without resizing it when the keyboard shows */ "status" auto "right" 1fr / 1fr; - } .SessionView:not(.middle-shown) .room-placeholder { display: none; } diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index b0847b37..c22ab79b 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -65,15 +65,12 @@ limitations under the License. } /** buttons */ - .button-row { display: flex; } - .button-row > * { margin-right: 10px; } - .button-row > *:last-child { margin-right: 0px; } @@ -109,6 +106,7 @@ a.button-action { display: block; } + .button-action.secondary { color: #03B381; } @@ -181,7 +179,6 @@ a.button-action { border: 1px #e1e3e6 solid; background-color: white; } - .FilterField:focus-within button { border-color: white; } @@ -387,7 +384,6 @@ a { .SessionPickerView .session-actions > * { margin-right: 10px; } - .SessionPickerView .session-actions > *:last-child { margin-right: 0px; } @@ -419,6 +415,7 @@ a { color: #8D99A5; } + .RoomGridView > div.focus-ring { border: 2px solid rgba(134, 193, 165, 1); border-radius: 12px; @@ -492,6 +489,7 @@ a { border: none; text-indent: 200%; overflow: hidden; + background-color: #03B381; background-image: url('icons/send.svg'); background-repeat: no-repeat; @@ -594,7 +592,7 @@ button.link { grid-template: "content close" auto "content details" 1fr / - 1fr auto; + 1fr auto; color: white; padding: 4px; } @@ -607,6 +605,7 @@ button.link { "details" auto / 1fr; } + .lightbox .details { width: 100% !important; } From e10b455b2737cde833ae34627822466b31b58fad Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 14 Jun 2021 20:32:05 +0530 Subject: [PATCH 79/90] Rename method Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index e5755a21..12f80f8b 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -63,7 +63,7 @@ export class SessionViewModel extends ViewModel { if (!this._gridViewModel) { this._updateRoom(roomId); } - this._toggleRoomDetailsPanel(); + this._updateRoomDetails(); })); if (!this._gridViewModel) { this._updateRoom(currentRoomId.get()); @@ -82,8 +82,8 @@ export class SessionViewModel extends ViewModel { this._updateLightbox(lightbox.get()); const details = this.navigation.observe("details"); - this.track(details.subscribe(() => this._toggleRoomDetailsPanel())); - this._toggleRoomDetailsPanel(); + this.track(details.subscribe(() => this._updateRoomDetails())); + this._updateRoomDetails(); } get id() { @@ -256,7 +256,7 @@ export class SessionViewModel extends ViewModel { return room; } - _toggleRoomDetailsPanel() { + _updateRoomDetails() { this._roomDetailsViewModel = this.disposeTracked(this._roomDetailsViewModel); const enable = !!this.navigation.path.get("details")?.value; if (enable) { From 7b811aa92728a30a24e35d2e06b4c457d34203c3 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 14 Jun 2021 20:33:32 +0530 Subject: [PATCH 80/90] Remove space after brace in two places Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 2 +- src/platform/web/ui/session/SessionView.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 12f80f8b..14bb087e 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -261,7 +261,7 @@ export class SessionViewModel extends ViewModel { const enable = !!this.navigation.path.get("details")?.value; if (enable) { const room = this._roomFromNavigation(); - this._roomDetailsViewModel = this.track(new RoomDetailsViewModel(this.childOptions({ room }))); + this._roomDetailsViewModel = this.track(new RoomDetailsViewModel(this.childOptions({room}))); } this.emitChange("roomDetailsViewModel"); } diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js index 31d5befa..877cc67c 100644 --- a/src/platform/web/ui/session/SessionView.js +++ b/src/platform/web/ui/session/SessionView.js @@ -25,7 +25,7 @@ import {StaticView} from "../general/StaticView.js"; import {SessionStatusView} from "./SessionStatusView.js"; import {RoomGridView} from "./RoomGridView.js"; import {SettingsView} from "./settings/SettingsView.js"; -import { RoomDetailsView } from "./rightpanel/RoomDetailsView.js"; +import {RoomDetailsView} from "./rightpanel/RoomDetailsView.js"; export class SessionView extends TemplateView { render(t, vm) { From 88a1e34987286a560a14c21fdb08728746324e30 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 14 Jun 2021 21:04:44 +0530 Subject: [PATCH 81/90] Unsubscribe on dispose Signed-off-by: RMidhunSuresh --- .../session/rightpanel/RoomDetailsViewModel.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/domain/session/rightpanel/RoomDetailsViewModel.js b/src/domain/session/rightpanel/RoomDetailsViewModel.js index 6430b922..911e5945 100644 --- a/src/domain/session/rightpanel/RoomDetailsViewModel.js +++ b/src/domain/session/rightpanel/RoomDetailsViewModel.js @@ -5,7 +5,8 @@ export class RoomDetailsViewModel extends ViewModel { constructor(options) { super(options); this._room = options.room; - this._room.on("change", () => this.emitChange()); + this._onRoomChange = this._onRoomChange.bind(this); + this._room.on("change", this._onRoomChange); } get roomId() { @@ -44,8 +45,17 @@ export class RoomDetailsViewModel extends ViewModel { return this.name; } + _onRoomChange() { + this.emitChange(); + } + closePanel() { const path = this.navigation.path.until("room"); this.navigation.applyPath(path); } + + dispose() { + super.dispose(); + this._room.off("change", this._onRoomChange); + } } From e50b503897d05a0054165a2d4b1dd953b5f3995b Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 14 Jun 2021 22:43:42 +0530 Subject: [PATCH 82/90] Undo lint config change Signed-off-by: RMidhunSuresh --- .eslintrc.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 90c0f3fd..ebc08582 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,7 +12,6 @@ module.exports = { "no-console": "off", "no-empty": "off", "no-prototype-builtins": "off", - "no-unused-vars": "warn", - "object-curly-spacing": ["warn", "never"] + "no-unused-vars": "warn" } }; From 97e484b8e6b739b1ea70922b32ee6202634edba0 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 15 Jun 2021 14:30:27 +0530 Subject: [PATCH 83/90] Rename toggle --> open Signed-off-by: RMidhunSuresh --- src/domain/session/room/RoomViewModel.js | 2 +- src/platform/web/ui/session/room/RoomView.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index ef103255..4d53ec6c 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -288,7 +288,7 @@ export class RoomViewModel extends ViewModel { return this._composerVM; } - toggleDetailsPanel() { + openDetailsPanel() { let path = this.navigation.path.until("room"); path = path.with(this.navigation.segment("details", true)); this.navigation.applyPath(path); diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js index 13259a08..f8e84f87 100644 --- a/src/platform/web/ui/session/room/RoomView.js +++ b/src/platform/web/ui/session/room/RoomView.js @@ -68,7 +68,7 @@ export class RoomView extends TemplateView { } else { const vm = this.value; const options = []; - options.push(Menu.option(vm.i18n`Room details`, () => vm.toggleDetailsPanel())) + options.push(Menu.option(vm.i18n`Room details`, () => vm.openDetailsPanel())) if (vm.canLeave) { options.push(Menu.option(vm.i18n`Leave room`, () => vm.leaveRoom()).setDestructive()); } From 4f05d9a5b76063767ed82a5dec83fee745eb21df Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 15 Jun 2021 14:34:26 +0530 Subject: [PATCH 84/90] Make navigation changes in one go Signed-off-by: RMidhunSuresh --- src/domain/session/RoomGridViewModel.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/domain/session/RoomGridViewModel.js b/src/domain/session/RoomGridViewModel.js index c2608680..6dbc5ea4 100644 --- a/src/domain/session/RoomGridViewModel.js +++ b/src/domain/session/RoomGridViewModel.js @@ -78,17 +78,23 @@ export class RoomGridViewModel extends ViewModel { return this._height; } + _switchToRoom(roomId) { + const detailsShown = !!this.navigation.path.get("details")?.value; + let path = this.navigation.path.until("rooms"); + path = path.with(new Segment("room", roomId)); + if (detailsShown) { + path = path.with(new Segment("details", true)); + } + this.navigation.applyPath(path); + } + focusTile(index) { if (index === this._selectedIndex) { return; } const vmo = this._viewModelsObservables[index]; if (vmo) { - const detailsShown = !!this.navigation.path.get("details")?.value; - this.navigation.push("room", vmo.id); - if (detailsShown) { - this.navigation.push("details", true); - } + this._switchToRoom(vmo.id); } else { this.navigation.push("empty-grid-tile", index); } @@ -183,6 +189,7 @@ export class RoomGridViewModel extends ViewModel { import {createNavigation} from "../navigation/index.js"; import {ObservableValue} from "../../observable/ObservableValue.js"; +import { Segment } from "../navigation/Navigation.js"; export function tests() { class RoomVMMock { From 1772fc04f922d9c10bc31d914a3b5e3bb3f54beb Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 15 Jun 2021 14:45:46 +0530 Subject: [PATCH 85/90] Remove text(..) Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/rightpanel/RoomDetailsView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platform/web/ui/session/rightpanel/RoomDetailsView.js b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js index 3b8f0077..a6d1a81f 100644 --- a/src/platform/web/ui/session/rightpanel/RoomDetailsView.js +++ b/src/platform/web/ui/session/rightpanel/RoomDetailsView.js @@ -1,5 +1,5 @@ import {TemplateView} from "../../general/TemplateView.js"; -import {text, classNames, tag} from "../../general/html.js"; +import {classNames, tag} from "../../general/html.js"; import {AvatarView} from "../../avatar.js"; export class RoomDetailsView extends TemplateView { @@ -23,14 +23,14 @@ export class RoomDetailsView extends TemplateView { } _createRoomAliasDisplay(vm) { - return vm.canonicalAlias ? tag.div({className: "RoomDetailsView_id"}, [text(vm.canonicalAlias)]) : + return vm.canonicalAlias ? tag.div({className: "RoomDetailsView_id"}, [vm.canonicalAlias]) : ""; } _createRightPanelRow(t, label, labelClass, value) { const labelClassString = classNames({RoomDetailsView_label: true, ...labelClass}); return t.div({className: "RoomDetailsView_row"}, [ - t.div({className: labelClassString}, [text(label)]), + t.div({className: labelClassString}, [label]), t.div({className: "RoomDetailsView_value"}, value) ]); } From 5e4db2f5dc850f92d894fa4b520d2875935913e2 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 15 Jun 2021 14:52:07 +0530 Subject: [PATCH 86/90] Change font size Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index c22ab79b..098833f6 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -672,7 +672,7 @@ button.link { background-color: transparent; text-align: left; padding: 8px 32px 8px 8px; - font-size: 1.6rem; + font-size: 1.5rem; height: 24px; cursor: pointer; } From e161f6131980920845feb4822f82fb94a8bb08bf Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 15 Jun 2021 15:11:32 +0530 Subject: [PATCH 87/90] Remove selector list Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/layout.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css index 413d53ec..f2474917 100644 --- a/src/platform/web/ui/css/layout.css +++ b/src/platform/web/ui/css/layout.css @@ -72,7 +72,7 @@ the layout viewport up without resizing it when the keyboard shows */ .middle .close-middle { display: none; } /* mobile layout */ @media screen and (max-width: 800px) { - .SessionView:not(.middle-shown, .right-shown) { + .SessionView:not(.middle-shown) { grid-template: "status" auto "left" 1fr / From e2fd90bdc25e014496cf1dc5f096b004ac29e78b Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 24 Jun 2021 13:48:53 +0530 Subject: [PATCH 88/90] Remove Segment import Signed-off-by: RMidhunSuresh --- src/domain/session/RoomGridViewModel.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/domain/session/RoomGridViewModel.js b/src/domain/session/RoomGridViewModel.js index 6dbc5ea4..dddc603b 100644 --- a/src/domain/session/RoomGridViewModel.js +++ b/src/domain/session/RoomGridViewModel.js @@ -81,9 +81,9 @@ export class RoomGridViewModel extends ViewModel { _switchToRoom(roomId) { const detailsShown = !!this.navigation.path.get("details")?.value; let path = this.navigation.path.until("rooms"); - path = path.with(new Segment("room", roomId)); + path = path.with(this.navigation.segment("room", roomId)); if (detailsShown) { - path = path.with(new Segment("details", true)); + path = path.with(this.navigation.segment("details", true)); } this.navigation.applyPath(path); } @@ -189,7 +189,6 @@ export class RoomGridViewModel extends ViewModel { import {createNavigation} from "../navigation/index.js"; import {ObservableValue} from "../../observable/ObservableValue.js"; -import { Segment } from "../navigation/Navigation.js"; export function tests() { class RoomVMMock { From a273b25bac86f248c4039c70f13fb372737537d3 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 24 Jun 2021 14:52:48 +0530 Subject: [PATCH 89/90] Remove css assumption Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/layout.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css index f2474917..fecbbd60 100644 --- a/src/platform/web/ui/css/layout.css +++ b/src/platform/web/ui/css/layout.css @@ -72,7 +72,7 @@ the layout viewport up without resizing it when the keyboard shows */ .middle .close-middle { display: none; } /* mobile layout */ @media screen and (max-width: 800px) { - .SessionView:not(.middle-shown) { + .SessionView:not(.middle-shown):not(.right-shown) { grid-template: "status" auto "left" 1fr / @@ -93,9 +93,9 @@ the layout viewport up without resizing it when the keyboard shows */ 1fr; } - .SessionView:not(.middle-shown) .room-placeholder { display: none; } + .SessionView:not(.middle-shown):not(.right-shown) .room-placeholder { display: none; } .SessionView.middle-shown .LeftPanel { display: none; } - .SessionView.right-shown .middle { display: none; } + .SessionView.right-shown .middle, .SessionView.right-shown .LeftPanel { display: none; } /* show back button */ .middle .close-middle { display: block !important; } From eb35f462141c9abb363a6618580bc4d8039911e4 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 24 Jun 2021 14:58:02 +0530 Subject: [PATCH 90/90] Make sure room does exist before creating vm - This will stop the code from throwing when opening /details on UnknownRoomView. Signed-off-by: RMidhunSuresh --- src/domain/session/SessionViewModel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 14bb087e..087b9315 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -261,6 +261,7 @@ export class SessionViewModel extends ViewModel { const enable = !!this.navigation.path.get("details")?.value; if (enable) { const room = this._roomFromNavigation(); + if (!room) { return; } this._roomDetailsViewModel = this.track(new RoomDetailsViewModel(this.childOptions({room}))); } this.emitChange("roomDetailsViewModel");