feat: better layout for manage chat room modal

This commit is contained in:
Barış Soner Uşaklı
2023-11-20 18:33:02 -05:00
parent 9079ad0b2c
commit f4faa0b7d1
2 changed files with 31 additions and 24 deletions

View File

@@ -32,6 +32,7 @@ define('forum/chats/manage', [
}); });
modal = bootbox.dialog({ modal = bootbox.dialog({
title: '[[modules:chat.manage-room]]', title: '[[modules:chat.manage-room]]',
size: 'large',
message: html, message: html,
onEscape: true, onEscape: true,
}); });

View File

@@ -1,19 +1,5 @@
<div class=""> <div class="">
<label class="form-label">[[modules:chat.add-user]]</label>
<input component="chat/manage/user/add/search" class="form-control" type="text" placeholder="[[global:user-search-prompt]]" />
<p class="text-danger"></p>
<p class="form-text">[[modules:chat.add-user-help]]</p>
<hr />
<label class="form-label">[[global:users]]</label>
<input component="chat/manage/user/list/search" class="form-control mb-1" type="text" placeholder="[[global:user-search-prompt]]" />
<ul component="chat/manage/user/list" class="list-group overflow-auto pe-1 mb-3" style="max-height: 300px;">
<li class="list-group-item"><i class="fa fa-spinner fa-spin"></i> [[modules:chat.retrieving-users]]</li>
</ul>
{{{ if user.isAdmin }}} {{{ if user.isAdmin }}}
<hr/>
<div class="d-flex gap-2 mb-3 align-items-center justify-content-between"> <div class="d-flex gap-2 mb-3 align-items-center justify-content-between">
<label class="form-label text-nowrap mb-0">[[modules:chat.default-notification-setting]]</label> <label class="form-label text-nowrap mb-0">[[modules:chat.default-notification-setting]]</label>
<select component="chat/room/notification/setting" class="form-select" style="width: 200px;"> <select component="chat/room/notification/setting" class="form-select" style="width: 200px;">
@@ -22,17 +8,37 @@
<option value="3" {{{ if (room.notificationSetting == "3") }}}selected{{{ end }}}>[[modules:chat.notification-setting-all-messages]]</option> <option value="3" {{{ if (room.notificationSetting == "3") }}}selected{{{ end }}}>[[modules:chat.notification-setting-all-messages]]</option>
</select> </select>
</div> </div>
<hr/>
{{{ if room.public }}}
<label class="form-label">[[modules:chat.select-groups]]</label>
<select component="chat/room/groups" class="form-select mb-3" multiple size="10">
{{{ each groups }}}
<option value="{./displayName}" {{{ if ./selected }}}selected{{{ end }}}>{./displayName}</option>
{{{ end }}}
</select>
{{{ end }}} {{{ end }}}
<label class="form-label">[[modules:chat.add-user]]</label>
<input component="chat/manage/user/add/search" class="form-control" type="text" placeholder="[[global:user-search-prompt]]" />
<p class="text-danger"></p>
<p class="form-text">[[modules:chat.add-user-help]]</p>
<hr />
<div class="row">
<div class="col-12 {{{ if (user.isAdmin && room.public) }}}col-md-6{{{ end }}}">
<label class="form-label">[[global:users]]</label>
<input component="chat/manage/user/list/search" class="form-control mb-1" type="text" placeholder="[[global:user-search-prompt]]" />
<ul component="chat/manage/user/list" class="list-group overflow-auto" style="max-height: 300px;">
<li class="list-group-item"><i class="fa fa-spinner fa-spin"></i> [[modules:chat.retrieving-users]]</li>
</ul>
</div>
{{{ if (user.isAdmin && room.public) }}}
<div class="col-12 col-md-6 d-flex flex-column">
<label class="form-label">[[modules:chat.select-groups]]</label>
<select component="chat/room/groups" class="form-select flex-fill" multiple>
{{{ each groups }}}
<option value="{./displayName}" {{{ if ./selected }}}selected{{{ end }}}>{./displayName}</option>
{{{ end }}}
</select>
</div>
{{{ end }}}
</div>
{{{ if user.isAdmin }}}
<hr/>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<button component="chat/manage/save" class="btn btn-sm btn-primary">[[global:save]]</button> <button component="chat/manage/save" class="btn btn-sm btn-primary">[[global:save]]</button>
</div> </div>