Make the FLD responsive

craftcms · Feb 16, 2024 · 2f16afc · 2f16afc
1 parent 2f959ac
commit 2f16afc
Show file tree

Hide file tree

Showing 10 changed files with 210 additions and 78 deletions.
diff --git a/src/helpers/Cp.php b/src/helpers/Cp.php
@@ -2325,6 +2325,7 @@ public static function fieldLayoutDesignerHtml(FieldLayout $fieldLayout, array $
             Html::hiddenInput('fieldLayout', Json::encode($fieldLayoutConfig), [
                 'data' => ['config-input' => true],
             ]) .
+            Html::beginTag('div', ['class' => 'fld-container']) .
             Html::beginTag('div', ['class' => 'fld-workspace']) .
             Html::beginTag('div', ['class' => 'fld-tabs']) .
             implode('', array_map(fn(FieldLayoutTab $tab) => self::_fldTabHtml($tab, $config['customizableTabs']), $tabs)) .
@@ -2336,7 +2337,7 @@ public static function fieldLayoutDesignerHtml(FieldLayout $fieldLayout, array $
                 ])
                 : '') .
             Html::endTag('div') . // .fld-workspace
-            Html::beginTag('div', ['class' => 'fld-sidebar']) .
+            Html::beginTag('div', ['class' => 'fld-library']) .
             ($config['customizableUi']
                 ? Html::beginTag('section', [
                     'class' => ['btngroup', 'btngroup--exclusive', 'small', 'fullwidth'],
@@ -2377,7 +2378,8 @@ public static function fieldLayoutDesignerHtml(FieldLayout $fieldLayout, array $
                 implode('', array_map(fn(FieldLayoutElement $element) => self::layoutElementSelectorHtml($element, true), $availableUiElements)) .
                 Html::endTag('div') // .fld-ui-library
                 : '') .
-            Html::endTag('div') . // .fld-sidebar
+            Html::endTag('div') . // .fld-library
+            Html::endTag('div') . // .fld-container
             Html::endTag('div'); // .layoutdesigner
     }
 
@@ -2399,6 +2401,7 @@ private static function _setLayoutOnElements(array $elements, FieldLayout $field
      */
     private static function _fldTabHtml(FieldLayoutTab $tab, bool $customizable): string
     {
+        $menuId = sprintf('menu-%s', mt_rand());
         return
             Html::beginTag('div', [
                 'class' => 'fld-tab',
@@ -2428,6 +2431,14 @@ private static function _fldTabHtml(FieldLayoutTab $tab, bool $customizable): st
             Html::endTag('div') . // .tabs
             Html::beginTag('div', ['class' => 'fld-tabcontent']) .
             implode('', array_map(fn(FieldLayoutElement $element) => self::layoutElementSelectorHtml($element, false), $tab->getElements())) .
+            Html::button(Craft::t('app', 'Add'), [
+                'class' => ['btn', 'add', 'icon', 'dashed', 'fullwidth', 'fld-add-btn'],
+                'aria' => ['controls' => $menuId],
+            ]) .
+            Html::tag('div', options: [
+                'id' => $menuId,
+                'class' => ['menu', 'menu--disclosure', 'fld-library-menu'],
+            ]) .
             Html::endTag('div') . // .fld-tabcontent
             Html::endTag('div'); // .fld-tab
     }

diff --git a/src/translations/en/app.php b/src/translations/en/app.php
@@ -61,6 +61,7 @@
     'Add an option' => 'Add an option',
     'Add to cart' => 'Add to cart',
     'Add {type} above' => 'Add {type} above',
+    'Add' => 'Add',
     'Added to cart' => 'Added to cart',
     'Address Fields' => 'Address Fields',
     'Address Line 1' => 'Address Line 1',

diff --git a/src/web/assets/cp/CpAsset.php b/src/web/assets/cp/CpAsset.php
@@ -119,6 +119,7 @@ private function _registerTranslations(View $view): void
             '<span class="visually-hidden">Characters left:</span> {chars, number}',
             'A server error occurred.',
             'Actions',
+            'Add',
             'Add…',
             'All',
             'Announcements',

diff --git a/src/web/assets/cp/src/css/_fld.scss b/src/web/assets/cp/src/css/_fld.scss
@@ -4,7 +4,7 @@
 $base: 24px;
 $tabPadding: 14px;
 $tabWidth: $base * 11;
-$gridColor: hsl(212, 50%, 95%);
+$gridColor: var(--gray-100);
 
 @mixin workspaceBg {
   background-color: var(--gray-050);
@@ -14,6 +14,10 @@ $gridColor: hsl(212, 50%, 95%);
 }
 
 .layoutdesigner {
+  container-type: inline-size;
+}
+
+.fld-container {
   display: flex;
   align-items: stretch;
   position: relative;
@@ -30,10 +34,10 @@ $gridColor: hsl(212, 50%, 95%);
   .fld-workspace {
     flex: 1;
     @include border-radius(
-      var(--small-border-radius),
+      calc(var(--small-border-radius) - 1px),
       0,
       0,
-      var(--small-border-radius)
+      calc(var(--small-border-radius - 1px))
     );
     @include padding($base, 0, $base, $base);
     @include workspaceBg;
@@ -47,47 +51,68 @@ $gridColor: hsl(212, 50%, 95%);
     }
   }
 
-  .fld-sidebar {
+  &:not(:has(.fld-library)) {
+    @include padding-right(0);
+
+    .fld-workspace {
+      @include padding-right($base);
+    }
+  }
+
+  .fld-library {
     position: absolute;
     top: 0;
     @include right(0);
     height: 100%;
     width: $tabWidth + 1;
     padding: $tabPadding;
-    display: flex;
-    flex-direction: column;
+  }
+}
 
-    .btngroup {
-      margin-bottom: $tabPadding;
-    }
+.fld-new-tab-btn:active {
+  background-color: var(--gray-050);
+}
 
-    .fld-field-library {
-      margin: -3px;
-      padding: 3px;
-      flex: 1;
-      min-height: 0;
-      overflow: auto;
+.fld-library-menu {
+  width: $tabWidth;
+  @include margin-left($tabPadding * -1);
+  padding: $tabPadding;
+}
 
-      .fld-field-group {
-        margin-top: $tabPadding;
+.fld-library {
+  display: flex;
+  flex-direction: column;
+
+  .btngroup {
+    margin-bottom: $tabPadding;
+  }
 
-        h6 {
-          margin-bottom: 7px;
-        }
+  .fld-field-library {
+    margin: -3px;
+    padding: 3px;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+
+    .fld-field-group {
+      margin-top: $tabPadding;
+
+      & > *:not(:first-child) {
+        margin-top: var(--s);
       }
     }
+  }
 
-    .filtered {
-      display: none;
-    }
+  .fld-ui-library > *:not(:first-child) {
+    margin-top: var(--s);
   }
 
-  .fld-new-tab-btn:active {
-    background-color: var(--gray-050);
+  .filtered {
+    display: none;
   }
 }
 
-.fld-sidebar,
+.layoutdesigner .fld-library,
 .fld-tab .tabs .tab,
 .fld-tab .fld-tabcontent,
 .fld-new-tab-btn,
@@ -152,6 +177,17 @@ $gridColor: hsl(212, 50%, 95%);
       var(--medium-border-radius),
       var(--medium-border-radius)
     );
+
+    & > .fld-element,
+    & > .fld-add-btn {
+      &:not(:first-child) {
+        margin-top: var(--s);
+      }
+    }
+
+    .fld-add-btn:not([aria-expanded='true']) {
+      display: none;
+    }
   }
 
   &.fld-insertion {
@@ -190,10 +226,6 @@ $gridColor: hsl(212, 50%, 95%);
     cursor: grab;
   }
 
-  & + .fld-element {
-    margin-top: 7px;
-  }
-
   &.fld-insertion {
     box-sizing: border-box;
     border: 2px dashed var(--hairline-color);
@@ -337,3 +369,25 @@ $gridColor: hsl(212, 50%, 95%);
     @include margin(0, var(--neg-padding), 0, 0);
   }
 }
+
+@container (width < #{$base + $tabWidth + $base + $tabWidth + 1}) {
+  .fld-container {
+    @include padding-right(0);
+
+    .fld-workspace {
+      @include padding-right($base);
+    }
+
+    & > .fld-library {
+      display: none;
+    }
+  }
+
+  .fld-tab {
+    .fld-tabcontent {
+      .fld-add-btn {
+        display: inline-flex !important;
+      }
+    }
+  }
+}
diff --git a/src/web/assets/cp/src/js/Craft.js b/src/web/assets/cp/src/js/Craft.js
@@ -3011,12 +3011,12 @@ $.extend($.fn, {
     });
   },
 
-  disclosureMenu: function () {
+  disclosureMenu: function (settings) {
     return this.each(function () {
       const $trigger = $(this);
       // Only instantiate if it's not already a disclosure trigger, and it references a disclosure content
       if (!$trigger.data('trigger') && $trigger.attr('aria-controls')) {
-        new Garnish.DisclosureMenu($trigger);
+        new Garnish.DisclosureMenu($trigger, settings);
       }
     });
   },