Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add icons support to select and text-based inputs #651

Merged
merged 6 commits into from
Feb 16, 2025
Merged

Add icons support to select and text-based inputs #651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ca30063
Add icon support to duration fields
giuscris Feb 16, 2025
0de8989
Add icon support to select fields
giuscris Feb 16, 2025
c633a61
Add custom icon support to date and image fields
giuscris Feb 16, 2025
4e9c46a
Add default icon to page and template fields
giuscris Feb 16, 2025
8768b28
Add icon support to email, number, password, slug and text fields
giuscris Feb 16, 2025
7fdd7a6
Add icons to schemes
giuscris Feb 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions formwork/schemes/config/system.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,13 @@ fields:
date.dateFormat:
type: select
label: '{{panel.options.system.dateAndTime.dateFormat}}'
icon: calendar
options@: dateFormats.date

date.timeFormat:
type: select
label: '{{panel.options.system.dateAndTime.hourFormat}}'
icon: clock
options@: dateFormats.hour

date.timezone:
Expand All @@ -81,8 +83,8 @@ fields:

languages.available:
type: tags
icon: translate
label: '{{panel.options.system.languages.availableLanguages}}'
icon: translate
placeholder: '{{panel.options.system.languages.availableLanguages.noLanguages}}'
pattern: '^[a-z]{2,3}$'
translate: [label, placeholder]
Expand All @@ -97,8 +99,8 @@ fields:

files.allowedExtensions:
type: tags
icon: file-exclamation
label: '{{panel.options.system.files.allowedExtensions}}'
icon: file-exclamation
placeholder: '{{panel.options.system.files.allowedExtensions.noExtensions}}'
pattern: '^\.[a-zA-Z0-9]+$'
options@: mimeTypes.getExtensionTypes()
Expand All @@ -121,6 +123,7 @@ fields:
panel.translation:
type: select
label: '{{panel.options.system.adminPanel.defaultLanguage}}'
icon: translate
translate: [label]
options@: formwork.panel.availableTranslations

Expand Down
1 change: 1 addition & 0 deletions panel/assets/icons/svg/hourglass.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions panel/assets/icons/svg/template.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions panel/modals/newUser.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ fields:
language:
type: select
label: '{{user.language}}'
icon: translate
required: true
translate: [label]
options@: formwork.panel.availableTranslations
Expand Down
1 change: 1 addition & 0 deletions panel/schemes/forms/register.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ fields:
language:
type: select
label: '{{user.language}}'
icon: translate
required: true
translate: [label]
options@: formwork.panel.availableTranslations
Expand Down
4 changes: 4 additions & 0 deletions panel/src/scss/components/forms/_forms-duration.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,7 @@
.form-input-duration-hidden {
display: none;
}

.form-input-wrap .form-input-icon + .form-input-duration {
padding-left: 1.75rem;
}
16 changes: 10 additions & 6 deletions panel/src/ts/components/inputs/select-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,14 @@ export class SelectInput {
createField();

function createField() {
const wrap = document.createElement("div");
wrap.className = "form-input-wrap";
const hasWrap = select.closest(".form-input-wrap");

const wrap = hasWrap || document.createElement("div");

if (!hasWrap) {
wrap.className = "form-input-wrap";
(select.parentNode as ParentNode).insertBefore(wrap, select.nextSibling);
}

select.hidden = true;

Expand Down Expand Up @@ -76,13 +82,11 @@ export class SelectInput {
}
});

(select.parentNode as ParentNode).insertBefore(wrap, select.nextSibling);
wrap.appendChild(labelInput);

wrap.appendChild(select);

wrap.appendChild(labelInput);

createDropdown(list, wrap);
createDropdown(list, wrap as HTMLElement);
}

