wip

resources/assets/adminlte/scss/_main-sidebar.scss

@@ -16,13 +16,13 @@
   }
 
   .nav .nav-item .nav-link {
-    padding: 10px 10px 10px 15px!important;
+    padding: $sidebar-item-padding!important;
     //margin-right: .5rem;
   }
 
   .nav-treeview.nav {
     .nav-item .nav-link {
-      padding: 5px 10px 7px 15px!important;
+      padding: $sidebar-tree-item-padding!important;
       //margin-right: 0;
     }
 
@@ -365,8 +365,8 @@
 
 [class*='sidebar-dark-'] {
   // Sidebar background color
-  //background-color: $sidebar-dark-bg;
-  background-image: linear-gradient(0deg, #7b8b9f, $sidebar-dark-bg);
+  //background-color: $sidebar-dark-bg;#7b8b9f
+  background-image: linear-gradient(0deg, lighten($sidebar-dark-bg, 25%), $sidebar-dark-bg);
 
   //.nav .nav-item .nav-link {
   //
@@ -379,9 +379,9 @@
        margin-bottom: 0
     }
 
-    .nav-item .nav-link.active {
-      padding: 7px 10px 7px 15px!important;
-    }
+    //.nav-item .nav-link.active {
+    //  padding: $sidebar-tree-item-padding!important;
+    //}
   }
 
   .nav-sidebar .nav-link > p > .right {

resources/assets/adminlte/scss/_variables.scss

@@ -126,10 +126,10 @@ $main-footer-bg: transparent !default;
 
 // #262d37 #313a46 lighten(#8391a2, 8%) #242939
 // icon lighten(#4B5575, 3%)   #989EB3
-$sidebar-dark-bg: #3a4452!default;
+$sidebar-dark-bg: lighten(#3a4452, 2%)!default;
 $sidebar-dark-hover-bg: transparent !default;
-$sidebar-dark-color: hsla(0,0%,100%,.85)!default;
-$sidebar-dark-icon-color: hsla(0,0%,100%,.7)!default;
+$sidebar-dark-color: hsla(0,0%,100%,.95)!default;
+$sidebar-dark-icon-color: $sidebar-dark-color!default;
 $sidebar-dark-hover-color: lighten($sidebar-dark-color, 10%) !default;
 $sidebar-dark-active-bg: transparent !default;
 $sidebar-dark-active-color: $white !default;
@@ -146,17 +146,21 @@ $sidebar-dark-header-color: hsla(0,0%,100%,.8) !default;
 // Light sidebar
 $sidebar-light-bg: $white !default;
 $sidebar-light-hover-bg: transparent !default;
-$sidebar-light-color: #666 !default;
-$sidebar-light-hover-color: $gray-900 !default;
+$sidebar-light-color: #555 !default;
+$sidebar-light-hover-color: $sidebar-light-color !default;
 $sidebar-light-active-color: $white !default;
 $sidebar-light-submenu-bg: transparent !default;
 $sidebar-light-submenu-color: $sidebar-light-color !default;
 $sidebar-light-submenu-hover-color: #000 !default;
 $sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
-$sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
+$sidebar-light-submenu-active-color: $sidebar-light-color !default;
 $sidebar-light-submenu-active-bg: linear-gradient(118deg, $primary, rgba($primary,.7));
 $sidebar-light-header-color: $gray-800 !default;
 
+// SIDEBAR PADDING
+$sidebar-item-padding: 10px 10px 10px 25px;
+$sidebar-tree-item-padding: 5px 10px 7px 25px;
+
 // SIDEBAR MINI
 // --------------------------------------------------------
 $sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 3 !default;

resources/assets/dcat/sass/_colors.scss

@@ -157,5 +157,5 @@
 }
 
 .bg-primary-gradient {
-  background-image: linear-gradient(60deg, $primary,  0%, lighten($primary, 5%) 37%, lighten($primary, 10%) 65%, lighten($primary, 15%) 100%);
-}
+  background-image: linear-gradient(60deg, $primary,  0%, lighten($primary, 5%) 37%, lighten($primary, 18%) 65%, lighten($primary, 22%) 100%);
+}

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

@@ -58,13 +58,13 @@ a.btn-sm, .btn-group-sm > a.btn {
 .btn-group {
 
   .btn:not(.btn-white):hover {
-    box-shadow: $shadow-200;
+    box-shadow: $shadow-100;
   }
   .btn {
     box-shadow: none!important;
   }
 
-  box-shadow: $btn-white-shadow;
+  box-shadow: $btn-group-btn-shadow;
 }
 
 // --------------------- btn-custom -----------------------
@@ -96,8 +96,9 @@ a.btn-sm, .btn-group-sm > a.btn {
 
 .btn-light {
   border-color: $input-border-color!important;
-  background-color: #f7f7f9!important;
+  background-color: $dark40!important;
   color: #444;
+  box-shadow: none;
 }
 
 .btn-light:hover, .btn-light:focus {

resources/assets/dcat/sass/components/_custom-data-table.scss

@@ -57,9 +57,10 @@ $table-border-radius: .3rem;
   padding: 1.25rem 2.8rem !important;
   border-radius: 5rem;
   border: 0;
-  background: #eef1f4;
+  background: $dark40;
   font-size: .82rem;
 }
+/* #eef1f4; */
 
 .table-filter .form-control:focus {
   background: #fff;

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

@@ -35,7 +35,8 @@
 
   .card-header {
     border-bottom: 0;
-    padding: 1.3rem 1.5rem
+    padding: 1.3rem 1.5rem;
+    margin-bottom: .5rem;
   }
 
   .card-body {

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

@@ -3,6 +3,7 @@
   font-weight: 600;
   font-size: .95rem;
   padding: .5rem .75rem;
+  //background: $dark40;
 }
 .pagination .page-item.disabled {
   opacity: .82;

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

@@ -574,7 +574,7 @@ body.dark-mode {
     color: $body-dark-font-color!important;
   }
 
-  .dataTables_filter .form-control {
+  .table-filter .form-control {
     background: $body-dark-table-bg;
     color: $body-dark-font-color;
   }

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

@@ -15,17 +15,17 @@ $font-family-sans-serif: Nunito, Montserrat,system-ui,BlinkMacSystemFont,-apple-
 
 // 常用阴影颜色
 //$shadow: 0 2px 4px 0 rgba(0,0,0,.08);
-$shadow: 0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px 0 rgba(0,0,0,.06);
+$shadow: 0 2px 4px 0 rgba(0,0,0,.05);
 $shadow-100: 0 3px 1px -2px rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.05), 0 1px 5px 1px rgba(0,0,0,.05);
 $shadow-150: 0 3px 1px -2px rgba(0,0,0,.065), 0 2px 2px 0 rgba(0,0,0,.065), 0 1px 5px 1px rgba(0,0,0,.065);
 $shadow-180: 0 3px 1px -2px rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.08), 0 1px 5px 1px rgba(0,0,0,.08);
 $shadow-200: 0 3px 1px -2px rgba(0,0,0,.1), 0 2px 2px 0 rgba(0,0,0,.1), 0 1px 5px 1px rgba(0,0,0,.1);
 
 // 按钮阴影颜色
-$btn-white-shadow: $shadow-180;
+$btn-white-shadow: 0 3px 1px -2px rgba(0,0,0,.1), 0 2px 2px 0 rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.08);
 $btn-shadow: $shadow-100;
 $btn-shadow-hover: $shadow-200;
-$btn-group-btn-shadow: 0 2px 0 0 rgba(0,0,0,.08);
+$btn-group-btn-shadow: $btn-shadow;
 
 // 菜单阴影
 $menu-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);

resources/views/form/tree.blade.php

@@ -22,11 +22,9 @@
     </div>
 </div>
 
-@php
-    $formId = $formId ? '#'.$formId : '';
-@endphp
-<script data-exec-on-popstate>
-Dcat.ready(function () {
+@php($formId = $formId ? '#'.$formId : '')
+
+<script require="@jstree">
     var $tree = $('{!!$formId !!} .{{$class}}-tree-wrapper').find('.da-tree'),
         opts = {!! $options !!},
         $input = $('{!!$formId !!} input[name="{{$name}}"]'),
@@ -57,6 +55,4 @@ Dcat.ready(function () {
     }).on("loaded.jstree", function () {
         @if($expand) $tree.jstree('open_all'); @endif
     }).jstree(opts);
-
-});
 </script>

resources/views/grid/displayer/dialogtree.blade.php

@@ -1,19 +1,27 @@
-<a href="javascript:void(0)" class="{{ $prefix }}-open-tree" data-checked="{{ $checkAll }}" data-val="{{ $value }}">
+<a href="javascript:void(0)" class="grid-dialog-tree"
+   data-url="{{ $url }}"
+   data-title="{{ $title }}"
+   data-checked="{{ $checkAll }}"
+   data-val="{{ $value }}">
     <i class='feather icon-align-right'></i> {{ trans('admin.view') }}
 </a>
 
-<script require="@jstree">
-    var selector = '.{{ $prefix}}-open-tree';
+<template>
+    <template id="dialog-tree-tpl">
+        <div class="jstree-wrapper p-1" style="border:0"><div class="da-tree" style="margin-top:10px"></div></div>
+    </template>
+</template>
 
-    $(document).off('click', selector).on('click', selector, function () {
-        var tpl = '<div class="jstree-wrapper p-1" style="border:0"><div class="da-tree" style="margin-top:10px"></div></div>',
-            url = '{{ $url }}',
+<script require="jstree" once>
+    window.resolveDialogTree = function (options) {
+        var tpl = $('#dialog-tree-tpl').html(),
             t = $(this),
             val = t.data('val'),
+            url = t.data('url'),
+            title = t.data('title'),
             ckall = t.data('checked'),
             idx,
-            loading,
-            opts = {!! json_encode($options) !!};
+            loading;
 
         val = val ? String(val).split(',') : [];
 
@@ -37,19 +45,19 @@
         }
 
         function build(val) {
-            opts.core.data = formatNodes(val, {!! json_encode($nodes) !!});
+            options.config.core.data = formatNodes(val, options.nodes);
 
             idx = layer.open({
                 type: 1,
-                area: {!! json_encode($area) !!},
+                area: options.area,
                 content: tpl,
-                title: '{{ $title }}',
+                title: title,
                 success: function (a, idx) {
                     var tree = $('#layui-layer'+idx).find('.da-tree');
 
                     tree.on("loaded.jstree", function () {
                         tree.jstree('open_all');
-                    }).jstree(opts);
+                    }).jstree(options.config);
                 }
             });
 
@@ -59,9 +67,9 @@
         }
 
         function formatNodes(value, all) {
-            var idColumn = '{{ $columnNames['id'] }}',
-                textColumn = '{{ $columnNames['text'] }}',
-                parentColumn = '{{ $columnNames['parent'] }}',
+            var idColumn = options.columns.id,
+                textColumn = options.columns.text,
+                parentColumn = options.columns.parent,
                 parentIds = [], nodes = [], i, v, parentId;
 
             for (i in all) {
@@ -91,5 +99,15 @@
 
             return nodes;
         }
+    }
+</script>
+
+<script require="@jstree">
+    var nodes = {!! json_encode($nodes) !!};
+    var options = {!! json_encode($options) !!};
+    var area = {!! json_encode($area) !!};
+
+    $('.grid-dialog-tree').off('click').on('click', function () {
+        resolveDialogTree.call(this, {config: options, nodes: nodes, area: area, columns: {!! json_encode($columnNames) !!}});
     });
 </script>

resources/views/partials/sidebar.blade.php

@@ -12,7 +12,7 @@
                 </ul>
             </div>
 
-            <div class="sidebar pb-3">
+            <div class="sidebar p-0 pb-3">
                 <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" style="padding-top: 10px">
                     {!! admin_section(AdminSection::LEFT_SIDEBAR_MENU_TOP) !!}
 

src/Color.php

@@ -69,13 +69,6 @@ class Color
      * @var array
      */
     protected static $extensions = [
-        'blue-light' => [
-            'colors' => [
-                'primary'        => '#62a8ea',
-                'primary-darker' => '#62a8ea',
-                'link'           => '#62a8ea',
-            ],
-        ],
         'indigo' => [
             'colors' => [
                 'primary'        => '#586cb1',
@@ -83,6 +76,13 @@ class Color
                 'link'           => '#4c60a3',
             ],
         ],
+        'blue-light' => [
+            'colors' => [
+                'primary'        => '#62a8ea',
+                'primary-darker' => '#62a8ea',
+                'link'           => '#62a8ea',
+            ],
+        ],
         'blue' => [
             'colors' => [
                 'primary'        => '#5686d4',

src/Form/Field/Icon.php

@@ -45,7 +45,7 @@ setTimeout(function () {
         
         showIcon(val);
     })
-}, 10);
+}, 1);
 JS;
     }
 }

