Merge pull request #132 from andrejilderda/feat/style-detailed-note-list

feat: style detailed note list
andrejilderda · May 12, 2024 · 35b2a5c · 35b2a5c
2 parents 36ad49b + 613ccc4
commit 35b2a5c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 23 deletions.
diff --git a/.changeset/chilled-crabs-dress.md 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
@@ -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
@@ -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
@@ -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";
 }