Merge pull request #3203 from Laravel-Backpack/fix-operations-display-on-print-xs-and-sm

tabacitu · web-flow · commit 59490952d7c0 · 2020-09-15T10:02:12.000-04:00
Fix List operation bulk buttons on XS and SM
diff --git a/src/app/Library/CrudPanel/Traits/Columns.php b/src/app/Library/CrudPanel/Traits/Columns.php
@@ -366,6 +366,7 @@ public function makeSureColumnHasNeededAttributes($column)
         $column = $this->makeSureColumnHasLabel($column);
         $column = $this->makeSureColumnHasType($column);
         $column = $this->makeSureColumnHasKey($column);
+        $column = $this->makeSureColumnHasPriority($column);
         $column = $this->makeSureColumnHasModel($column);
 
         // check if the column exists in the database (as a db column)
@@ -387,6 +388,21 @@ public function makeSureColumnHasNeededAttributes($column)
         return $column;
     }
 
+    /**
+     * Count the number of columns added so far.
+     *
+     * It will not take into account the action
+     * columns (columns with buttons, checkbox).
+     *
+     * @return int
+     */
+    public function countColumnsWithoutActions()
+    {
+        return collect($this->columns())->filter(function ($column, $key) {
+            return ! isset($column['hasActions']) || $column['hasActions'] == false;
+        })->count();
+    }
+
     /**
      * Create and return a CrudColumn object for that column name.
      *
diff --git a/src/app/Library/CrudPanel/Traits/ColumnsProtectedMethods.php b/src/app/Library/CrudPanel/Traits/ColumnsProtectedMethods.php
@@ -18,15 +18,22 @@ protected function addColumnToOperationSettings($column)
         $allColumns = Arr::add($allColumns, $column['key'], $column);
 
         $this->setOperationSetting('columns', $allColumns);
+    }
 
-        // make sure the column has a priority in terms of visibility
-        // if no priority has been defined, use the order in the array plus one
-        if (! array_key_exists('priority', $column)) {
-            $position_in_columns_array = (int) array_search($column['key'], array_keys($this->columns()));
-            $allColumns[$column['key']]['priority'] = $position_in_columns_array + 1;
-        }
+    /**
+     * If a column priority has not been defined, provide a default one.
+     *
+     * @param array $column Column definition array.
+     * @return array         Proper array defining the column.
+     */
+    protected function makeSureColumnHasPriority($column)
+    {
+        $columns_count = $this->countColumnsWithoutActions();
+        $assumed_priority = $columns_count ? $columns_count : 0;
 
-        $this->setOperationSetting('columns', $allColumns);
+        $column['priority'] = $column['priority'] ?? $assumed_priority;
+
+        return $column;
     }
 
     /**
diff --git a/src/app/Library/CrudPanel/Traits/Read.php b/src/app/Library/CrudPanel/Traits/Read.php
@@ -143,26 +143,28 @@ public function enableBulkActions()
             'type'            => 'checkbox',
             'name'            => 'bulk_actions',
             'label'           => ' <input type="checkbox" class="crud_bulk_actions_main_checkbox" style="width: 16px; height: 16px;" />',
-            'priority'        => 1,
+            'priority'        => 0,
             'searchLogic'     => false,
             'orderable'       => false,
             'visibleInTable'  => true,
             'visibleInModal'  => false,
             'visibleInExport' => false,
             'visibleInShow'   => false,
+            'hasActions'      => true,
         ])->makeFirstColumn();
 
         $this->addColumn([
             'type'            => 'custom_html',
             'name'            => 'blank_first_column',
             'label'           => ' ',
-            'priority'        => 1,
+            'priority'        => 0,
             'searchLogic'     => false,
             'orderable'       => false,
             'visibleInTabel'  => true,
             'visibleInModal'  => false,
             'visibleInExport' => false,
             'visibleInShow'   => false,
+            'hasActions'      => true,
         ])->makeFirstColumn();
     }
 
diff --git a/src/public/packages/backpack/crud/css/list.css b/src/public/packages/backpack/crud/css/list.css
@@ -54,7 +54,8 @@
 	}
 
   /*  DataTables Loading State Visual Improvements  */
-
+	table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td.dtr-control:before, 
+	table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th.dtr-control:before,
 	#crudTable.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
 	#crudTable.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
 		background-color: transparent;
diff --git a/src/resources/views/crud/create.blade.php b/src/resources/views/crud/create.blade.php
@@ -18,7 +18,7 @@
         <small>{!! $crud->getSubheading() ?? trans('backpack::crud.add').' '.$crud->entity_name !!}.</small>
 
         @if ($crud->hasAccess('list'))
