界面优化

resources/assets/dcat-admin/main.css

@@ -2125,6 +2125,37 @@ div.layui-layer-btn{
     content:"\f107"!important;
 }
 
+.material .box-header,.material .card-header {
+    padding: 13px 12px;
+}
+.material .box-header .btn, .material .card-header .btn {
+    /*text-transform: uppercase;*/
+    background-color: transparent !important;
+    border-color: transparent !important;
+    box-shadow:none!important;
+    color:var(--font)!important;
+}
+.material .box-header .btn:hover,.material .card-header .btn:hover {
+    background-color:var(--40)!important;
+}
+.material .box-header .btn-group, .material .card-header .btn-group {
+    box-shadow:none!important;
+}
+
+.quick-search-clear {
+    color:transparent;
+    display:none;
+    font-weight: bold;
+    position:absolute;
+    top:8px;
+    cursor:pointer;
+    z-index:100;
+}
+
+.quick-search:hover .quick-search-clear{
+    display:inline!important;
+}
+
 
 /*!
  * Waves v0.7.6

resources/views/filter/container.blade.php

@@ -1,5 +1,5 @@
 <div class=" panel-collapse collapse {{ $expand?'in':'' }} {{$containerClass}}" style="{{$border}}padding:0;">
-    <div style="{!! $style !!}" class="box-header " id="{{ $filterID }}">
+    <div style="{!! $style !!}"  id="{{ $filterID }}">
         <form action="{!! $action !!}" class="form-horizontal" pjax-container method="get">
             @foreach($layout->columns() as $column)
                 @foreach($column->filters() as $filter)

resources/views/grid/quick-search.blade.php

@@ -1,9 +1,26 @@
-<form action="{!! $action !!}" pjax-container style="display: inline-block;margin-right:5px;">
-    <div class="input-group input-group-sm quick-search" style="display: inline-block;">
-        <input type="text" placeholder="{{ $placeholder }}" name="{{ $key }}" class="form-control " style="width:200px;" value="{{ $value }}">
+<form action="{!! $action !!}" class="input-no-border" pjax-container style="display:inline-block;margin:0 5px 13px 0;">
+    <div class="input-group quick-search" style="width:24.75rem;">
 
-        <div class="input-group-btn" style="display: inline-block;">
-            <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
-        </div>
+        <input type="text"
+               placeholder="{{ $placeholder }}"
+               name="{{ $key }}"
+               class="form-control quick-search-input"
+               style="margin-left:-1px;padding:0 1.5rem 0 3.48rem;height:36px;line-height:36px;"
+               value="{{ $value }}"
+        >
+        <a onclick="$(this).submit()" style="overflow:hidden;position:absolute;top:8px;margin-left:-23.85rem;cursor:pointer;z-index:100">
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 width="20"
+                 height="20"
+                 viewBox="0 0 20 20"
+                 aria-labelledby="search"
+                 role="presentation"
+                 class="text-70"
+                 style="fill: currentColor;"
+            >
+                <path fill-rule="nonzero" d="M14.32 12.906l5.387 5.387a1 1 0 0 1-1.414 1.414l-5.387-5.387a8 8 0 1 1 1.414-1.414zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
+            </svg>
+        </a>
+        <span class="quick-search-clear" style="margin-left:-1.45rem;{{$value ? 'color:#333' : ''}}">×</span>
     </div>
-</form>
+</form>

resources/views/grid/table.blade.php

@@ -1,80 +1,86 @@
-@if ($grid->allowToolbar())
-    <div class="box-header " >
-        @if(!empty($title))
-            <h4 class="pull-left" style="margin:5px 10px 0;">
-                {!! $title !!}&nbsp;
-                @if(!empty($description))
-                    <small>{!! $description!!}</small>
-                @endif
-            </h4>
-            <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
-                {!! $grid->renderTools() !!} {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
-            </div>
-        @else
-            <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
-                {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
-            </div>
+{!! $grid->renderQuickSearch() !!}
 
-            {!! $grid->renderTools() !!}
-        @endif
+<div class="card material">
 
-    </div>
-@endif
+    @if ($grid->allowToolbar())
+        <div class="box-header">
+            @if(!empty($title))
+                <h4 class="pull-left" style="margin:5px 10px 0;">
+                    {!! $title !!}&nbsp;
+                    @if(!empty($description))
+                        <small>{!! $description!!}</small>
+                    @endif
+                </h4>
+                <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
+                    {!! $grid->renderTools() !!} {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
+                </div>
+            @else
+                <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
+                    {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
+                </div>
+
+                {!! $grid->renderTools() !!}
+            @endif
 
-{!! $grid->renderFilter() !!}
+        </div>
+    @endif
 
-{!! $grid->renderHeader() !!}
+    {!! $grid->renderFilter() !!}
 
-<div class="card-body panel-collapse collapse in table-responsive" {!! $grid->option('show_bordered') ? 'style="padding:3px 10px 10px"' : '' !!}>
-    <table class=" table table-hover responsive {{ $grid->option('show_bordered') ? 'table-bordered' : $grid->option('table_header_style') }} " id="{{$tableId}}">
-        <thead>
-        @if ($headers = $grid->getMutipleHeaders())
+    {!! $grid->renderHeader() !!}
+
+    <div class="card-body panel-collapse collapse in table-responsive" {!! $grid->option('show_bordered') ? 'style="padding:3px 10px 10px"' : '' !!}>
+        <table class=" table table-hover responsive {{ $grid->option('show_bordered') ? 'table-bordered' : $grid->option('table_header_style') }} " id="{{$tableId}}">
+            <thead>
+            @if ($headers = $grid->getMutipleHeaders())
+                <tr>
+                    @foreach($headers as $header)
+                        {!! $header->render() !!}
+                    @endforeach
+                </tr>
+            @endif
             <tr>
-                @foreach($headers as $header)
-                    {!! $header->render() !!}
+                @foreach($grid->getColumns() as $column)
+                    <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
                 @endforeach
             </tr>
-        @endif
-        <tr>
-            @foreach($grid->getColumns() as $column)
-                <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
-            @endforeach
-        </tr>
-        </thead>
+            </thead>
 
-        <tbody>
-        @foreach($grid->rows() as $row)
-            <tr {!! $row->getRowAttributes() !!}>
-                @foreach($grid->getColumnNames() as $name)
-                    <td {!! $row->getColumnAttributes($name) !!}>
-                        {!! $row->column($name) !!}
+            <tbody>
+            @foreach($grid->rows() as $row)
+                <tr {!! $row->getRowAttributes() !!}>
+                    @foreach($grid->getColumnNames() as $name)
+                        <td {!! $row->getColumnAttributes($name) !!}>
+                            {!! $row->column($name) !!}
+                        </td>
+                    @endforeach
+                </tr>
+            @endforeach
+            @if ($grid->rows()->isEmpty())
+                <tr>
+                    <td colspan="{!! count($grid->getColumnNames()) !!}">
+                        <div style="margin:5px 0 0 10px;"><span class="help-block" style="margin-bottom:0"><i class="fa fa-info-circle"></i>&nbsp;{{ trans('admin.no_data') }}</span></div>
                     </td>
-                @endforeach
-            </tr>
-        @endforeach
-        @if ($grid->rows()->isEmpty())
-            <tr>
-                <td colspan="{!! count($grid->getColumnNames()) !!}">
-                    <div style="margin:5px 0 0 10px;"><span class="help-block" style="margin-bottom:0"><i class="fa fa-info-circle"></i>&nbsp;{{ trans('admin.no_data') }}</span></div>
-                </td>
-            </tr>
-        @endif
-        </tbody>
-    </table>
-</div>
+                </tr>
+            @endif
+            </tbody>
+        </table>
+    </div>
 
-{!! $grid->renderFooter() !!}
+    {!! $grid->renderFooter() !!}
 
-@if ($paginator = $grid->paginator())
-    <div class="box-footer clearfix " style="padding-bottom:5px;">
-        {!! $paginator !!}
-    </div>
-@else
-    <div class="box-footer clearfix text-80 " 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
-            {!! trans('admin.pagination.range', ['first' => '<b>1</b>', 'last' => '<b>'.$grid->rows()->count().'</b>', 'total' => '<b>'.$grid->rows()->count().'</b>',]) !!}
-        @endif
-    </div>
-@endif
+    @if ($paginator = $grid->paginator())
+        <div class="box-footer clearfix " style="padding-bottom:5px;">
+            {!! $paginator !!}
+        </div>
+    @else
+        <div class="box-footer clearfix text-80 " 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
+                {!! trans('admin.pagination.range', ['first' => '<b>1</b>', 'last' => '<b>'.$grid->rows()->count().'</b>', 'total' => '<b>'.$grid->rows()->count().'</b>',]) !!}
+            @endif
+        </div>
+    @endif
+
+</div>

resources/views/tree.blade.php

@@ -1,4 +1,4 @@
-<div class="card-header" style="border-bottom:0">
+<div class="card-header">
 
     <div class="btn-group" style="margin-right:3px">
         <a class="btn btn-primary btn-sm {{ $id }}-tree-tools" data-action="expand">
@@ -32,7 +32,7 @@
 </div>
 
 <div class="card-body table-responsive">
-    <div class="dd" id="{{ $id }}" style="margin:8px 15px 15px">
+    <div class="dd" id="{{ $id }}" style="margin:18px">
         <ol class="dd-list">
             @foreach($items as $branch)
                 @include($branchView)

src/Controllers/MenuController.php

@@ -9,6 +9,7 @@ use Dcat\Admin\Layout\Content;
 use Dcat\Admin\Layout\Row;
 use Dcat\Admin\Tree;
 use Dcat\Admin\Widgets\Box;
+use Dcat\Admin\Widgets\Card;
 use Illuminate\Routing\Controller;
 
 class MenuController extends Controller
@@ -51,7 +52,7 @@ class MenuController extends Controller
 
                     $form->setWidth(9, 2);
 
-                    $column->append(Box::make(trans('admin.new'), $form)->style('success'));
+                    $column->append(Card::make(trans('admin.new'), $form)->class('card material'));
                 });
             });
     }

src/Controllers/RoleController.php

@@ -96,6 +96,11 @@ class RoleController extends Controller
 
         $grid->disableBatchDelete();
         $grid->disableCreateButton();
+        $grid->showQuickCreateButton();
+        $grid->disableEditButton();
+        $grid->showQuickEditButton();
+        $grid->disableFilterButton();
+        $grid->quickSearch(['id', 'name', 'slug']);
 
         $grid->id('ID')->bold()->sortable();
         $grid->slug->label('primary');
@@ -113,12 +118,6 @@ class RoleController extends Controller
             }
         });
 
-        $grid->filter(function (Grid\Filter $filter) {
-            $filter->equal('id')->width('270px');
-            $filter->like('slug')->width('270px');
-            $filter->like('name')->width('270px');
-        });
-
         return $grid;
     }
 

src/Controllers/UserController.php

@@ -90,9 +90,6 @@ class UserController extends Controller
     protected function grid()
     {
         return Admin::grid(new Administrator('roles'), function (Grid $grid) {
-            $grid->disableBatchDelete();
-            $grid->disableCreateButton();
-
             $grid->id('ID')->bold()->sortable();
             $grid->username;
             $grid->name;
@@ -119,17 +116,19 @@ class UserController extends Controller
             $grid->created_at;
             $grid->updated_at->sortable();
 
+            $grid->disableBatchDelete();
+            $grid->disableCreateButton();
+            $grid->showQuickCreateButton();
+            $grid->showQuickEditButton();
+            $grid->disableFilterButton();
+            $grid->quickSearch(['id', 'name', 'username']);
+
             $grid->actions(function (Grid\Displayers\Actions $actions) {
                 if ($actions->getKey() == AdministratorModel::DEFAULT_ID) {
                     $actions->disableDelete();
                 }
             });
 
-            $grid->filter(function (Grid\Filter $filter) {
-                $filter->equal('id');
-                $filter->like('username');
-                $filter->like('name');
-            });
         });
     }
 
@@ -140,17 +139,13 @@ class UserController extends Controller
     {
         $grid = new MiniGrid(new Administrator());
 
-        $grid->id->bold()->sortable()->filter(
-            Grid\Column\Filter\Equal::make('ID')
-        );
+        $grid->quickSearch(['id', 'name', 'username']);
+
+        $grid->id->bold()->sortable();
 
-        $grid->username->filter(
-            Grid\Column\Filter\StartWith::make(__('admin.username'))
-        );
+        $grid->username;
 
-        $grid->name->filter(
-            Grid\Column\Filter\StartWith::make(__('admin.name'))
-        );
+        $grid->name;
 
         $grid->created_at;
 

src/Form/Builder.php

@@ -766,7 +766,7 @@ EOF;
 
         $style = $this->isCreating() ? 'success' : 'default';
 
-        return "<div class='box box-{$style}'>{$view->render()}</div>";
+        return "<div class='card material'>{$view->render()}</div>";
     }
 
     protected function setupSubmitScript()

src/Grid.php

@@ -150,13 +150,13 @@ class Grid
         'show_pagination'        => true,
         'show_filter'            => true,
         'show_actions'           => true,
-        'show_quick_edit_button' => true,
+        'show_quick_edit_button' => false,
         'show_edit_button'       => true,
         'show_view_button'       => true,
         'show_delete_button'     => true,
         'show_row_selector'      => true,
         'show_create_btn'        => true,
-        'show_quick_create_btn'  => true,
+        'show_quick_create_btn'  => false,
         'show_bordered'          => false,
         'show_toolbar'           => true,
 
@@ -414,9 +414,6 @@ HTML
             return;
         }
 
-        $this->applyQuickSearch();
-        $this->applyColumnFilter();
-
         $collection = $this->processFilter(false);
 
         $data = $collection->toArray();
@@ -918,7 +915,7 @@ HTML;
         $view = view($this->view, $this->variables());
 
         if (!$wrapper = $this->wrapper) {
-            return "<div class='box box-default'>{$view->render()}</div>";
+            return $view->render();
         }
 
         return $wrapper($view);

src/Grid/Concerns/HasElementNames.php

@@ -52,6 +52,8 @@ trait HasElementNames
 
         $this->setExporterQueryName($name);
 
+        $this->setQuickSearchQueryName($name);
+
         return $this;
     }
 

src/Grid/Concerns/HasFilter.php

@@ -48,6 +48,9 @@ trait HasFilter
             call_user_func($this->builder, $this);
         }
 
+        $this->applyQuickSearch();
+        $this->applyColumnFilter();
+
         return $this->filter->execute($toArray);
     }
 

src/Grid/Concerns/HasQuickSearch.php

@@ -17,14 +17,14 @@ use Illuminate\Support\Str;
 trait HasQuickSearch
 {
     /**
-     * @var string
+     * @var array|string|\Closure
      */
