diff --git a/src/domain/navigation/URLRouter.js b/src/domain/navigation/URLRouter.js index e27c0fef..ac3f968c 100644 --- a/src/domain/navigation/URLRouter.js +++ b/src/domain/navigation/URLRouter.js @@ -65,6 +65,10 @@ export class URLRouter { return this.urlForSegments([this._navigation.segment(type, value)]); } + urlUntilSegment(type) { + return this.urlForPath(this._navigation.path.until(type)); + } + urlForPath(path) { return this.history.pathAsUrl(this._stringifyPath(path)); } diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index 985ad32c..8c470370 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -22,7 +22,7 @@ import {ViewModel} from "../../ViewModel.js"; export class RoomViewModel extends ViewModel { constructor(options) { super(options); - const {room, ownUserId, closeCallback} = options; + const {room, ownUserId} = options; this._room = room; this._ownUserId = ownUserId; this._timeline = null; @@ -30,9 +30,13 @@ export class RoomViewModel extends ViewModel { this._onRoomChange = this._onRoomChange.bind(this); this._timelineError = null; this._sendError = null; - this._closeCallback = closeCallback; this._composerVM = new ComposerViewModel(this); this._clearUnreadTimout = null; + this._closeUrl = this.urlRouter.urlUntilSegment("session"); + } + + get closeUrl() { + return this._closeUrl; } async load() { diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css index 07cf99c9..1f19e299 100644 --- a/src/ui/web/css/layout.css +++ b/src/ui/web/css/layout.css @@ -54,7 +54,7 @@ html { /* mobile layout */ @media screen and (max-width: 800px) { /* show back button */ - .RoomHeader button.back { display: block; } + .RoomHeader .close-room { display: block !important; } /* hide grid button */ .LeftPanel button.grid { display: none; } div.RoomView, div.room-placeholder, div.RoomGridView { display: none; } diff --git a/src/ui/web/css/room.css b/src/ui/web/css/room.css index 27630728..a5f8fe6d 100644 --- a/src/ui/web/css/room.css +++ b/src/ui/web/css/room.css @@ -27,7 +27,7 @@ limitations under the License. display: block; } -.RoomHeader .back { +.RoomHeader .close-room { display: none; } diff --git a/src/ui/web/css/themes/bubbles/theme.css b/src/ui/web/css/themes/bubbles/theme.css index 1cb3013d..933ae9d3 100644 --- a/src/ui/web/css/themes/bubbles/theme.css +++ b/src/ui/web/css/themes/bubbles/theme.css @@ -97,7 +97,7 @@ a { line-height: 40px; } -.back::before { +.close-room::before { content: "☰"; } diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 98093652..8b634fe8 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -397,12 +397,12 @@ a { .RoomHeader > :not(:last-child) { /* use margin-right because the first item, - button.back might be hidden and then we don't + .close-room might be hidden and then we don't want a margin-left on the second item*/ margin-right: 8px; } -button.back { +.close-room, .close-session { background-image: url('icons/chevron-left.svg'); background-position-x: 10px; } diff --git a/src/ui/web/session/room/RoomView.js b/src/ui/web/session/room/RoomView.js index 9eeeb554..3fe3f9c3 100644 --- a/src/ui/web/session/room/RoomView.js +++ b/src/ui/web/session/room/RoomView.js @@ -26,7 +26,7 @@ export class RoomView extends TemplateView { return t.div({className: "RoomView"}, [ t.div({className: "TimelinePanel"}, [ t.div({className: "RoomHeader"}, [ - t.button({className: "utility back", onClick: () => vm.close()}), + t.a({className: "button-utility close-room", href: vm.closeUrl, title: vm.i18n`Close room`}), renderAvatar(t, vm, 32), t.div({className: "room-description"}, [ t.h2(vm => vm.name),