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

Improve code and css

Browse source 
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-07-20 21:36:58 +05:30
parent c2b9c3f726
commit c9224c13a7
2 changed files with 40 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -942,11 +942,23 @@ button.RoomDetailsView_row::after {
color: #8d99a5; color: #8d99a5;
} }
.MemberDetailsView_value { .MemberDetailsView_value, .MemberDetailsView_options {
margin-left: 8px; margin-left: 8px;
margin-top: 5px;
font-size: 12px; font-size: 12px;
} }
.MemberDetailsView_options {
display: inline-flex;
flex-direction: column;
}
.MemberDetailsView_options a{
color: #0dbd8b;
text-decoration: none;
margin-bottom: 3px;
}
.LazyListParent { .LazyListParent {
overflow-y: auto; overflow-y: auto;
} }

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

@ -15,24 +15,41 @@ 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) {
const encryptionMessages = {
true: vm.i18n`Messages in this room are end-to-end encrypted.`,
false: vm.i18n`Messages in this room are not end-to-end encrypted.`
};
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"}, [t.h2(vm.name)]), t.div({className: "MemberDetailsView_name"}, t.h2(vm.name)),
t.div({ className: "MemberDetailsView_id" }, vm.userId), t.div({className: "MemberDetailsView_id"}, vm.userId),
this._createSection(t, "ROLE", {}, vm.role) this._createSection(t, vm.i18n`ROLE`, vm.role),
this._createSection(t, vm.i18n`SECURITY`, encryptionMessages[vm.isEncrypted]),
this._createOptions(t, vm)
]); ]);
} }
_createSection(t, label, labelClass, value) { _createSection(t, label, value) {
const labelClassString = classNames({MemberDetailsView_label: true, ...labelClass}); return t.div({ className: "MemberDetailsView_section" },
return t.div({className: "MemberDetailsView_section"}, [ [
t.div({className: labelClassString}, [label]), t.div({className: "MemberDetailsView_label"}, label),
t.div({className: "MemberDetailsView_value"}, value) t.div({className: "MemberDetailsView_value"}, value)
]); ]);
}
_createOptions(t, vm) {
return t.div({ className: "MemberDetailsView_section" },
[
t.div({className: "MemberDetailsView_label"}, vm.i18n`OPTIONS`),
t.div({ className: "MemberDetailsView_options" },
[
t.a({href: "#"}, vm.i18n`Direct Message`),
t.a({href: "#"}, vm.i18n`Open Link to User`)
])
]);
} }
} }