快捷搜索

update

resources/assets/dcat/sass/_variables.scss

@@ -50,7 +50,7 @@ $font-color: #414750;
 
 
 // 常用阴影颜色
-$shadow: 0 2px 4px 0 rgba(0,0,0,.05);
+$shadow: 0 2px 4px 0 rgba(0,0,0,.08);
 
 
 // body背景颜色

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

@@ -1,7 +1,8 @@
 .btn {
-  padding: 0.9rem 1.4rem;
-  /* font-size: 1rem; */
-  line-height: .8;
+  padding: 0 1.4rem!important;
+  font-size: .95rem;
+  height: 36px;
+  line-height: .7;
   border-radius: 0.4rem;
 }
 

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

@@ -1,3 +1,8 @@
+.table th {
+  color: $font-color;
+  font-size: .95rem;
+}
+
 // data-list-view 表格
 table.data-list-view.dataTable tbody tr, table.data-thumb-view.dataTable tbody tr {
   box-shadow: $shadow;
@@ -5,6 +10,16 @@ table.data-list-view.dataTable tbody tr, table.data-thumb-view.dataTable tbody t
 table.data-list-view.dataTable thead th:first-child, table.data-thumb-view.dataTable thead th:first-child {
   padding-left: 1rem;
 }
+
+table.dataTable thead tr {
+  background: transparent;
+  text-transform: uppercase;
+}
+
+table.dataTable {
+  border: 0;
+}
+
 table.data-list-view.dataTable, table.data-thumb-view.dataTable {
   border-spacing: 0 .95rem;
   padding: 0;
@@ -13,3 +28,28 @@ table.data-list-view.dataTable tbody tr:hover, table.data-thumb-view.dataTable t
   transform: none;
   background: $dark20;
 }
+
+
+// 快捷搜索
+.data-list-view-header .table-responsive .top .dataTables_filter .form-control, .data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
+  padding: 1.23rem 2.8rem !important;
+  border-radius: 1.428rem;
+  border: 1px solid #dae1e7;
+}
+
+.data-list-view-header .table-responsive .top .dataTables_filter label:after, .data-thumb-view-header .table-responsive .top .dataTables_filter label:after {
+  top: 0.58rem;
+  font-size: 1rem;
+  left: 1.2rem;
+}
+
+.data-list-view-header .table-responsive .top .dataTables_filter .form-control, .data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
+  border: 0;
+  box-shadow: $shadow;
+}
+
+.quick-search-clear {
+  margin-left:-1.45rem;
+  position: relative;
+  color: $white;
+}

resources/dist/dcat/css/app.css

@@ -1735,9 +1735,10 @@ h5 {
 }
 
 .btn {
-  padding: 0.9rem 1.4rem;
-  /* font-size: 1rem; */
-  line-height: 0.8;
+  padding: 0 1.4rem !important;
+  font-size: 0.95rem;
+  height: 36px;
+  line-height: 0.7;
   border-radius: 0.4rem;
 }
 
@@ -1774,9 +1775,14 @@ h5 {
   font-weight: 600;
 }
 
+.table th {
+  color: #414750;
+  font-size: 0.95rem;
+}
+
 table.data-list-view.dataTable tbody tr,
 table.data-thumb-view.dataTable tbody tr {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 }
 
 table.data-list-view.dataTable thead th:first-child,
@@ -1784,6 +1790,15 @@ table.data-thumb-view.dataTable thead th:first-child {
   padding-left: 1rem;
 }
 
+table.dataTable thead tr {
+  background: transparent;
+  text-transform: uppercase;
+}
+
+table.dataTable {
+  border: 0;
+}
+
 table.data-list-view.dataTable,
 table.data-thumb-view.dataTable {
   border-spacing: 0 0.95rem;
@@ -1796,6 +1811,32 @@ table.data-thumb-view.dataTable tbody tr:hover {
   background: #f6fbff;
 }
 
+.data-list-view-header .table-responsive .top .dataTables_filter .form-control,
+.data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
+  padding: 1.23rem 2.8rem !important;
+  border-radius: 1.428rem;
+  border: 1px solid #dae1e7;
+}
+
+.data-list-view-header .table-responsive .top .dataTables_filter label:after,
+.data-thumb-view-header .table-responsive .top .dataTables_filter label:after {
+  top: 0.58rem;
+  font-size: 1rem;
+  left: 1.2rem;
+}
+
+.data-list-view-header .table-responsive .top .dataTables_filter .form-control,
+.data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
+  border: 0;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+}
+
+.quick-search-clear {
+  margin-left: -1.45rem;
+  position: relative;
+  color: #fff;
+}
+
 .grid-column-header a {
   color: #b3b9bf;
 }
