feat: improve topbar ui and make sidebar always temporary

slater-notes · Apr 23, 2021 · 4c1052e · 4c1052e
1 parent 85f3687
commit 4c1052e
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 259 deletions.
diff --git a/src/config/defaultUserSettings.ts b/src/config/defaultUserSettings.ts
@@ -1,9 +1,5 @@
-export interface UserSettingsOptions {
-  alwaysShowSidebar: boolean;
-}
+export interface UserSettingsOptions {}
 
-export const defaultUserSettings: UserSettingsOptions = {
-  alwaysShowSidebar: false,
-};
+export const defaultUserSettings: UserSettingsOptions = {};
 
 export default defaultUserSettings;
diff --git a/src/containers/Dialogs/Settings/index.tsx b/src/containers/Dialogs/Settings/index.tsx
@@ -7,16 +7,14 @@ import {
   ListSubheader,
   makeStyles,
   Paper,
-  Switch,
   Tab,
   Tabs,
   useTheme,
 } from '@material-ui/core';
 import { useState } from 'react';
 import DefaultButton from '../../../components/Buttons/DefaultButton';
 import DefaultDialog from '../../../components/Dialogs/DefaultDialog';
-import defaultUserSettings from '../../../config/defaultUserSettings';
-import { useStoreActions, useStoreState } from '../../../store/typedHooks';
+import { useStoreState } from '../../../store/typedHooks';
 import ChangeUsername from '../ChangeUsername';
 
 const latestVersion = process.env.REACT_APP_VERSION;
@@ -31,11 +29,6 @@ const Settings = () => {
 
   const user = useStoreState((s) => s.user);
 
-  const mySettings = useStoreState((s) => s.settings);
-  const settings = { ...defaultUserSettings, ...mySettings };
-
-  const updateSettings = useStoreActions((a) => a.updateSettings);
-
   return (
     <div>
       <Paper square>
@@ -45,31 +38,12 @@ const Settings = () => {
           textColor='primary'
           onChange={(_e, tab) => setTab(tab)}
         >
-          <Tab label='Appearance' />
           <Tab label='Account' />
           <Tab label='About' />
         </Tabs>
       </Paper>
 
       <div className={classes.tabContent} style={{ display: tab === 0 ? 'block' : 'none' }}>
-        <List subheader={<ListSubheader>Sidebar</ListSubheader>}>
-          <ListItem>
-            <ListItemText
-              primary='Show sidebar'
-              secondary='Prefer to show the sidebar when it fits within the screen.'
-            />
-            <ListItemSecondaryAction>
-              <Switch
-                checked={settings.alwaysShowSidebar}
-                color='primary'
-                onChange={(e) => updateSettings({ alwaysShowSidebar: e.target.checked })}
-              />
-            </ListItemSecondaryAction>
-          </ListItem>
-        </List>
-      </div>
-
-      <div className={classes.tabContent} style={{ display: tab === 1 ? 'block' : 'none' }}>
         <List subheader={<ListSubheader>Username</ListSubheader>}>
           <ListItem>
             <ListItemText
@@ -98,7 +72,7 @@ const Settings = () => {
           </ListItem>
         </List>
       </div>
-      <div className={classes.tabContent} style={{ display: tab === 2 ? 'block' : 'none' }}>
+      <div className={classes.tabContent} style={{ display: tab === 1 ? 'block' : 'none' }}>
         <List>
           <ListItem>
             <ListItemText primary={<b>Slater Notes (v{latestVersion})</b>} />

diff --git a/src/containers/Note/NotePage.tsx b/src/containers/Note/NotePage.tsx
@@ -98,49 +98,59 @@ const NotePage = ({ note }: Props) => {
         className={classes.content}
         style={{ opacity: note.noteItem.isDeleted ? 0.3 : undefined }}
       >
-        <EditableTypography
-          ref={inputRef}
-          text={title}
-          placeholder='Untitled'
-          disabled={note.noteItem.isDeleted}
-          className={[classes.title, 'note-page__title-input'].join(' ')}
-          typographyProps={{
-            variant: 'h4',
-            component: 'div',
-          }}
-          onChange={(value) => {
-            setTitle(value);
-            setLastTitleEdit(now());
-            setSaved(false);
-            saveNoteItemDebounced(value);
-          }}
-        />
-
-        <Editor
-          readOnly={!!note.noteItem.isDeleted}
-          value={content}
-          setValue={(content) => {
-            setContent(content);
-            setLastContentEdit(now());
-            setSaved(false);
-            handleSaveNoteContentDebounced(content);
-          }}
-        />
+        <div className={classes.contentInner}>
+          <EditableTypography
+            ref={inputRef}
+            text={title}
+            placeholder='Untitled'
+            disabled={note.noteItem.isDeleted}
+            className={[classes.title, 'note-page__title-input'].join(' ')}
+            typographyProps={{
+              variant: 'h4',
+              component: 'div',
+            }}
+            onChange={(value) => {
+              setTitle(value);
+              setLastTitleEdit(now());
+              setSaved(false);
+              saveNoteItemDebounced(value);
+            }}
+          />
+
+          <Editor
+            readOnly={!!note.noteItem.isDeleted}
+            value={content}
+            setValue={(content) => {
+              setContent(content);
+              setLastContentEdit(now());
+              setSaved(false);
+              handleSaveNoteContentDebounced(content);
+            }}
+          />
+        </div>
       </div>
     </div>
   );
 };
 
 const useStyles = makeStyles((theme) => ({
   container: {
-    width: 1000,
-    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100vh',
   },
 
   content: {
+    flex: 1,
+    overflowX: 'auto',
     padding: `${theme.spacing(6)}px ${theme.spacing(8)}px`,
   },
 
+  contentInner: {
+    width: 1000,
+    margin: '0 auto',
+  },
+
   title: {
     color: theme.palette.text.primary,
     fontWeight: theme.typography.fontWeightBold,