Browse Source

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

Material Design 3 CSS changes
pull/1474/head
Timothée Jaussoin 1 week ago
parent
commit
2e321a089c
  1. 3
      CHANGELOG.md
  2. 4
      app/Widgets/Post/_post_comments.tpl
  3. 6
      app/Widgets/Rooms/locales.ini
  4. 6
      app/Widgets/RoomsUtils/RoomsUtils.php
  5. 84
      app/Widgets/RoomsUtils/_rooms_configure_user.tpl
  6. 2
      app/Widgets/RoomsUtils/_rooms_drawer.tpl
  7. 2
      app/Widgets/Upload/upload.css
  8. 16
      public/theme/css/dialog.css
  9. 3
      public/theme/css/form.css
  10. 5
      public/theme/css/title.css

3
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 * Remove the necessity to launch the Login page to cache the BASE_URI for the daemon launch
* Containerfile and podman-compose test scripts * Containerfile and podman-compose test scripts
* Fix #1433 Use directly the Carbon object and not createFromFormat() in Contact::isOld() * 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 v0.31
--------------------------- ---------------------------

4
app/Widgets/Post/_post_comments.tpl

@ -124,13 +124,13 @@
<button class="button red flat" <button class="button red flat"
id="like" id="like"
onclick="this.classList.add('disabled'); PostActions_ajaxDeleteConfirm('{$liked[0]}', '{$liked[1]}', '{$liked[2]}')"> 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> </button>
{else} {else}
<button class="button red flat" <button class="button red flat"
id="like" id="like"
onclick="this.classList.add('disabled'); PostActions_ajaxLike('{$post->server}', '{$post->node}', '{$post->nodeid}')"> 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> </button>
{/if} {/if}
<button class="button flat gray" onclick="Post.comment()"> <button class="button flat gray" onclick="Post.comment()">

6
app/Widgets/Rooms/locales.ini

@ -97,11 +97,7 @@ affiliation_admin = Admin
affiliation_member = Member affiliation_member = Member
affiliation_none = No affiliation 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 role_changed = Role changed
affiliation_owner_changed = User granted as owner affiliation_owner_changed = User granted as owner

6
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)) { if (!validateRoom($room)) {
return; return;
@ -864,7 +864,7 @@ class RoomsUtils extends Base
$p = new SetRole; $p = new SetRole;
$p->setTo($room) $p->setTo($room)
->setNick($presence->resource) ->setNick($presence->resource)
->setRole($form->role->value)
->setRole($form->voice->value ? 'participant' : 'visitor')
->request(); ->request();
} }
} }

84
app/Widgets/RoomsUtils/_rooms_configure_user.tpl

@ -1,89 +1,65 @@
<section> <section>
<h3>{$c->__('room.configure_user')}</h3>
<ul class="list thick"> <ul class="list thick">
<li> <li>
<span class="primary icon bubble small {if="$presence"}status {$presence->presencekey}{/if}"> <span class="primary icon bubble small {if="$presence"}status {$presence->presencekey}{/if}">
<img loading="lazy" src="{$contact->getPicture()}"> <img loading="lazy" src="{$contact->getPicture()}">
</span> </span>
<div> <div>
<p>{$c->__('room.configure_user')}</p>
<p>{$contact->truename}</p>
<p>{$contact->id}</p> <p>{$contact->id}</p>
</div> </div>
</li> </li>
</ul> </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"> <form name="changeaffiliation">
<input type="hidden" name="jid" value="{$contact->id}"/> <input type="hidden" name="jid" value="{$contact->id}"/>
<div> <div>
<ul class="list thin"> <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> <li>
<span class="primary icon gray"> <span class="primary icon gray">
<i class="material-symbols">assignment_ind</i> <i class="material-symbols">assignment_ind</i>
</span> </span>
<div> <div>
<div class="select"> <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="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="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="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> <option value="none" {if="$member && $member->affiliation == 'none'"}selected{/if}>{$c->__('room.affiliation_none')}</option>
</select> </select>
</div> </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> </div>
</li> </li>
</ul> </ul>
</div> </div>
</form> </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> </section>
<footer> <footer>
<button class="button flat oppose" onclick="Dialog_ajaxClear()"> <button class="button flat oppose" onclick="Dialog_ajaxClear()">

2
app/Widgets/RoomsUtils/_rooms_drawer.tpl

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

2
app/Widgets/Upload/upload.css

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

16
public/theme/css/dialog.css

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

3
public/theme/css/form.css

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

5
public/theme/css/title.css

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

Loading…
Cancel
Save