grid 图标

update

resources/assets/dcat/sass/_variables.scss

@@ -1,9 +1,54 @@
 
+// 蓝色
 $blue: #3085d6;
+$blue-darker: #236bb0;
+$blue-20: #c3dcf3;
+$blue-30: #b3d2f0;
+$blue-40: #a3c9ed;
+$blue-50: #92bfe9;
+$blue-60: #82b5e6;
+$blue-70: #71ace3;
+$blue-80: #61a2e0;
+$blue-90: #5198dc;
+$blue-95: #408fd9;
+// 渐变蓝色
+$blue-linear-gradient: linear-gradient(118deg, rgba($blue, 1), rgba($blue, 0.7));
 
+
+// 深色
+$dark20: #f6fbff;
+$dark30: #f4f7fa;
+$dark40: #ebf0f3;
+$dark50: #d3dde5;
+$dark60: #bacad6;
+$dark65: #8aa5b9;
+$dark70: #b3b9bf;
+$dark80: #7c858e;
+$dark85: #5c7089;
+$dark90: #252d37;
+
+
+// 主色
+$primary-darker: #6355ee;
+$primary-20: #f7f6fe;
+$primary-30: #e6e4fc;
+$primary-40: #d6d2fb;
+$primary-50: #c5c0f9;
+$primary-60: #b5aef7;
+$primary-70: #a49df5;
+$primary-80: #948bf4;
+$primary-90: #8379f2;
+// 渐变主色
 $primary-linear-gradient: linear-gradient(118deg, rgba($primary, 1), rgba($primary, 0.7));
 
+
+// 字体颜色
+$font-color: #414750;
+
+
+// 常用阴影颜色
 $shadow: 0 2px 4px 0 rgba(0,0,0,.05);
 
-//$body-background: #ecf0f5;
+
+// body背景颜色
 $body-background: #f9fafc;

resources/assets/dcat/sass/dcat-app.scss

@@ -18,6 +18,7 @@
 
 html body {
   background-color: $body-background;
+  color: $font-color;
 }
 
 // 字体
@@ -82,6 +83,7 @@ table.data-list-view.dataTable thead th:first-child, table.data-thumb-view.dataT
 
 table.data-list-view.dataTable, table.data-thumb-view.dataTable {
   border-spacing: 0 .95rem;
+  padding: 0;
 }
 
 
@@ -97,4 +99,44 @@ table.data-list-view.dataTable, table.data-thumb-view.dataTable {
   padding: 0.5rem 1rem;
   font-size: 0.7rem;
   line-height: 1.4;
-}
+}
+
+
+// 表格头
+.grid-column-header {
+  a {
+    color: $dark80;
+  }
+  a:hover, a.active {
+    color: $primary-darker;
+  }
+}
+
+// 排序图标
+.grid-sort {
+  display: inline-block;
+  margin: -4px -4px 0 3px;
+  height: 17px;
+
+  .up:before {
+    font-family: "feather";
+    padding-right: 0.3rem;
+    font-size: 0.7rem;
+    content: "\E845";
+  }
+
+  .down {
+    margin: 6px 0 0 -1.17rem;
+  }
+  .down:after {
+    font-family: "feather";
+    content: "\E842";
+    font-size: 0.7rem;
+  }
+}
+
+
+// 下拉菜单
+.dropdown .dropdown-menu {
+  box-shadow: $shadow;
+}

resources/dist/dcat/css/app.css

