Allow chatroom admins to configure the user voice, related to #1478

Material Design 3 CSS changes

CHANGELOG.md

@@ -33,7 +33,8 @@ v0.32 (master)
 * Remove the necessity to launch the Login page to cache the BASE_URI for the daemon launch
 * Containerfile and podman-compose test scripts
 * Fix #1433 Use directly the Carbon object and not createFromFormat() in Contact::isOld()
-* Allow admins to configure the user role, redesign the chatroom user configuration panel, related to #1478
+* Allow chatroom admins to configure the user voice, related to #1478
+* Material Design 3 CSS changes
 
 v0.31
 ---------------------------

app/Widgets/Post/_post_comments.tpl

@@ -124,13 +124,13 @@
                     <button class="button red flat"
                         id="like"
                         onclick="this.classList.add('disabled'); PostActions_ajaxDeleteConfirm('{$liked[0]}', '{$liked[1]}', '{$liked[2]}')">
-                        <i class="material-symbols fill">favorite</i>
+                        <i class="material-symbols">favorite</i>
                     </button>
                 {else}
                     <button class="button red flat"
                         id="like"
                         onclick="this.classList.add('disabled'); PostActions_ajaxLike('{$post->server}', '{$post->node}', '{$post->nodeid}')">
-                        <i class="material-symbols">favorite</i> {$c->__('button.like')}
+                        <i class="material-symbols fill">favorite</i> {$c->__('button.like')}
                     </button>
                 {/if}
                 <button class="button flat gray" onclick="Post.comment()">

app/Widgets/Rooms/locales.ini

@@ -97,11 +97,7 @@ affiliation_admin  = Admin
 affiliation_member = Member
 affiliation_none   = No affiliation
 
-role_moderator     = Moderator
-role_participant   = Participant
-role_visitor       = Visitor - Cannot send messages
-role_none          = No role
-
+allowed_send_messages = Is the user allowed to send messages?
 role_changed       = Role changed
 
 affiliation_owner_changed  = User granted as owner

app/Widgets/RoomsUtils/RoomsUtils.php

@@ -845,9 +845,9 @@ class RoomsUtils extends Base
     }
 
     /**
-     * @brief Change a user role
+     * @brief Change a user voice
      */
-    public function ajaxChangeRole(string $room, string $mucjid, $form)
+    public function ajaxChangeVoice(string $room, string $mucjid, $form)
     {
         if (!validateRoom($room)) {
             return;
@@ -864,7 +864,7 @@ class RoomsUtils extends Base
                 $p = new SetRole;
                 $p->setTo($room)
                     ->setNick($presence->resource)
-                    ->setRole($form->role->value)
+                    ->setRole($form->voice->value ? 'participant' : 'visitor')
                     ->request();
             }
         }

app/Widgets/RoomsUtils/_rooms_configure_user.tpl

@@ -1,89 +1,65 @@
 <section>
+    <h3>{$c->__('room.configure_user')}</h3>
     <ul class="list thick">
         <li>
             <span class="primary icon bubble small {if="$presence"}status {$presence->presencekey}{/if}">
                 <img loading="lazy" src="{$contact->getPicture()}">
             </span>
             <div>
-                <p>{$c->__('room.configure_user')}</p>
+                <p>{$contact->truename}</p>
                 <p>{$contact->id}</p>
             </div>
         </li>
     </ul>
-    {if="$presence"}
-    <form name="changerole">
-        <div class="control">
-            <ul class="list thin">
-                <li class="subheader">
-                    <div>
-                        <p>{$c->__('room.role')}</p>
-                    </div>
-                    <span class="chip active color green"
-                        onclick="RoomsUtils_ajaxChangeRole('{$room->conference}', '{$contact->id}', MovimUtils.formToJson('changerole')); Dialog_ajaxClear();">
-                        <i class="material-symbols">check</i>
-                        {$c->__('button.save')}
-                    </span>
-                </li>
-                <li>
-                    <span class="primary icon gray">
-                        <i class="material-symbols">server_person</i>
-                    </span>
-                    <div>
-                        <div class="select">
-                            <select type="list-single" label="{$c->__('room.role')}" id="role" name="role">
-                                <option value="participant" {if="$presence && $presence->mucrole == 'participant'"}selected{/if}>{$c->__('room.role_participant')}</option>
-                                <option value="moderator" {if="$presence && $presence->mucrole == 'moderator'"}selected{/if}>{$c->__('room.role_moderator')}</option>
-                                <option value="visitor" {if="$presence->mucrole && $presence->mucrole == 'visitor'"}selected{/if}>{$c->__('room.role_visitor')}</option>
-                            </select>
-                        </div>
-                        <label for="affiliation">{$c->__('room.role')}</label>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </form>
-    {/if}
     <form name="changeaffiliation">
         <input type="hidden" name="jid" value="{$contact->id}"/>
         <div>
             <ul class="list thin">
-                <li class="subheader">
-                    <div>
-                        <p>{$c->__('room.affiliation')}</p>
-                    </div>
-                    <span class="chip active color green" onclick="RoomsUtils_ajaxChangeAffiliationConfirm('{$room->conference}', MovimUtils.formToJson('changeaffiliation')); Dialog_ajaxClear();">
-                        <i class="material-symbols">check</i>
-                        {$c->__('button.save')}
-                    </span>
-                </li>
                 <li>
                     <span class="primary icon gray">
                         <i class="material-symbols">assignment_ind</i>
                     </span>
                     <div>
                         <div class="select">
