Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use converse-icon in the modtools modal

Browse Source
This commit is contained in:
JC Brand 2021-08-06 13:38:12 +02:00
parent 44a573b6c4
commit 610e334bed
5 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/modals/styles/_modal.scss
View File

@ -7,8 +7,6 @@
#converse-modals {
.modal {
background-color: rgba(0, 0, 0, 0.4);
.modal-body {
overflow-y: auto;
max-height: 75vh;

5
src/plugins/muc-views/modtools.js
View File

@ -135,8 +135,9 @@ export default class ModeratorTools extends CustomElement {
toggleForm (ev) { // eslint-disable-line class-methods-use-this
ev.stopPropagation();
ev.preventDefault();
const form_class = ev.target.getAttribute('data-form');
const form = u.ancestor(ev.target, '.list-group-item').querySelector(`.${form_class}`);
const toggle = u.ancestor(ev.target, '.toggle-form');
const form_class = toggle.getAttribute('data-form');
const form = u.ancestor(toggle, '.list-group-item').querySelector(`.${form_class}`);
if (u.hasClass('hidden', form)) {
u.removeClass('hidden', form);
} else {

16
src/plugins/muc-views/templates/moderator-tools.js
View File

@ -68,6 +68,12 @@ const tpl_set_role_form = (o) => {
}
const role_form_toggle = (o) => html`
<a href="#" data-form="role-form" class="toggle-form right" color="var(--subdued-color)" @click=${o.toggleForm}>
<converse-icon class="fa fa-wrench" size="1em"></converse-icon>
</a>`;
const role_list_item = (o) => html`
<li class="list-group-item" data-nick="${o.item.nick}">
<ul class="list-group">
@ -78,7 +84,7 @@ const role_list_item = (o) => html`
<div><strong>Nickname:</strong> ${o.item.nick}</div>
</li>
<li class="list-group-item">
<div><strong>Role:</strong> ${o.item.role} ${o.assignable_roles.length ? html`<a href="#" data-form="role-form" class="toggle-form right fa fa-wrench" @click=${o.toggleForm}></a>` : ''}</div>
<div><strong>Role:</strong> ${o.item.role} ${o.assignable_roles.length ? role_form_toggle(o) : ''}</div>
${o.assignable_roles.length ? tpl_set_role_form(o) : ''}
</li>
</ul>
@ -116,6 +122,12 @@ const tpl_set_affiliation_form = (o) => {
}
const affiliation_form_toggle = (o) => html`
<a href="#" data-form="affiliation-form" class="toggle-form right" color="var(--subdued-color)" @click=${o.toggleForm}>
<converse-icon class="fa fa-wrench" size="1em"></converse-icon>
</a>`;
const affiliation_list_item = (o) => html`
<li class="list-group-item" data-nick="${o.item.nick}">
<ul class="list-group">
@ -126,7 +138,7 @@ const affiliation_list_item = (o) => html`
<div><strong>Nickname:</strong> ${o.item.nick}</div>
</li>
<li class="list-group-item">
<div><strong>Affiliation:</strong> ${o.item.affiliation} ${o.assignable_affiliations.length ? html`<a href="#" data-form="affiliation-form" class="toggle-form right fa fa-wrench" @click=${o.toggleForm}></a>` : ''}</div>
<div><strong>Affiliation:</strong> ${o.item.affiliation} ${o.assignable_affiliations.length ? affiliation_form_toggle(o) : ''}</div>
${o.assignable_affiliations.length ? tpl_set_affiliation_form(o) : ''}
</li>
</ul>

14
src/shared/components/icons.js
View File

@ -6,9 +6,11 @@
* @license Mozilla Public License (MPLv2)
*/
import { html, css } from 'lit';
import { html } from 'lit';
import { CustomElement } from './element.js';
import './styles/icon.scss';
class ConverseIcon extends CustomElement {
@ -21,16 +23,6 @@ class ConverseIcon extends CustomElement {
};
}
static get styles () {
return css`
:host {
display: inline-block;
padding: 0;
margin: 0;
}
`;
}
constructor () {
super();
this.class_name = "";

10
src/shared/components/styles/icon.scss Normal file
View File

@ -0,0 +1,10 @@
converse-icon {
display: inline-block;
padding: 0;
margin: 0;
fill: var(--subdued-color);
&:hover {
fill: var(--text-color);
}
}