-    public static $searchKey = '__search__';
+    protected $search;
 
     /**
-     * @var array|string|\Closure
+     * @var Tools\QuickSearch
      */
-    protected $search;
+    protected $quickSearch;
 
     /**
      * @param array|string|\Closure
@@ -39,11 +39,47 @@ trait HasQuickSearch
             $this->search = $search;
         }
 
+        if ($this->quickSearch) {
+            return $this->quickSearch;
+        }
+
         return tap(new Tools\QuickSearch(), function ($search) {
-            $this->tools->append($search);
+            $search->setGrid($this);
+
+            $this->quickSearch = $search;
         });
     }
 
+    /**
+     * @param string $gridName
+     */
+    protected function setQuickSearchQueryName($gridName)
+    {
+        if ($this->quickSearch) {
+            $this->quickSearch->setQueryName($gridName.'__search');
+        }
+    }
+
+    /**
+     * @return Tools\QuickSearch
+     */
+    public function getQuickSearch()
+    {
+        return $this->quickSearch;
+    }
+
+    /**
+     * @return \Illuminate\View\View|string
+     */
+    public function renderQuickSearch()
+    {
+        if (! $this->quickSearch) {
+            return '';
+        }
+
+        return $this->quickSearch->render();
+    }
+
     /**
      * Apply the search query to the query.
      *
@@ -51,7 +87,11 @@ trait HasQuickSearch
      */
     public function applyQuickSearch()
     {
-        if (!$query = request()->get(static::$searchKey)) {
+        if (! $this->quickSearch) {
+            return;
+        }
+
+        if (! $query = request()->get($this->quickSearch->getQueryName())) {
             return;
         }
 
@@ -83,8 +123,13 @@ trait HasQuickSearch
     protected function addWhereBindings($query)
     {
         $queries = preg_split('/\s(?=([^"]*"[^"]*")*[^"]*$)/', trim($query));
+        if (! $queries = $this->parseQueryBindings($queries)) {
+            $this->addWhereBasicBinding($this->getKeyName(), false, '=', '___');
+
+            return;
+        }
 
-        foreach ($this->parseQueryBindings($queries) as list($column, $condition, $or)) {
+        foreach ($queries as list($column, $condition, $or)) {
             if (preg_match('/(?<not>!?)\((?<values>.+)\)/', $condition, $match) !== 0) {
                 $this->addWhereInBinding($column, $or, (bool)$match['not'], $match['values']);
                 continue;
@@ -105,6 +150,11 @@ trait HasQuickSearch
                 continue;
             }
 
+            if (preg_match('/(?<pattern>[^%]+%)/', $condition, $match) !== 0) {
+                $this->addWhereLikeBinding($column, $or, $match['pattern']);
+                continue;
+            }
+
             if (preg_match('/\/(?<value>.*)\//', $condition, $match) !== 0) {
                 $this->addWhereBasicBinding($column, $or, 'REGEXP', $match['value']);
                 continue;

src/Grid/Tools/QuickSearch.php

@@ -3,7 +3,6 @@
 namespace Dcat\Admin\Grid\Tools;
 
 use Dcat\Admin\Admin;
-use Dcat\Admin\Grid\Concerns\HasQuickSearch as QuickSearchConcerns;
 use Illuminate\Support\Arr;
 
 class QuickSearch extends AbstractTool
@@ -18,6 +17,30 @@ class QuickSearch extends AbstractTool
      */
     protected $placeholder = null;
 
+    /**
+     * @var string
+     */
+    protected $queryName = '__search__';
+
+    /**
+     * @param string|null $name
+     * @return $this
+     */
+    public function setQueryName(?string $name)
+    {
+        $this->queryName = $name;
+
+        return $this;
+    }
+
+    /**
+     * @return string
+     */
+    public function getQueryName()
+    {
+        return $this->queryName;
+    }
+
     /**
      * Set placeholder.
      *
@@ -37,22 +60,52 @@ class QuickSearch extends AbstractTool
      */
     public function render()
     {
+        $this->setupScript();
+
         $request = request();
         $query = $request->query();
 
         Arr::forget($query, [
-            QuickSearchConcerns::$searchKey,
+            $this->queryName,
             $this->grid->model()->getPageName(),
             '_pjax',
         ]);
 
         $vars = [
             'action' => $request->url() . '?' . http_build_query($query),
-            'key' => QuickSearchConcerns::$searchKey,
-            'value' => request(QuickSearchConcerns::$searchKey),
+            'key' => $this->queryName,
+            'value' => request($this->queryName),
             'placeholder' => $this->placeholder ?: trans('admin.search'),
         ];
 
         return view($this->view, $vars);
     }
+
+    protected function setupScript()
+    {
+        $script = <<<JS
+var show = function () {
+    var t = $(this),
+        clear = t.parent().find('.quick-search-clear');
+
+    if (t.val()) {
+        clear.css({color: '#333'});
+    } else {
+        clear.css({color: '#fff'});
+    }
+    return false;
+};
+
+$('input.quick-search-input').on('focus', show).on('keyup', show);
+
+$('.quick-search-clear').click(function () {
+    $(this).parent().find('.quick-search-input').val('');
+
+    $(this).closest('form').submit();
+});
+JS;
+
+        Admin::script($script);
+    }
+
 }

src/MiniGrid.php

@@ -20,10 +20,6 @@ class MiniGrid extends Grid
         $this->option('row_selector_clicktr', true);
 
         $this->tools->disableBatchActions();
-
-        $this->wrap(function ($view) {
-            return "<div class='box'>$view</div>";
-        });
     }
 
     protected function setupFilter()

src/Show/Panel.php

@@ -213,7 +213,7 @@ class Panel implements Renderable
         $view = view($this->view, $this->data);
 
         if (!$wrapper = $this->wrapper) {
-            return "<div class='box box-{$this->data['style']}'>{$view->render()}</div>";
+            return "<div class='card material'>{$view->render()}</div>";
         }
 
         return $wrapper($view);

src/Tree.php

@@ -537,7 +537,7 @@ JS;
         $view = view($this->view['tree'], $this->variables());
 
         if (!$wrapper = $this->wrapper) {
-            return "<div class='box box-default'>{$view->render()}</div>";
+            return "<div class='card material'>{$view->render()}</div>";
         }
 
         return $wrapper($view);