Style the add-muc modal autocomplete
- Let it drop down to the bottom - Add a border - Let it scroll
This commit is contained in:
parent
8671afc4b1
commit
4237e5b3ae
|
@ -3,6 +3,8 @@ import BootstrapModal from "plugins/modal/base.js";
|
|||
import { __ } from 'i18n';
|
||||
import { _converse, api, converse } from "@converse/headless/core";
|
||||
|
||||
import '../styles/add-muc-modal.scss';
|
||||
|
||||
const u = converse.env.utils;
|
||||
const { Strophe } = converse.env;
|
||||
|
||||
|
|
8
src/plugins/muc-views/styles/add-muc-modal.scss
Normal file
8
src/plugins/muc-views/styles/add-muc-modal.scss
Normal file
|
@ -0,0 +1,8 @@
|
|||
#add-chatroom-modal {
|
||||
converse-autocomplete {
|
||||
.suggestion-box__results--below {
|
||||
height: 10em;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -37,8 +37,12 @@ export default (o) => {
|
|||
${ (o.muc_roomid_policy_error_msg) ? html`<label class="roomid-policy-error">${o.muc_roomid_policy_error_msg}</label>` : '' }
|
||||
<converse-autocomplete
|
||||
.getAutoCompleteList="${getAutoCompleteList}"
|
||||
?autofocus=${true}
|
||||
position="below"
|
||||
placeholder="${o.chatroom_placeholder}"
|
||||
name="chatroom"></converse-autocomplete>
|
||||
class="add-muc-autocomplete"
|
||||
name="chatroom">
|
||||
</converse-autocomplete>
|
||||
</div>
|
||||
${ o.muc_roomid_policy_hint ? html`<div class="form-group">${unsafeHTML(DOMPurify.sanitize(o.muc_roomid_policy_hint, {'ALLOWED_TAGS': ['b', 'br', 'em']}))}</div>` : '' }
|
||||
${ !api.settings.get('locked_muc_nickname') ? nickname_input(o) : '' }
|
||||
|
|
|
@ -4,11 +4,12 @@ import { FILTER_CONTAINS, FILTER_STARTSWITH } from './utils.js';
|
|||
import { api } from '@converse/headless/core';
|
||||
import { html } from 'lit';
|
||||
|
||||
|
||||
/**
|
||||
* A custom element that can be used to add auto-completion suggestions to a form input.
|
||||
* @class AutoCompleteComponent
|
||||
*
|
||||
* @property { "above" | "below" } [position="above"]
|
||||
* Should the autocomplete list show above or below the input element?
|
||||
* @property { Boolean } [autofocus=false]
|
||||
* Should the `focus` attribute be set on the input element?
|
||||
* @property { Function } getAutoCompleteList
|
||||
|
@ -40,6 +41,7 @@ import { html } from 'lit';
|
|||
export default class AutoCompleteComponent extends CustomElement {
|
||||
static get properties () {
|
||||
return {
|
||||
'position': { type: String },
|
||||
'autofocus': { type: Boolean },
|
||||
'getAutoCompleteList': { type: Function },
|
||||
'auto_evaluate': { type: Boolean },
|
||||
|
@ -49,13 +51,13 @@ export default class AutoCompleteComponent extends CustomElement {
|
|||
'min_chars': { type: Number },
|
||||
'name': { type: String },
|
||||
'placeholder': { type: String },
|
||||
'triggers': { type: String }
|
||||
'triggers': { type: String },
|
||||
};
|
||||
}
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
this.position = "above";
|
||||
this.position = 'above';
|
||||
this.auto_evaluate = true;
|
||||
this.auto_first = false;
|
||||
this.filter = 'contains';
|
||||
|
@ -67,9 +69,10 @@ export default class AutoCompleteComponent extends CustomElement {
|
|||
}
|
||||
|
||||
render () {
|
||||
const position_class = `suggestion-box__results--${this.position}`;
|
||||
return html`
|
||||
<div class="suggestion-box suggestion-box__name">
|
||||
<ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
|
||||
<ul class="suggestion-box__results ${position_class}" hidden=""></ul>
|
||||
<input
|
||||
?autofocus=${this.autofocus}
|
||||
type="text"
|
||||
|
@ -100,12 +103,9 @@ export default class AutoCompleteComponent extends CustomElement {
|
|||
'list': () => this.getAutoCompleteList(),
|
||||
'match_current_word': true,
|
||||
'max_items': this.max_items,
|
||||
'min_chars': this.min_chars
|
||||
'min_chars': this.min_chars,
|
||||
});
|
||||
this.auto_complete.on(
|
||||
'suggestion-box-selectcomplete',
|
||||
() => (this.auto_completing = false)
|
||||
);
|
||||
this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
|
||||
}
|
||||
|
||||
onKeyDown (ev) {
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
z-index: -1;
|
||||
}
|
||||
border-radius: .3em;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
border: 1px solid var(--focus-color);
|
||||
box-shadow: .05em .2em .6em rgba(0,0,0,.1);
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
|
@ -65,7 +65,7 @@
|
|||
}
|
||||
}
|
||||
.suggestion-box__results--below {
|
||||
top: 2em;
|
||||
top: 3em;
|
||||
}
|
||||
.suggestion-box__results--above {
|
||||
bottom: 4.5em;
|
||||
|
|
Loading…
Reference in New Issue
Block a user