-          <small><a href="{{ url($crud->route) }}" class="hidden-print font-sm"><i class="la la-angle-double-{{ config('backpack.base.html_direction') == 'rtl' ? 'right' : 'left' }}"></i> {{ trans('backpack::crud.back_to_all') }} <span>{{ $crud->entity_name_plural }}</span></a></small>
+          <small><a href="{{ url($crud->route) }}" class="d-print-none font-sm"><i class="la la-angle-double-{{ config('backpack.base.html_direction') == 'rtl' ? 'right' : 'left' }}"></i> {{ trans('backpack::crud.back_to_all') }} <span>{{ $crud->entity_name_plural }}</span></a></small>
         @endif
 	  </h2>
 	</section>
diff --git a/src/resources/views/crud/edit.blade.php b/src/resources/views/crud/edit.blade.php
@@ -18,7 +18,7 @@
         <small>{!! $crud->getSubheading() ?? trans('backpack::crud.edit').' '.$crud->entity_name !!}.</small>
 
         @if ($crud->hasAccess('list'))
-          <small><a href="{{ url($crud->route) }}" class="hidden-print font-sm"><i class="la la-angle-double-{{ config('backpack.base.html_direction') == 'rtl' ? 'right' : 'left' }}"></i> {{ trans('backpack::crud.back_to_all') }} <span>{{ $crud->entity_name_plural }}</span></a></small>
+          <small><a href="{{ url($crud->route) }}" class="d-print-none font-sm"><i class="la la-angle-double-{{ config('backpack.base.html_direction') == 'rtl' ? 'right' : 'left' }}"></i> {{ trans('backpack::crud.back_to_all') }} <span>{{ $crud->entity_name_plural }}</span></a></small>
         @endif
 	  </h2>
 	</section>
diff --git a/src/resources/views/crud/inc/datatables_logic.blade.php b/src/resources/views/crud/inc/datatables_logic.blade.php
@@ -209,9 +209,9 @@ functionsToRunOnDataTablesDrawEvent: [],
               "type": "POST"
           },
           dom:
-            "<'row hidden'<'col-sm-6 hidden-xs'i><'col-sm-6 hidden-print'f>>" +
+            "<'row hidden'<'col-sm-6'i><'col-sm-6 d-print-none'f>>" +
             "<'row'<'col-sm-12'tr>>" +
-            "<'row mt-2 '<'col-sm-6 col-md-4'l><'col-sm-2 col-md-4 text-center'B><'col-sm-6 col-md-4 hidden-print'p>>",
+            "<'row mt-2 d-print-none '<'col-sm-12 col-md-4'l><'col-sm-0 col-md-4 text-center'B><'col-sm-12 col-md-4 'p>>",
       }
   }
   </script>
diff --git a/src/resources/views/crud/inc/export_buttons.blade.php b/src/resources/views/crud/inc/export_buttons.blade.php
@@ -111,7 +111,10 @@ function moveExportButtonsToTopRight() {
         }
       })
       $(".dt-buttons").appendTo($('#datatable_button_stack' ));
-      $('.dt-buttons').css('display', 'inline-block');
+      $('.dt-buttons').addClass('d-xs-block')
+                      .addClass('d-sm-inline-block')
+                      .addClass('d-md-inline-block')
+                      .addClass('d-lg-inline-block');
     }
 
     crud.addFunctionToDataTablesDrawEventQueue('moveExportButtonsToTopRight');
diff --git a/src/resources/views/crud/list.blade.php b/src/resources/views/crud/list.blade.php
@@ -30,15 +30,15 @@
         <div class="row mb-0">
           <div class="col-sm-6">
             @if ( $crud->buttons()->where('stack', 'top')->count() ||  $crud->exportButtons())
-              <div class="hidden-print {{ $crud->hasAccess('create')?'with-border':'' }}">
+              <div class="d-print-none {{ $crud->hasAccess('create')?'with-border':'' }}">
 
                 @include('crud::inc.button_stack', ['stack' => 'top'])
 
               </div>
             @endif
           </div>
           <div class="col-sm-6">
-            <div id="datatable_search_stack" class="mt-sm-0 mt-2"></div>
+            <div id="datatable_search_stack" class="mt-sm-0 mt-2 d-print-none"></div>
           </div>
         </div>
 
@@ -74,33 +74,34 @@
                       data-visible-in-modal="false"
                       data-visible-in-export="true"
                       data-force-export="true"
-
                     @else
-
                       data-visible-in-table="{{var_export($column['visibleInTable'] ?? false)}}"
                       data-visible="{{var_export($column['visibleInTable'] ?? true)}}"
                       data-can-be-visible-in-table="true"
                       data-visible-in-modal="{{var_export($column['visibleInModal'] ?? true)}}"
