mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Packages Projects Releases 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;
}
.MemberDetailsView_value {
.MemberDetailsView_value, .MemberDetailsView_options {
margin-left: 8px;
margin-top: 5px;
font-size: 12px;
}
.MemberDetailsView_options {
display: inline-flex;
flex-direction: column;
}
.MemberDetailsView_options a{
color: #0dbd8b;
text-decoration: none;
margin-bottom: 3px;
}
.LazyListParent {
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 {classNames} from "../../general/html.js";
import {TemplateView} from "../../general/TemplateView.js";
export class MemberDetailsView extends TemplateView {
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"},
[ t.view(new AvatarView(vm, 128)),
t.div({className: "MemberDetailsView_name"}, [t.h2(vm.name)]),
t.div({ className: "MemberDetailsView_id" }, vm.userId),
this._createSection(t, "ROLE", {}, vm.role)
t.div({className: "MemberDetailsView_name"}, t.h2(vm.name)),
t.div({className: "MemberDetailsView_id"}, vm.userId),
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) {
const labelClassString = classNames({MemberDetailsView_label: true, ...labelClass});
return t.div({className: "MemberDetailsView_section"}, [
t.div({className: labelClassString}, [label]),
t.div({className: "MemberDetailsView_value"}, value)
]);
_createSection(t, label, value) {
return t.div({ className: "MemberDetailsView_section" },
[
t.div({className: "MemberDetailsView_label"}, label),
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`)
])
]);
}
}