Add card and cards Component

mecha-cms · Nov 21, 2021 · c360be8 · c360be8
1 parent 2105421
commit c360be8
Show file tree

Hide file tree

Showing 24 changed files with 323 additions and 150 deletions.
diff --git a/README.md b/README.md
@@ -12,9 +12,10 @@ GUI Extension for [Mecha](https://github.com/mecha-cms/mecha)
 Release Notes
 -------------
 
-### 2.8.0
+### 2.8.1
 
  - Added CSS variables to support theming by third-party extension and layout.
+ - Added `card` and `cards` type.
  - Added `column` and `columns` type so we can have sidebars.
  - Added `description` and `title` option for `menu`.
  - Added `gap` option for `tabs`.

diff --git a/panel.skin.default/.github/source/lot/asset/css/index.css.scss b/panel.skin.default/.github/source/lot/asset/css/index.css.scss
@@ -13,6 +13,7 @@ $mix: #fff;
   --shadow-option-picker__options: 0 1px 4px rgba(0, 0, 0, .25);
 }
 
+.lot\:cards,
 .lot\:files,
 .lot\:folders,
 .lot\:pages {

diff --git a/panel.skin.default/about.page b/panel.skin.default/about.page
@@ -4,7 +4,7 @@ description: The default control panel skin.
 image: https://user-images.githubusercontent.com/1669261/141484343-0568ef0d-f7c5-4991-a8ee-7773379415b2.png
 author: Taufik Nurrohman
 type: Markdown
-version: 1.1.0
+version: 1.1.1
 
 images:
 - https://user-images.githubusercontent.com/1669261/141484343-0568ef0d-f7c5-4991-a8ee-7773379415b2.png

diff --git a/panel.skin.default/lot/asset/css/index.css b/panel.skin.default/lot/asset/css/index.css
@@ -6,11 +6,13 @@
   --shadow-option-picker__options: 0 1px 4px rgba(0, 0, 0, .25);
 }
 
+.lot\:cards .lot\:tasks,
 .lot\:files .lot\:tasks,
 .lot\:folders .lot\:tasks,
 .lot\:pages .lot\:tasks {
   gap: 0;
 }
