diff --git a/src/style.css b/src/style.css index ffaf7aa..a8d8a4c 100644 --- a/src/style.css +++ b/src/style.css @@ -3,14 +3,11 @@ bottom: 10px; right: 10px; max-width: 375px; + border-radius: 5px; } #chatterbox .Timeline { - height: 500px; -} - -#chatterbox>div { - border-radius: 5px; + height: 450px; } /* @@ -26,7 +23,6 @@ todo: this style should actually be in hydrogen-web width: 32px; height: 32px; border: none; - margin: 5px; background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd; border-radius: 2px; cursor: pointer; @@ -40,8 +36,8 @@ todo: this style should actually be in hydrogen-web justify-content: space-evenly; height: 80px; width: 320px; - border-radius: 5px; } + .PolicyAgreementView-text { padding-bottom: 10px; } @@ -67,15 +63,58 @@ todo: this style should actually be in hydrogen-web .ChatterboxView { width: 375px; - height: 570px; + height: 595px; +} + +.RoomHeaderView { + display: grid; + grid-template-columns: 1fr 6fr 1fr; + align-items: center; + padding: 10px 15px; + height: 35px; + background-color: #295dbd; + border-radius: 5px 5px 0 0; + color: white; + font-weight: 600; + font-size: 1.5rem; +} + +.RoomHeaderView_menu { + display: flex; + justify-content: end; } -.hydrogen { - background-color: transparent !important; +.RoomHeaderView_menu_minimize { + background: url("./ui/res/chevron-down.svg") no-repeat; + height: 20px; + width: 20px; + border: none; + cursor: pointer; +} + +.RoomHeaderView .avatar { + border-radius: 2px; +} + +.ChatterboxView_footer { + display: flex; + align-items: center; + justify-content: end; + font-size: 1.0rem; + font-weight: 600; + box-sizing: border-box; + padding-right: 53px; + color: #9b9797; } -.hydrogen :not(.StartChat) { - background-color: rgba(245, 245, 245, 0.90); +.ChatterboxView_footer>img { + width: 35px; + padding-left: 4px; +} + +.ChatterboxView .MessageComposer_input>textarea { + border-radius: 5px; + border: #c2bebe 1.5px solid; } body { diff --git a/src/ui/res/chevron-down.svg b/src/ui/res/chevron-down.svg new file mode 100644 index 0000000..12c9e04 --- /dev/null +++ b/src/ui/res/chevron-down.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + diff --git a/src/ui/res/matrix-logo.svg b/src/ui/res/matrix-logo.svg new file mode 100644 index 0000000..d24a428 --- /dev/null +++ b/src/ui/res/matrix-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/ui/views/ChatterboxView.ts b/src/ui/views/ChatterboxView.ts index 632bd0b..9d40096 100644 --- a/src/ui/views/ChatterboxView.ts +++ b/src/ui/views/ChatterboxView.ts @@ -1,4 +1,4 @@ -import { TemplateView, TimelineView, LoadingView } from "hydrogen-view-sdk"; +import { TemplateView, TimelineView, LoadingView, AvatarView, RoomViewModel } from "hydrogen-view-sdk"; import { Builder } from "hydrogen-view-sdk/types/platform/web/ui/general/TemplateView"; import { MessageComposer } from "hydrogen-view-sdk"; import { ChatterboxViewModel } from "../../viewmodels/ChatterboxViewModel"; @@ -6,8 +6,22 @@ import { ChatterboxViewModel } from "../../viewmodels/ChatterboxViewModel"; export class ChatterboxView extends TemplateView { render(t: Builder) { return t.div({className: "ChatterboxView"}, [ + t.mapView(vm => vm.roomViewModel? vm: null, vm => vm ? new RoomHeaderView(vm) : null), t.mapView(vm => vm.timelineViewModel, vm => vm ? new TimelineView(vm) : new LoadingView()), - t.mapView(vm => vm.messageComposerViewModel, vm => vm ? new MessageComposer(vm) : null) + t.mapView(vm => vm.messageComposerViewModel, vm => vm ? new MessageComposer(vm) : null), + t.div({className: "ChatterboxView_footer"}, ["Powered by", t.img({src:"./src/ui/res/matrix-logo.svg"})]), + ]); + } +} + +class RoomHeaderView extends TemplateView { + render(t: Builder, vm) { + return t.div({ className: "RoomHeaderView" }, [ + t.view(new AvatarView(vm.roomViewModel, 30)), + t.div({ className: "RoomHeaderView_name" }, vm => vm.roomViewModel.name), + t.div({ className: "RoomHeaderView_menu" }, [ + t.button({ className: "RoomHeaderView_menu_minimize", onClick: () => vm.minimize() }) + ]), ]); } } diff --git a/src/viewmodels/ChatterboxViewModel.ts b/src/viewmodels/ChatterboxViewModel.ts index b3c3d36..342b4b7 100644 --- a/src/viewmodels/ChatterboxViewModel.ts +++ b/src/viewmodels/ChatterboxViewModel.ts @@ -1,14 +1,16 @@ import { RoomViewModel, ViewModel, TimelineViewModel, ComposerViewModel} from "hydrogen-view-sdk"; export class ChatterboxViewModel extends ViewModel { - private _timelineViewModel?: TimelineViewModel; private _messageComposerViewModel?: ComposerViewModel; + private _roomViewModel?: RoomViewModel; private _loginPromise: Promise; + private _applySegment: (segment) => void; constructor(options) { super(options); this._client = options.client; this._loginPromise = options.loginPromise; + this._applySegment = options.applySegment; } async loadRoom() { @@ -16,16 +18,15 @@ export class ChatterboxViewModel extends ViewModel { await this._loginPromise; const roomId = this._options.config["auto_join_room"]; const room = this._session.rooms.get(roomId) ?? await this._joinRoom(roomId); - const roomVm = new RoomViewModel({ + this._roomViewModel = new RoomViewModel({ room, ownUserId: this._session.userId, platform: this.platform, urlCreator: this.urlCreator, navigation: this.navigation, }); - await roomVm.load(); - this._timelineViewModel = roomVm.timelineViewModel; - this._messageComposerViewModel = new ComposerViewModel(roomVm); + await this._roomViewModel.load(); + this._messageComposerViewModel = new ComposerViewModel(this._roomViewModel); this.emitChange("timelineViewModel"); } @@ -52,13 +53,21 @@ export class ChatterboxViewModel extends ViewModel { return promise; } + minimize() { + this._applySegment("start"); + } + get timelineViewModel() { - return this._timelineViewModel; + return this._roomViewModel?.timelineViewModel; } get messageComposerViewModel() { return this._messageComposerViewModel; } + + get roomViewModel() { + return this._roomViewModel; + } private get _session() { return this._client.session; diff --git a/src/viewmodels/RootViewModel.ts b/src/viewmodels/RootViewModel.ts index 7957949..fa7a999 100644 --- a/src/viewmodels/RootViewModel.ts +++ b/src/viewmodels/RootViewModel.ts @@ -39,29 +39,31 @@ export class RootViewModel extends ViewModel { private async _showTimeline(loginPromise: Promise) { this._activeSection = "timeline"; - this._chatterBoxViewModel = new ChatterboxViewModel( - this.childOptions({ - client: this._client, - config: this._config, - state: this._state, - applySegment: this._applySegment, - loginPromise, - }) - ); - this._chatterBoxViewModel.loadRoom(); + if (!this._chatterBoxViewModel) { + this._chatterBoxViewModel = this.track(new ChatterboxViewModel( + this.childOptions({ + client: this._client, + config: this._config, + state: this._state, + applySegment: this._applySegment, + loginPromise, + }) + )); + this._chatterBoxViewModel.loadRoom(); + } this.emitChange("activeSection"); } private _showAccountSetup() { this._activeSection = "account-setup"; - this._accountSetupViewModel = new AccountSetupViewModel( + this._accountSetupViewModel = this.track(new AccountSetupViewModel( this.childOptions({ client: this._client, config: this._config, state: this._state, applySegment: this._applySegment, }) - ); + )); this.emitChange("activeSection"); }