Skip to content

Commit 336df63

Browse files
jcbrandjcbrand
committed
Modal improvements
- Add typing - Markup improvement to the MUC occupant modal - Markup improvements to the prompt modal
1 parent 035bb6d commit 336df63

File tree

19 files changed

+147
-62
lines changed

19 files changed

+147
-62
lines changed

‎src/headless/shared/api/send.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,9 @@ export default {
1212
* @param {Element|Builder} stanza
1313
* @returns {void}
1414
* @example
15-
* const msg = converse.env.$msg({
16-
* 'from': 'juliet@example.com/balcony',
17-
* 'to': 'romeo@example.net',
18-
* 'type':'chat'
19-
* });
20-
* _converse.api.send(msg);
15+
* const { stx } = _converse.env;
16+
* const msg = stx`<message from="juliet@example.com/balcony" to="romeo@example.net" type="chat"/>`;
17+
* _converse.api.send(msg);
2118
*/
2219
send(stanza) {
2320
const { api } = _converse;

‎src/plugins/modal/styles/_modal.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,6 @@ $prefix: 'converse-';
107107
overflow-y: auto;
108108
}
109109

110-
.role-form, .affiliation-form {
111-
padding: 2em 0 1em 0;
112-
}
113-
114110
.set-xmpp-status {
115111
margin: 1em;
116112
.custom-control-label {

‎src/plugins/modal/templates/prompt.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,19 @@ function tplField(f) {
1010
<input name="${f.name}" class="form-check-input" type="checkbox" value="" id="${f.name}" />
1111
<label class="form-check-label" for="${f.name}">${f.label}</label>
1212
</div>`
13-
: html`<div>
14-
<label class="form-label">
13+
: html`<div class="mb-3">
14+
<label class="form-label" for="${f.name}">
1515
${f.label || ''}
16-
<input
17-
type="text"
18-
name="${f.name}"
19-
class="${f.challenge_failed ? 'error' : ''} form-control form-control--labeled"
20-
?required="${f.required}"
21-
placeholder="${f.placeholder}"
22-
/>
2316
</label>
17+
<input
18+
type="text"
19+
name="${f.name}"
20+
class="${f.challenge_failed ? 'is-invalid' : ''} form-control"
21+
?required="${f.required}"
22+
placeholder="${f.placeholder}"
23+
id="${f.name}"
24+
/>
25+
${f.challenge_failed ? html`<div class="invalid-feedback">Please provide a valid input.</div>` : ''}
2426
</div>`;
2527
}
2628

@@ -33,10 +35,10 @@ export default (el) => {
3335
action="#"
3436
@submit=${(ev) => el.onConfimation(ev)}
3537
>
36-
<div>${el.model.get('messages')?.map(/** @param {string} msg */ (msg) => html`<p>${msg}</p>`)}</div>
38+
<div class="mb-3">${el.model.get('messages')?.map(/** @param {string} msg */ (msg) => html`<p>${msg}</p>`)}</div>
3739
${el.model.get('fields')?.map(/** @param {import('../types').Field} f */ (f) => tplField(f))}
38-
<div>
39-
<button type="submit" class="btn btn-primary">${__('Confirm')}</button>
40+
<div class="d-flex justify-content-end">
41+
<button type="submit" class="btn btn-primary me-2">${__('Confirm')}</button>
4042
<input type="button" class="btn btn-secondary" data-bs-dismiss="modal" value="${__('Cancel')}" />
4143
</div>
4244
</form>`;

‎src/plugins/muc-views/affiliation-form.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import tplAffiliationForm from './templates/affiliation-form.js';
2-
import { CustomElement } from 'shared/components/element';
3-
import { __ } from 'i18n';
41
import { api, converse, log, u } from '@converse/headless';
2+
import { __ } from 'i18n';
3+
import { CustomElement } from 'shared/components/element';
4+
import tplAffiliationForm from './templates/affiliation-form.js';
5+
6+
import './styles/affiliation-form.scss';
57

68
const { Strophe, sizzle } = converse.env;
79

@@ -20,6 +22,7 @@ class AffiliationForm extends CustomElement {
2022
super();
2123
this.jid = null;
2224
this.muc = null;
25+
this.affiliation = null;
2326
}
2427

2528
render () {
@@ -71,3 +74,5 @@ class AffiliationForm extends CustomElement {
7174
}
7275

7376
api.elements.define('converse-muc-affiliation-form', AffiliationForm);
77+
78+
export default AffiliationForm;

‎src/plugins/muc-views/modals/occupant.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ export default class OccupantModal extends BaseModal {
6464
toggleForm (ev) {
6565
const toggle = u.ancestor(ev.target, '.toggle-form');
6666
const form = toggle.getAttribute('data-form');
67-
6867
if (form === 'row-form') {
6968
this.show_role_form = !this.show_role_form;
7069
} else {

‎src/plugins/muc-views/modals/templates/occupant.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default (el) => {
6969
}
7070
</div>
7171
${el.show_affiliation_form ?
72-
html`<div class="row"><converse-muc-affiliation-form jid=${jid} .muc=${muc} affiliation=${affiliation}></converse-muc-affiliation-form></div>` : ''}
72+
html`<div class="row mt-2"><converse-muc-affiliation-form jid=${jid} .muc=${muc} affiliation=${affiliation}></converse-muc-affiliation-form></div>` : ''}
7373
</li>
7474
<li class="row mb-2">
7575
<div class="col text-start"><strong>${__('Role')}:</strong></div>
@@ -82,7 +82,7 @@ export default (el) => {
8282
</a>` : ''
8383
}
8484
</div>
85-
${el.show_role_form ? html`<div class="row"><converse-muc-role-form jid=${jid} .muc=${muc} role=${role}></converse-muc-role-form></div>` : ''}
85+
${el.show_role_form ? html`<div class="row mt-2"><converse-muc-role-form jid=${jid} .muc=${muc} role=${role}></converse-muc-role-form></div>` : ''}
8686
</li>
8787
<li class="row mb-2">
8888
<div class="col text-start"><strong>${__('Hats')}:</strong></div>

‎src/plugins/muc-views/role-form.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import tplRoleForm from './templates/role-form.js';
2-
import { CustomElement } from 'shared/components/element.js';
3-
import { __ } from 'i18n';
41
import { api, converse, log, u } from '@converse/headless';
2+
import { __ } from 'i18n';
3+
import { CustomElement } from 'shared/components/element.js';
4+
import tplRoleForm from './templates/role-form.js';
5+
6+
import './styles/role-form.scss';
57

68
const { Strophe, sizzle } = converse.env;
79

@@ -20,6 +22,8 @@ class RoleForm extends CustomElement {
2022
constructor () {
2123
super();
2224
this.muc = null;
25+
this.nick = null;
26+
this.jid = null;
2327
}
2428

2529
render () {
@@ -70,3 +74,5 @@ class RoleForm extends CustomElement {
7074
}
7175

7276
api.elements.define('converse-muc-role-form', RoleForm);
77+
78+
export default RoleForm;

‎src/plugins/muc-views/styles/affiliation-form.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
converse-muc-affiliation-form {
2+
background-color: var(--highlight-color);
3+
padding: 1em 0 1em 0;
4+
border-radius: 0.25em;
5+
}
6+

‎src/plugins/muc-views/styles/role-form.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
converse-muc-role-form {
2+
background-color: var(--highlight-color);
3+
padding: 1em 0 1em 0;
4+
border-radius: 0.25em;
5+
}

‎src/plugins/muc-views/templates/affiliation-form.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import { __ } from 'i18n';
21
import { html } from "lit";
2+
import { __ } from 'i18n';
33

4+
/**
5+
* @param {import('../affiliation-form').default} el
6+
*/
47
export default (el) => {
58
const i18n_change_affiliation = __('Change affiliation');
69
const i18n_new_affiliation = __('New affiliation');
@@ -9,26 +12,24 @@ export default (el) => {
912
const assignable_affiliations = occupant.getAssignableAffiliations();
1013

1114
return html`
12-
<form class="affiliation-form" @submit=${ev => el.assignAffiliation(ev)}>
15+
<form class="affiliation-form" @submit=${(ev) => el.assignAffiliation(ev)}>
1316
${el.alert_message ? html`<div class="alert alert-${el.alert_type}" role="alert">${el.alert_message}</div>` : '' }
14-
<div>
17+
<div class="mb-3">
1518
<div class="row">
16-
<div class="col">
19+
<div class="col-md-6">
1720
<label class="form-label"><strong>${i18n_new_affiliation}:</strong></label>
1821
<select class="form-select select-affiliation" name="affiliation">
19-
${ assignable_affiliations.map(aff => html`<option value="${aff}" ?selected=${aff === el.affiliation}>${aff}</option>`) }
22+
${assignable_affiliations.map((aff) => html`<option value="${aff}" ?selected=${aff === el.affiliation}>${aff}</option>`)}
2023
</select>
2124
</div>
22-
<div class="col">
25+
<div class="col-md-6">
2326
<label class="form-label"><strong>${i18n_reason}:</strong></label>
24-
<input class="form-control" type="text" name="reason"/>
27+
<input class="form-control" type="text" name="reason" placeholder="${i18n_reason}"/>
2528
</div>
2629
</div>
2730
</div>
28-
<div>
29-
<div class="col">
30-
<input type="submit" class="btn btn-primary" name="change" value="${i18n_change_affiliation}"/>
31-
</div>
31+
<div class="text-end">
32+
<button type="submit" class="btn btn-primary" name="change">${i18n_change_affiliation}</button>
3233
</div>
3334
</form>
3435
`;

0 commit comments

Comments
 (0)