-                      @if(isset($column['visibleInExport']))
-                        @if($column['visibleInExport'] === false)
-                          data-visible-in-export="false"
-                          data-force-export="false"
-                        @else
-                          data-visible-in-export="true"
-                          data-force-export="true"
-                        @endif
-                      @else
-                        data-visible-in-export="true"
-                        data-force-export="false"
-                      @endif
+                      @if(isset($column['visibleInExport']))                     
+                         @if($column['visibleInExport'] === false)
+                           data-visible-in-export="false"   
+                           data-force-export="false"    
+                         @else    
+                           data-visible-in-export="true"    
+                           data-force-export="true"   
+                         @endif   
+                       @else    
+                         data-visible-in-export="true"    
+                         data-force-export="false"    
+                       @endif
                     @endif
                   >
                     {!! $column['label'] !!}
                   </th>
                 @endforeach
 
                 @if ( $crud->buttons()->where('stack', 'line')->count() )
-                  <th data-orderable="false" data-priority="{{ $crud->getActionsColumnPriority() }}" data-visible-in-export="false">{{ trans('backpack::crud.actions') }}</th>
+                  <th data-orderable="false" 
+                      data-priority="{{ $crud->getActionsColumnPriority() }}" 
+                      data-visible-in-export="false"
+                      >{{ trans('backpack::crud.actions') }}</th>
                 @endif
               </tr>
             </thead>
@@ -121,7 +122,7 @@
           </table>
 
           @if ( $crud->buttons()->where('stack', 'bottom')->count() )
-          <div id="bottom_buttons" class="hidden-print">
+          <div id="bottom_buttons" class="d-print-none text-center text-sm-left">
             @include('crud::inc.button_stack', ['stack' => 'bottom'])
 
             <div id="datatable_button_stack" class="float-right text-right hidden-xs"></div>
diff --git a/src/resources/views/crud/reorder.blade.php b/src/resources/views/crud/reorder.blade.php
@@ -18,7 +18,7 @@
         <small>{!! $crud->getSubheading() ?? trans('backpack::crud.reorder').' '.$crud->entity_name_plural !!}.</small>
 
         @if ($crud->hasAccess('list'))
-          <small><a href="{{ url($crud->route) }}" class="hidden-print font-sm"><i class="la la-angle-double-left"></i> {{ trans('backpack::crud.back_to_all') }} <span>{{ $crud->entity_name_plural }}</span></a></small>
+          <small><a href="{{ url($crud->route) }}" class="d-print-none font-sm"><i class="la la-angle-double-left"></i> {{ trans('backpack::crud.back_to_all') }} <span>{{ $crud->entity_name_plural }}</span></a></small>
         @endif
     </h2>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,8 @@`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`/* DataTables Loading State Visual Improvements */`
`57`		`-`
	`57`	`+ table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td.dtr-control:before,`
	`58`	`+ table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th.dtr-control:before,`
`58`	`59`	`#crudTable.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,`
`59`	`60`	`#crudTable.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {`
`60`	`61`	`background-color: transparent;`
Original file line number	Diff line number	Diff line change
`@@ -209,9 +209,9 @@ functionsToRunOnDataTablesDrawEvent: [],`
`209`	`209`	`"type": "POST"`
`210`	`210`	`},`
`211`	`211`	`dom:`
`212`		`- "<'row hidden'<'col-sm-6 hidden-xs'i><'col-sm-6 hidden-print'f>>" +`
	`212`	`+ "<'row hidden'<'col-sm-6'i><'col-sm-6 d-print-none'f>>" +`
`213`	`213`	`"<'row'<'col-sm-12'tr>>" +`
`214`		`- "<'row mt-2 '<'col-sm-6 col-md-4'l><'col-sm-2 col-md-4 text-center'B><'col-sm-6 col-md-4 hidden-print'p>>",`
	`214`	`+ "<'row mt-2 d-print-none '<'col-sm-12 col-md-4'l><'col-sm-0 col-md-4 text-center'B><'col-sm-12 col-md-4 'p>>",`
`215`	`215`	`}`
`216`	`216`	`}`
`217`	`217`	`</script>`
Original file line number	Diff line number	Diff line change
`@@ -111,7 +111,10 @@ function moveExportButtonsToTopRight() {`
`111`	`111`	`}`
`112`	`112`	`})`
`113`	`113`	`$(".dt-buttons").appendTo($('#datatable_button_stack' ));`
`114`		`- $('.dt-buttons').css('display', 'inline-block');`
	`114`	`+ $('.dt-buttons').addClass('d-xs-block')`
	`115`	`+ .addClass('d-sm-inline-block')`
	`116`	`+ .addClass('d-md-inline-block')`
	`117`	`+ .addClass('d-lg-inline-block');`
`115`	`118`	`}`
`116`	`119`
`117`	`120`	`crud.addFunctionToDataTablesDrawEventQueue('moveExportButtonsToTopRight');`