From ca300638b5b76f6392904cba1f42d0eea9e196ef Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 16 Feb 2025 12:23:18 +0100 Subject: [PATCH 1/6] Add icon support to duration fields --- panel/assets/icons/svg/hourglass.svg | 1 + .../components/forms/_forms-duration.scss | 4 +++ panel/views/fields/duration.php | 35 ++++++++++--------- 3 files changed, 24 insertions(+), 16 deletions(-) create mode 100644 panel/assets/icons/svg/hourglass.svg diff --git a/panel/assets/icons/svg/hourglass.svg b/panel/assets/icons/svg/hourglass.svg new file mode 100644 index 000000000..3f70676f2 --- /dev/null +++ b/panel/assets/icons/svg/hourglass.svg @@ -0,0 +1 @@ + diff --git a/panel/src/scss/components/forms/_forms-duration.scss b/panel/src/scss/components/forms/_forms-duration.scss index 332b43de8..b8fe65624 100644 --- a/panel/src/scss/components/forms/_forms-duration.scss +++ b/panel/src/scss/components/forms/_forms-duration.scss @@ -50,3 +50,7 @@ .form-input-duration-hidden { display: none; } + +.form-input-wrap .form-input-icon + .form-input-duration { + padding-left: 1.75rem; +} diff --git a/panel/views/fields/duration.php b/panel/views/fields/duration.php index fccbfa1f3..f7120d660 100644 --- a/panel/views/fields/duration.php +++ b/panel/views/fields/duration.php @@ -1,17 +1,20 @@ layout('fields.field') ?> -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, - ]) ?>> \ No newline at end of file +
+ icon($field->get('icon', 'hourglass')) ?> + 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, + ]) ?>> +
\ No newline at end of file From 0de8989376024e85348f5e9db21d75cf9be28c40 Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 16 Feb 2025 12:30:41 +0100 Subject: [PATCH 2/6] Add icon support to select fields --- .../src/ts/components/inputs/select-input.ts | 16 ++++++---- panel/views/fields/select.php | 29 +++++++++++-------- 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/panel/src/ts/components/inputs/select-input.ts b/panel/src/ts/components/inputs/select-input.ts index 31b1ef684..df85710aa 100644 --- a/panel/src/ts/components/inputs/select-input.ts +++ b/panel/src/ts/components/inputs/select-input.ts @@ -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; @@ -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) { diff --git a/panel/views/fields/select.php b/panel/views/fields/select.php index 829e01279..c3e848ce9 100644 --- a/panel/views/fields/select.php +++ b/panel/views/fields/select.php @@ -1,13 +1,18 @@ layout('fields.field') ?> - \ No newline at end of file +
+ has('icon')) : ?> + icon($field->get('icon')) ?> + + +
\ No newline at end of file From c633a618bbde4247f14b7f8f84ed926122654ece Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 16 Feb 2025 12:30:53 +0100 Subject: [PATCH 3/6] Add custom icon support to date and image fields --- panel/views/fields/date.php | 4 ++-- panel/views/fields/image.php | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/panel/views/fields/date.php b/panel/views/fields/date.php index 537747404..aa0338efe 100644 --- a/panel/views/fields/date.php +++ b/panel/views/fields/date.php @@ -1,6 +1,6 @@ layout('fields.field') ?>
- icon('calendar-clock') ?> + icon($field->get('icon', 'calendar-clock')) ?> attr([ 'type' => 'text', 'class' => ['form-input', 'form-input-date'], @@ -13,4 +13,4 @@ 'hidden' => $field->isHidden(), ]) ?>> icon('times-circle') ?> -
+ \ No newline at end of file diff --git a/panel/views/fields/image.php b/panel/views/fields/image.php index de4413f58..20953c0f4 100644 --- a/panel/views/fields/image.php +++ b/panel/views/fields/image.php @@ -1,6 +1,6 @@ layout('fields.field') ?>
- icon('image') ?> + icon($field->get('icon', 'image')) ?> attr([ 'type' => 'text', 'class' => ['form-input', 'form-input-image'], @@ -14,4 +14,4 @@ 'hidden' => $field->isHidden(), ]) ?>> icon('times-circle') ?> -
+ \ No newline at end of file From 4e9c46aef1ae47b3bb2c1e809178b0643b24b8cf Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 16 Feb 2025 12:31:07 +0100 Subject: [PATCH 4/6] Add default icon to page and template fields --- panel/assets/icons/svg/template.svg | 1 + panel/views/fields/page.php | 59 +++++++++++++++-------------- panel/views/fields/template.php | 27 +++++++------ 3 files changed, 47 insertions(+), 40 deletions(-) create mode 100644 panel/assets/icons/svg/template.svg diff --git a/panel/assets/icons/svg/template.svg b/panel/assets/icons/svg/template.svg new file mode 100644 index 000000000..8fe62bff2 --- /dev/null +++ b/panel/assets/icons/svg/template.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/panel/views/fields/page.php b/panel/views/fields/page.php index 8b170e33c..b1eb77df9 100644 --- a/panel/views/fields/page.php +++ b/panel/views/fields/page.php @@ -1,29 +1,32 @@ layout('fields.field') ?> - \ No newline at end of file +
+ icon($field->get('icon', 'page')) ?> + +
\ No newline at end of file diff --git a/panel/views/fields/template.php b/panel/views/fields/template.php index 2d7243e05..694359253 100644 --- a/panel/views/fields/template.php +++ b/panel/views/fields/template.php @@ -1,13 +1,16 @@ layout('fields.field') ?> - \ No newline at end of file +
+ icon($field->get('icon', 'template')) ?> + +
\ No newline at end of file From 8768b2826ea28122a6c940c602f644e5f7e88303 Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 16 Feb 2025 12:31:29 +0100 Subject: [PATCH 5/6] Add icon support to email, number, password, slug and text fields --- panel/views/fields/email.php | 33 ++++++++++++++---------- panel/views/fields/number.php | 33 ++++++++++++++---------- panel/views/fields/password.php | 35 ++++++++++++++----------- panel/views/fields/slug.php | 45 ++++++++++++++++++--------------- panel/views/fields/text.php | 33 ++++++++++++++---------- 5 files changed, 102 insertions(+), 77 deletions(-) diff --git a/panel/views/fields/email.php b/panel/views/fields/email.php index dbe94c311..0ebb8cfd3 100644 --- a/panel/views/fields/email.php +++ b/panel/views/fields/email.php @@ -1,15 +1,20 @@ layout('fields.field') ?> -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(), - ]) ?>> \ No newline at end of file +
+ has('icon')) : ?> + icon($field->get('icon')) ?> + + 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(), + ]) ?>> +
\ No newline at end of file diff --git a/panel/views/fields/number.php b/panel/views/fields/number.php index 0f1168d3e..891d9f920 100644 --- a/panel/views/fields/number.php +++ b/panel/views/fields/number.php @@ -1,15 +1,20 @@ layout('fields.field') ?> -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(), - ]) ?>> \ No newline at end of file +
+ has('icon')) : ?> + icon($field->get('icon')) ?> + + 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(), + ]) ?>> +
\ No newline at end of file diff --git a/panel/views/fields/password.php b/panel/views/fields/password.php index 36e523e93..b272f7dd7 100644 --- a/panel/views/fields/password.php +++ b/panel/views/fields/password.php @@ -1,16 +1,21 @@ layout('fields.field') ?> -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(), - ]) ?>> \ No newline at end of file +
+ has('icon')) : ?> + icon($field->get('icon')) ?> + + 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(), + ]) ?>> +
\ No newline at end of file diff --git a/panel/views/fields/slug.php b/panel/views/fields/slug.php index 0c993e4dd..9d0642f5d 100644 --- a/panel/views/fields/slug.php +++ b/panel/views/fields/slug.php @@ -1,23 +1,28 @@ layout('fields.field') ?>
- attr([ - 'class' => ['form-input', 'form-input-slug', $field->get('class')], - 'type' => 'text', - '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(), - 'readonly' => $field->isReadonly(), - 'data-source' => $field->source()?->name(), - 'data-auto-update' => $field->autoUpdate() ? 'true' : 'false', - ]) ?>> - autoUpdate() && !$field->isReadonly()): ?> - icon('sparks') ?> + has('icon')) : ?> + icon($field->get('icon')) ?> -
+
+ attr([ + 'class' => ['form-input', 'form-input-slug', $field->get('class')], + 'type' => 'text', + '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(), + 'readonly' => $field->isReadonly(), + 'data-source' => $field->source()?->name(), + 'data-auto-update' => $field->autoUpdate() ? 'true' : 'false', + ]) ?>> + autoUpdate() && !$field->isReadonly()): ?> + icon('sparks') ?> + +
+ \ No newline at end of file diff --git a/panel/views/fields/text.php b/panel/views/fields/text.php index fc8391758..d7f4dc48b 100644 --- a/panel/views/fields/text.php +++ b/panel/views/fields/text.php @@ -1,15 +1,20 @@ layout('fields.field') ?> -attr([ - 'class' => ['form-input', $field->get('class')], - 'type' => 'text', - '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(), - ]) ?>> \ No newline at end of file +
+ has('icon')) : ?> + icon($field->get('icon')) ?> + + attr([ + 'class' => ['form-input', $field->get('class')], + 'type' => 'text', + '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(), + ]) ?>> +
\ No newline at end of file From 7fdd7a66764809381c44b4536254eb0f82e38203 Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 16 Feb 2025 12:32:56 +0100 Subject: [PATCH 6/6] Add icons to schemes --- formwork/schemes/config/system.yaml | 7 +++++-- panel/modals/newUser.yaml | 1 + panel/schemes/forms/register.yaml | 1 + site/schemes/users/user.yaml | 1 + 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/formwork/schemes/config/system.yaml b/formwork/schemes/config/system.yaml index 307638078..a6218e946 100644 --- a/formwork/schemes/config/system.yaml +++ b/formwork/schemes/config/system.yaml @@ -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: @@ -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] @@ -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() @@ -121,6 +123,7 @@ fields: panel.translation: type: select label: '{{panel.options.system.adminPanel.defaultLanguage}}' + icon: translate translate: [label] options@: formwork.panel.availableTranslations diff --git a/panel/modals/newUser.yaml b/panel/modals/newUser.yaml index 80b57f76d..7fa31ea33 100644 --- a/panel/modals/newUser.yaml +++ b/panel/modals/newUser.yaml @@ -31,6 +31,7 @@ fields: language: type: select label: '{{user.language}}' + icon: translate required: true translate: [label] options@: formwork.panel.availableTranslations diff --git a/panel/schemes/forms/register.yaml b/panel/schemes/forms/register.yaml index 8f4f0a177..a9e2e357b 100644 --- a/panel/schemes/forms/register.yaml +++ b/panel/schemes/forms/register.yaml @@ -29,6 +29,7 @@ fields: language: type: select label: '{{user.language}}' + icon: translate required: true translate: [label] options@: formwork.panel.availableTranslations diff --git a/site/schemes/users/user.yaml b/site/schemes/users/user.yaml index 0d8ca939b..61b7a4965 100644 --- a/site/schemes/users/user.yaml +++ b/site/schemes/users/user.yaml @@ -29,6 +29,7 @@ fields: language: type: select label: '{{user.language}}' + icon: translate required: true translate: [label] options@: formwork.panel.availableTranslations