fix: navigation padding, structure simplif and naming

standardnotes · Jan 5, 2022 · 9292df1 · 9292df1
1 parent 7b43ac0
commit 9292df1
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 28 deletions.
diff --git a/app/assets/javascripts/components/Navigation.tsx b/app/assets/javascripts/components/Navigation.tsx
@@ -12,7 +12,7 @@ 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 = {
@@ -25,14 +25,14 @@ export const Navigation: FunctionComponent<Props> = observer(
     const componentViewer = appState.foldersComponentViewer;
     const enableNativeSmartTagsFeature =
       appState.features.enableNativeSmartTagsFeature;
-    const [panelRef, setPanelRef] = useState<HTMLDivElement | null>(null);
+    const [panelRef, setPanelRef_] = useState<HTMLDivElement | null>(null);
 
-    useEffect(() => {
+    const setPanelRef = useCallback(() => {
       const elem = document.querySelector(
         'navigation'
       ) as HTMLDivElement | null;
-      setPanelRef(elem);
-    }, [setPanelRef]);
+      setPanelRef_(elem);
+    }, [setPanelRef_]);
 
     const onCreateNewTag = useCallback(() => {
       appState.tags.createNewTemplate();
@@ -53,10 +53,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 +69,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>

diff --git a/app/assets/javascripts/components/Tags/SmartTagsListItem.tsx b/app/assets/javascripts/components/Tags/SmartTagsListItem.tsx
@@ -95,7 +95,7 @@ export const SmartTagsListItem: FunctionComponent<Props> = observer(
             isFaded ? 'faded' : ''
           }`}
           onClick={selectCurrentTag}
-          style={{ paddingLeft: `${level + 0.5}rem` }}
+          style={{ paddingLeft: `${level * 21 + 14}px` }}
         >
           {!tag.errorDecrypting ? (
             <div className="tag-info">

diff --git a/app/assets/javascripts/components/Tags/SmartTagsSection.tsx b/app/assets/javascripts/components/Tags/SmartTagsSection.tsx
@@ -1,4 +1,3 @@
-import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';

diff --git a/app/assets/javascripts/components/Tags/TagsListItem.tsx b/app/assets/javascripts/components/Tags/TagsListItem.tsx
@@ -151,7 +151,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(
           }`}
           onClick={selectCurrentTag}
           ref={dragRef}
-          style={{ paddingLeft: `${level * 21 + 10}px` }}
+          style={{ paddingLeft: `${level * 21 + 14}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/stylesheets/_tags.scss → app/assets/stylesheets/_navigation.scss b/app/assets/stylesheets/_tags.scss → app/assets/stylesheets/_navigation.scss
@@ -1,10 +1,6 @@
 @import './scrollbar';
 
-#tags-column {
-  width: 100%;
-}
-
-.tags .scrollable {
+#navigation .scrollable {
   @include scrollbars(0.4rem, var(--sn-stylekit-info-color), rgba(0, 0, 0, 0));
 
   height: 100%;
@@ -24,8 +20,8 @@
   // }
 }
 
-.tags {
-  width: 180px;
+#navigation {
+  width: 100%;
   flex-grow: 0;
 
   user-select: none;
@@ -34,18 +30,18 @@
   -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;
   }
 
@@ -87,7 +83,7 @@
     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/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';