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

feat: tablet responsiveness (#1369)

Browse Source 
* feat: "Notes" column responsiveness for tablets

* feat: ability to expand/collapse the navigation column, move some styles to tailwind

* feat: ability to expand/collapse the navigation column, move some styles to tailwind

* feat: icon for collapsing/expanding navigation column, style improvements

* fix: restore vertical panels resizability on large screens

* feat: tags/folders section for collapsed state

* feat: notes subsection styling in navigation section

* feat: hide rename & delete links of smart views when in collapsed mode

* fix: show notes count in bold when in collapsed mode

* fix: better padding for folders in collapsed state

* fix: smaller left padding for collapsed case

* fix: better view of expand/collapse control

* fix: hide search bar when collapsed

* fix: adjust position of "expand" control when in collapsed state

* chore: remove comments

* refactor: use `classNames` util when applying conditional css classes

* chore: shorter class names syntax

* chore: shorter syntax for conditional classes

* fix: better way of setting background color with opacity

* fix: use variable colors according to SN themes

* chore: move "colors" from "extend" section and thus override Tailwind's colors (so only SN colors will exist)

* fix: correct hover style in collapsed mode

* fix: correct upper boundary for extra small screens
This commit is contained in:
Vardan Hakobyan
2022-08-08 11:07:15 +04:00
committed by GitHub
parent 8332a70384
commit f555fbcaaa
13 changed files with 369 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/web/src/javascripts/Components/Navigation/Navigation.tsx
View File

@@ -10,6 +10,7 @@ import SearchBar from '@/Components/SearchBar/SearchBar'
import ResponsivePaneContent from '@/Components/ResponsivePane/ResponsivePaneContent'
import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
import { classNames } from '@/Utils/ConcatenateClassNames'
import Icon from '@/Components/Icon/Icon'
type Props = {
application: WebApplication
@@ -19,6 +20,7 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
const viewControllerManager = useMemo(() => application.getViewControllerManager(), [application])
const ref = useRef<HTMLDivElement>(null)
const [panelWidth, setPanelWidth] = useState<number>(0)
const [isPanelExpanded, setIsPanelExpanded] = useState(true)
useEffect(() => {
const removeObserver = application.addEventObserver(async () => {
@@ -47,19 +49,39 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
}, [viewControllerManager])
return (
<div id="navigation" className="sn-component section app-column app-column-first" ref={ref}>
<div
id="navigation"
className={classNames(
'sn-component section app-column xl:w-[220px] xsm-only:!w-full sm-only:!w-full md-only:transition-width lg-only:transition-width',
isPanelExpanded ? 'md-only:!w-[220px] lg-only:!w-[220px]' : 'md-only:!w-18 lg-only:!w-18',
)}
ref={ref}
>
<ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content">
<SearchBar
itemListController={viewControllerManager.itemListController}
searchOptionsController={viewControllerManager.searchOptionsController}
selectedViewTitle={viewControllerManager.navigationController.selected?.title}
/>
<div className="section-title-bar">
<div className="section-title-bar-header">
<div className="title text-sm">
<span className="font-bold">Views</span>
{isPanelExpanded && (
<SearchBar
itemListController={viewControllerManager.itemListController}
searchOptionsController={viewControllerManager.searchOptionsController}
selectedViewTitle={viewControllerManager.navigationController.selected?.title}
/>
)}
<div className={'flex justify-end'}>
<div className={classNames('section-title-bar block w-full xl:block', !isPanelExpanded && 'hidden')}>
<div className="section-title-bar-header">
<div className="title text-sm">
<span className="font-bold">Views</span>
</div>
</div>
</div>
<div
className={classNames(
'hidden items-end self-end rounded-full rounded-tr-none rounded-br-none bg-default p-1 text-foreground md:flex xl:hidden',
isPanelExpanded ? 'mb-1 w-fit' : 'mt-4.5 mb-3 ml-3 w-full',
)}
onClick={() => setIsPanelExpanded(!isPanelExpanded)}
>
<Icon type="chevron-down" className={isPanelExpanded ? 'rotate-90' : '-rotate-90'} />
</div>
</div>
<div
className={classNames(
@@ -68,8 +90,8 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
'md:hover:[overflow-y:_overlay]',
)}
>
<SmartViewsSection viewControllerManager={viewControllerManager} />
<TagsSection viewControllerManager={viewControllerManager} />
<SmartViewsSection viewControllerManager={viewControllerManager} isCollapsed={!isPanelExpanded} />
<TagsSection viewControllerManager={viewControllerManager} isCollapsed={!isPanelExpanded} />
</div>
</ResponsivePaneContent>
{ref.current && (