rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Laurent Senta
2022-01-12 13:45:41 +01:00
committed by GitHub
parent c1b7f60e35
commit 7996f4e5a2
15 changed files with 70 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/components/Navigation.tsx
View File

@@ -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>
)}