@@ -1719,6 +1719,7 @@ body.swal2-no-backdrop .swal2-shown.swal2-bottom-right {
 
 html body {
   background-color: #f9fafc;
+  color: #414750;
 }
 
 body,
@@ -1786,6 +1787,7 @@ table.data-thumb-view.dataTable thead th:first-child {
 table.data-list-view.dataTable,
 table.data-thumb-view.dataTable {
   border-spacing: 0 0.95rem;
+  padding: 0;
 }
 
 .btn {
@@ -1802,3 +1804,39 @@ table.data-thumb-view.dataTable {
   line-height: 1.4;
 }
 
+.grid-column-header a {
+  color: #7c858e;
+}
+
+.grid-column-header a:hover,
+.grid-column-header a.active {
+  color: #6355ee;
+}
+
+.grid-sort {
+  display: inline-block;
+  margin: -4px -4px 0 3px;
+  height: 17px;
+}
+
+.grid-sort .up:before {
+  font-family: "feather";
+  padding-right: 0.3rem;
+  font-size: 0.7rem;
+  content: "\E845";
+}
+
+.grid-sort .down {
+  margin: 6px 0 0 -1.17rem;
+}
+
+.grid-sort .down:after {
+  font-family: "feather";
+  content: "\E842";
+  font-size: 0.7rem;
+}
+
+.dropdown .dropdown-menu {
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+}
+

src/Grid/Column/Filter.php

@@ -132,7 +132,7 @@ abstract class Filter implements Renderable
         $style = $this->shouldDisplay() ? 'style=\'margin:3px 12px\'' : '';
 
         return $this->parent->addHeader(
-            "&nbsp;<a class='fa fa-undo' href='{$this->urlWithoutFilter()}' {$style}></a>"
+            "&nbsp;<a class='feather icon-rotate-ccw' href='{$this->urlWithoutFilter()}' {$style}></a>"
         );
     }
 

src/Grid/Column/Filter/Between.php

@@ -157,9 +157,9 @@ JS;
 &nbsp;<span class="dropdown" style="position:absolute">
 <form action="{$this->formAction()}" pjax-container style="display: inline-block;">
     <a href="javascript:void(0);" class="dropdown-toggle {$active}" data-toggle="dropdown">
-        <i class="fa fa-filter"></i>
+        <i class="feather icon-filter"></i>
     </a>
-    <ul class="dropdown-menu" role="menu" style="padding: 10px;box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);left: -70px;border-radius: 0;font-weight:normal;background:#fff">
+    <ul class="dropdown-menu" role="menu" style="padding: 10px;left: -70px;border-radius: 0;font-weight:normal;background:#fff">
         <li>
             <input type="text" 
                 class="form-control input-sm {$this->class['start']}" 
@@ -179,7 +179,7 @@ JS;
         </li>
         <li class="divider"></li>
         <li class="">
-            <button class="btn btn-sm btn-primary column-filter-submit "><i class="fa fa-search"></i></button>
+            <button class="btn btn-sm btn-primary column-filter-submit "><i class="feather icon-search"></i></button>
         </li>
     </ul>
     </form>

src/Grid/Column/Filter/Checkbox.php

@@ -47,9 +47,9 @@ JS;
 &nbsp;<span class="dropdown" style="position:absolute;">
 <form action="{$this->formAction()}" pjax-container style="display: inline-block;">
     <a href="javascript:void(0);" class="dropdown-toggle {$active}" data-toggle="dropdown">
-        <i class="fa fa-filter"></i>
+        <i class="feather icon-filter"></i>
     </a>
-    <ul class="dropdown-menu" role="menu" style="padding: 10px;box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);left: -70px;border-radius: 0;font-weight:normal;background:#fff">
+    <ul class="dropdown-menu" role="menu" style="padding: 10px;left: -70px;border-radius: 0;font-weight:normal;background:#fff">
         
         <li>
             <ul style='padding: 0;'>
@@ -65,7 +65,7 @@ JS;
         </li>
         <li class="divider"></li>
        <li class="">
-            <button class="btn btn-sm btn-primary column-filter-submit "><i class="fa fa-search"></i></button>
+            <button class="btn btn-sm btn-primary column-filter-submit "><i class="feather icon-search"></i></button>
         </li>
     </ul>
 </form>

src/Grid/Column/Filter/Input.php

@@ -53,15 +53,15 @@ JS;
         return <<<HTML
 &nbsp;<span class="dropdown" style="position: absolute">
     <form action="{$this->formAction()}" pjax-container style="display: inline-block;">
-    <a href="javascript:void(0);" class="dropdown-toggle fa fa-filter {$active}" data-toggle="dropdown">
+    <a href="javascript:void(0);" class="feather icon-filter {$active}" data-toggle="dropdown">
     </a>
-    <ul class="dropdown-menu" role="menu" style="padding: 10px;box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);left: -70px;border-radius: 0;font-weight:normal;background:#fff;">
+    <ul class="dropdown-menu" role="menu" style="width: 250px;padding: 10px;left: -70px;border-radius: 0;font-weight:normal;background:#fff;">
         <li>
             <input placeholder="{$this->placeholder}" type="text" name="{$this->queryName()}" value="{$value}" class="form-control input-sm {$this->class}" autocomplete="off"/>
         </li>
         <li class="divider"></li>
         <li class="">
-            <button class="btn btn-sm btn-primary column-filter-submit "><i class="fa fa-search"></i></button>
+            <button class="btn btn-sm btn-primary column-filter-submit "><i class="feather icon-search"></i></button>
         </li>
     </ul>
     </form>

src/Grid/Column/Help.php

@@ -57,7 +57,7 @@ class Help implements Renderable
         $tooltip->title($this->message);
 
         return <<<HELP
-&nbsp;<a href="javascript:void(0);" class="{$class} fa fa-question-circle" ></a>
+&nbsp;<a href="javascript:void(0);" class="{$class} feather icon-alert-circle" ></a>
 HELP;
     }
 }

src/Grid/Column/Sorter.php

@@ -65,16 +65,13 @@ class Sorter implements Renderable
      */
     public function render()
     {
-        $icon = '';
-        $color = '';
         $type = 'desc';
+        $icon = 'up';
 
-        if ($this->isSorted()) {
+        if ($isSorted = $this->isSorted()) {
             $type = $this->sort['type'] == 'desc' ? 'asc' : 'desc';
-            if ($this->sort['type']) {
-                $icon .= $this->sort['type'] == 'desc' ? '-by-attributes-alt' : '-by-attributes';
-
-                $color = '';
+            if ($this->sort['type'] === 'asc') {
+                $icon = 'down';
             }
         }
 
@@ -94,10 +91,15 @@ class Sorter implements Renderable
             ]);
         }
 
-        if ($icon) {
-            $icon .= ' active';
+        if ($isSorted) {
+            return "&nbsp;<a href='{$url}' class='feather icon-arrow-{$icon} active'></a>";
         }
 
-        return " <a class=' glyphicon glyphicon-sort{$icon} $color' href='$url'></a>";
+        return <<<HTML
+<a href="{$url}" class="grid-sort">
+    <span class="pull-left up"></span>
+    <span class="pull-left down"></span>
+</a>
+HTML;
     }
 }

src/Grid/Column/ValueFilter.php

@@ -85,6 +85,6 @@ class ValueFilter
             $pageName          => null,
         ]);
 
-        return "<a class='value-filter' href='{$url}'>{$this->wrap($value)}</a> &nbsp;<a style='opacity:0;' class='fa fa-search'></a>";
+        return "<a class='value-filter' href='{$url}'>{$this->wrap($value)}</a> &nbsp;<a href='#' style='opacity:0;' class='feather icon-search'></a>";
     }
 }