function createDropdown(list: SelectInputListItem[], wrap: HTMLElement) {
Expand Down
4 changes: 2 additions & 2 deletions panel/views/fields/date.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?php $this->layout('fields.field') ?>
<div class="form-input-wrap">
<span class="form-input-icon"><?= $this->icon('calendar-clock') ?></span>
<span class="form-input-icon"><?= $this->icon($field->get('icon', 'calendar-clock')) ?></span>
<input <?= $this->attr([
'type' => 'text',
'class' => ['form-input', 'form-input-date'],
Expand All @@ -13,4 +13,4 @@
'hidden' => $field->isHidden(),
]) ?>>
<span class="form-input-action" data-reset="<?= $field->name() ?>"><?= $this->icon('times-circle') ?></span>
</div>
</div>
35 changes: 19 additions & 16 deletions panel/views/fields/duration.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<?php $this->layout('fields.field') ?>
<input <?= $this->attr([
'class' => 'form-input',
'type' => 'number',
'id' => $field->name(),
'name' => $field->formName(),
'min' => $field->get('min'),
'max' => $field->get('max'),
'step' => $field->get('step'),
'value' => $field->value(),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
'data-field' => 'duration',
'data-unit' => $field->get('unit', 'seconds'),
'data-intervals' => $field->has('intervals') ? implode(', ', $field->get('intervals')) : null,
]) ?>>
<div class="form-input-wrap">
<span class="form-input-icon"><?= $this->icon($field->get('icon', 'hourglass')) ?></span>
<input <?= $this->attr([
'class' => 'form-input',
'type' => 'number',
'id' => $field->name(),
'name' => $field->formName(),
'min' => $field->get('min'),
'max' => $field->get('max'),
'step' => $field->get('step'),
'value' => $field->value(),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
'data-field' => 'duration',
'data-unit' => $field->get('unit', 'seconds'),
'data-intervals' => $field->has('intervals') ? implode(', ', $field->get('intervals')) : null,
]) ?>>
</div>
33 changes: 19 additions & 14 deletions panel/views/fields/email.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
<?php $this->layout('fields.field') ?>
<input <?= $this->attr([
'class' => 'form-input',
'type' => 'email',
'id' => $field->name(),
'name' => $field->formName(),
'value' => $field->value(),
'placeholder' => $field->placeholder(),
'minlength' => $field->get('min'),
'maxlength' => $field->get('max'),
'pattern' => $field->get('pattern'),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
<div class="form-input-wrap">
<?php if ($field->has('icon')) : ?>
<span class="form-input-icon"><?= $this->icon($field->get('icon')) ?></span>
<?php endif ?>
<input <?= $this->attr([
'class' => 'form-input',
'type' => 'email',
'id' => $field->name(),
'name' => $field->formName(),
'value' => $field->value(),
'placeholder' => $field->placeholder(),
'minlength' => $field->get('min'),
'maxlength' => $field->get('max'),
'pattern' => $field->get('pattern'),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
</div>
4 changes: 2 additions & 2 deletions panel/views/fields/image.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?php $this->layout('fields.field') ?>
<div class="form-input-wrap">
<span class="form-input-icon"><?= $this->icon('image') ?></span>
<span class="form-input-icon"><?= $this->icon($field->get('icon', 'image')) ?></span>
<input <?= $this->attr([
'type' => 'text',
'class' => ['form-input', 'form-input-image'],
Expand All @@ -14,4 +14,4 @@
'hidden' => $field->isHidden(),
]) ?>>
<span class="form-input-action" data-reset="<?= $field->name() ?>"><?= $this->icon('times-circle') ?></span>
</div>
</div>
33 changes: 19 additions & 14 deletions panel/views/fields/number.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
<?php $this->layout('fields.field') ?>
<input <?= $this->attr([
'class' => 'form-input',
'type' => 'number',
'id' => $field->name(),
'name' => $field->formName(),
'min' => $field->get('min'),
'max' => $field->get('max'),
'step' => $field->get('step'),
'value' => $field->value(),
'placeholder' => $field->placeholder(),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
<div class="form-input-wrap">
<?php if ($field->has('icon')) : ?>
<span class="form-input-icon"><?= $this->icon($field->get('icon')) ?></span>
<?php endif ?>
<input <?= $this->attr([
'class' => 'form-input',
'type' => 'number',
'id' => $field->name(),
'name' => $field->formName(),
'min' => $field->get('min'),
'max' => $field->get('max'),
'step' => $field->get('step'),
'value' => $field->value(),
'placeholder' => $field->placeholder(),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
</div>
59 changes: 31 additions & 28 deletions panel/views/fields/page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,32 @@
<?php $this->layout('fields.field') ?>
<select <?= $this->attr([
'class' => 'form-select',
'id' => $field->name(),
'name' => $field->formName(),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
<?php if (!$field->isRequired()) : ?>
<option <?= $this->attr([
'value' => '',
'selected' => $field->value() === '',
]) ?>><?= $this->translate('page.none') ?></option>
<?php endif ?>
<?php if ($field->get('allowSite')) : ?>
<option <?= $this->attr([
'value' => '.',
'selected' => $field->value() === '.',
]) ?>><?= $this->translate('panel.pages.newPage.site') ?> (/)</option>
<?php endif ?>
<?php foreach ($field->collection() as $page) : ?>
<option <?= $this->attr([
'value' => $page->route(),
'selected' => $page->route() === $field->value(),
'data-allowed-templates' => $page->scheme()->options()->get('children.templates'),
]) ?>><?= str_repeat('— ', $page->level() - 1) . $this->escape($page->title()) ?></option>
<?php endforeach ?>
</select>
<div class="form-input-wrap">
<span class="form-input-icon"><?= $this->icon($field->get('icon', 'page')) ?></span>
<select <?= $this->attr([
'class' => 'form-select',
'id' => $field->name(),
'name' => $field->formName(),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
<?php if (!$field->isRequired()) : ?>
<option <?= $this->attr([
'value' => '',
'selected' => $field->value() === '',
]) ?>><?= $this->translate('page.none') ?></option>
<?php endif ?>
<?php if ($field->get('allowSite')) : ?>
<option <?= $this->attr([
'value' => '.',
'selected' => $field->value() === '.',
]) ?>><?= $this->translate('panel.pages.newPage.site') ?> (/)</option>
<?php endif ?>
<?php foreach ($field->collection() as $page) : ?>
<option <?= $this->attr([
'value' => $page->route(),
'selected' => $page->route() === $field->value(),
'data-allowed-templates' => $page->scheme()->options()->get('children.templates'),
]) ?>><?= str_repeat('— ', $page->level() - 1) . $this->escape($page->title()) ?></option>
<?php endforeach ?>
</select>
</div>
35 changes: 20 additions & 15 deletions panel/views/fields/password.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
<?php $this->layout('fields.field') ?>
<input <?= $this->attr([
'class' => 'form-input',
'type' => 'password',
'id' => $field->name(),
'name' => $field->formName(),
'value' => $field->value(),
'placeholder' => $field->placeholder(),
'minlength' => $field->get('min'),
'maxlength' => $field->get('max'),
'pattern' => $field->get('pattern'),
'autocomplete' => $field->get('autocomplete'),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
<div class="form-input-wrap">
<?php if ($field->has('icon')) : ?>
<span class="form-input-icon"><?= $this->icon($field->get('icon')) ?></span>
<?php endif ?>
<input <?= $this->attr([
'class' => 'form-input',
'type' => 'password',
'id' => $field->name(),
'name' => $field->formName(),
'value' => $field->value(),
'placeholder' => $field->placeholder(),
'minlength' => $field->get('min'),
'maxlength' => $field->get('max'),
'pattern' => $field->get('pattern'),
'autocomplete' => $field->get('autocomplete'),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
</div>
29 changes: 17 additions & 12 deletions panel/views/fields/select.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<?php $this->layout('fields.field') ?>
<select <?= $this->attr([
'class' => 'form-select',
'id' => $field->name(),
'name' => $field->formName(),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
<?php foreach ($field->options() as $value => $label) : ?>
<option <?= $this->attr(['value' => $value, 'selected' => $value == $field->value()]) ?>><?= $this->escape($label) ?></option>
<?php endforeach ?>
</select>
<div class="form-input-wrap">
<?php if ($field->has('icon')) : ?>
<span class="form-input-icon"><?= $this->icon($field->get('icon')) ?></span>
<?php endif ?>
<select <?= $this->attr([
'class' => 'form-select',
'id' => $field->name(),
'name' => $field->formName(),
'required' => $field->isRequired(),
'disabled' => $field->isDisabled(),
'hidden' => $field->isHidden(),
]) ?>>
<?php foreach ($field->options() as $value => $label) : ?>
<option <?= $this->attr(['value' => $value, 'selected' => $value == $field->value()]) ?>><?= $this->escape($label) ?></option>
<?php endforeach ?>
</select>
</div>
Loading