Merge pull request #651 from getformwork/feature/text-input-icons

Add icons support to select and text-based inputs
getformwork · Feb 16, 2025 · a6b174a · a6b174a
2 parents 9820393 + 7fdd7a6
commit a6b174a
Show file tree

Hide file tree

Showing 19 changed files with 212 additions and 157 deletions.
diff --git 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/assets/icons/svg/hourglass.svg b/panel/assets/icons/svg/hourglass.svg
diff --git a/panel/assets/icons/svg/template.svg b/panel/assets/icons/svg/template.svg
diff --git 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
@@ -29,6 +29,7 @@ fields:
     language:
         type: select
         label: '{{user.language}}'
+        icon: translate
         required: true
         translate: [label]
         options@: formwork.panel.availableTranslations

diff --git 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/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/date.php b/panel/views/fields/date.php
@@ -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'],
@@ -13,4 +13,4 @@
                 'hidden'      => $field->isHidden(),
             ]) ?>>
     <span class="form-input-action" data-reset="<?= $field->name() ?>"><?= $this->icon('times-circle') ?></span>
-</div>
+</div>
diff --git a/panel/views/fields/duration.php b/panel/views/fields/duration.php
@@ -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>
diff --git a/panel/views/fields/email.php b/panel/views/fields/email.php
@@ -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>
diff --git a/panel/views/fields/image.php b/panel/views/fields/image.php
@@ -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'],
@@ -14,4 +14,4 @@
                 'hidden'      => $field->isHidden(),
             ]) ?>>
     <span class="form-input-action" data-reset="<?= $field->name() ?>"><?= $this->icon('times-circle') ?></span>
-</div>
+</div>
diff --git a/panel/views/fields/number.php b/panel/views/fields/number.php
@@ -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>
diff --git a/panel/views/fields/page.php b/panel/views/fields/page.php
@@ -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>
diff --git a/panel/views/fields/password.php b/panel/views/fields/password.php
@@ -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>
diff --git a/panel/views/fields/select.php b/panel/views/fields/select.php
@@ -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>