+.lot\:cards .lot\:tasks > * .title span,
 .lot\:files .lot\:tasks > * .title span,
 .lot\:folders .lot\:tasks > * .title span,
 .lot\:pages .lot\:tasks > * .title span {

diff --git a/panel.skin.default/lot/asset/css/index.min.css b/panel.skin.default/lot/asset/css/index.min.css
diff --git a/panel/.github/source/lot/asset/css/_/base.scss b/panel/.github/source/lot/asset/css/_/base.scss
@@ -133,12 +133,12 @@ sup {
 }
 
 sub {
-  top: .25em;
+  top: .125em;
   vertical-align: sub;
 }
 
 sup {
-  top: -.25em;
+  top: -.125em;
   vertical-align: super;
 }
 

diff --git a/panel/.github/source/lot/asset/css/_/lot.scss b/panel/.github/source/lot/asset/css/_/lot.scss
@@ -10,6 +10,8 @@
 @import 'lot/page';
 @import 'lot/pager';
 @import 'lot/pages';
+@import 'lot/card'; // Must come after `page`
+@import 'lot/cards'; // Must come after `pages`
 @import 'lot/row';
 @import 'lot/rows';
 @import 'lot/section';

diff --git a/panel/.github/source/lot/asset/css/_/lot/card.scss b/panel/.github/source/lot/asset/css/_/lot/card.scss
@@ -0,0 +1,30 @@
+.lot\:card {
+  @extend .lot\:page;
+  flex-direction: column;
+  width: calc(var(--x) * 11);
+  > div {
+    > .image {
+      height: calc(var(--x) * 11 - var(--x));
+      margin: 0 0 calc(var(--y) * .5);
+      min-height: calc(var(--x) * 11 - var(--x));
+      min-width: calc(var(--x) * 11 - var(--x));
+      width: calc(var(--x) * 11 - var(--x));
+    }
+    > .description,
+    > .title {
+      white-space: normal;
+      word-wrap: break-word;
+    }
+    > .title {
+      .title {
+        > span {
+          white-space: normal;
+          word-wrap: break-word;
+        }
+      }
+    }
+    > .lot\:tasks {
+      margin: var(--y) 0 0;
+    }
+  }
+}
diff --git a/panel/.github/source/lot/asset/css/_/lot/cards.scss b/panel/.github/source/lot/asset/css/_/lot/cards.scss
@@ -0,0 +1,6 @@
+.lot\:cards {
+  @extend .lot\:files;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
diff --git a/panel/.github/source/lot/asset/css/_/lot/desk.scss b/panel/.github/source/lot/asset/css/_/lot/desk.scss
@@ -6,9 +6,6 @@
     margin-right: auto;
     max-width: calc(var(--x) * 36);
   }
-  &.flex {
-    gap: 0;
-  }
   &.width {
     display: block;
     > * {

diff --git a/panel/.github/source/lot/asset/css/_/lot/field/query.scss b/panel/.github/source/lot/asset/css/_/lot/field/query.scss
@@ -44,6 +44,7 @@
       margin-left: 0;
       .tag-picker__tag {
         border: 1px solid transparent;
+        line-height: calc(var(--y) - 2px);
       }
     }
   }

diff --git a/panel/.github/source/lot/asset/css/_/lot/files-folders.scss b/panel/.github/source/lot/asset/css/_/lot/files-folders.scss
@@ -3,13 +3,13 @@
   list-style: none;
   margin-left: 0;
   margin-right: 0;
-  h3,
-  p {
+  .description,
+  .title {
     font: inherit;
     margin: 0;
     padding: 0;
   }
-  h3 {
+  .title {
     flex: 1;
     a {
       &.not\:active {

diff --git a/panel/.github/source/lot/asset/css/_/lot/page.scss b/panel/.github/source/lot/asset/css/_/lot/page.scss
@@ -27,12 +27,15 @@
         flex: 1;
       }
     }
+    > .title {
+      display: block;
+      font-size: calc(var(--z) * 1.25);
+    }
   }
-  h3 {
-    font-size: calc(var(--z) * 1.25);
+  .description {
+    margin: calc(var(--y) / 4) 0 0;
   }
-  img,
-  .img {
+  .image {
     display: block;
     height: calc(var(--y) * 2.25);
     max-height: calc(var(--y) * 2.25);
@@ -41,9 +44,6 @@
     min-width: 0;
     width: calc(var(--y) * 2.25);
   }
-  .description {
-    margin: calc(var(--y) / 4) 0 0;
-  }
   &.is\:file,
   &.is\:folder {
     padding-left: calc(var(--x) / 4);

diff --git a/panel/.github/source/lot/asset/css/_/lot/stack.scss b/panel/.github/source/lot/asset/css/_/lot/stack.scss
@@ -4,12 +4,13 @@
   border-radius: var(--arc-stack);
   margin: 0;
   position: relative;
-  > h3 {
+  > .title {
     @include user-select(none);
     background: var(--fill-stack, none);
     border-radius: inherit;
     box-shadow: var(--shadow-stack);
     color: var(--color-stack);
+    display: block;
     font: inherit;
     > a {
       color: inherit;
@@ -43,7 +44,7 @@
   @each $v in (hover, focus, active) {
     &:#{$v} {
       border-color: var(--stroke-stack--#{$v}, var(--stroke-stack));
-      > h3 {
+      > .title {
         background: var(--fill-stack--#{$v}, var(--fill-stack));
         box-shadow: var(--shadow-stack--#{$v}, var(--shadow-stack));
       }
@@ -56,7 +57,7 @@
   }
   &.has\:link {
     border-color: var(--stroke-stack-link, var(--stroke-stack));
-    > h3 {
+    > .title {
       background: var(--fill-stack-link, var(--fill-stack));
       box-shadow: var(--shadow-stack-link, var(--shadow-stack));
       color: var(--color-stack-link, var(--color-stack));
@@ -71,26 +72,26 @@
   }
   &.is\:current {
     border-color: var(--stroke-stack--current, var(--stroke-stack));
-    > h3 {
-      background: var(--fill-stack--current, var(--fill-stack));
-      box-shadow: var(--shadow-stack--current, var(--shadow-stack));
-    }
     > .content,
     > .lot {
       border-top: 1px solid;
       border-top-color: inherit;
       display: block;
     }
+    > .title {
+      background: var(--fill-stack--current, var(--fill-stack));
+      box-shadow: var(--shadow-stack--current, var(--shadow-stack));
+    }
     &:not(.can\:toggle) {
-      > h3 {
+      > .title {
         > a {
           cursor: inherit;
         }
       }
     }
   }
   &.not\:active {
-    > h3 {
+    > .title {
       > a {
         color: var(--color-stack--disabled, var(--color-stack));
         cursor: not-allowed;

diff --git a/panel/about.page b/panel/about.page
@@ -4,7 +4,7 @@ description: GUI extension for Mecha.
 image: https://user-images.githubusercontent.com/1669261/141484323-d97a403f-5706-4e84-b5ab-78ebd9eb6bd9.png
 author: Taufik Nurrohman
 type: Markdown
-version: 2.8.0
+version: 2.8.1
 price: [20, USD]
 
 use:

diff --git a/panel/engine/f/route.php b/panel/engine/f/route.php
@@ -33,6 +33,7 @@ function __license($_) {
         $_['title'] = 'End-User License Agreement';
         $_['lot']['desk']['lot']['form']['lot'][1]['title'] = $_['title'];
         $_['lot']['desk']['lot']['form']['lot'][1]['description'] = 'This End-User License Agreement (EULA) is a legal agreement between you (either as an individual or on behalf of an entity) and Mecha, regarding your use of Mecha&#x2019;s control panel extension. This license agreement does not apply when you use Mecha without the control panel extension.';
+        $_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['gap'] = false;
         $_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['page'] = [
             'content' => $content,
             'stack' => 10

diff --git a/panel/engine/f/type.php b/panel/engine/f/type.php
@@ -38,6 +38,18 @@ function button($value, $key) {
     return $out;
 }
 
+function card($value, $key) {
+    $value['tags']['lot:card'] = true;
+    $value['tags']['lot:page'] = false;
+    return \x\panel\type\page($value, $key);
+}
+
+function cards($value, $key) {
+    $value['tags']['lot:cards'] = true;
+    $value['tags']['lot:pages'] = false;
+    return \x\panel\type\pages($value, $key);
+}
+
 function column($value, $key) {
     $tags = $value['tags'] ?? [];
     $out = [
@@ -362,7 +374,7 @@ function file($value, $key) {
             'lot:file' => true,
             'not:active' => !$is_active
         ], $value['tags'] ?? []);
-        $out[1] .= '<h3>' . \x\panel\type\link([
+        $out[1] .= '<h3 class="title">' . \x\panel\type\link([
             'description' => $value['description'] ?? null,
             'icon' => $value['icon'] ?? [],
             'info' => $value['info'] ?? null,
@@ -475,7 +487,7 @@ function folder($value, $key) {
             'lot:folder' => true,
             'not:active' => !$is_active
         ], $value['tags'] ?? []);
-        $out[1] .= '<h3>' . \x\panel\type\link([
+        $out[1] .= '<h3 class="title">' . \x\panel\type\link([
             'description' => $value['description'] ?? \i('Open folder'),
             'icon' => $value['icon'] ?? [],
             'info' => $value['info'] ?? null,
@@ -816,11 +828,11 @@ function page($value, $key) {
         ], $value['tags'] ?? []);
         $path = $value['path'] ?? $key;
         $date = isset($value['time']) ? \strtr($value['time'], '-', '/') : null;
-        $out[1] .= '<div' . (isset($value['image']) && false === $value['image'] ? ' hidden' : "") . '>' . (!empty($value['image']) ? '<img alt="" height="72" src="' . \htmlspecialchars($value['image']) . '" width="72">' : '<span class="img" style="background: #' . \substr(\md5(\strtr($path, [
+        $out[1] .= '<div' . (isset($value['image']) && false === $value['image'] ? ' hidden' : "") . '>' . (!empty($value['image']) ? '<img alt="" class="image" height="72" src="' . \htmlspecialchars($value['image']) . '" width="72">' : '<span class="image" style="background: #' . \substr(\md5(\strtr($path, [
             \ROOT => "",
             \DS => '/'
         ])), 0, 6) . ';"></span>') . '</div>';
-        $out[1] .= '<div><h3>' . \x\panel\type\link([
+        $out[1] .= '<div><h3 class="title">' . \x\panel\type\link([
             'link' => $value['link'] ?? null,
             'title' => $value['title'] ?? $date,
             'url' => $value['url'] ?? null
@@ -1095,7 +1107,7 @@ function stack($value, $key) {
             'lot:stack' => true,
             'not:active' => !$is_active
         ], $value['tags'] ?? []);
-        $out[1] .= '<h3>' . \x\panel\type\link([
+        $out[1] .= '<h3 class="title">' . \x\panel\type\link([
             '2' => ['tabindex' => -1],
             'description' => $value['description'] ?? null,
             'icon' => $value['icon'] ?? [],

diff --git a/panel/engine/fire.php b/panel/engine/fire.php
@@ -1,6 +1,6 @@
 <?php
 
-if (is_array($_['state']['sync']) && !empty($_['state']['sync']['version']) || !empty($_['state']['sync'])) {
+if ('get' === $_['form']['type'] && (is_array($_['state']['sync']) && !empty($_['state']['sync']['version']) || !empty($_['state']['sync']))) {
     $d = $_['f'];
     $git = 'mecha-cms/' . ($n = 'mecha');
     $version_current = explode('.', VERSION);

diff --git a/panel/engine/r/lot/pages/layout.php b/panel/engine/r/lot/pages/layout.php
@@ -88,7 +88,7 @@
                 'stack' => 30
             ];
         }
-        if (is_array($_['state']['sync']) && !empty($_['state']['sync']['version']) || !empty($_['state']['sync'])) {
+        if ('get' === $_['form']['type'] && (is_array($_['state']['sync']) && !empty($_['state']['sync']['version']) || !empty($_['state']['sync']))) {
             $git = $page->git ?? 'mecha-cms/' . ($n = 'layout.' . To::kebab($page->title));
             $version_current = explode('.', $page->version);
             $version_next = explode('.', Cache::live($n, function() use($git) {

diff --git a/panel/engine/r/lot/pages/x.php b/panel/engine/r/lot/pages/x.php
@@ -112,7 +112,7 @@
                     'stack' => 30
                 ];
             }
-            if (is_array($_['state']['sync']) && !empty($_['state']['sync']['version']) || !empty($_['state']['sync'])) {
+            if ('get' === $_['form']['type'] && (is_array($_['state']['sync']) && !empty($_['state']['sync']['version']) || !empty($_['state']['sync']))) {
                 $git = $page->git ?? 'mecha-cms/' . ($n = 'x.' . $_['chop'][1]);
                 $version_current = explode('.', $page->version);
                 $version_next = explode('.', Cache::live('version:' . $n, function() use($git) {