Merge pull request #15619 from craftcms/feature/field-settings-chip

Add a global field chip to the top of FLD field setting slideouts

src/base/Field.php

@@ -43,7 +43,7 @@
  * @author Pixel & Tonic, Inc. <[email protected]>
  * @since 3.0.0
  */
-abstract class Field extends SavableComponent implements FieldInterface
+abstract class Field extends SavableComponent implements FieldInterface, Iconic, Actionable
 {
     use FieldTrait;
 
@@ -510,6 +510,14 @@ public function getHandle(): ?string
         return $this->handle;
     }
 
+    /**
+     * @inheritdoc
+     */
+    public function getIcon(): ?string
+    {
+        return static::icon();
+    }
+
     /**
      * @inheritdoc
      */
@@ -518,6 +526,41 @@ public function getCpEditUrl(): ?string
         return $this->id ? UrlHelper::cpUrl("settings/fields/edit/$this->id") : null;
     }
 
+    /**
+     * @inheritdoc
+     */
+    public function getActionMenuItems(): array
+    {
+        $items = [];
+
+        if (
+            $this->id &&
+            Craft::$app->getUser()->getIsAdmin() &&
+            Craft::$app->getConfig()->getGeneral()->allowAdminChanges
+        ) {
+            $editId = sprintf('action-edit-%s', mt_rand());
+            $items[] = [
+                'id' => $editId,
+                'icon' => 'edit',
+                'label' => Craft::t('app', 'Edit'),
+            ];
+
+            $view = Craft::$app->getView();
+            $view->registerJsWithVars(fn($id, $params) => <<<JS
+$('#' + $id).on('click', () => {
+  new Craft.CpScreenSlideout('fields/edit-field', {
+    params: $params,
+  });
+});
+JS, [
+                $view->namespaceInputId($editId),
+                ['fieldId' => $this->id],
+            ]);
+        }
+
+        return $items;
+    }
+
     /**
      * @inheritdoc
      */

src/templates/_includes/forms/fld/custom-field-settings.twig

@@ -1,7 +1,30 @@
 {% extends '_includes/forms/fld/field-settings.twig' %}
 {% import '_includes/forms' as forms %}
 
+{% set originalField = craft.app.fields.getFieldByUid(field.getField().uid) %}
+
 {% block fieldSettings %}
+  {% if originalField %}
+    {% set fieldChipId = "chip#{random()}" %}
+    <div class="pane no-border p-m">
+      {{ chip(originalField, {
+        id: fieldChipId,
+        class: 'hairline',
+        showActionMenu: true,
+        showHandle: true,
+      }) }}
+    </div>
+
+    {% js %}
+      (() => {
+        const $chip = $('#{{ fieldChipId|namespaceInputId }}');
+        $chip.on('dblclick taphold', (ev) => {
+          $chip.find('.btn').data('disclosureMenu').$container.find('[data-edit-action]').click();
+        });
+      })();
+    {% endjs %}
+  {% endif %}
+
   {{ block('labelField') }}
 
   {{ forms.textField({
@@ -18,7 +41,7 @@
     required: true,
     data: {
       'error-key': 'handle'
-    }
+    },
   }) }}
 
   {{ block('instructionsField') }}

src/web/assets/cp/src/css/_main.scss

@@ -317,6 +317,34 @@ fieldset:last-child,
   margin-block: var(--xl) !important;
 }
 
+.p-0 {
+  padding: 0 !important;
+}
+
+.p-2xs {
+  padding: var(--2xs) !important;
+}
+
+.p-xs {
+  padding: var(--xs) !important;
+}
+
+.p-s {
+  padding: var(--s) !important;
+}
+
+.p-m {
+  padding: var(--m) !important;
+}
+
+.p-l {
+  padding: var(--l) !important;
+}
+
+.p-xl {
+  padding: var(--xl) !important;
+}
+
 .pt-0 {
   padding-block-start: 0 !important;
 }
@@ -3301,6 +3329,11 @@ table {
 .card {
   color: var(--custom-text-color, var(--text-color));
   background-color: var(--custom-bg-color, var(--gray-050));
+
+  &.hairline {
+    border: 1px solid var(--medium-hairline-color);
+    background-color: transparent;
+  }
 }
 
 /* chips */
@@ -5313,6 +5346,7 @@ table.data tbody tr:not(.disabled).active-drop-target {
   box-sizing: border-box;
 
   .pane &,
+  .slideout &,
   #content & {
     background-color: var(--gray-050);
     border: 1px solid var(--hairline-color);