整体样式优化以及增加Grid::toolsWithOutline方法

resources/assets/adminlte/scss/_variables.scss

@@ -105,7 +105,9 @@ $main-footer-bg: transparent !default;
 // --------------------------------------------------------
 
 // Dark sidebar
-$sidebar-dark-bg: darken(#505b6b, 14%) !default;
+//$sidebar-dark-bg: darken(#505b6b, 14%) !default;
+//$sidebar-dark-bg: #1e1e2d !default;
+$sidebar-dark-bg: lighten(#1a1a27, 1%) !default;
 $sidebar-dark-hover-bg: hsla(100, 100%, 100%, 0.1) !default;
 $sidebar-dark-color: lighten(#C2C7D0, 10%) !default;
 $sidebar-dark-hover-color: $white !default;
@@ -116,7 +118,7 @@ $sidebar-dark-submenu-hover-color: $white !default;
 $sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
 $sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
 $sidebar-dark-submenu-active-bg: hsla(100, 100%, 100%, 0.9) !default;
-$sidebar-dark-header-color: $white !default;
+$sidebar-dark-header-color: hsla(0,0%,100%,.7) !default;
 
 // Light sidebar
 $sidebar-light-bg: $white !default;

resources/assets/dcat/sass/components/_box.scss

@@ -1,6 +1,6 @@
 .box {
   position: relative;
-  border-radius: .45rem;
+  border-radius: $card-border-radius;
   background: #ffffff;
   margin-bottom: 10px;
   width: 100%;

resources/assets/dcat/sass/components/_button.scss

@@ -119,3 +119,33 @@ a.btn-sm, .btn-group-sm > a.btn {
   margin-bottom: .15rem;
 }
 
+
+.btn-outline {
+  background: transparent;
+}
+.btn-primary.btn-outline {
+  color: $primary;
+  border-color: $primary;
+}
+.btn-info.btn-outline {
+  color: $info;
+  border-color: $info;
+}
+.btn-success.btn-outline {
+  color: $success;
+  border-color: $success;
+}
+.btn-danger.btn-outline {
+  color: $danger;
+  border-color: $danger;
+}
+.btn-warning.btn-outline {
+  color: $warning;
+  border-color: $warning;
+}
+
+.btn-primary.btn-outline:hover, .btn-info.btn-outline:hover, .btn-success.btn-outline:hover, .btn-danger.btn-outline:hover, .btn-warning.btn-outline:hover,
+//.btn-primary.btn-outline:focus, .btn-info.btn-outline:focus, .btn-success.btn-outline:focus, .btn-danger.btn-outline:focus, .btn-warning.btn-outline:focus,
+.btn-primary.btn-outline.active, .btn-info.btn-outline.active, .btn-success.btn-outline.active, .btn-danger.btn-outline.active, .btn-warning.btn-outline.active{
+  color: $white;
+}

resources/assets/dcat/sass/components/_card.scss

@@ -1,7 +1,7 @@
 .card {
   box-shadow: $shadow;
   margin-bottom: 2rem;
-  border-radius: .45rem;
+  border-radius: $card-border-radius;
 }
 
 .card.dcat-box {

resources/assets/dcat/sass/components/_form.scss

@@ -8,6 +8,7 @@
 input.form-control, div.form-control {
   max-height: 36px;
   min-height: 36px;
+  border-radius: $card-border-radius;
 }
 
 .form-control-sm {
@@ -34,6 +35,7 @@ select.form-control:not([multiple=multiple]) {
 
 .input-group-text {
   padding: 0.6rem 0.9rem;
+  border-radius: $card-border-radius;
 }
 
 .help-block {
@@ -121,6 +123,7 @@ select.form-control:not([multiple=multiple]) {
 .select2-container--default .select2-selection--multiple,
 .select2-container--default .select2-search--dropdown .select2-search__field {
   border-color: $input-border-color!important;
+  border-radius: $card-border-radius!important;
 }
 
 .select2-container--default .select2-dropdown .select2-search__field:focus, .select2-container--default .select2-search--inline .select2-search__field:focus {

resources/assets/dcat/sass/components/_layer.scss

@@ -1,6 +1,6 @@
 .layui-layer {
   box-shadow: 0 2px 4px 0 rgba(0,0,0,.2)!important;
-  border-radius: .4rem!important;
+  border-radius: $card-border-radius!important;
 }
 
 .layui-layer-title {

resources/assets/dcat/sass/components/_menu.scss

@@ -76,7 +76,7 @@ body.sidebar-collapse {
 
 .main-sidebar {
   .nav-sidebar .nav-item > .nav-link {
-    font-size: 1.1rem;
+    font-size: 1.05rem;
     border-radius: .1rem;
   }
 }

resources/assets/dcat/sass/components/_tab.scss

@@ -57,7 +57,7 @@
   .nav.nav-tabs {
     background: $primary;
     padding-left: 10px;
-    border-radius: .4rem;
+    border-radius: $card-border-radius;
     box-shadow: $shadow;
     border-bottom: 0;
   }
@@ -82,7 +82,7 @@
   //  background: $white;
   //  box-shadow: $shadow;
   //  margin-bottom: 5px;
-  //  border-radius: .4rem;
+  //  border-radius: $card-border-radius;
   //}
 }
 .nav-theme-success .nav.nav-tabs {

resources/assets/dcat/sass/components/_table.scss

@@ -56,6 +56,7 @@ table.dataTable {
 .table-responsive {
   border: 0!important;
   margin-bottom: 0!important;
+  overflow-x: inherit;
 }
 .custom-data-table-header .table-responsive {
   overflow: visible!important;

resources/assets/dcat/sass/theme/_colors.scss

@@ -90,8 +90,8 @@ $font-color: #414750;
 
 // body背景颜色
 //$body-bg: #f9fafc;
-//$body-bg: lighten($dark40, 5%);
-$body-bg: darken(#f4f7fa, 1%);
+//$body-bg: lighten($dark40, 1.2%);
+$body-bg: darken(#f4f7fa, 1.2%);
 
 // 灰背景色
 $gray-bg: #f1f1f1;

resources/assets/dcat/sass/variables/_variables.scss

@@ -28,3 +28,4 @@ $btn-group-btn-shadow: 0 2px 0 0 rgba(0,0,0,.08);
 // 菜单阴影
 $menu-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
 
+$card-border-radius: .4rem;

resources/views/grid/table.blade.php

@@ -2,25 +2,23 @@
 <div class="card dcat-box dt-bootstrap4">
 
     @if ($grid->allowToolbar())
-        <div class="data-list-view-header card-header">
-            <div class="table-responsive">
-                <div class="top" style="padding: 0;margin: 0">
+        <div class="data-list-view-header card-header p-1 d-block">
+            <div class="table-responsive d-block">
+                <div class="top d-block" style="padding: 0">
                     @if(!empty($title))
-                        <h4 style="margin:5px 10px 0;">
+                        <h4 class="pull-left" style="margin:5px 10px 0;">
                             {!! $title !!}&nbsp;
                             @if(!empty($description))
                                 <small>{!! $description!!}</small>
                             @endif
                         </h4>
-                        <div data-responsive-table-toolbar="{{$tableId}}">
-                            {!! $grid->renderTools() !!} {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!} {!! $grid->renderQuickSearch() !!}
+                        <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
+                            {!! $grid->renderTools() !!} {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}  {!! $grid->renderQuickSearch() !!}
                         </div>
                     @else
-                        <div>
-                            {!! $grid->renderTools() !!}  {!! $grid->renderQuickSearch() !!}
-                        </div>
+                        {!! $grid->renderTools() !!}  {!! $grid->renderQuickSearch() !!}
 
-                        <div data-responsive-table-toolbar="{{$tableId}}">
+                        <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
                             {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
                         </div>
                     @endif
@@ -33,7 +31,7 @@
 
     {!! $grid->renderHeader() !!}
 
-    <div class="table-responsive table-wrapper complex-container" style="{!! $grid->option('show_bordered') ? 'padding:3px 10px 10px' : '' !!};border-bottom: 1px solid #f8f8f8!important;">
+    <div class="table-responsive table-wrapper complex-container table-middle" style="{!! $grid->option('show_bordered') ? 'padding:3px 10px 10px' : '' !!};border-bottom: 1px solid #f8f8f8!important;">
         <table
                 class="table dt-checkboxes-select
                 {{ $grid->getComplexHeaders() ? 'complex-headers' : ''}}
@@ -84,11 +82,11 @@
     {!! $grid->renderFooter() !!}
 
     @if ($paginator = $grid->paginator())
-        <div class="box-footer clearfix mt-1" style="padding:0 1rem;">
+        <div class="box-footer clearfix d-block" style="border-top: 0">
             {!! $paginator->render() !!}
         </div>
     @else
-        <div class="box-footer clearfix  mt-1 " style="height:48px;line-height:25px;">
+        <div class="box-footer clearfix" style="height:48px;line-height:25px;">
             @if ($grid->rows()->isEmpty())
                 {!! trans('admin.pagination.range', ['first' => '<b>0</b>', 'last' => '<b>'.$grid->rows()->count().'</b>', 'total' => '<b>'.$grid->rows()->count().'</b>',]) !!}
             @else
@@ -107,15 +105,4 @@
         left: 1.1rem;
     }
 </style>
-<script>
-(function () {
-    function change() {
-        $('#{{ $tableId }}').parents('.card').find('.data-list-view-header').first().find('.btn').addClass('btn-sm');
-    }
-    change();
 
-    Dcat.ready(function () {
-        setTimeout(change, 100);
-    })
-})();
-</script>

src/Grid/Concerns/HasTools.php

@@ -26,6 +26,18 @@ trait HasTools
         $this->tools = new Tools($this);
     }
 
+    /**
+     * @param bool $value
+     *
+     * @return $this
+     */
+    public function toolsWithOutline(bool $value = true)
+    {
+        $this->tools->withOutline($value);
+
+        return $this;
+    }
+
     /**
      * Get or setup grid tools.
      *

src/Grid/Tools.php

@@ -9,6 +9,7 @@ use Dcat\Admin\Grid\Tools\BatchActions;
 use Dcat\Admin\Grid\Tools\FilterButton;
 use Dcat\Admin\Grid\Tools\RefreshButton;
 use Dcat\Admin\Support\Helper;
+use Illuminate\Support\Str;
 use Illuminate\Contracts\Support\Htmlable;
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Support\Collection;
@@ -29,6 +30,11 @@ class Tools implements Renderable
      */
     protected $tools;
 
+    /**
+     * @var bool
+     */
+    protected $outline = true;
+
     /**
      * Create a new Tools instance.
      *
@@ -121,6 +127,18 @@ class Tools implements Renderable
         });
     }
 
+    /**
+     * @param bool $value
+     *
+     * @return $this
+     */
+    public function withOutline(bool $value)
+    {
+        $this->outline = $value;
+
+        return $this;
+    }
+
     /**
      * Disable refresh button.
      *
@@ -185,12 +203,50 @@ class Tools implements Renderable
      */
     public function render()
     {
-        return $this->tools->map(function ($tool) {
+        $value = $this->tools->map(function ($tool) {
             if ($tool instanceof Action && ! $tool->allowed()) {
                 return;
             }
 
             return Helper::render($tool);
         })->implode(' ');
+
+        return $this->addButtonOutline($value);
+    }
+
+    /**
+     * @param string $value
+     *
+     * @return string
+     */
+    public function format(string $value)
+    {
+        return $this->addButtonOutline($value);
+    }
+
+    /**
+     * @param string $value
+     *
+     * @return string
+     */
+    protected function addButtonOutline($value)
+    {
+        if (! $this->outline) {
+            return $value;
+        }
+
+        return preg_replace_callback('/class=[\'|"]([a-z0-9A-Z-_\s]*)[\'|"]/', function (&$text) {
+            $class = array_filter(explode(' ', $text[1]));
+
+            if (
+                in_array('btn', $class, true)
+                && ! in_array('disable-outline', $class, true)
+                && Str::contains($text[1], 'btn-')
+            ) {
+                $class[] = 'btn-outline';
+            }
+
+            return sprintf('class="%s"', implode(' ', $class));
+        }, $value);
     }
 }

src/Grid/Tools/CreateButton.php

@@ -58,6 +58,8 @@ class CreateButton implements Renderable
 
     public function render()
     {
-        return "<div class='btn-group' style='margin-right:3px'>{$this->renderCreateButton()}{$this->renderDialogCreateButton()}</div>";
+        return $this->grid->tools()->format(
+            "<div class='btn-group' style='margin-right:3px'>{$this->renderCreateButton()}{$this->renderDialogCreateButton()}</div>"
+        );
     }
 }

src/Grid/Tools/ExportButton.php

@@ -101,7 +101,8 @@ JS;
 
         $export = trans('admin.export');
 
-        return <<<EOT
+        return $this->grid->tools()->format(
+            <<<EOT
 <div class="btn-group dropdown" style="margin-right:3px">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
         <i class="feather icon-download"></i>
@@ -115,6 +116,7 @@ JS;
         {$this->renderExportSelectedRows()}
     </ul>
 </div>
-EOT;
+EOT
+        );
     }
 }

src/IFrameGrid.php

@@ -18,6 +18,7 @@ class IFrameGrid extends Grid
         $this->disablePerPages();
         $this->disableBatchActions();
         $this->disableFilterButton();
+        $this->toolsWithOutline();
 
         $this->rowSelector()->click();
 

webpack.mix.js

@@ -69,3 +69,12 @@ mixAssetsDir('dcat/extra/*.scss', (src, dest) => {
 
   return mix.sass(src, dest.replace('scss', 'css'))
 });
+
+// 皮肤
+// mixAssetsDir('dcat/sass/skins/*.scss', (src, dest) => {
+//   if (theme) {
+//     return mix.sass(src, dest.replace('\.scss', '-'+theme+'.css').replace(/sass/g, 'css'))
+//   }
+//
+//   return mix.sass(src, dest.replace(/sass/g, 'css').replace('scss', 'css'))
+// });