card and box

update

resources/assets/dcat/js/bootstrappers/DataActions.js

@@ -82,6 +82,23 @@ let actions = {
 
         $('[data-action="popover"]').popover();
     },
+
+    // box-collapse
+    boxActions: function () {
+        $('.box [data-action="collapse"]').click(function (e) {
+            e.preventDefault();
+
+            $(this).find('i').toggleClass('icon-minus icon-plus');
+
+            $(this).closest('.box').find('.box-body').first().collapse("toggle");
+        });
+
+        // Close box
+        $('.box [data-action="remove"]').click(function () {
+            $(this).closest(".box").removeClass().slideUp("fast");
+        });
+    }
+
 };
 
 export default class DataActions {

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

@@ -1,30 +1,32 @@
 .box {
   position: relative;
-  border-radius: .35rem;
+  border-radius: .4rem;
   background: #ffffff;
-  border-top: 2px solid $input-border-color;
+  border-top: 2px solid transparent;
   margin-bottom: 10px;
   width: 100%;
   box-shadow: $shadow;
   display: flex;
+  flex-direction: column;
 }
 .box .box-footer, .card .box-footer {
   border-top: 1px solid $divider-color;
 }
 
 .box-header {
-  padding: 13px;
+  padding: 14px;
   display: inherit;
   justify-content: space-between;
+  align-items: center;
 
   h3, .h3 {
-    font-size: 1.2rem;
+    font-size: 1.25rem;
     margin-bottom: 0;
   }
 }
 
 .box-header.with-border {
-  border-bottom: 1px solid #f4f4f4;
+  border-bottom: 1px solid $divider-color;
 }
 
 .box, .panel {
@@ -39,11 +41,8 @@
   border-top: 0;
 }
 
-.box.box-solid.box-default {
-  border: 1px solid $input-border-color;
-}
-
-.box-body {
+.box-footer {
+  display: inherit;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 3px;
@@ -51,11 +50,39 @@
   padding: 10px;
 }
 
-.box-footer {
-  display: inherit;
+.box-body {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
   padding: 10px;
+
+  .box-footer {
+    margin: -10px;
+  }
+}
+
+.box-default {
+  border-color: $input-border-color;
 }
+
+.box-primary {
+  border-color: $primary;
+}
+
+.box-info {
+  border-color: $info;
+}
+
+.box-success {
+  border-color: $success;
+}
+
+.box-danger {
+  border-color: $danger;
+}
+
+.box.box-solid.box-default {
+  border: 1px solid $input-border-color;
+}
+

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

@@ -1,5 +1,5 @@
 .btn {
-  padding: 0.8rem 1.2rem !important;
+  padding: 0.83rem 1.2rem !important;
   font-size: .95rem;
   height: 37.6px;
   line-height: 1.2;

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

@@ -5,6 +5,35 @@
 .card.dcat-box {
   .card-header {
     border-bottom: 1px solid $divider-color;
-    padding: 1.2rem;
+    padding: 1.1rem;
+  }
+}
+
+.card .card-header {
+  padding: 1.1rem 1.1rem 0;
+  align-items: center;
+}
+
+.card-header.with-border {
+  border-bottom: 1px solid $divider-color;
+  padding: 1.1rem;
+}
+
+.card-box-title {
+  font-size: 1.1rem;
+}
+
+.card-footer {
+  padding: 1.1rem;
+  background: transparent;
+  border-color: $divider-color!important;
+}
+
+.card-body {
+  padding: 1.1rem;
+
+  .card-footer {
+    padding: .8rem;
+    margin: -1.1rem;
   }
 }

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

@@ -112,3 +112,7 @@ pre {
   margin-bottom: 0;
   font-family: Montserrat,Nunito,sans-serif;
 }
+
+.shadow-0 {
+  box-shadow: none!important;
+}

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

@@ -1756,7 +1756,7 @@ dl {
 }
 
 .btn {
-  padding: 0.8rem 1.2rem !important;
+  padding: 0.83rem 1.2rem !important;
   font-size: 0.95rem;
   height: 37.6px;
   line-height: 1.2;
@@ -2284,7 +2284,36 @@ table.dataTable.complex-headers tfoot td {
 
 .card.dcat-box .card-header {
   border-bottom: 1px solid #f4f4f4;
-  padding: 1.2rem;
+  padding: 1.1rem;
+}
+
+.card .card-header {
+  padding: 1.1rem 1.1rem 0;
+  align-items: center;
+}
+
+.card-header.with-border {
+  border-bottom: 1px solid #f4f4f4;
+  padding: 1.1rem;
+}
+
+.card-box-title {
+  font-size: 1.1rem;
+}
+
+.card-footer {
+  padding: 1.1rem;
+  background: transparent;
+  border-color: #f4f4f4 !important;
+}
+
+.card-body {
+  padding: 1.1rem;
+}
+
+.card-body .card-footer {
+  padding: 0.8rem;
+  margin: -1.1rem;
 }
 
 .dd {
@@ -2474,13 +2503,14 @@ table.dataTable.complex-headers tfoot td {
 
 .box {
   position: relative;
-  border-radius: 0.35rem;
+  border-radius: 0.4rem;
   background: #ffffff;
-  border-top: 2px solid #d9d9d9;
+  border-top: 2px solid transparent;
   margin-bottom: 10px;
   width: 100%;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
   display: flex;
+  flex-direction: column;
 }
 
 .box .box-footer,
@@ -2489,14 +2519,15 @@ table.dataTable.complex-headers tfoot td {
 }
 
 .box-header {
-  padding: 13px;
+  padding: 14px;
   display: inherit;
   justify-content: space-between;
+  align-items: center;
 }
 
 .box-header h3,
 .box-header .h3 {
-  font-size: 1.2rem;
+  font-size: 1.25rem;
   margin-bottom: 0;
 }
 
@@ -2517,11 +2548,8 @@ table.dataTable.complex-headers tfoot td {
   border-top: 0;
 }
 
-.box.box-solid.box-default {
-  border: 1px solid #d9d9d9;
-}
-
-.box-body {
+.box-footer {
+  display: inherit;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 3px;
@@ -2529,8 +2557,7 @@ table.dataTable.complex-headers tfoot td {
   padding: 10px;
 }
 
-.box-footer {
-  display: inherit;
+.box-body {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 3px;
@@ -2538,6 +2565,34 @@ table.dataTable.complex-headers tfoot td {
   padding: 10px;
 }
 
+.box-body .box-footer {
+  margin: -10px;
+}
+
+.box-default {
+  border-color: #d9d9d9;
+}
+
+.box-primary {
+  border-color: #5c6bc6;
+}
+
+.box-info {
+  border-color: #3085d6;
+}
+
+.box-success {
+  border-color: #21b978;
+}
+
+.box-danger {
+  border-color: #ea5455;
+}
+
+.box.box-solid.box-default {
+  border: 1px solid #d9d9d9;
+}
+
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
   font-size: 1.3rem;
 }
@@ -2583,3 +2638,7 @@ pre {
   font-family: Montserrat, Nunito, sans-serif;
 }
 
+.shadow-0 {
+  box-shadow: none !important;
+}
+

resources/dist/dcat/js/dcat-app.js

@@ -442,6 +442,18 @@ var actions = {
   popover: function popover() {
     $('.popover').remove();
     $('[data-action="popover"]').popover();
+  },
+  // box-collapse
+  boxActions: function boxActions() {
+    $('.box [data-action="collapse"]').click(function (e) {
+      e.preventDefault();
+      $(this).find('i').toggleClass('icon-minus icon-plus');
+      $(this).closest('.box').find('.box-body').first().collapse("toggle");
+    }); // Close box
+
+    $('.box [data-action="remove"]').click(function () {
+      $(this).closest(".box").removeClass().slideUp("fast");
+    });
   }
 };
 

resources/views/form/footer.blade.php

@@ -9,7 +9,7 @@
 
         @if(! empty($buttons['submit']))
         <div class="btn-group pull-right">
-            <button class="btn btn-primary submit">{{ trans('admin.submit') }}</button>
+            <button class="btn btn-primary submit"><i class="feather icon-save"></i> {{ trans('admin.submit') }}</button>
         </div>
 
         @if($checkboxes)
@@ -20,7 +20,7 @@
 
         @if(! empty($buttons['reset']))
         <div class="btn-group pull-left">
-            <button type="reset" class="btn btn-warning">{{ trans('admin.reset') }}</button>
+            <button type="reset" class="btn btn-warning"><i class="feather icon-rotate-ccw"></i> {{ trans('admin.reset') }}</button>
         </div>
         @endif
     </div>

resources/views/widgets/box.blade.php

@@ -4,10 +4,10 @@
         <div class="box-tools pull-right">
             @foreach($tools as $tool)
                 {!! $tool !!}
-                @endforeach
-        </div><!-- /.box-tools -->
-    </div><!-- /.box-header -->
-    <div class="box-body" style="display: block;{!! $padding !!}">
+            @endforeach
+        </div>
+    </div>
+    <div class="box-body collapse show" style="{!! $padding !!}">
         {!! $content !!}
-    </div><!-- /.box-body -->
+    </div>
 </div>

resources/views/widgets/card.blade.php

@@ -1,6 +1,6 @@
 <div {!! $attributes !!}>
     @if ($title || $tools)
-        <div class="card-header with-border {{$style}}">
+        <div class="card-header {{ $divider ? 'with-border' : '' }}">
             <span class="card-box-title">{!! $title !!}</span>
             <div class="box-tools pull-right">
                 @foreach($tools as $tool)
@@ -9,7 +9,12 @@
             </div>
         </div>
     @endif
-    <div class="card-body card-padding panel-collapse collapse" style="{!! $padding !!}">
+    <div class="card-body" style="{!! $padding !!}">
         {!! $content !!}
     </div>
+    @if($footer)
+    <div class="card-footer">
+        {!! $footer !!}
+    </div>
+    @endif
 </div>

resources/views/widgets/form.blade.php

@@ -13,20 +13,16 @@
     
     <!-- /.box-body -->
     @if(count($buttons) > 0)
-    <div class="box-footer">
-        <div class="col-md-2"></div>
+    <div class="box-footer row" style="display: flex">
+        <div class="col-md-2"> &nbsp;</div>
 
         <div class="col-md-8">
             @if(! empty($buttons['reset']))
-            <div class="btn-group pull-left">
-                <button type="reset" class="btn btn-warning pull-right">{{ trans('admin.reset') }}</button>
-            </div>
+                <button type="reset" class="btn btn-warning pull-left"><i class="feather icon-rotate-ccw"></i> {{ trans('admin.reset') }}</button>
             @endif
 
             @if(! empty($buttons['submit']))
-            <div class="btn-group pull-right">
-                <button type="submit" class="btn btn-primary pull-right">{{ trans('admin.submit') }}</button>
-            </div>
+                <button type="submit" class="btn btn-primary pull-right"><i class="feather icon-save"></i> {{ trans('admin.submit') }}</button>
             @endif
         </div>
     </div>

src/Controllers/MenuController.php

@@ -8,7 +8,7 @@ use Dcat\Admin\Layout\Content;
 use Dcat\Admin\Layout\Row;
 use Dcat\Admin\Models\Repositories\Menu;
 use Dcat\Admin\Tree;
-use Dcat\Admin\Widgets\Card;
+use Dcat\Admin\Widgets\Box;
 
 class MenuController extends AdminController
 {
@@ -34,7 +34,7 @@ class MenuController extends AdminController
         return $content
             ->title($this->title())
             ->description(trans('admin.list'))
-            ->row(function (Row $row) {
+            ->body(function (Row $row) {
                 $row->column(7, $this->treeView()->render());
 
                 $row->column(5, function (Column $column) {
@@ -58,7 +58,7 @@ class MenuController extends AdminController
 
                     $form->width(9, 2);
 
-                    $column->append(Card::make(trans('admin.new'), $form)->class('card dcat-box'));
+                    $column->append(Box::make(trans('admin.new'), $form));
                 });
             });
     }

src/Widgets/Box.php

@@ -71,7 +71,7 @@ class Box extends Widget
      */
     public function content($content)
     {
-        $this->content = $this->toString($content);
+        $this->content = $content;
 
         return $this;
     }
@@ -98,7 +98,7 @@ class Box extends Widget
     public function collapsable()
     {
         $this->tools[] =
-            '<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>';
+            '<button class="border-0 bg-white" data-action="collapse"><i class="feather icon-minus"></i></button>';
 
         return $this;
     }
@@ -111,7 +111,7 @@ class Box extends Widget
     public function removable()
     {
         $this->tools[] =
-            '<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>';
+            '<button class="border-0 bg-white" data-action="remove"><i class="feather icon-x"></i></button>';
 
         return $this;
     }
@@ -125,13 +125,9 @@ class Box extends Widget
      */
     public function style($styles)
     {
-        if (is_string($styles)) {
-            return $this->style([$styles]);
-        }
-
         $styles = array_map(function ($style) {
             return 'box-'.$style;
-        }, $styles);
+        }, (array) $styles);
 
         $this->class = $this->class.' '.implode(' ', $styles);
 
@@ -169,7 +165,7 @@ class Box extends Widget
     {
         return [
             'title'      => $this->title,
-            'content'    => $this->content,
+            'content'    => $this->toString($this->content),
             'tools'      => $this->tools,
             'attributes' => $this->formatHtmlAttributes(),
             'padding'    => $this->padding,

src/Widgets/Card.php

@@ -11,6 +11,12 @@ class Card extends Widget
      */
     protected $view = 'admin::widgets.card';
 
+    protected $title;
+
+    protected $content;
+
+    protected $footer;
+
     /**
      * @var array
      */
@@ -19,10 +25,17 @@ class Card extends Widget
     /**
      * @var bool
      */
-    protected $divider = true;
+    protected $divider = false;
+
 
-    public function __construct($title = '', $content = '')
+
+    public function __construct($title = '', $content = null)
     {
+        if ($content === null) {
+            $content = $title;
+            $title = '';
+        }
+
         if ($title) {
             $this->title($title);
         }
@@ -35,7 +48,17 @@ class Card extends Widget
     }
 
     /**
-     * Set content padding.
+     * @return $this
+     */
+    public function withHeaderBorder()
+    {
+        $this->divider = true;
+
+        return $this;
+    }
+
+    /**
+     * 设置卡片间距.
      *
      * @param string $padding
      */
@@ -47,22 +70,30 @@ class Card extends Widget
     }
 
     /**
-     * Set box content.
-     *
      * @param string $content
      *
      * @return $this
      */
     public function content($content)
     {
-        $this->content = $this->toString($content);
+        $this->content = $content;
 
         return $this;
     }
 
     /**
-     * Set box title.
+     * @param string $content
      *
+     * @return $this
+     */
+    public function footer($content)
+    {
+        $this->footer = $content;
+
+        return $this;
+    }
+
+    /**
      * @param string $title
      *
      * @return $this
@@ -95,11 +126,12 @@ class Card extends Widget
     {
         return [
             'title'      => $this->title,
-            'content'    => $this->content,
+            'content'    => $this->toString($this->content),
+            'footer'     => $this->toString($this->footer),
             'tools'      => $this->tools,
             'attributes' => $this->formatHtmlAttributes(),
-            'style'      => $this->style,
             'padding'    => $this->padding,
+            'divider'    => $this->divider,
         ];
     }
 }