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

style(SetupPage): Aggiunta flag della lingua selezionata

Browse Source
This commit is contained in:
Maicol Battistini 2021-11-30 13:17:14 +01:00
parent b169859bf2
commit 159c17dfe8
No known key found for this signature in database
GPG Key ID: 4FDB0F87CDB1D34A
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import '@material/mwc-list/mwc-list-item';
import '@material/mwc-select'; import '@material/mwc-select';
import '@material/mwc-textarea'; import '@material/mwc-textarea';
import '../WebComponents/TextField'; import '../WebComponents/TextField';
import '../WebComponents/Select';
import collect from 'collect.js'; import collect from 'collect.js';
import LocaleCode from 'locale-code'; import LocaleCode from 'locale-code';
@ -25,6 +26,18 @@ import {
showSnackbar showSnackbar
} from '../utils'; } from '../utils';
function getFlag(language: string, slot: string = 'graphic', styles: {...} = {}) {
styles.display ??= 'flex';
return (
<div slot={slot} style={styles}>
<img style="border-radius: 4px;"
src={`https://flagicons.lipis.dev/flags/4x3/${LocaleCode.getCountryCode(language)
.toLowerCase()}.svg`}
alt={LocaleCode.getLanguageNativeName(language)}/>
</div>
);
}
export default class SetupPage extends Page { export default class SetupPage extends Page {
languages() { languages() {
const listItems: Array[Mithril.Vnode] = []; const listItems: Array[Mithril.Vnode] = [];
@ -36,16 +49,14 @@ export default class SetupPage extends Page {
const langCode = lang.replace('_', '-'); const langCode = lang.replace('_', '-');
listItems.push( listItems.push(
<mwc-list-item graphic="icon" value={lang} {...attributes}> <mwc-list-item graphic="icon" value={lang} {...attributes}>
<img {getFlag(langCode)}
slot="graphic"
style="border-radius: 4px;"
src={`https://flagicons.lipis.dev/flags/4x3/${LocaleCode.getCountryCode(langCode)
.toLowerCase()}.svg`}
alt={LocaleCode.getLanguageNativeName(langCode)}>
</img>
<span>{LocaleCode.getLanguageNativeName(langCode)}</span> <span>{LocaleCode.getLanguageNativeName(langCode)}</span>
</mwc-list-item> </mwc-list-item>
); );
if (attributes.selected) {
listItems.push(getFlag(langCode, 'icon', {display: 'block', width: '24px', lineHeight: '22px'}));
}
} }
return listItems; return listItems;
@ -145,9 +156,9 @@ export default class SetupPage extends Page {
</mwc-layout-grid-cell> </mwc-layout-grid-cell>
<mwc-layout-grid-cell> <mwc-layout-grid-cell>
<h4>{__('Lingua')}</h4> <h4>{__('Lingua')}</h4>
<mwc-select id="language-select" name="locale"> <material-select id="language-select" name="locale">
{this.languages()} {this.languages()}
</mwc-select> </material-select>
<hr /> <hr />
<h4>{__('Licenza')}</h4> <h4>{__('Licenza')}</h4>
<p>{__('OpenSTAManager è tutelato dalla licenza GPL 3.0, da accettare obbligatoriamente per poter utilizzare il gestionale.')}</p> <p>{__('OpenSTAManager è tutelato dalla licenza GPL 3.0, da accettare obbligatoriamente per poter utilizzare il gestionale.')}</p>