loviuz/openstamanager
loviuz/openstamanager
1
0
Fork 0
mirror of https://github.com/devcode-it/openstamanager.git synced 2025-02-22 22:37:37 +01:00
Code Issues Releases Activity

feat: ✨ Aggiunte icone ai campi di testo

Browse Source
This commit is contained in:
Maicol Battistini 2021-10-12 23:38:26 +02:00
parent 637b7c07ca
commit 39c9aac380
No known key found for this signature in database
GPG Key ID: 4FDB0F87CDB1D34A
2 changed files with 80 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
resources/js/Views/SetupPage.jsx
View File

@ -5,7 +5,7 @@ import '@material/mwc-formfield';
import '@material/mwc-list/mwc-list-item';
import '@material/mwc-select';
import '@material/mwc-textarea';
import '@material/mwc-textfield';
import '../WebComponents/TextField';
import collect from 'collect.js';
import LocaleCode from 'locale-code';
@ -78,36 +78,50 @@ export default class SetupPage extends Page {
</small>
<Row style="margin-top: 8px;">
<Cell>
<mwc-textfield name="timestamp_format" label={this.__('Formato data lunga')}
required value="d/m/Y H:i"/>
<text-field name="timestamp_format" label={this.__('Formato data lunga')}
required value="d/m/Y H:i">
<Mdi icon="calendar-clock" slot="icon"/>
</text-field>
</Cell>
<Cell>
<mwc-textfield name="date_format" label={this.__('Formato data corta')}
required value="d/m/Y"/>
<text-field name="date_format" label={this.__('Formato data corta')}
required value="d/m/Y">
<Mdi icon="calendar-month-outline" slot="icon"/>
</text-field>
</Cell>
<Cell>
<mwc-textfield name="time_format" label={this.__('Formato orario')} required
value="H:i"/>
<text-field name="time_format" label={this.__('Formato orario')} required
value="H:i">
<Mdi icon="clock-outline" slot="icon"/>
</text-field>
</Cell>
</Row>
<hr/>
<h4>{this.__('Database')}</h4>
<Row>
<Cell columnspan="4">
<mwc-textfield name="host" label={this.__('Host')} required
helper={examplesTexts.get('localhost')}/>
<text-field name="host" label={this.__('Host')} required
helper={examplesTexts.get('localhost')}>
<Mdi icon="server-network" slot="icon"/>
</text-field>
</Cell>
<Cell columnspan="4">
<mwc-textfield name="username" label={this.__('Nome utente')} required
helper={examplesTexts.get('root')}/>
<text-field name="username" label={this.__('Nome utente')} required
helper={examplesTexts.get('root')}>
<Mdi icon="account-outline" slot="icon"/>
</text-field>
</Cell>
<Cell columnspan="4">
<mwc-textfield name="password" label={this.__('Password')} required
helper={examplesTexts.get('mysql')}/>
<text-field name="password" label={this.__('Password')} required
helper={examplesTexts.get('mysql')}>
<Mdi icon="lock-outline" slot="icon"/>
</text-field>
</Cell>
<Cell columnspan="4">
<mwc-textfield name="database_name" label={this.__('Nome database')} required
helper={examplesTexts.get('openstamanager')}/>
<text-field name="database_name" label={this.__('Nome database')} required
helper={examplesTexts.get('openstamanager')}>
<Mdi icon="database-outline" slot="icon"/>
</text-field>
</Cell>
</Row>
<hr/>
@ -166,9 +180,18 @@ export default class SetupPage extends Page {
oncreate(vnode: Mithril.VnodeDOM) {
super.oncreate(vnode);
$('mwc-fab#contrast-switcher').on('click', function () {
$(this).toggleClass('contrast-light').toggleClass('contrast-dark');
$('body').toggleClass('mdc-high-contrast');
$('mwc-fab#contrast-switcher')
.on('click', function () {
$(this)
.toggleClass('contrast-light')
.toggleClass('contrast-dark');
$('body')
.toggleClass('mdc-high-contrast');
});
// Fix for mwc button inside <a> tags
$('a')
.has('mwc-button')
.css('text-decoration', 'none');
}
}

38
resources/js/WebComponents/TextField.js vendored
View File

@ -1,6 +1,24 @@
import {TextField as MWCTextField} from '@material/mwc-textfield';
import {waitUntil} from 'async-wait-until';
import classnames from 'classnames';
import {
html,
type TemplateResult
} from 'lit';
// noinspection JSCheckFunctionSignatures
export default class TextField extends MWCTextField {
async connectedCallback() {
super.connectedCallback();
await waitUntil(() => this.shadowRoot.querySelectorAll('slot[name^=icon]').length > 0);
const slots = this.shadowRoot.querySelectorAll('slot[name^=icon]');
for (const slot: HTMLSlotElement of slots) {
if (slot.assignedNodes().length > 0) {
this[slot.name] = ' ';
}
}
}
get nativeValidationMessage() {
return this.formElement.validationMessage;
}
@ -28,6 +46,26 @@ export default class TextField extends MWCTextField {
}
return isValid;
}
renderLeadingIcon() {
return this.renderIcon();
}
renderTrailingIcon() {
return this.renderIcon(true);
}
renderIcon(isTrailingIcon: boolean = false): TemplateResult {
const classes = {
'mdc-text-field__icon--leading': !isTrailingIcon,
'mdc-text-field__icon--trailing': isTrailingIcon
};
return html`
<span class="mdc-text-field__icon ${classnames(classes)}">
<slot name="icon${isTrailingIcon ? 'Trailing' : ''}"></slot>
</span>`;
}
}
window.customElements.define('text-field', TextField);