src/Form/Field/Tree.php

@@ -10,9 +10,6 @@ use Illuminate\Support\Arr;
 
 class Tree extends Field
 {
-    public static $js = '@jstree';
-    public static $css = '@jstree';
-
     protected $options = [
         'plugins' => ['checkbox', 'types'],
         'core'    => [
@@ -33,38 +30,20 @@ class Tree extends Field
         ],
     ];
 
-    /**
-     * @var array
-     */
     protected $nodes = [];
 
-    /**
-     * @var array
-     */
     protected $parents = [];
 
-    /**
-     * @var bool
-     */
     protected $expand = true;
 
-    /**
-     * @var array
-     */
     protected $columnNames = [
         'id'     => 'id',
         'text'   => 'name',
         'parent' => 'parent_id',
     ];
 
-    /**
-     * @var bool
-     */
     protected $filterParents = true;
 
-    /**
-     * @var bool
-     */
     protected $readOnly = false;
 
     /**
@@ -237,13 +216,6 @@ class Tree extends Field
         return Helper::array($value, true);
     }
 
-    /**
-     * Prepare for saving.
-     *
-     * @param string|array $value
-     *
-     * @return array
-     */
     protected function prepareInputValue($value)
     {
         return Helper::array($value, true);
@@ -282,6 +254,6 @@ class Tree extends Field
             'parents'    => json_encode($this->parents),
         ]);
 
