Commit 2ec70adc authored by JC Brand's avatar JC Brand

modtools: Add help text to explain roles and affiliations

parent 90ef4b0c
...@@ -331,6 +331,11 @@ body.converse-fullscreen { ...@@ -331,6 +331,11 @@ body.converse-fullscreen {
} }
} }
.helptext {
font-size: var(--font-size-tiny);
color: var(--text-color-lighten-15-percent);
}
.selected { .selected {
color: var(--link-color) !important; color: var(--link-color) !important;
} }
......
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" <h5 class="modal-title" id="converse-modtools-modal-label">{{{o.__('Moderator Tools')}}}</h5>
id="converse-modtools-modal-label">{{{o.__('Moderator Tools')}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
...@@ -21,6 +20,9 @@ ...@@ -21,6 +20,9 @@
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane tab-pane--columns active" id="roles-tabpanel" role="tabpanel" aria-labelledby="roles-tab"> <div class="tab-pane tab-pane--columns active" id="roles-tabpanel" role="tabpanel" aria-labelledby="roles-tab">
<form class="converse-form query-role"> <form class="converse-form query-role">
<p class="helptext pb-3">
{{{o.__("Roles can assigned to users to grant or deny them certain abilities in a multi-user chat. They're assigned either explicitly or implicitly as part of an affiliation. A role that's not due to an affiliation, is only valid for the duration of the user's session.")}}}
</p>
<div class="form-group"> <div class="form-group">
<label for="role"> <label for="role">
<strong>{{{o.__('Role')}}}:</strong> <strong>{{{o.__('Role')}}}:</strong>
...@@ -29,7 +31,16 @@ ...@@ -29,7 +31,16 @@
<div class="col"> <div class="col">
<select class="custom-select select-role" name="role"> <select class="custom-select select-role" name="role">
{[ o.roles.forEach(function (role) { ]} {[ o.roles.forEach(function (role) { ]}
<option value="{{{role}}}" {[ if (role === o.role) { ]} selected="selected" {[ } ]}>{{{role}}}</option> <option value="{{{role}}}" {[ if (role === o.role) { ]} selected="selected" {[ } ]}
{[ if (role === 'moderator') { ]}
title="{{{o.__("Moderators are privileged users who can change the roles of other users (except those with admin or owner affiliations.")}}}"
{[ } ]}
{[ if (role === 'participant') { ]}
title="{{{o.__("The default role, implies that you can read and write messages.")}}}"
{[ } ]}
{[ if (role === 'visitor') { ]}
title="{{{o.__("Visitors aren't allowed to write messages in a moderated multi-user chat.")}}}"
{[ } ]}>{{{role}}}</option>
{[ }); ]} {[ }); ]}
</select> </select>
</div> </div>
...@@ -37,6 +48,19 @@ ...@@ -37,6 +48,19 @@
<input type="submit" class="btn btn-primary" name="users_with_role" value="{{{o.__('Show users')}}}"/> <input type="submit" class="btn btn-primary" name="users_with_role" value="{{{o.__('Show users')}}}"/>
</div> </div>
</div> </div>
<div class="row">
<div class="col pt-2">
{[ if (o.role === 'moderator') { ]}
<p class="helptext pb-3">{{{o.__("Moderators are privileged users who can change the roles of other users (except those with admin or owner affiliations.")}}}</p>
{[ } ]}
{[ if (o.role === 'participant') { ]}
<p class="helptext pb-3">{{{o.__("The default role, implies that you can read and write messages.")}}}</p>
{[ } ]}
{[ if (o.role === 'visitor') { ]}
<p class="helptext pb-3">{{{o.__("Visitors aren't allowed to write messages in a moderated multi-user chat.")}}}</p>
{[ } ]}
</div>
</div>
</div> </div>
</form> </form>
<div class="scrollable-container"> <div class="scrollable-container">
...@@ -92,6 +116,9 @@ ...@@ -92,6 +116,9 @@
<div class="tab-pane tab-pane--columns" id="affiliations-tabpanel" role="tabpanel" aria-labelledby="affiliations-tab"> <div class="tab-pane tab-pane--columns" id="affiliations-tabpanel" role="tabpanel" aria-labelledby="affiliations-tab">
<form class="converse-form query-affiliation"> <form class="converse-form query-affiliation">
<p class="helptext pb-3">
{{{o.__("An affiliation is a long-lived entitlement which typically implies a certain role and which grants privileges and responsibilities. For example admins and owners automatically have the moderator role.")}}}
</p>
<div class="form-group"> <div class="form-group">
<label for="affiliation"> <label for="affiliation">
<strong>{{{o.__('Affiliation')}}}:</strong> <strong>{{{o.__('Affiliation')}}}:</strong>
...@@ -100,7 +127,16 @@ ...@@ -100,7 +127,16 @@
<div class="col"> <div class="col">
<select class="custom-select select-affiliation" name="affiliation"> <select class="custom-select select-affiliation" name="affiliation">
{[ o.affiliations.forEach(function (aff) { ]} {[ o.affiliations.forEach(function (aff) { ]}
<option value="{{{aff}}}" {[ if (aff === o.affiliation) { ]} selected="selected" {[ } ]}>{{{aff}}}</option> <option value="{{{aff}}}" {[ if (aff === o.affiliation) { ]} selected="selected" {[ } ]}
{[ if (aff === 'owner') { ]}
title="{{{o.__("Owner is the highest affiliation. Owners can modify roles and affiliations of all other users.")}}}"
{[ } ]}
{[ if (aff === 'admin') { ]}
title="{{{o.__("Admin is the 2nd highest affiliation. Admins can modify roles and affiliations of all other users except owners.")}}}"
{[ } ]}
{[ if (aff === 'outcast') { ]}
title="{{{o.__("To ban a user, you give them the affiliation of \"outcast\".")}}}"
{[ } ]}>{{{aff}}}</option>
{[ }); ]} {[ }); ]}
</select> </select>
</div> </div>
...@@ -108,6 +144,19 @@ ...@@ -108,6 +144,19 @@
<input type="submit" class="btn btn-primary" name="users_with_affiliation" value="{{{o.__('Show users')}}}"/> <input type="submit" class="btn btn-primary" name="users_with_affiliation" value="{{{o.__('Show users')}}}"/>
</div> </div>
</div> </div>
<div class="row">
<div class="col pt-2">
{[ if (o.affiliation === 'owner') { ]}
<p class="helptext pb-3">{{{o.__("Owner is the highest affiliation. Owners can modify roles and affiliations of all other users.")}}}</p>
{[ } ]}
{[ if (o.affiliation === 'admin') { ]}
<p class="helptext pb-3">{{{o.__("Admin is the 2nd highest affiliation. Admins can modify roles and affiliations of all other users except owners.")}}}</p>
{[ } ]}
{[ if (o.affiliation === 'outcast') { ]}
<p class="helptext pb-3">{{{o.__("To ban a user, you give them the affiliation of \"outcast\".")}}}</p>
{[ } ]}
</div>
</div>
</div> </div>
</form> </form>
<div class="scrollable-container"> <div class="scrollable-container">
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment