diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css index f7fbe732..7d785c9f 100644 --- a/src/platform/web/ui/css/layout.css +++ b/src/platform/web/ui/css/layout.css @@ -217,6 +217,8 @@ the layout viewport up without resizing it when the keyboard shows */ .LazyListParent { flex: 1; + flex-basis: 0; + margin-top: 15px; } .LoadingView { diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 1f7f2f13..7e54dc2f 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -1123,12 +1123,32 @@ button.RoomDetailsView_row::after { /* Memberlist Panel */ -.MemberListView { +.MemberListView__list { padding-left: 16px; padding-right: 16px; margin: 0; } +.MemberListView { + display: flex; + flex-direction: column; + height: 100%; +} + +.MemberListView__invite-container { + display: flex; + justify-content: center; + align-items: center; +} + +.MemberListView__invite-btn { + width: 80%; + height: 32px; + display: flex; + justify-content: center; + align-items: center; +} + .MemberTileView { margin-bottom: 8px; list-style: none; diff --git a/src/platform/web/ui/session/rightpanel/MemberListView.js b/src/platform/web/ui/session/rightpanel/MemberListView.js index a4a4e78c..fdb7001d 100644 --- a/src/platform/web/ui/session/rightpanel/MemberListView.js +++ b/src/platform/web/ui/session/rightpanel/MemberListView.js @@ -16,13 +16,20 @@ limitations under the License. import {LazyListView} from "../../general/LazyListView"; import {MemberTileView} from "./MemberTileView.js"; +import {TemplateView} from "../../general/TemplateView"; -export class MemberListView extends LazyListView { - constructor(vm) { - super({ +export class MemberListView extends TemplateView { + render(t, vm) { + const list = new LazyListView({ list: vm.memberTileViewModels, - className: "MemberListView", + className: "MemberListView__list", itemHeight: 40 }, tileViewModel => new MemberTileView(tileViewModel)); + return t.div({ className: "MemberListView" }, [ + t.div({ className: "MemberListView__invite-container" }, [ + t.button({ className: "MemberListView__invite-btn button-action primary" }, vm.i18n`Invite to this room`), + ]), + t.view(list), + ]); } }