-                            <select type="list-single" label="Maximum Number of Occupants" id="affiliation" name="affiliation">
+                            <select type="list-single" label="Maximum Number of Occupants" id="affiliation" name="affiliation"
+                                onchange="RoomsUtils_ajaxChangeAffiliationConfirm('{$room->conference}', MovimUtils.formToJson('changeaffiliation'));">
                                 <option value="owner" {if="$member && $member->affiliation == 'owner'"}selected{/if}>{$c->__('room.affiliation_owner')}</option>
                                 <option value="admin" {if="$member && $member->affiliation == 'admin'"}selected{/if}>{$c->__('room.affiliation_admin')}</option>
                                 <option value="member" {if="$member && $member->affiliation == 'member'"}selected{/if}>{$c->__('room.affiliation_member')}</option>
                                 <option value="none" {if="$member && $member->affiliation == 'none'"}selected{/if}>{$c->__('room.affiliation_none')}</option>
                             </select>
                         </div>
-                        <label for="affiliation">{$c->__('room.affiliation')}</label>
-                    </div>
-                </li>
-                <li>
-                    <span class="primary icon gray">
-                        <i class="material-symbols">short_text</i>
-                    </span>
-                    <div>
-                        <textarea name="reason" placeholder="{$c->__('room.reason')}" data-autoheight="true"></textarea>
-                        <label for="reason">{$c->__('room.reason')} ({$c->__('input.optional')})</label>
+                        <label for="affiliation">{$c->__('room.role')}</label>
                     </div>
                 </li>
             </ul>
         </div>
     </form>
+    {if="$presence"}
+    <form name="changevoice">
+        <div class="control">
+            <ul class="list thin">
+                <div class="control">
+                    <ul class="list fill">
+                        <li>
+                            <span class="primary icon gray">
+                                <i class="material-symbols">voice_selection</i>
+                            </span>
+                            <span class="control">
+                                <div class="checkbox">
+                                    <input type="checkbox" id="voice" name="voice" {if="$presence->mucrole != 'visitor'"}checked{/if}
+                                    onchange="RoomsUtils_ajaxChangeVoice('{$room->conference}', '{$contact->id}', MovimUtils.formToJson('changevoice'));">
+                                    <label for="voice"></label>
+                                </div>
+                            </span>
+                            <p class="normal all">{$c->__('room.allowed_send_messages')}</p>
+                        </li>
+                    </ul>
+                </div>
+            </ul>
+        </div>
+    </form>
+    {/if}
 </section>
 <footer>
     <button class="button flat oppose" onclick="Dialog_ajaxClear()">

app/Widgets/RoomsUtils/_rooms_drawer.tpl

@@ -262,7 +262,7 @@
                         {/if}
                         {if="$conference->presence && ($conference->presence->mucrole == 'moderator' || $conference->presence->mucaffiliation == 'owner')"}
                             <span class="control icon active gray divided" onclick="
-                                RoomsUtils_ajaxChangeAffiliation('{$conference->conference|echapJS}', '{$value->jid|echapJS}');
+                                RoomsUtils_ajaxConfigureUser('{$conference->conference|echapJS}', '{$value->jid|echapJS}');
                                 Drawer.clear();">
                                 <i class="material-symbols">manage_accounts</i>
                             </span>

app/Widgets/Upload/upload.css

@@ -20,7 +20,7 @@
     margin: 0.25rem 1rem;
     display: block;
     box-sizing: border-box;
-    border-radius: 0.5rem;
+    border-radius: 1.5rem;
     min-height: 30rem;
     background-color: rgba(0, 0, 0, 0.15);
     border: 0.5rem solid transparent;

public/theme/css/dialog.css

@@ -1,14 +1,14 @@
 .dialog {
     position: fixed;
-    top: 5%;
-    left: calc(50% - 25rem);
+    top: 8rem;
+    left: calc(50% - 30rem);
     height: initial;
-    width: 50rem;
+    width: 60rem;
 
     overflow: hidden;
 
     box-shadow: var(--elevation-3);
-    border-radius: 1rem;
+    border-radius: 2rem;
     z-index: 4;
     box-sizing: border-box;
     animation: zoom .25s ease-in-out;
@@ -19,7 +19,7 @@
 }
 
 .dialog.scroll {
-    height: 90%;
+    height: calc(100% - 16rem);
 }
 
 .dialog > section {
@@ -67,11 +67,11 @@
     left: 0;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 34rem) {
     .dialog {
-        width: 90%;
+        width: calc(100% - 6rem);
         min-height: 0;
         min-width: 0;
-        left: 5%;
+        left: 3rem;
     }
 }

public/theme/css/form.css

@@ -75,6 +75,7 @@ form > div .select select {
     background-color: transparent;
     background-image: none;
     padding-bottom: 1rem;
+    font-weight: 400;
     mask-image: linear-gradient(to right, black calc(100% - 10rem), transparent);
 }
 
@@ -330,7 +331,7 @@ input[type=button] {
     display: inline-block;
     box-sizing: border-box;
     font-size: 2rem;
-    font-weight: 700;
+    font-weight: 500;
     line-height: 5rem;
     height: 5rem;
     margin: 0.75rem 0.25rem;

public/theme/css/title.css

@@ -3,6 +3,7 @@
 h1 { /* Display 1 */
     font-size: 4.25rem;
     line-height: 7rem;
+    font-weight: 400;
 }
 
 article h1,
@@ -10,12 +11,13 @@ h2 { /* Headline */
     font-size: 3rem;
     line-height: 4rem;
     padding: 1.5rem 0;
+    font-weight: 400;
 }
 
 article h2,
 h3 { /* Title */
     font-size: 2.5rem;
-    font-weight: 600;
+    font-weight: 400;
     line-height: 3rem;
     padding: 1rem 0;
 }
@@ -24,6 +26,7 @@ article h3,
 h4, input, textarea, select { /* Headline */
     font-size: 2rem;
     line-height: 3rem;
+    font-weight: 500;
 }
 
 article h4 {