Move the action button into the page header

Resolves #14913
craftcms · May 25, 2024 · dbef744 · dbef744
1 parent 5f18e00
commit dbef744
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 7 deletions.
diff --git a/src/templates/_layouts/cp.twig b/src/templates/_layouts/cp.twig
@@ -147,7 +147,6 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
                             {{ contextMenu|raw }}
                         </div>
                     {% endif %}
-                    {{ actionMenu|raw }}
                 </div>
                 <button
                     type="button"
@@ -225,12 +224,13 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
                                                 {{ toolbar|raw }}
                                             </div>
                                         {% endif %}
-                                        {% if actionButton or additionalButtons %}
+                                        {% if actionButton or additionalButtons or actionMenu or details %}
                                             <div id="action-buttons" class="flex">
                                                 {{ additionalButtons|raw }}
                                                 {{ actionButton|raw }}
+                                                {{ actionMenu|raw }}
 
-                                                {% if details is not empty %}
+                                                {% if details %}
                                                     {% set content %}
                                                         <span aria-hidden="true" class="cp-icon">{{ iconSvg('sidebar-end') }}</span>
                                                         <span class="visually-hidden">{{ 'Toggle details sidebar'|t('app') }}</span>

diff --git a/src/web/CpScreenResponseFormatter.php b/src/web/CpScreenResponseFormatter.php
@@ -179,7 +179,7 @@ private function _formatTemplate(YiiResponse $response, CpScreenResponseBehavior
                     'hiddenLabel' => Craft::t('app', 'Actions'),
                     'buttonAttributes' => [
                         'id' => 'action-btn',
-                        'class' => ['action-btn'],
+                        'class' => ['action-btn', 'hairline-dark'],
                         'title' => Craft::t('app', 'Actions'),
                     ],
                 ]),

diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_cp.scss b/src/web/assets/cp/src/css/_cp.scss
@@ -960,6 +960,11 @@ li.breadcrumb-toggle-wrapper {
 }
 
 #action-buttons {
+  .action-btn {
+    width: var(--ui-control-height);
+    height: var(--ui-control-height);
+  }
+
   @media only screen and (max-width: 400px) {
     .btngroup .btn:first-child {
       flex-basis: 100%;

diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -1639,6 +1639,14 @@ ul.icons {
     }
   }
 
+  &.hairline-dark {
+    border: 1px solid var(--dark-hairline-color);
+
+    &:not(:hover):not(:active):not([aria-expanded='true']) {
+      background-color: transparent;
+    }
+  }
+
   &.link-btn {
     color: var(--link-color);
 
@@ -3514,7 +3522,8 @@ table {
 
     & > .action-btn,
     & > .move {
-      @include touch-target;
+      height: var(--touch-target-size);
+      width: var(--touch-target-size);
       margin: 0 -4px;
       &:before {
         color: var(--custom-text-color, var(--ui-control-color));