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