feat: nicer smart filters & folders theme (#795)

* fix: color add button and drop * fix: color scrollbars * fix: remove infinite scroll and fix scrollbars * fix: plus icon center * fix: navigation padding, structure simplif and naming * fix: simplify scrollbars * fix: scroll bar simplif + scheme in macos * fix: magic variables to const * refactor: extract panel ref state * refactor: remove dead code, simple macos theme
2022-01-12 13:45:41 +01:00
parent c1b7f60e35
commit 7996f4e5a2
15 changed files with 70 additions and 108 deletions
--- a/app/assets/stylesheets/_navigation.scss
+++ b/app/assets/stylesheets/_navigation.scss
@@ -0,0 +1,208 @@
+@import './scrollbar';
+
+#navigation .scrollable {
+  @include minimal_scrollbar();
+  height: 100%;
+  background-color: var(--sn-stylekit-background-color);
+}
+
+#navigation {
+  width: 100%;
+  flex-grow: 0;
+
+  user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+
+  &,
+  #navigation-content {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sn-stylekit-secondary-background-color);
+  }
+
+  .section-title-bar {
+    color: var(--sn-stylekit-secondary-foreground-color);
+    padding-top: 15px;
+    padding-bottom: 8px;
+    padding-left: 14px;
+    padding-right: 14px;
+    font-size: 12px;
+  }
+
+  .no-tags-placeholder {
+    padding: 0px 12px;
+    font-size: 12px;
+    opacity: 0.4;
+    margin-top: -5px;
+  }
+
+  .root-drop {
+    width: '100%';
+    padding: 12px;
+    opacity: 0;
+    transition: opacity 0.3s ease-in;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    .sn-icon {
+      margin-right: 0.5rem;
+    }
+
+    &.active {
+      opacity: 1;
+
+      &.is-over {
+        background-color: var(--sn-stylekit-white);
+        color: var(--sn-stylekit-secondary-contrast-foreground-color);
+      }
+    }
+  }
+
+  .tag,
+  .root-drop {
+    font-size: 14px;
+    line-height: 18px;
+
+    min-height: 30px;
+    padding: 5px 14px;
+    cursor: pointer;
+    transition: height 0.1s ease-in-out;
+    position: relative;
+
+    > .tag-info {
+      height: 20px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      .sn-icon {
+        display: block;
+        margin: 0 auto;
+
+        &.hidden {
+          visibility: hidden;
+        }
+      }
+
+      > .tag-fold {
+        width: 22px;
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+
+      > .tag-icon {
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        &.draggable {
+          cursor: move;
+        }
+
+        &.propose-folders {
+          cursor: help;
+        }
+      }
+
+      > .title {
+        @extend .focus\:outline-none;
+        @extend .focus\:shadow-none;
+        font-size: 14px;
+        line-height: 18px;
+
+        width: 80%;
+        background-color: transparent;
+        font-weight: 600;
+        color: var(--sn-stylekit-secondary-foreground-color);
+        border: none;
+        cursor: pointer;
+        text-overflow: ellipsis;
+        width: 75%;
+        flex-grow: 1;
+
+        // Required for Safari to avoid highlighting when dragging panel resizers
+        // Make sure to undo if it's selected (for editing)
+        user-select: none;
+        -moz-user-select: none;
+        -khtml-user-select: none;
+        -webkit-user-select: none;
+
+        pointer-events: none;
+
+        &.editing {
+          pointer-events: auto;
+          user-select: text;
+          -moz-user-select: text;
+          -khtml-user-select: text;
+          -webkit-user-select: text;
+        }
+
+        &:focus {
+          outline: 0;
+          box-shadow: 0;
+        }
+      }
+
+      > .count {
+        padding-right: 4px;
+        padding-top: 1px;
+        font-weight: bold;
+        color: var(--sn-stylekit-neutral-color);
+        min-width: 35px;
+        text-align: right;
+      }
+    }
+
+    .meta {
+      padding-left: 3px;
+
+      &.with-folders {
+        padding-left: 25px;
+      }
+
+      > .menu {
+        font-size: 11px;
+
+        > .item {
+          margin-right: 2px;
+        }
+
+        opacity: 0.5;
+        font-weight: bold;
+        clear: both;
+        margin-top: 2px;
+        margin-bottom: 2px;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.selected {
+      > .tag-info {
+        .title {
+          cursor: text;
+        }
+      }
+    }
+
+    &:hover:not(.selected),
+    &.selected,
+    &.is-drag-over {
+      background-color: var(--sn-stylekit-secondary-contrast-background-color);
+      color: var(--sn-stylekit-secondary-contrast-foreground-color);
+
+      > .title {
+        color: var(--sn-stylekit-secondary-contrast-foreground-color);
+      }
+    }
+  }
+}