tab

update

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

@@ -1,5 +1,6 @@
 .card {
   box-shadow: $shadow;
+  border-radius: .4rem;
 }
 
 .card.dcat-box {

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

@@ -10,4 +10,9 @@
   vertical-align: baseline;
   border-radius: .25em;
   cursor: pointer;
+  margin-bottom: 4px;
+}
+
+.badge {
+  margin-bottom: 4px;
 }

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

@@ -0,0 +1,72 @@
+.nav.nav-tabs .nav-item .nav-link.active:after {
+  box-shadow: 0 0 2px 0 rgba($primary, 0.5) !important;
+}
+
+.nav.nav-tabs .nav-item .nav-link {
+  font-size: 1rem;
+  padding: 17px;
+  text-transform: uppercase;
+  letter-spacing: 0.045rem;
+}
+
+.nav-vertical {
+  .nav.nav-tabs .nav-item .nav-link {
+    padding: 10px 25px;
+  }
+
+  .nav.nav-tabs .nav-item .nav-link.active:after {
+    top: 1.3rem;
+    width: 2.6rem;
+    left: -17px;
+    right: auto;
+  }
+
+  .nav.nav-tabs.nav-left {
+    top: 12px;
+  }
+
+  .nav.nav-tabs.nav-left ~ .tab-content .tab-pane {
+    background-color: transparent;
+  }
+}
+
+.nav-theme-primary, .nav-theme-success, .nav-theme-info, .nav-theme-danger, .nav-theme-default {
+  .nav.nav-tabs {
+    background: $primary;
+    padding-left: 10px;
+    border-radius: .4rem;
+    box-shadow: $shadow;
+  }
+
+  .nav.nav-tabs .nav-item .nav-link {
+    color: $white50;
+  }
+
+  .nav.nav-tabs .nav-item .nav-link.active {
+    color: $white;
+  }
+
+  .nav.nav-tabs .nav-item .nav-link.active:after {
+    background: $white!important;
+  }
+
+  .nav-tabs .nav-item {
+    margin-bottom: 2px;
+  }
+
+  //.tab-content {
+  //  background: $white;
+  //  box-shadow: $shadow;
+  //  margin-bottom: 5px;
+  //  border-radius: .4rem;
+  //}
+}
+.nav-theme-success .nav.nav-tabs {
+  background: $success;
+}
+.nav-theme-info .nav.nav-tabs {
+  background: $info;
+}
+.nav-theme-danger .nav.nav-tabs {
+  background: $danger;
+}

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

