kanban search enhancements

AnubisNekhet · Dec 30, 2023 · a01a3cd · a01a3cd
1 parent 50090e2
commit a01a3cd
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 0 deletions.
diff --git a/src/modules/Core/style-settings.scss b/src/modules/Core/style-settings.scss
@@ -915,6 +915,41 @@ settings:
     max: 20
     step: 1
 
+# Integrations :: Kanban :: Search Settings
+
+  -
+    id: anp-plugin-kanban-search-settings
+    title: Search Settings
+    description: 
+    type: heading
+    level: 3
+    collapsed: true
+  -
+    id: anp-kanban-search-full
+    title: Enable Full Width Search Bar
+    description: 
+    type: class-toggle
+  -
+    id: anp-kanban-collapse-lanes
+    title: Collapse Lanes With No Search Results
+    description: 
+    type: class-toggle
+  -
+    id: anp-kanban-hide-cards
+    title: Hide Cards That Don't Contain the Search Query
+    description: 
+    type: class-toggle
+  -
+    id: anp-kanban-hide-mark
+    title: Hide Search Result Highlight in Cards
+    description: 
+    type: class-toggle
+  -
+    id: anp-kanban-uncollapse-lanes
+    title: Uncollapse Lanes and Unhide Cards When Sorting
+    description: 
+    type: class-toggle
+
 # Integrations :: MAKE.md
 
   -

diff --git a/src/modules/Integrations/kanban/base.scss b/src/modules/Integrations/kanban/base.scss
@@ -28,6 +28,7 @@ body:not(.is-mobile):not(.anp-hide-status-bar) .kanban-plugin__board > div {
   }
   &__lane-wrapper {
     margin-right: var(--anp-kanban-lane-spacing, 10px);
+    transition: width 200ms;
   }
   &__lane-form-wrapper {
     border-color: var(--interactive-accent);

diff --git a/src/modules/Integrations/kanban/index.scss b/src/modules/Integrations/kanban/index.scss
@@ -2,4 +2,5 @@
 @import "buttons.scss";
 @import "cards.scss";
 @import "lanes.scss";
+@import "search.scss";
 
diff --git a/src/modules/Integrations/kanban/search.scss b/src/modules/Integrations/kanban/search.scss
@@ -0,0 +1,80 @@
+.anp-kanban-search-full {
+  .kanban-plugin__search-wrapper {
+    padding: 10px;
+  }
+  .kanban-plugin__search-wrapper .kanban-plugin__filter-input {
+    flex: 1;
+  }
+  .kanban-plugin__search-wrapper .clickable-icon {
+    position: absolute;
+    right: calc(1em - 2px);
+  }
+  .kanban-plugin__search-wrapper .kanban-plugin__icon {
+    display: flex;
+  }
+}
+
+.anp-kanban-collapse-lanes:not(.anp-kanban-uncollapse-lanes),
+.anp-kanban-collapse-lanes.anp-kanban-uncollapse-lanes:not(:has(.kanban-plugin__drag-container)) {
+  .kanban-plugin__lane-wrapper:not(:has(
+    .kanban-plugin__lane[data-count="0"],
+    .kanban-plugin__item:not(.is-search-miss),
+    .kanban-plugin__item-form
+  )),
+  .kanban-plugin__lane-wrapper:not(:has(
+    .kanban-plugin__lane[data-count="0"],
+    .kanban-plugin__item:not(.is-search-miss),
+    .kanban-plugin__item-form
+  )) ~ .kanban-plugin__lane-wrapper:has(.kanban-plugin__lane[data-count="0"]) {
+    width: 44px !important;
+    .kanban-plugin__lane-header-wrapper {
+      gap: 5px;
+      margin-top: 3px;
+      position: absolute;
+      transform-origin: 20px 20px;
+      transform: rotate(90deg);
+      z-index: 1;
+    }
+    .kanban-plugin__lane-grip {
+      transform: rotate(-90deg);
+    }
+    .kanban-plugin__lane-title {
+      white-space: nowrap;
+    }
+    .kanban-plugin__lane-settings-button-wrapper {
+      display: none;
+    }
+    .kanban-plugin__item-wrapper {
+      display: none;
+    }
+    .kanban-plugin__placeholder:not(.kanban-plugin__item-wrapper ~ .kanban-plugin__placeholder) {
+      display: none;
+    }
+    .kanban-plugin__new-item-button {
+      font-size: 0;
+    }
+    .kanban-plugin__item-button-plus {
+      font-size: .875rem;
+    }
+  }
+}
+
+.anp-kanban-hide-cards {
+  .kanban-plugin__item-wrapper .is-search-hit {
+    box-shadow: none;
+  }
+}
+
+.anp-kanban-hide-cards:not(.anp-kanban-uncollapse-lanes),
+.anp-kanban-hide-cards.anp-kanban-uncollapse-lanes:not(:has(.kanban-plugin__drag-container)) {
+  .kanban-plugin__item-wrapper:has(.is-search-miss) {
+    display: none;
+  }
+}
+
+.anp-kanban-hide-mark {
+  .kanban-plugin__item-wrapper .is-search-hit mark {
+    background-color: transparent; 
+    color: inherit;
+  }
+}