fix: remove tablet specific responsive UI (#1411)

* fix: revert tablet responsiveness UI * fix: don't let the "Saving..." text container hide the note title on tablets * chore: better visibility of css classes list * fix: fixed width of notes container column on Tablets
standardnotes · Aug 17, 2022 · a25923f · a25923f
1 parent f14f105
commit a25923f
Show file tree

Hide file tree

Showing 13 changed files with 284 additions and 365 deletions.
diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -21,6 +21,7 @@ import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { StreamingFileReader } from '@standardnotes/filepicker'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -179,7 +180,10 @@ const ContentListView: FunctionComponent<Props> = ({
   return (
     <div
       id="items-column"
-      className="sn-component section app-column flex flex-col border-b border-solid border-border xl:w-87.5 xsm-only:!w-full sm-only:!w-full md-only:!w-52 lg-only:!w-52"
+      className={classNames(
+        'sn-component section app-column flex flex-col border-b border-solid border-border ',
+        'xl:w-87.5 xsm-only:!w-full sm-only:!w-full md-only:!w-52 lg-only:!w-52',
+      )}
       aria-label={'Notes & Files'}
       ref={itemsViewPanelRef}
     >

diff --git a/packages/web/src/javascripts/Components/Navigation/Navigation.tsx b/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
@@ -10,7 +10,6 @@ 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
@@ -20,7 +19,6 @@ 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 () => {
@@ -51,37 +49,21 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
   return (
     <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',
-      )}
+      className={'sn-component section app-column w-[220px] xsm-only:!w-full sm-only:!w-full'}
       ref={ref}
     >
       <ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content">
-        {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>
+        <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>
             </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(
@@ -90,8 +72,8 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
             'md:hover:[overflow-y:_overlay]',
           )}
         >
-          <SmartViewsSection viewControllerManager={viewControllerManager} isCollapsed={!isPanelExpanded} />
-          <TagsSection viewControllerManager={viewControllerManager} isCollapsed={!isPanelExpanded} />
+          <SmartViewsSection viewControllerManager={viewControllerManager} />
+          <TagsSection viewControllerManager={viewControllerManager} />
         </div>
       </ResponsivePaneContent>
       {ref.current && (

diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -36,6 +36,7 @@ import {
 import { reloadFont } from './FontFunctions'
 import { NoteViewProps } from './NoteViewProps'
 import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 const MINIMUM_STATUS_DURATION = 400
 const TEXTAREA_DEBOUNCE = 100
@@ -911,7 +912,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
 
           {this.note && (
             <div id="editor-title-bar" className="content-title-bar section-title-bar z-editor-title-bar w-full">
-              <div className="mb-2 flex flex-wrap items-center justify-between gap-2 md:mb-0 md:flex-nowrap md:gap-0">
+              <div className="mb-2 flex flex-wrap items-start justify-between gap-2 md:mb-0 md:flex-nowrap md:gap-0 xl:items-center">
                 <div className={(this.state.noteLocked ? 'locked' : '') + ' flex-grow'}>
                   <div className="title overflow-auto">
                     <input
@@ -929,9 +930,14 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                     />
                   </div>
                 </div>
-                <div className="flex flex-col flex-wrap items-start gap-3 md:flex-row md:flex-nowrap md:items-center">
+                <div
+                  className={classNames(
+                    'flex flex-col flex-wrap items-start gap-3 md:flex-col-reverse md:items-end',
+                    'xl:flex-row xl:flex-nowrap xl:items-center',
+                  )}
+                >
                   {this.state.noteStatus?.message?.length && (
-                    <div id="save-status-container">
+                    <div id="save-status-container" className={'xl:mr-5 xl:max-w-[16ch]'}>
                       <div id="save-status">
                         <div
                           className={

diff --git a/packages/web/src/javascripts/Components/Tags/SmartViewsList.tsx b/packages/web/src/javascripts/Components/Tags/SmartViewsList.tsx
@@ -5,10 +5,9 @@ import SmartViewsListItem from './SmartViewsListItem'
 
 type Props = {
   viewControllerManager: ViewControllerManager
-  isCollapsed: boolean
 }
 
-const SmartViewsList: FunctionComponent<Props> = ({ viewControllerManager, isCollapsed }: Props) => {
+const SmartViewsList: FunctionComponent<Props> = ({ viewControllerManager }: Props) => {
   const allViews = viewControllerManager.navigationController.smartViews
 
   return (
@@ -20,7 +19,6 @@ const SmartViewsList: FunctionComponent<Props> = ({ viewControllerManager, isCol
             view={view}
             tagsState={viewControllerManager.navigationController}
             features={viewControllerManager.featuresController}
-            isCollapsed={isCollapsed}
           />
         )
       })}

diff --git a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -21,7 +21,6 @@ type Props = {
   view: SmartView
   tagsState: NavigationController
   features: FeaturesController
-  isCollapsed: boolean
 }
 
 const PADDING_BASE_PX = 14
@@ -47,7 +46,7 @@ const smartViewIconType = (view: SmartView, isSelected: boolean): IconType => {
   return 'hashtag'
 }
 
-const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, isCollapsed }) => {
+const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
   const { toggleAppPane } = useResponsiveAppPane()
 
   const [title, setTitle] = useState(view.title || '')
@@ -113,31 +112,19 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, isColla
   return (
     <>
       <div
-        className={classNames(
-          'tag',
-          isSelected && 'selected',
-          isFaded && 'opacity-50',
-          isCollapsed && '!bg-transparent',
-        )}
+        className={classNames('tag', isSelected && 'selected', isFaded && 'opacity-50')}
         onClick={selectCurrentTag}
         style={{
           paddingLeft: `${level * PADDING_PER_LEVEL_PX + PADDING_BASE_PX}px`,
         }}
       >
-        <div className="tag-info relative">
-          <div
-            className={classNames(
-              isCollapsed
-                ? `relative flex h-[40px] w-[40px] items-center justify-center
-                  ${isSelected ? 'transparent-info-color-background' : 'transparent-info-color-background-hover'}`
-                : 'tag-icon mr-2',
-            )}
-          >
+        <div className="tag-info">
+          <div className={'tag-icon mr-2'}>
             <Icon type={iconType} className={isSelected ? 'text-info' : 'text-neutral'} />
           </div>
           {isEditing ? (
             <input
-              className={classNames('title editing', isCollapsed ? 'hidden' : 'block')}
+              className={'title editing'}
               id={`react-tag-${view.uuid}`}
               onBlur={onBlur}
               onInput={onInput}
@@ -147,19 +134,14 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, isColla
               ref={inputRef}
             />
           ) : (
-            <div
-              className={classNames('title overflow-hidden text-left', isCollapsed ? 'hidden' : 'block')}
-              id={`react-tag-${view.uuid}`}
-            >
+            <div className={'title overflow-hidden text-left'} id={`react-tag-${view.uuid}`}>
               {title}
             </div>
           )}
-          <div className={classNames('count', isCollapsed ? 'absolute top-0 right-0' : '')}>
-            {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
-          </div>
+          <div className={'count'}>{view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}</div>
         </div>
 
-        {!isSystemView(view) && !isCollapsed && (
+        {!isSystemView(view) && (
           <div className="meta">
             {view.conflictOf && (
               <div className="danger text-[0.625rem] font-bold">Conflicted Copy {view.conflictOf}</div>

diff --git a/packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx b/packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx
@@ -5,13 +5,12 @@ import SmartViewsList from './SmartViewsList'
 
 type Props = {
   viewControllerManager: ViewControllerManager
-  isCollapsed: boolean
 }
 
-const SmartViewsSection: FunctionComponent<Props> = ({ viewControllerManager, isCollapsed }) => {
+const SmartViewsSection: FunctionComponent<Props> = ({ viewControllerManager }) => {
   return (
     <section>
-      <SmartViewsList viewControllerManager={viewControllerManager} isCollapsed={isCollapsed} />
+      <SmartViewsList viewControllerManager={viewControllerManager} />
     </section>
   )
 }

diff --git a/packages/web/src/javascripts/Components/Tags/TagsList.tsx b/packages/web/src/javascripts/Components/Tags/TagsList.tsx
@@ -9,10 +9,9 @@ import { TagsListItem } from './TagsListItem'
 
 type Props = {
   viewControllerManager: ViewControllerManager
-  isCollapsed: boolean
 }
 
-const TagsList: FunctionComponent<Props> = ({ viewControllerManager, isCollapsed }: Props) => {
+const TagsList: FunctionComponent<Props> = ({ viewControllerManager }: Props) => {
   const tagsState = viewControllerManager.navigationController
   const allTags = tagsState.allLocalRootTags
 
@@ -53,7 +52,6 @@ const TagsList: FunctionComponent<Props> = ({ viewControllerManager, isCollapsed
                 tagsState={tagsState}
                 features={viewControllerManager.featuresController}
                 onContextMenu={onContextMenu}
-                isCollapsed={isCollapsed}
               />
             )
           })}