@@ -1829,7 +1870,7 @@ table.data-thumb-view.dataTable tbody tr:hover {
 }
 
 .dropdown .dropdown-menu {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
   border: 1px solid rgba(0, 0, 0, 0.03);
 }
 
@@ -1853,7 +1894,7 @@ table.data-thumb-view.dataTable tbody tr:hover {
 }
 
 .card {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 }
 
 .card .card-header {
@@ -1875,7 +1916,7 @@ body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation >
 }
 
 .header-navbar.navbar-shadow {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 }
 
 .main-menu.menu-shadow {

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

@@ -1,28 +1,18 @@
 <style>::-ms-clear,::-ms-reveal{display: none;}</style>
 
-<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:{{$width}}rem;">
-
-        <input type="text"
-               placeholder="{{ $placeholder }}"
-               name="{{ $key }}"
-               class="form-control quick-search-input"
-               style="margin-left:-1px;padding:0 1.6rem 0 3.8rem;"
-               value="{{ $value }}"
-        >
-        <a onclick="$(this).submit()" style="overflow:hidden;position:absolute;top:7px;margin-left:-{{$width - 0.9}}rem;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;"
+<form action="{!! $action !!}" class="input-no-border" pjax-container style="display:inline-block;">
+    <div class="dataTables_filter">
+        <label style="width: {{ $width }}rem">
+            <input
+                    type="search"
+                    class="form-control form-control-sm quick-search-input"
+                    placeholder="{{ $placeholder }}"
+                    name="{{ $key }}"
+                    value="{{ $value }}"
+                    aria-controls="DataTables_Table_0"
             >
-                <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>
+
+        </label>
+        <span class="quick-search-clear" style="{{$value ? 'color:#333;cursor:pointer;' : ''}}">×</span>
     </div>
 </form>

resources/views/grid/table2.blade.php

@@ -1,42 +1,31 @@
-{!! $grid->renderQuickSearch() !!}
-
-<style>
-    #{{ $tableId }} {
-        border: 0;
-    }
-    #{{ $tableId }} thead tr {
-        background: transparent;
-        text-transform: uppercase;
-        font-family: Montserrat,sans-serif;
-    }
-
-    #{{ $tableId }} thead th {
-        font-size: .95rem;
-    }
-</style>
 
 <div class="dcat-box dt-bootstrap4">
 
     @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
+        <div class="data-list-view-header">
+            <div class="table-responsive">
+                <div class="top" style="padding: 0">
+                @if(!empty($title))
+                    <h4 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() !!}
+                    </div>
+                @else
+                    <div>
+                        {!! $grid->renderTools() !!}
+                    </div>
 
+                    <div data-responsive-table-toolbar="{{$tableId}}">
+                        {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
+                    </div>
+                @endif
+                </div>
+            </div>
         </div>
     @endif
 

resources/views/layouts/content.blade.php

@@ -1,5 +1,5 @@
 @section('content-header')
-    <section class="content-header breadcrumbs-top mb-1">
+    <section class="content-header breadcrumbs-top mb-2">
         @if($header || $description)
             <h1 class=" float-left">
                 {!! $header !!}

src/Grid/Concerns/HasQuickSearch.php

@@ -47,6 +47,8 @@ trait HasQuickSearch
             $search->setGrid($this);
 
             $this->quickSearch = $search;
+
+            $this->tools($search);
         });
     }
 

src/Grid/Tools/CreateButton.php

@@ -39,7 +39,7 @@ class CreateButton implements Renderable
             ->success('Dcat.reload()')
             ->dimensions($width, $height);
 
-        return "<button data-url='$url' class='btn btn-outline-success {$class}'><i class='feather icon-plus'></i><span class='hidden-xs'>&nbsp; $new</span></button>";
+        return "<button data-url='$url' class='btn btn-outline-primary {$class}'><i class='feather icon-plus'></i><span class='hidden-xs'>&nbsp; $new</span></button>";
     }
 
     protected function renderCreateButton()

src/Grid/Tools/QuickSearch.php

@@ -26,7 +26,7 @@ class QuickSearch extends AbstractTool
     /**
      * @var int rem
      */
-    protected $width = 28;
+    protected $width = 18;
 
     public function __construct($key = null, $title = null)
     {
@@ -136,12 +136,12 @@ class QuickSearch extends AbstractTool
     
     function toggleBtn() {
         var t = $(this),
-            btn = t.parent().find('.quick-search-clear');
+            btn = t.parent().parent().find('.quick-search-clear');
     
         if (t.val()) {
-            btn.css({color: '#333'});
+            btn.css({color: '#333', cursor: 'pointer'});
         } else {
-            btn.css({color: '#fff'});
+            btn.css({color: '#fff', cursor: 'none'});
         }
         return false;
     }