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
standardnotes · Jan 12, 2022 · 7996f4e · 7996f4e
1 parent c1b7f60
commit 7996f4e
Show file tree

Hide file tree

Showing 15 changed files with 70 additions and 108 deletions.
diff --git a/app/assets/icons/ic-add.svg b/app/assets/icons/ic-add.svg
diff --git a/app/assets/javascripts/app.ts b/app/assets/javascripts/app.ts
@@ -58,7 +58,6 @@ import {
   delayHide,
   elemReady,
   fileChange,
-  infiniteScroll,
   lowercase,
   selectOnFocus,
   snEnter,
@@ -150,7 +149,6 @@ const startApplication: StartApplication = async function startApplication(
     .directive('delayHide', delayHide)
     .directive('elemReady', elemReady)
     .directive('fileChange', fileChange)
-    .directive('infiniteScroll', [infiniteScroll])
     .directive('lowercase', lowercase)
     .directive('selectOnFocus', ['$window', selectOnFocus])
     .directive('snEnter', snEnter);

diff --git a/app/assets/javascripts/components/Navigation.tsx b/app/assets/javascripts/components/Navigation.tsx
@@ -12,27 +12,35 @@ import { PANEL_NAME_NAVIGATION } from '@/views/constants';
 import { PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { useCallback, useMemo, useState } from 'preact/hooks';
 import { PremiumModalProvider } from './Premium';
 
 type Props = {
   application: WebApplication;
 };
 
+const NAVIGATION_SELECTOR = 'navigation';
+
+const useNavigationPanelRef = (): [HTMLDivElement | null, () => void] => {
+  const [panelRef, setPanelRefInternal] = useState<HTMLDivElement | null>(null);
+
+  const setPanelRefPublic = useCallback(() => {
+    const elem = document.querySelector(
+      NAVIGATION_SELECTOR
+    ) as HTMLDivElement | null;
+    setPanelRefInternal(elem);
+  }, [setPanelRefInternal]);
+
+  return [panelRef, setPanelRefPublic];
+};
+
 export const Navigation: FunctionComponent<Props> = observer(
   ({ application }) => {
     const appState = useMemo(() => application.getAppState(), [application]);
     const componentViewer = appState.foldersComponentViewer;
     const enableNativeSmartTagsFeature =
       appState.features.enableNativeSmartTagsFeature;
-    const [panelRef, setPanelRef] = useState<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      const elem = document.querySelector(
-        'navigation'
-      ) as HTMLDivElement | null;
-      setPanelRef(elem);
-    }, [setPanelRef]);
+    const [panelRef, setPanelRef] = useNavigationPanelRef();
 
     const onCreateNewTag = useCallback(() => {
       appState.tags.createNewTemplate();
@@ -53,10 +61,10 @@ export const Navigation: FunctionComponent<Props> = observer(
     return (
       <PremiumModalProvider state={appState.features}>
         <div
-          id="tags-column"
+          id="navigation"
+          className="sn-component section"
+          data-aria-label="Navigation"
           ref={setPanelRef}
-          className="sn-component section tags"
-          data-aria-label="Tags"
         >
           {componentViewer ? (
             <div className="component-view-container">
@@ -69,8 +77,8 @@ export const Navigation: FunctionComponent<Props> = observer(
               </div>
             </div>
           ) : (
-            <div id="tags-content" className="content">
-              <div className="tags-title-section section-title-bar">
+            <div id="navigation-content" className="content">
+              <div className="section-title-bar">
                 <div className="section-title-bar-header">
                   <div className="sk-h3 title">
                     <span className="sk-bold">Views</span>
@@ -89,10 +97,8 @@ export const Navigation: FunctionComponent<Props> = observer(
                 </div>
               </div>
               <div className="scrollable">
-                <div className="infinite-scroll">
-                  <SmartTagsSection appState={appState} />
-                  <TagsSection appState={appState} />
-                </div>
+                <SmartTagsSection appState={appState} />
+                <TagsSection appState={appState} />
               </div>
             </div>
           )}

diff --git a/app/assets/javascripts/components/Tags/RootTagDropZone.tsx b/app/assets/javascripts/components/Tags/RootTagDropZone.tsx
@@ -50,7 +50,7 @@ export const RootTagDropZone: React.FC<Props> = observer(
       <div
         ref={dropRef}
         className={`root-drop ${canDrop ? 'active' : ''} ${
-          isOver ? 'is-over' : ''
+          isOver ? 'is-drag-over' : ''
         }`}
       >
         <Icon className="color-neutral" type="link-off" />

diff --git a/app/assets/javascripts/components/Tags/SmartTagsListItem.tsx b/app/assets/javascripts/components/Tags/SmartTagsListItem.tsx
@@ -13,6 +13,9 @@ type Props = {
   features: FeaturesState;
 };
 
+const PADDING_BASE_PX = 14;
+const PADDING_PER_LEVEL_PX = 21;
+
 const smartTagIconType = (tag: SNSmartTag): IconType => {
   if (tag.isAllTag) {
     return 'notes';
@@ -95,7 +98,9 @@ export const SmartTagsListItem: FunctionComponent<Props> = observer(
             isFaded ? 'faded' : ''
           }`}
           onClick={selectCurrentTag}
-          style={{ paddingLeft: `${level + 0.5}rem` }}
+          style={{
+            paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
+          }}
         >
           {!tag.errorDecrypting ? (
             <div className="tag-info">

diff --git a/app/assets/javascripts/components/Tags/TagsListItem.tsx b/app/assets/javascripts/components/Tags/TagsListItem.tsx
@@ -21,6 +21,9 @@ type Props = {
   level: number;
 };
 
+const PADDING_BASE_PX = 14;
+const PADDING_PER_LEVEL_PX = 21;
+
 export const TagsListItem: FunctionComponent<Props> = observer(
   ({ tag, features, tagsState, level }) => {
     const [title, setTitle] = useState(tag.title || '');
@@ -151,7 +154,9 @@ export const TagsListItem: FunctionComponent<Props> = observer(
           }`}
           onClick={selectCurrentTag}
           ref={dragRef}
-          style={{ paddingLeft: `${level * 21 + 10}px` }}
+          style={{
+            paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
+          }}
         >
           {!tag.errorDecrypting ? (
             <div className="tag-info" title={title} ref={dropRef}>

diff --git a/app/assets/javascripts/components/Tags/TagsSection.tsx b/app/assets/javascripts/components/Tags/TagsSection.tsx
@@ -13,7 +13,7 @@ export const TagsSection: FunctionComponent<Props> = observer(
   ({ appState }) => {
     return (
       <section>
-        <div className="tags-title-section section-title-bar">
+        <div className="section-title-bar">
           <div className="section-title-bar-header">
             <TagsSectionTitle features={appState.features} />
             <TagsSectionAddButton

diff --git a/app/assets/javascripts/components/Tags/TagsSectionAddButton.tsx b/app/assets/javascripts/components/Tags/TagsSectionAddButton.tsx
@@ -1,5 +1,4 @@
 import { IconButton } from '@/components/IconButton';
-import { AppState } from '@/ui_models/app_state';
 import { FeaturesState } from '@/ui_models/app_state/features_state';
 import { TagsState } from '@/ui_models/app_state/tags_state';
 import { observer } from 'mobx-react-lite';
@@ -23,6 +22,7 @@ export const TagsSectionAddButton: FunctionComponent<Props> = observer(
         focusable={true}
         icon="add"
         title="Create a new tag"
+        className="color-neutral"
         onClick={() => tags.createNewTemplate()}
       />
     );

diff --git a/app/assets/javascripts/directives/functional/index.ts b/app/assets/javascripts/directives/functional/index.ts
@@ -3,7 +3,6 @@ export { clickOutside } from './click-outside';
 export { delayHide } from './delay-hide';
 export { elemReady } from './elemReady';
 export { fileChange } from './file-change';
-export { infiniteScroll } from './infiniteScroll';
 export { lowercase } from './lowercase';
 export { selectOnFocus } from './selectOnFocus';
 export { snEnter } from './snEnter';
diff --git a/app/assets/javascripts/directives/functional/infiniteScroll.ts b/app/assets/javascripts/directives/functional/infiniteScroll.ts
diff --git a/app/assets/stylesheets/_main.scss b/app/assets/stylesheets/_main.scss
@@ -203,11 +203,6 @@ $footer-height: 2rem;
     position: relative;
     overflow: hidden;
 
-    .scrollable {
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-
     > .content {
       height: 100%;
       max-height: 100%;

diff --git a/app/assets/stylesheets/_tags.scss → app/assets/stylesheets/_navigation.scss b/app/assets/stylesheets/_tags.scss → app/assets/stylesheets/_navigation.scss
@@ -1,9 +1,13 @@
-#tags-column {
-  width: 100%;
+@import './scrollbar';
+
+#navigation .scrollable {
+  @include minimal_scrollbar();
+  height: 100%;
+  background-color: var(--sn-stylekit-background-color);
 }
 
-.tags {
-  width: 180px;
+#navigation {
+  width: 100%;
   flex-grow: 0;
 
   user-select: none;
@@ -12,42 +16,21 @@
   -webkit-user-select: none;
 
   &,
-  #tags-content {
-    background-color: var(--sn-stylekit-secondary-background-color);
+  #navigation-content {
     display: flex;
     flex-direction: column;
+    background-color: var(--sn-stylekit-secondary-background-color);
   }
 
-  .tags-title-section {
+  .section-title-bar {
     color: var(--sn-stylekit-secondary-foreground-color);
     padding-top: 15px;
     padding-bottom: 8px;
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 14px;
+    padding-right: 14px;
     font-size: 12px;
   }
 
-  .scrollable {
-    height: 100%;
-  }
-
-  .infinite-scroll {
-    overflow-x: hidden;
-    height: inherit;
-
-    // Autohide scrollbar on Windows.
-    @at-root {
-      .windows-web &,
-      .windows-desktop & {
-        overflow-y: hidden;
-        &:hover {
-          overflow-y: auto;
-          overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up
-        }
-      }
-    }
-  }
-
   .no-tags-placeholder {
     padding: 0px 12px;
     font-size: 12px;
@@ -80,12 +63,13 @@
     }
   }
 
-  .tag {
+  .tag,
+  .root-drop {
     font-size: 14px;
     line-height: 18px;
 
     min-height: 30px;
-    padding: 5px 12px;
+    padding: 5px 14px;
     cursor: pointer;
     transition: height 0.1s ease-in-out;
     position: relative;

diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss
@@ -1,3 +1,5 @@
+@import './scrollbar';
+
 notes-view {
   width: 350px;
 }
@@ -101,25 +103,10 @@ notes-view {
     }
   }
 
-  .scrollable {
-    height: 100%;
-  }
-
   .infinite-scroll {
-    overflow-x: hidden;
+    @include minimal_scrollbar();
     height: inherit;
-
-    // Autohide scrollbar on Windows.
-    @at-root {
-      .windows-web &,
-      .windows-desktop & {
-        overflow-y: hidden;
-        &:hover {
-          overflow-y: auto;
-          overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up
-        }
-      }
-    }
+    background-color: var(--sn-stylekit-background-color);
   }
 
   .note {

diff --git a/app/assets/stylesheets/_scrollbar.scss b/app/assets/stylesheets/_scrollbar.scss
@@ -0,0 +1,9 @@
+@mixin minimal_scrollbar() {
+  overflow-x: hidden;
+  overflow-y: hidden;
+
+  &:hover {
+    overflow-y: auto;
+    overflow-y: overlay;
+  }
+}
diff --git a/app/assets/stylesheets/index.css.scss b/app/assets/stylesheets/index.css.scss
@@ -2,7 +2,7 @@
 @import 'main';
 @import 'ui';
 @import 'footer';
-@import 'tags';
+@import 'navigation';
 @import 'notes';
 @import 'editor';
 @import 'menus';