From 613ccc43cb64b93040e5de4b1d39b4f6d17abaeb Mon Sep 17 00:00:00 2001
From: Andre <mail@andrejilderda.nl>
Date: Sun, 12 May 2024 16:48:49 +0200
Subject: [PATCH] feat: style detailed note list

---
 .changeset/chilled-crabs-dress.md             |  5 ++
 src/scss/components/_components.notelist.scss | 59 ++++++++++++++++---
 src/scss/components/_components.sidebar.scss  |  1 -
 src/scss/macos-theme-for-joplin.scss          | 30 +++++-----
 4 files changed, 72 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/chilled-crabs-dress.md

diff --git a/.changeset/chilled-crabs-dress.md b/.changeset/chilled-crabs-dress.md
new file mode 100644
index 0000000..4a6be8d
--- /dev/null
+++ b/.changeset/chilled-crabs-dress.md
@@ -0,0 +1,5 @@
+---
+"joplin-plugin-macos-theme": minor
+---
+
+feat: style detailed note list
diff --git a/src/scss/components/_components.notelist.scss b/src/scss/components/_components.notelist.scss
index 886b688..7e27a97 100644
--- a/src/scss/components/_components.notelist.scss
+++ b/src/scss/components/_components.notelist.scss
@@ -12,7 +12,6 @@
       width: 100%;
       padding: 1.2rem 0.6rem 1.2rem 1.2rem;
     }
-
   }
 
   .search-bar {
@@ -126,7 +125,7 @@
     cursor: default;
     border-radius: 0.6rem;
     background-color: transparent;
-    
+
     .fas,
     .far {
       font-size: var(--g-font-size-2);
@@ -139,17 +138,17 @@
     .fa-calendar-alt::before {
       @include icon(clock);
     }
-    
+
     // created date
     .fa-calendar-plus::before {
       @include icon(calendar);
     }
-    
+
     // title
     .fa-font::before {
       @include icon(character);
     }
-    
+
     // custom
     .fa-wrench::before {
       @include icon(person);
@@ -197,7 +196,7 @@
     padding: 0 1rem 1rem;
     width: auto !important;
     overflow: hidden overlay !important;
-    
+
     & .title {
       color: var(--g-textColor) !important;
       font-size: 1.2rem !important;
@@ -209,6 +208,52 @@
     }
   }
 
+  // For when 'Note list style' is set to 'Detailed'
+  :has(.note-list-header) {
+    color: var(--g-labelColor) !important;
+    font-size: 1.2rem !important;
+    font-family: "Courier New", Courier, monospace !important;
+
+    .note-list-header {
+      font-weight: 500;
+      border-bottom: 0.1rem solid var(--g-separatorColor);
+      margin: 0 1rem 0 1.5rem;
+
+      .-first {
+        .inner {
+          padding: 0;
+        }
+      }
+
+      [data-name="note.is_todo"] .inner {
+        display: none;
+      }
+    }
+
+    .row {
+      gap: 1rem !important;
+
+      &:hover {
+        background: transparent;
+      }
+
+      .item {
+        opacity: 1 !important;
+        padding-right: 0.5rem !important;
+
+        &:not(:first-child) {
+          padding-left: 0 !important;
+        }
+      }
+
+      &.-selected {
+        background: var(--s-accentColor--selected) !important;
+        border-radius: 0.4rem;
+        color: var(--g-alternateSelectedControlTextColor) !important;
+      }
+    }
+  }
+
   .todo-list-item,
   .note-list-item {
     border-radius: 0.4rem;
@@ -261,7 +306,7 @@
       border-radius: 0.2rem;
     }
 
-    &>.content.-selected {
+    & > .content.-selected {
       background: var(--s-accentColor--selected) !important;
       border-radius: 0.4rem;
 
diff --git a/src/scss/components/_components.sidebar.scss b/src/scss/components/_components.sidebar.scss
index 18729c9..df386cf 100644
--- a/src/scss/components/_components.sidebar.scss
+++ b/src/scss/components/_components.sidebar.scss
@@ -45,7 +45,6 @@
       color: var(--s-sidebar__label-Color);
       font-size: var(--s-sidebar__label-FontSize);
       font-weight: 700;
-      letter-spacing: -0.025em;
     }
 
     // all notes
diff --git a/src/scss/macos-theme-for-joplin.scss b/src/scss/macos-theme-for-joplin.scss
index 7791da3..882bb4d 100644
--- a/src/scss/macos-theme-for-joplin.scss
+++ b/src/scss/macos-theme-for-joplin.scss
@@ -1,20 +1,20 @@
 @media screen {
-  @import 'tools/tools.mixins';
-  @import 'user-settings/user-settings-fallback';
-  @import 'settings/settings.custom-properties.global';
+  @import "tools/tools.mixins";
+  @import "user-settings/user-settings-fallback";
+  @import "settings/settings.custom-properties.global";
 
-  @import 'elements/elements.icons';
-  @import 'elements/elements.page';
+  @import "elements/elements.icons";
+  @import "elements/elements.page";
 
-  @import 'components/components.mixins.button';
-  @import 'components/components.mixins.checkbox';
-  @import 'components/components.mixins.input';
+  @import "components/components.mixins.button";
+  @import "components/components.mixins.checkbox";
+  @import "components/components.mixins.input";
 
-  @import 'components/components.editor';
-  @import 'components/components.notelist';
-  @import 'components/components.modal';
-  @import 'components/components.sidebar';
-  @import 'components/components.codeMirror';
-  @import 'components/components.layout';
-  @import 'components/components.tinyMCE';
+  @import "components/components.editor";
+  @import "components/components.notelist";
+  @import "components/components.modal";
+  @import "components/components.sidebar";
+  @import "components/components.codeMirror";
+  @import "components/components.layout";
+  @import "components/components.tinyMCE";
 }