Use converse-icon
in the modtools modal
This commit is contained in:
parent
44a573b6c4
commit
610e334bed
@ -7,8 +7,6 @@
|
|||||||
|
|
||||||
#converse-modals {
|
#converse-modals {
|
||||||
.modal {
|
.modal {
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 75vh;
|
max-height: 75vh;
|
||||||
|
@ -135,8 +135,9 @@ export default class ModeratorTools extends CustomElement {
|
|||||||
toggleForm (ev) { // eslint-disable-line class-methods-use-this
|
toggleForm (ev) { // eslint-disable-line class-methods-use-this
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
const form_class = ev.target.getAttribute('data-form');
|
const toggle = u.ancestor(ev.target, '.toggle-form');
|
||||||
const form = u.ancestor(ev.target, '.list-group-item').querySelector(`.${form_class}`);
|
const form_class = toggle.getAttribute('data-form');
|
||||||
|
const form = u.ancestor(toggle, '.list-group-item').querySelector(`.${form_class}`);
|
||||||
if (u.hasClass('hidden', form)) {
|
if (u.hasClass('hidden', form)) {
|
||||||
u.removeClass('hidden', form);
|
u.removeClass('hidden', form);
|
||||||
} else {
|
} else {
|
||||||
|
@ -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`
|
const role_list_item = (o) => html`
|
||||||
<li class="list-group-item" data-nick="${o.item.nick}">
|
<li class="list-group-item" data-nick="${o.item.nick}">
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
@ -78,7 +84,7 @@ const role_list_item = (o) => html`
|
|||||||
<div><strong>Nickname:</strong> ${o.item.nick}</div>
|
<div><strong>Nickname:</strong> ${o.item.nick}</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="list-group-item">
|
<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) : ''}
|
${o.assignable_roles.length ? tpl_set_role_form(o) : ''}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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`
|
const affiliation_list_item = (o) => html`
|
||||||
<li class="list-group-item" data-nick="${o.item.nick}">
|
<li class="list-group-item" data-nick="${o.item.nick}">
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
@ -126,7 +138,7 @@ const affiliation_list_item = (o) => html`
|
|||||||
<div><strong>Nickname:</strong> ${o.item.nick}</div>
|
<div><strong>Nickname:</strong> ${o.item.nick}</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="list-group-item">
|
<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) : ''}
|
${o.assignable_affiliations.length ? tpl_set_affiliation_form(o) : ''}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -6,9 +6,11 @@
|
|||||||
* @license Mozilla Public License (MPLv2)
|
* @license Mozilla Public License (MPLv2)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { html, css } from 'lit';
|
import { html } from 'lit';
|
||||||
import { CustomElement } from './element.js';
|
import { CustomElement } from './element.js';
|
||||||
|
|
||||||
|
import './styles/icon.scss';
|
||||||
|
|
||||||
|
|
||||||
class ConverseIcon extends CustomElement {
|
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 () {
|
constructor () {
|
||||||
super();
|
super();
|
||||||
this.class_name = "";
|
this.class_name = "";
|
||||||
|
10
src/shared/components/styles/icon.scss
Normal file
10
src/shared/components/styles/icon.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
converse-icon {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
fill: var(--subdued-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
fill: var(--text-color);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user