@@ -65,6 +65,8 @@ ol, ul, dl {
 @import "./components/box";
 // label
 @import "./components/label";
+// tab
+@import "./components/tab";
 
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
    font-size: 1.3rem;
@@ -115,6 +117,17 @@ pre {
   font-family: Montserrat,Nunito,sans-serif;
 }
 
+// 阴影
 .shadow-0 {
   box-shadow: none!important;
 }
+.shadow {
+  box-shadow: $shadow!important;
+}
+.shadow-100 {
+  box-shadow: $shadow-100!important;
+}
+.shadow-200 {
+  box-shadow: $shadow-200!important;
+}
+

resources/dist/dcat/css/dcat-app.css

@@ -2280,6 +2280,7 @@ table.dataTable.complex-headers tfoot td {
 
 .card {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  border-radius: 0.4rem;
 }
 
 .card.dcat-box .card-header {
@@ -2605,6 +2606,96 @@ table.dataTable.complex-headers tfoot td {
   vertical-align: baseline;
   border-radius: 0.25em;
   cursor: pointer;
+  margin-bottom: 4px;
+}
+
+.badge {
+  margin-bottom: 4px;
+}
+
+.nav.nav-tabs .nav-item .nav-link.active:after {
+  box-shadow: 0 0 2px 0 rgba(92, 107, 198, 0.5) !important;
+}
+
+.nav.nav-tabs .nav-item .nav-link {
+  font-size: 1rem;
+  padding: 17px;
+  text-transform: uppercase;
+  letter-spacing: 0.045rem;
+}
+
+.nav-vertical .nav.nav-tabs .nav-item .nav-link {
+  padding: 10px 25px;
+}
+
+.nav-vertical .nav.nav-tabs .nav-item .nav-link.active:after {
+  top: 1.3rem;
+  width: 2.6rem;
+  left: -17px;
+  right: auto;
+}
+
+.nav-vertical .nav.nav-tabs.nav-left {
+  top: 12px;
+}
+
+.nav-vertical .nav.nav-tabs.nav-left ~ .tab-content .tab-pane {
+  background-color: transparent;
+}
+
+.nav-theme-primary .nav.nav-tabs,
+.nav-theme-success .nav.nav-tabs,
+.nav-theme-info .nav.nav-tabs,
+.nav-theme-danger .nav.nav-tabs,
+.nav-theme-default .nav.nav-tabs {
+  background: #5c6bc6;
+  padding-left: 10px;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+}
+
+.nav-theme-primary .nav.nav-tabs .nav-item .nav-link,
+.nav-theme-success .nav.nav-tabs .nav-item .nav-link,
+.nav-theme-info .nav.nav-tabs .nav-item .nav-link,
+.nav-theme-danger .nav.nav-tabs .nav-item .nav-link,
+.nav-theme-default .nav.nav-tabs .nav-item .nav-link {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.nav-theme-primary .nav.nav-tabs .nav-item .nav-link.active,
+.nav-theme-success .nav.nav-tabs .nav-item .nav-link.active,
+.nav-theme-info .nav.nav-tabs .nav-item .nav-link.active,
+.nav-theme-danger .nav.nav-tabs .nav-item .nav-link.active,
+.nav-theme-default .nav.nav-tabs .nav-item .nav-link.active {
+  color: #fff;
+}
+
+.nav-theme-primary .nav.nav-tabs .nav-item .nav-link.active:after,
+.nav-theme-success .nav.nav-tabs .nav-item .nav-link.active:after,
+.nav-theme-info .nav.nav-tabs .nav-item .nav-link.active:after,
+.nav-theme-danger .nav.nav-tabs .nav-item .nav-link.active:after,
+.nav-theme-default .nav.nav-tabs .nav-item .nav-link.active:after {
+  background: #fff !important;
+}
+
+.nav-theme-primary .nav-tabs .nav-item,
+.nav-theme-success .nav-tabs .nav-item,
+.nav-theme-info .nav-tabs .nav-item,
+.nav-theme-danger .nav-tabs .nav-item,
+.nav-theme-default .nav-tabs .nav-item {
+  margin-bottom: 2px;
+}
+
+.nav-theme-success .nav.nav-tabs {
+  background: #21b978;
+}
+
+.nav-theme-info .nav.nav-tabs {
+  background: #3085d6;
+}
+
+.nav-theme-danger .nav.nav-tabs {
+  background: #ea5455;
 }
 
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
@@ -2656,3 +2747,15 @@ pre {
   box-shadow: none !important;
 }
 
+.shadow {
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
+}
+
+.shadow-100 {
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 5px 1px rgba(0, 0, 0, 0.05) !important;
+}
+
+.shadow-200 {
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 1px rgba(0, 0, 0, 0.1) !important;
+}
+

resources/views/widgets/tab.blade.php

@@ -1,16 +1,20 @@
 <div {!! $attributes !!}>
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs {{ $tabStyle }}" role="tablist">
         @foreach($tabs as $id => $tab)
             @if($tab['type'] == \Dcat\Admin\Widgets\Tab::TYPE_CONTENT)
-                <li {{ $id == $active ? 'class=active' : '' }}><a href="#tab_{{ $tab['id'] }}" class="waves-effect waves-40" data-toggle="tab">{!! $tab['title'] !!}</a></li>
+                <li class="nav-item" >
+                    <a href="#tab_{{ $tab['id'] }}" class=" nav-link  {{ $id == $active ? 'active' : '' }}" data-toggle="tab">{!! $tab['title'] !!}</a>
+                </li>
             @elseif($tab['type'] == \Dcat\Admin\Widgets\Tab::TYPE_LINK)
-                <li {{ $id == $active ? 'class=active' : '' }}><a href="{{ $tab['href'] }}" class="waves-effect waves-40">{!! $tab['title'] !!}</a></li>
+                <li class="nav-item" >
+                    <a href="{{ $tab['href'] }}" class=" nav-link  {{ $id == $active ? 'active' : '' }}">{!! $tab['title'] !!}</a>
+                </li>
             @endif
         @endforeach
 
         @if (!empty($dropDown))
-        <li class="dropdown">
-            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+        <li class="dropdown nav-item">
+            <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">
                 Dropdown <span class="caret"></span>
             </a>
             <ul class="dropdown-menu">
@@ -20,8 +24,9 @@
             </ul>
         </li>
         @endif
-        <li class="pull-right header">{!! $title !!}</li>
+        <li class="nav-item pull-right header">{!! $title !!}</li>
     </ul>
+
     <div class="tab-content" style="{!! $padding !!}">
         @foreach($tabs as $id => $tab)
         <div class="tab-pane {{ $id == $active ? 'active' : '' }}" id="tab_{{ $tab['id'] }}">

src/Admin.php

@@ -258,7 +258,6 @@ class Admin
             $router->get('helpers/scaffold', 'Dcat\Admin\Controllers\ScaffoldController@index');
             $router->post('helpers/scaffold', 'Dcat\Admin\Controllers\ScaffoldController@store');
             $router->post('helpers/scaffold/table', 'Dcat\Admin\Controllers\ScaffoldController@table');
-            $router->get('helpers/routes', 'Dcat\Admin\Controllers\RouteController@index');
             $router->get('helpers/icons', 'Dcat\Admin\Controllers\IconController@index');
             $router->resource('helpers/extensions', 'Dcat\Admin\Controllers\ExtensionController', ['only' => ['index', 'update']]);
             $router->post('helpers/extensions/import', 'Dcat\Admin\Controllers\ExtensionController@import');

src/Controllers/IconController.php

@@ -26,11 +26,12 @@ class IconController extends Controller
         }');
 
         return $content->title('Icon')->body(function (Row $row) {
-            $tab = Tab::make()->padding('20px')->custom();
-
-            $tab->add(('Themify'), view('admin::helpers.themify'));
-            $tab->add(('Font Awesome'), view('admin::helpers.font-awesome'));
-            $tab->add(('Glyphicons'), view('admin::helpers.glyphicons'));
+            $tab = Tab::make()
+                ->withCard()
+                ->padding('20px')
+                ->add(('Themify'), view('admin::helpers.themify'))
+                ->add(('Font Awesome'), view('admin::helpers.font-awesome'))
+                ->add(('Glyphicons'), view('admin::helpers.glyphicons'));
 
             $row->column(12, $tab);
         });

src/Controllers/RouteController.php

@@ -1,206 +0,0 @@
-<?php
-
-namespace Dcat\Admin\Controllers;
-
-use Dcat\Admin\Grid;
-use Dcat\Admin\Layout\Content;
-use Dcat\Admin\Layout\Row;
-use Illuminate\Routing\Controller;
-use Illuminate\Routing\Route;
-use Illuminate\Support\Arr;
-use Illuminate\Support\Str;
-
-class RouteController extends Controller
-{
-    public function index()
-    {
-        $content = new Content();
-
-        $content->title(trans('admin.routes'))->description(trans('admin.list'));
-
-        $content->body(function (Row $row) {
-            $colors = [
-                'GET'    => 'primary',
-                'HEAD'   => 'gray',
-                'POST'   => 'green',
-                'PUT'    => 'yellow',
-                'DELETE' => 'red',
-                'PATCH'  => 'purple',
-                'OPTIONS'=> 'blue',
-            ];
-
-            $grid = new Grid();
-
-            $grid->model()->setData(function (Grid\Model $model) {
-                return $this->getModel()->setRoutes($this->getRoutes())->get($model);
-            });
-
-            $grid->number();
-
-            $grid->method(trans('admin.method'))->map(function ($method) use ($colors) {
-                return "<span class=\"label bg-{$colors[$method]}\">$method</span>";
-            })->implode('&nbsp;');
-
-            $grid->uri(trans('admin.uri'))->sortable()->display(function ($v) {
-                return "<code>$v</code>";
-            });
-
-            $grid->name(trans('admin.alias'));
-
-            $grid->action(trans('admin.route_action'))->display(function ($uri) {
-                if ($uri === 'Closure') {
-                    return "<a class='badge bg-gray'>$uri</a>";
-                }
-
-                return preg_replace('/@.+/', '<code>$0</code>', $uri);
-            });
-            $grid->middleware(trans('admin.middleware'))->badge('gray');
-
-            $grid->disablePagination();
-            $grid->disableRowSelector();
-            $grid->disableActions();
-            $grid->disableCreateButton();
-            $grid->disableExporter();
-
-            $grid->filter(function (Grid\Filter $filter) use ($colors) {
-                $values = array_keys($colors);
-
-                $filter->equal('method', trans('admin.method'))->select(array_combine($values, $values));
-                $filter->equal('uri', trans('admin.uri'));
-                $filter->equal('action', trans('admin.route_action'));
-            });
-
-            $row->column(12, $grid);
-        });
-
-        return $content;
-    }
-
-    protected function getModel()
-    {
-        return new class() {
-            protected $routes;
-
-            protected $where = [];
-
-            public function setRoutes($routes)
-            {
-                $this->routes = $routes;
-
-                return $this;
-            }
-
-            public function where($column, $condition)
-            {
-                $this->where[$column] = trim($condition);
-
-                return $this;
-            }
-
-            public function orderBy()
-            {
-                return $this;
-            }
-
-            public function get(Grid\Model $model)
-            {
-                $model->getQueries()->unique()->each(function ($query) use (&$eloquent) {
-                    if ($query['method'] == 'paginate' || $query['method'] == 'get') {
-                        return;
-                    }
-
-                    call_user_func_array([$this, $query['method']], $query['arguments'] ?? []);
-                });
-
-                return $this->routes = collect($this->routes)->filter(function ($route) {
-                    foreach ($this->where as $column => $condition) {
-                        if (is_array($route[$column])) {
-                            if (! in_array($condition, $route[$column])) {
-                                return false;
-                            }
-                        } elseif (! Str::contains(strtolower($route[$column]), strtolower($condition))) {
-                            return false;
-                        }
-                    }
-
-                    return true;
-                });
-            }
-        };
-    }
-
-    public function getRoutes()
-    {
-        $routes = collect(\Route::getRoutes())->map(function ($route) {
-            return $this->getRouteInformation($route);
-        })->all();
-
-        if ($sort = request('_sort')) {
-            $routes = $this->sortRoutes($sort, $routes);
-        }
-
-        return array_filter($routes);
-    }
-
-    /**
-     * Get the route information for a given route.
-     *
-     * @param \Illuminate\Routing\Route $route
-     *
-     * @return array
-     */
-    protected function getRouteInformation(Route $route)
-    {
-        try {
-            return [
-                'host'       => $route->domain(),
-                'method'     => $route->methods(),
-                'uri'        => $route->uri(),
-                'name'       => $route->getName(),
-                'action'     => $route->getActionName(),
-                'middleware' => $this->getRouteMiddleware($route),
-            ];
-        } catch (\Exception $e) {
-            return [
-                'host'       => $route->domain(),
-                'method'     => $route->methods(),
-                'uri'        => $route->uri(),
-                'name'       => $route->getName(),
-                'action'     => '<span class="label label-danger">Undefined</span>',
-                'middleware' => $this->getRouteMiddleware($route),
-            ];
-        }
-    }
-
-    /**
-     * Sort the routes by a given element.
-     *
-     * @param string $sort
-     * @param array  $routes
-     *
-     * @return array
-     */
-    protected function sortRoutes($sort, $routes)
-    {
-        return Arr::sort($routes, function ($route) use ($sort) {
-            $column = $sort['column'];
-            $type = $sort['type'];
-
-            return $type === 'asc' ? ! $route[$column] : $route[$column];
-        });
-    }
-
-    /**
-     * Get before filters.
-     *
-     * @param \Illuminate\Routing\Route $route
-     *
-     * @return string
-     */
-    protected function getRouteMiddleware($route)
-    {
-        return collect($route->gatherMiddleware())->map(function ($middleware) {
-            return $middleware instanceof \Closure ? 'Closure' : $middleware;
-        });
-    }
-}

src/Layout/Menu.php

@@ -34,13 +34,6 @@ class Menu
         ],
         [
             'id'        => 4,
-            'title'     => 'Routes',
-            'icon'      => '',
-            'uri'       => 'helpers/routes',
-            'parent_id' => 1,
-        ],
-        [
-            'id'        => 5,
             'title'     => 'Icons',
             'icon'      => '',
             'uri'       => 'helpers/icons',

src/Widgets/Tab.php

@@ -14,11 +14,6 @@ class Tab extends Widget
      */
     protected $view = 'admin::widgets.tab';
 
-    /**
-     * @var string
-     */
-    protected $padding = null;
-
     /**
      * @var array
      */
@@ -28,33 +23,10 @@ class Tab extends Widget
         'tabs'     => [],
         'dropDown' => [],
         'active'   => 0,
+        'padding'  => null,
+        'tabStyle' => ''
     ];
 
-    public function __construct()
-    {
-        $this->class('nav-tabs-default');
-    }
-
-    /**
-     * @return $this
-     */
-    public function custom()
-    {
-        return $this->style('custom');
-    }
-
-    /**
-     * Set style.
-     *
-     * @param string $style
-     *
-     * @return $this
-     */
-    public function style($style)
-    {
-        return $this->class('nav-tabs-'.$style);
-    }
-
     /**
      * Add a tab and its contents.
      *
@@ -112,7 +84,7 @@ class Tab extends Widget
      */
     public function padding(string $padding)
     {
-        $this->padding = 'padding:'.$padding;
+        $this->data['padding'] = 'padding:'.$padding;
 
         return $this;
     }
@@ -159,6 +131,35 @@ class Tab extends Widget
         return $this;
     }
 
+    public function withCard()
+    {
+        return $this
+            ->class('card', true)
+            ->style('padding:.25rem .4rem .4rem');
+    }
+
+    public function vertical()
+    {
+        return $this
+            ->class('nav-vertical d-block', true)
+            ->style('padding:0!important;')
+            ->tabStyle('nav-left flex-column');
+    }
+
+    public function theme(string $style = 'primary')
+    {
+        return $this
+            ->class('nav-theme-'.$style, true)
+            ->style('padding:0!important;');
+    }
+
+    public function tabStyle($type)
+    {
+        $this->data['tabStyle'] = $type;
+
+        return $this;
+    }
+
     /**
      * Render Tab.
      *
@@ -168,7 +169,7 @@ class Tab extends Widget
     {
         $data = array_merge(
             $this->data,
-            ['attributes' => $this->formatHtmlAttributes(), 'padding' => $this->padding]
+            ['attributes' => $this->formatHtmlAttributes()]
         );
 
         return view($this->view, $data)->render();