-        return parent::render(); // TODO: Change the autogenerated stub
+        return parent::render();
     }
 }

src/Grid/Displayers/DialogTree.php

@@ -148,7 +148,6 @@ class DialogTree extends AbstractDisplayer
 
         return Admin::view('admin::grid.displayer.dialogtree', [
             'value'       => $this->format($this->value),
-            'prefix'      => $this->getSelectorPrefix(),
             'nodes'       => $this->nodes,
             'title'       => $this->title ?: $this->column->getLabel(),
             'options'     => $this->options,
@@ -163,9 +162,4 @@ class DialogTree extends AbstractDisplayer
     {
         return implode(',', Helper::array($val, true));
     }
-
-    protected function getSelectorPrefix()
-    {
-        return $this->grid->getName().'_'.$this->column->getName().'_'.$this->getKey();
-    }
 }

src/Grid/Tools/PerPageSelector.php

@@ -80,7 +80,9 @@ class PerPageSelector implements Renderable
             return "<a href=\"$url\">$option</a>";
         })->toArray();
 
-        $dropdown = Dropdown::make($options)->button($this->perPage)->render();
+        $dropdown = Dropdown::make($options)
+            ->button($this->perPage)
+            ->render();
 
         return <<<EOT
 <label class="pull-right d-none d-sm-inline" style="margin-right: 10px">

src/Tree.php

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

src/Widgets/Table.php

@@ -35,7 +35,7 @@ class Table extends Widget
      */
     public function __construct($headers = [], $rows = false, $style = [])
     {
-        if ($headers && $rows === false) {
+        if ($rows === false) {
             $rows = $headers;
             $headers = [];
         }
@@ -93,11 +93,10 @@ class Table extends Widget
         foreach ($rows as $key => $item) {
             if (is_array($item)) {
                 if (Arr::isAssoc($item)) {
-                    $borderLeft = $this->level ? 'table-left-border-nofirst' : 'table-left-border';
+                    $borderLeft = $this->depth ? 'table-left-border-nofirst' : 'table-left-border';
 
-                    $item = static::make()
+                    $item = static::make($item)
                         ->depth($this->depth + 1)
-                        ->setRows($item)
                         ->class('table-no-top-border '.$borderLeft, true)
                         ->render();