From 7996f4e5a2b6d38c282f66633b9fd86792d62216 Mon Sep 17 00:00:00 2001 From: Laurent Senta Date: Wed, 12 Jan 2022 13:45:41 +0100 Subject: [PATCH] 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 --- app/assets/icons/ic-add.svg | 2 +- app/assets/javascripts/app.ts | 2 - .../javascripts/components/Navigation.tsx | 42 +++++++++------- .../components/Tags/RootTagDropZone.tsx | 2 +- .../components/Tags/SmartTagsListItem.tsx | 7 ++- .../components/Tags/TagsListItem.tsx | 7 ++- .../components/Tags/TagsSection.tsx | 2 +- .../components/Tags/TagsSectionAddButton.tsx | 2 +- .../directives/functional/index.ts | 1 - .../directives/functional/infiniteScroll.ts | 26 ---------- app/assets/stylesheets/_main.scss | 5 -- .../{_tags.scss => _navigation.scss} | 48 +++++++------------ app/assets/stylesheets/_notes.scss | 21 ++------ app/assets/stylesheets/_scrollbar.scss | 9 ++++ app/assets/stylesheets/index.css.scss | 2 +- 15 files changed, 70 insertions(+), 108 deletions(-) delete mode 100644 app/assets/javascripts/directives/functional/infiniteScroll.ts rename app/assets/stylesheets/{_tags.scss => _navigation.scss} (86%) create mode 100644 app/assets/stylesheets/_scrollbar.scss diff --git a/app/assets/icons/ic-add.svg b/app/assets/icons/ic-add.svg index d92c119a2..b785d2267 100644 --- a/app/assets/icons/ic-add.svg +++ b/app/assets/icons/ic-add.svg @@ -1,3 +1,3 @@ - + diff --git a/app/assets/javascripts/app.ts b/app/assets/javascripts/app.ts index d939bba17..49fcb298c 100644 --- 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 index b3e5dcfd4..b3576ac0f 100644 --- 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(null); + + const setPanelRefPublic = useCallback(() => { + const elem = document.querySelector( + NAVIGATION_SELECTOR + ) as HTMLDivElement | null; + setPanelRefInternal(elem); + }, [setPanelRefInternal]); + + return [panelRef, setPanelRefPublic]; +}; + export const Navigation: FunctionComponent = observer( ({ application }) => { const appState = useMemo(() => application.getAppState(), [application]); const componentViewer = appState.foldersComponentViewer; const enableNativeSmartTagsFeature = appState.features.enableNativeSmartTagsFeature; - const [panelRef, setPanelRef] = useState(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 = observer( return (
{componentViewer ? (
@@ -69,8 +77,8 @@ export const Navigation: FunctionComponent = observer(
) : ( -
-
+
+
Views @@ -89,10 +97,8 @@ export const Navigation: FunctionComponent = observer(
-
- - -
+ +
)} diff --git a/app/assets/javascripts/components/Tags/RootTagDropZone.tsx b/app/assets/javascripts/components/Tags/RootTagDropZone.tsx index 1c6908a51..3e758536c 100644 --- 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 = observer(
diff --git a/app/assets/javascripts/components/Tags/SmartTagsListItem.tsx b/app/assets/javascripts/components/Tags/SmartTagsListItem.tsx index 0284b0ae9..c82b79878 100644 --- 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 = observer( isFaded ? 'faded' : '' }`} onClick={selectCurrentTag} - style={{ paddingLeft: `${level + 0.5}rem` }} + style={{ + paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`, + }} > {!tag.errorDecrypting ? (
diff --git a/app/assets/javascripts/components/Tags/TagsListItem.tsx b/app/assets/javascripts/components/Tags/TagsListItem.tsx index 8dac77728..ed16e34a0 100644 --- 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 = observer( ({ tag, features, tagsState, level }) => { const [title, setTitle] = useState(tag.title || ''); @@ -151,7 +154,9 @@ export const TagsListItem: FunctionComponent = observer( }`} onClick={selectCurrentTag} ref={dragRef} - style={{ paddingLeft: `${level * 21 + 10}px` }} + style={{ + paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`, + }} > {!tag.errorDecrypting ? (
diff --git a/app/assets/javascripts/components/Tags/TagsSection.tsx b/app/assets/javascripts/components/Tags/TagsSection.tsx index 636206f73..38d97b9e0 100644 --- a/app/assets/javascripts/components/Tags/TagsSection.tsx +++ b/app/assets/javascripts/components/Tags/TagsSection.tsx @@ -13,7 +13,7 @@ export const TagsSection: FunctionComponent = observer( ({ appState }) => { return (
-
+
= 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 index 0a8bd4c53..a2b83a7ba 100644 --- 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 deleted file mode 100644 index 349a59946..000000000 --- a/app/assets/javascripts/directives/functional/infiniteScroll.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { debounce } from '@/utils'; -/* @ngInject */ -export function infiniteScroll() { - return { - link: function (scope: ng.IScope, elem: JQLite, attrs: any) { - const scopeAny = scope as any; - const offset = parseInt(attrs.threshold) || 0; - const element = elem[0]; - scopeAny.paginate = debounce(() => { - scope.$apply(attrs.infiniteScroll); - }, 10); - scopeAny.onScroll = () => { - if ( - scope.$eval(attrs.canLoad) && - element.scrollTop + element.offsetHeight >= element.scrollHeight - offset - ) { - scopeAny.paginate(); - } - }; - elem.on('scroll', scopeAny.onScroll); - scope.$on('$destroy', () => { - elem.off('scroll', scopeAny.onScroll); - }); - } - }; -} diff --git a/app/assets/stylesheets/_main.scss b/app/assets/stylesheets/_main.scss index 635816c3e..f52814ffd 100644 --- 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 b/app/assets/stylesheets/_navigation.scss similarity index 86% rename from app/assets/stylesheets/_tags.scss rename to app/assets/stylesheets/_navigation.scss index 830a2d818..1c6ec9a97 100644 --- a/app/assets/stylesheets/_tags.scss +++ b/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 index 08c4ff749..06f66c262 100644 --- 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 new file mode 100644 index 000000000..3c5bb8bc3 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/index.css.scss b/app/assets/stylesheets/index.css.scss index 330d1cb19..b138f89bc 100644 --- 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';