Tweaks and docs for the new actions dropdown

javiereguiluz · javiereguiluz · commit c0d9ed5dd3d0 · 2019-02-09T15:22:53.000+01:00
diff --git a/assets/css/easyadmin-theme/datagrids.scss b/assets/css/easyadmin-theme/datagrids.scss
@@ -60,20 +60,47 @@ table.datagrid {
 .datagrid td.actions .fa {
   font-size: var(--font-size-base);
 }
-.datagrid td.actions .dropdown-actions {
+
+.datagrid .actions-dropdown {
+  position: relative;
+}
+.datagrid .actions-dropdown .dropdown-toggle {
+  background: transparent !important;
+  border: var(--border-width) solid transparent;
+  box-shadow: none !important;
   padding: 1px 8px 0 8px;
-  box-shadow: none;
-  background: transparent;
 }
-.datagrid td.actions .dropdown-actions:after {
+.datagrid .actions-dropdown .dropdown-toggle:after {
   display: none;
 }
-.datagrid td.actions a.dropdown-item {
+.datagrid .actions-dropdown a.dropdown-item {
   margin: 0;
 }
-.datagrid td.actions a.dropdown-item i {
+.datagrid .actions-dropdown a.dropdown-item i {
   margin-right: 5px;
 }
+.datagrid .actions-dropdown .dropdown-menu-right {
+  border-top-right-radius: 0;
+  right: 0;
+  top: 22px;
+}
+.datagrid .actions-dropdown:hover {
+  cursor: pointer;
+
+  .dropdown-toggle {
+    background: var(--white) !important;
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: var(--white);
+    z-index: $zindex-dropdown + 1;
+    position: relative;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .dropdown-menu {
+    display: block;
+  }
+}
 
 .datagrid .easyadmin-thumbnail img {
   box-shadow: 0 0 0 2px var(--white), 0px 0px 4px 1px var(--gray-600);
diff --git a/assets/css/easyadmin-theme/variables.scss b/assets/css/easyadmin-theme/variables.scss
@@ -112,6 +112,10 @@ $badge-border-radius: var(--border-radius);
 $dropdown-link-hover-color: var(--gray-900);
 $navbar-inverse-color: var(--gray-400);
 $navbar-inverse-link-color: var(--gray-400);
+$dropdown-border-color: var(--border-color);
+$dropdown-border-width: var(--border-width);
+$dropdown-box-shadow: var(--box-shadow-lg);
+$zindex-dropdown: 1000;
 
 $nav-tabs-border-color: var(--border-color);
 $nav-tabs-border-width: var(--border-width);
diff --git a/doc/book/actions-configuration.rst b/doc/book/actions-configuration.rst
@@ -277,6 +277,32 @@ This is configurable thanks to the ``icon``, ``label`` and ``title`` options:
                 # the 'title' content is displayed when the cursor is over the icon
                 - { name: 'edit', icon: 'pencil', label: false, title: 'Search' }
 
+Displaying Item Actions in a Dropdown Menu
+------------------------------------------
+
+In complex backends it's common to display lots of fields on each list row. In
+those cases it's recommended to display the actions in a dropdown menu instead
+of the expanded design used by default.
+
+To do so, set the ``collapse_actions`` to ``true`` in the global ``list`` option
+or the local ``list`` option of each entity (the local option overrides the
+global option):
+
+.. code-block:: yaml
+
+    # config/packages/easy_admin.yaml
+    easy_admin:
+        list:
+            # hide actions by default in a dropdown menu...
+            collapse_actions: true
+            # ...
+        entities:
+            Category:
+                list:
+                    # ...except for this entity, where actions are displayed expanded
+                    collapse_actions: false
+                # ...
+
 Batch Actions
 -------------
 
diff --git a/doc/book/configuration-reference.rst b/doc/book/configuration-reference.rst
@@ -32,7 +32,8 @@ config key:
 
   * :ref:`title <reference-list-title>`
   * :ref:`actions <reference-list-actions>`
-  * :ref:`batch_actions <reference-list-batch_actions>`
+  * :ref:`batch_actions <reference-list-batch-actions>`
+  * :ref:`collapse_actions <reference-list-collapse-actions>`
   * :ref:`max_results <reference-list-max-results>`
 * `edit`_
 * `new`_
@@ -475,6 +476,18 @@ with a dash (``-``):
                 list:
                     batch_actions: ['-delete', 'myOtherAction']
 
+.. _reference-list-collapse-actions:
+
+collapse_actions
+~~~~~~~~~~~~~~~~
+
+(**default value**: ``false``, **type**: boolean)
+
+If set to ``true``, the actions of each listing item are displayed inside a
+dropdown menu that is revealed when moving the mouse over it. It's useful for
+complex backends that display lots of information on each list row and don't
+have enough space to display the actions expanded.
+
 .. _reference-list-max-results:
 
 max_results
diff --git a/src/Resources/public/app.css b/src/Resources/public/app.css
diff --git a/src/Resources/public/app.css.map b/src/Resources/public/app.css.map
diff --git a/src/Resources/views/default/includes/_actions_dropdown.html.twig b/src/Resources/views/default/includes/_actions_dropdown.html.twig
@@ -1,7 +1,8 @@
-<div class="dropdown">
-    <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-actions" data-toggle="dropdown">
+<div class="actions-dropdown">
+    <button type="button" class="btn btn-secondary btn-sm dropdown-toggle">
         <i class="fa fa-ellipsis-h"></i>
     </button>
+
     <div class="dropdown-menu dropdown-menu-right">
         {{ include('@EasyAdmin/default/includes/_actions.html.twig', { is_dropdown: true }) }}
     </div>
diff --git a/tests/Controller/CustomizedBackendTest.php b/tests/Controller/CustomizedBackendTest.php
@@ -96,7 +96,7 @@ public function testListViewDropdownItemActions()
     {
         $crawler = $this->requestListView('Product');
 
-        $this->assertCount(15, $crawler->filter('#main .table td.actions div.dropdown a.dropdown-item:contains("Edit")'));
+        $this->assertCount(15, $crawler->filter('#main .table td.actions div.actions-dropdown a.dropdown-item:contains("Edit")'));
     }
 
     public function testListViewTableIdColumn()

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ public function testListViewDropdownItemActions()`
`96`	`96`	`{`
`97`	`97`	`$crawler = $this->requestListView('Product');`
`98`	`98`
`99`		`- $this->assertCount(15, $crawler->filter('#main .table td.actions div.dropdown a.dropdown-item:contains("Edit")'));`
	`99`	`+ $this->assertCount(15, $crawler->filter('#main .table td.actions div.actions-dropdown a.dropdown-item:contains("Edit")'));`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`public function testListViewTableIdColumn()`