Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add basic UI and styling

Browse source 
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-07-20 16:45:02 +05:30
parent acdba8fc02
commit 7ef7c419e3
4 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/domain/session/rightpanel/MemberDetailsViewModel.js
View file

@ -31,6 +31,10 @@ export class MemberDetailsViewModel extends ViewModel {
get type() { return "member-details"; } get type() { return "member-details"; }
get role() {
return "Admin";
}
_onMemberChange() { _onMemberChange() {
this._member = this._observableMember.get(); this._member = this._observableMember.get();
this.emitChange(); this.emitChange();

6
src/platform/web/ui/css/right-panel.css
View file

@ -6,7 +6,7 @@
flex-direction: column; flex-direction: column;
} }
.RoomDetailsView { .RoomDetailsView, .MemberDetailsView {
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
} }
@ -15,11 +15,11 @@
display: flex; display: flex;
} }
.RoomDetailsView_name h2 { .RoomDetailsView_name h2, .MemberDetailsView_name h2 {
text-align: center; text-align: center;
} }
.RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .EncryptionIconView { .RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .MemberDetailsView, .EncryptionIconView {
display: flex; display: flex;
align-items: center; align-items: center;
} }

22
src/platform/web/ui/css/themes/element/theme.css
View file

@ -807,7 +807,7 @@ button.link {
padding-top: 0; padding-top: 0;
} }
.RoomDetailsView_id { .RoomDetailsView_id, .MemberDetailsView_id {
color: #737D8C; color: #737D8C;
font-size: 12px; font-size: 12px;
} }
@ -817,7 +817,7 @@ button.link {
width: 100%; width: 100%;
} }
.RoomDetailsView_name h2 { .RoomDetailsView_name h2, .MemberDetailsView_name h2 {
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1.8rem; font-size: 1.8rem;
} }
@ -929,6 +929,24 @@ button.RoomDetailsView_row::after {
flex: 1; flex: 1;
} }
/* Member details panel */
.MemberDetailsView_section {
box-sizing: border-box;
padding: 16px;
width: 100%;
}
.MemberDetailsView_label {
font-size: 12px;
font-weight: 600;
color: #8d99a5;
}
.MemberDetailsView_value {
margin-left: 8px;
font-size: 12px;
}
.LazyListParent { .LazyListParent {
overflow-y: auto; overflow-y: auto;
} }

16
src/platform/web/ui/session/rightpanel/MemberDetailsView.js
View file

@ -15,14 +15,24 @@ limitations under the License.
*/ */
import {AvatarView} from "../../AvatarView.js"; import {AvatarView} from "../../AvatarView.js";
import {classNames} from "../../general/html.js";
import {TemplateView} from "../../general/TemplateView.js"; import {TemplateView} from "../../general/TemplateView.js";
export class MemberDetailsView extends TemplateView { export class MemberDetailsView extends TemplateView {
render(t, vm) { render(t, vm) {
return t.div({ className: "MemberDetailsView" }, return t.div({className: "MemberDetailsView"},
[ t.view(new AvatarView(vm, 128)), [ t.view(new AvatarView(vm, 128)),
t.div({ className: "MemberDetailsView_name" }, vm.name), t.div({className: "MemberDetailsView_name"}, [t.h2(vm.name)]),
t.div({ className: "MemberDetailsView_userId" }, vm.userId) t.div({ className: "MemberDetailsView_id" }, vm.userId),
this._createSection(t, "ROLE", {}, vm.role)
]); ]);
} }
_createSection(t, label, labelClass, value) {
const labelClassString = classNames({MemberDetailsView_label: true, ...labelClass});
return t.div({className: "MemberDetailsView_section"}, [
t.div({className: labelClassString}, [label]),
t.div({className: "MemberDetailsView_value"}, value)
]);
}
} }