AnubisNekhet / AnuPpuccin

Personal theme for Obsidian
GNU General Public License v3.0
1.96k stars 163 forks source link

Kanban Search Enhancements #245

Closed pryley closed 6 months ago

pryley commented 6 months ago

As usual, you will need to run make build.

Screenshots

New Settings

image

☑️ Enable Full Width Search Bar

image

☑️ Collapse Lanes With No Search Results

image

☑️ Hide Cards That Don't Contain the Search Query

image

☑️ Hide Search Result Highlight in Cards

image
pryley commented 6 months ago

The collapsing lane feature is also great for when you have lots of lanes and you want to quickly change their order:

https://github.com/AnubisNekhet/AnuPpuccin/assets/134939/eb4a1392-5d34-48c7-afc3-14ceac16b8d0

pryley commented 6 months ago

And here is the code snippet I use to add a left-border to the cards based on their tag (Obsidian supports the nested CSS spec):

.kanban-plugin__item {
  --input-radius: 0 var(--anp-kanban-card-radius, 6px) var(--anp-kanban-card-radius, 6px) 0;
  --border-color: var(--ctp-surface0);
  --border-color-hover: var(--ctp-surface1);
  --border-opacity: 1;
  --border-opacity-hover: 1;
  border-left-width: 3px;
  border-color: rgba(var(--border-color), var(--border-opacity)) !important;
  position: relative;
  &:hover {
    border-color: rgba(var(--border-color-hover), var(--border-opacity-hover)) !important;
  }
  &::before {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 1px;
    left: 0;
    background: var(--background-primary);
    display: block;
  }
}
.kanban-plugin__item.is-complete {
  --border-color: var(--ctp-surface0) !important;
  --border-color-hover: var(--ctp-surface1) !important;
  --border-opacity: 1 !important;
}
.theme-light .kanban-plugin__item {
  --border-color: var(--ctp-surface1);
  --border-color-hover: var(--ctp-surface2);
}
.theme-light .kanban-plugin__item.is-complete {
  --border-color: var(--ctp-surface1) !important;
  --border-color-hover: var(--ctp-surface2) !important;
}
.kanban-plugin__drag-container > .kanban-plugin__item-wrapper .kanban-plugin__item {
  border-color: rgba(var(--border-color-hover), var(--border-opacity-hover)) !important;
}

.kanban-plugin__item:is(
  /* Add your tags classes here */
  .has-tag-bug,
  .has-tag-new,
  .has-tag-test,
) {
  --border-color-hover: var(--border-color);
  --border-opacity: .75;
}

/**
 * Add your tag colors here
 */

.kanban-plugin__item.has-tag-bug {
  --border-color: var(--ctp-red);
}
.kanban-plugin__item.has-tag-new {
  --border-color: var(--ctp-green);
}
.kanban-plugin__item.has-tag-test {
  --border-color: var(--ctp-yellow);
}
AnubisNekhet commented 6 months ago

LGTM, merging Happy new year!