toggle filter card

outl1ne · Oct 13, 2020 · 50f7a71 · 50f7a71
1 parent 4ddbdd0
commit 50f7a71
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.1] - 2020-10-13
+
+### Added
+
+- Added `withToggle` to optionally collapse the filter card.
+
 ## [1.0.0] - 2020-10-05
 
 Initial release.

diff --git a/README.md b/README.md
@@ -139,6 +139,21 @@ public function cards(Request $request)
 }
 ```
 
+### Collapsing card
+If you want to allow collapsing filter card you can call `withToggle()` on`NovaDetachedFilters`.
+By default, this is `false`.
+
+```php
+public function cards(Request $request)
+{
+    return [
+        (new NovaDetachedFilters([
+            new SelectFilter(),
+        ]))->withToggle(),
+    ];
+}
+```
+
 ### Columns
 When working with large boolean filters or pill filters that are the height of multiple regular filters, you can wrap filters inside `DetachedFiltersColumn` to easily wrap them in columns.
 

diff --git a/dist/js/card.js b/dist/js/card.js
diff --git a/resources/js/components/Card.vue b/resources/js/components/Card.vue
@@ -1,6 +1,6 @@
 <template>
   <card class="flex flex-col nova-detached-filters-card">
-    <div class="px-3 py-4 detached-filters">
+    <div class="px-3 py-4 detached-filters" :class="{ collapsed: collapsedFilters }">
       <div class="relative flex flex-wrap" :class="getWidth(item)" v-for="item in card.filters">
         <!-- Single Filter -->
         <nova-detached-filter
@@ -56,6 +56,22 @@
           />
         </svg>
       </div>
+      <div class="detached-filters-button" v-if="this.card.withToggle">
+        <svg
+          class="toggle-filters-btn"
+          :class="{ collapsed: collapsedFilters }"
+          @click="toggleFilters"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 511.641 511.641"
+          width="20"
+          height="16"
+        >
+          <path
+            xmlns="http://www.w3.org/2000/svg"
+            d="M148.32,255.76L386.08,18c4.053-4.267,3.947-10.987-0.213-15.04c-4.16-3.947-10.667-3.947-14.827,0L125.707,248.293    c-4.16,4.16-4.16,10.88,0,15.04L371.04,508.667c4.267,4.053,10.987,3.947,15.04-0.213c3.947-4.16,3.947-10.667,0-14.827    L148.32,255.76z"
+          />
+        </svg>
+      </div>
     </div>
   </card>
 </template>
@@ -69,9 +85,11 @@ export default {
   data: () => ({
     persistedFilters: JSON.parse(localStorage.getItem('PERSISTED_DETACHED_FILTERS')),
     shouldPersistFilters: JSON.parse(localStorage.getItem('PERSIST_DETACHED_FILTERS')),
+    collapsedFilters: JSON.parse(localStorage.getItem('COLLAPSED_DETACHED_FILTERS')),
   }),
 
   mounted() {
+    console.log(this.card.withToggle);
     if (this.shouldPersistFilters) {
       if (this.persistedFilters && this.persistedFilters[this.resourceName]) this.loadPersistedFilters();
       else this.initializePersistedFilters();
@@ -104,6 +122,11 @@ export default {
       this.initializePersistedFilters();
     },
 
+    toggleFilters() {
+      this.collapsedFilters = !this.collapsedFilters;
+      localStorage.setItem('COLLAPSED_DETACHED_FILTERS', JSON.stringify(this.collapsedFilters));
+    },
+
     loadPersistedFilters() {
       this.persistedFilters[this.resourceName].forEach(filterItem => {
         this.$store.commit(`${this.resourceName}/updateFilterState`, {
@@ -173,6 +196,20 @@ export default {
   .detached-filters {
     display: flex;
     flex-wrap: wrap;
+    overflow: hidden;
+    max-height: 100vh;
+    opacity: 1;
+
+    transition: all 0.5s $transition;
+    will-change: max-height, transform, opacity, padding-top, padding-bottom;
+
+    &.collapsed {
+      opacity: 0;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      transform: translateY(-10%);
+      max-height: 0;
+    }
   }
 
   .detached-filter {
@@ -210,6 +247,8 @@ export default {
       padding: 0.5rem 1rem;
       background-color: var(--white);
       border-color: var(grey);
+      display: flex;
+      align-items: center;
 
       svg {
         cursor: pointer;
@@ -248,5 +287,14 @@ export default {
       transform: rotate(-120deg);
     }
   }
+
+  .toggle-filters-btn {
+    transform: rotate(90deg);
+    transition: all 0.5s $transition;
+
+    &.collapsed {
+      transform: rotate(-90deg);
+    }
+  }
 }
 </style>
diff --git a/src/NovaDetachedFilters.php b/src/NovaDetachedFilters.php
@@ -12,6 +12,7 @@ class NovaDetachedFilters extends Card
     public $width = '1/3'; // (full, 1/3, 1/2 etc..)
     protected $filters = [];
     protected $withReset = false;
+    protected $withToggle = false;
     protected $persistFilters = false;
 
     public function __construct($filters)
@@ -43,10 +44,17 @@ public function persistFilters(bool $value = true)
         return $this;
     }
 
+    public function withToggle(bool $value = true)
+    {
+        $this->withToggle = $value;
+        return $this;
+    }
+
     public function jsonSerialize()
     {
         return array_merge(parent::jsonSerialize(), [
             'withReset' => $this->withReset,
+            'withToggle' => $this->withToggle,
             'persistFilters' => $this->persistFilters,
             'filters' => collect(is_callable($this->filters) ? $this->filters() : $this->filters)->each(function ($filter) {
                 return $filter->jsonSerialize();