Add bottom bar to editor

Author: Rokt33r

src/components/atoms/BottomBarButton.tsx

@@ -0,0 +1,36 @@
+import React, { MouseEventHandler, FC } from 'react'
+import styled from '../../lib/styled'
+import { flexCenter, borderLeft } from '../../lib/styled/styleFunctions'
+
+interface BottomBarButtonProps {
+  className?: string
+  onClick?: MouseEventHandler<HTMLButtonElement>
+}
+
+const BottomBarButton: FC<BottomBarButtonProps> = ({
+  className,
+  onClick,
+  children,
+}) => {
+  return (
+    <Container className={className} onClick={onClick}>
+      {children}
+    </Container>
+  )
+}
+
+export default BottomBarButton
+
+const Container = styled.button`
+  background-color: transparent;
+  border: none;
+  color: ${({ theme }) => theme.uiTextColor};
+  font-size: 14px;
+  ${flexCenter}
+  padding: 0 5px;
+  ${borderLeft}
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.navItemHoverBackgroundColor};
+  }
+`

src/components/molecules/EditorIndentationStatus.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react'
+import { usePreferences } from '../../lib/preferences'
+import { openContextMenu } from '../../lib/electronOnly'
+import { MenuItemConstructorOptions } from 'electron'
+import { capitalize } from '../../lib/string'
+import BottomBarButton from '../atoms/BottomBarButton'
+
+const EditorIndentationStatus = () => {
+  const { preferences, setPreferences } = usePreferences()
+  const currentIndentType = preferences['editor.indentType']
+  const currentIndentSize = preferences['editor.indentSize']
+
+  const openEditorIndentationContextMenu = useCallback(() => {
+    openContextMenu({
+      menuItems: [
+        {
+          type: 'submenu',
+          label: `Indent Size: ${capitalize(currentIndentType)}`,
+          submenu: [
+            {
+              type: 'radio',
+              label: 'Spaces',
+              checked: currentIndentType === 'spaces',
+              click: () => {
+                setPreferences({
+                  'editor.indentType': 'spaces',
+                })
+              },
+            },
+            {
+              type: 'normal',
+              label: 'Tab',
+              checked: currentIndentType === 'tab',
+              click: () => {
+                setPreferences({
+                  'editor.indentType': 'tab',
+                })
+              },
+            },
+          ] as MenuItemConstructorOptions[],
+        },
+        {
+          type: 'submenu',
+          label: `Indent Size: ${currentIndentSize}`,
+          submenu: ([2, 4, 8] as [2, 4, 8]).map((indentSize) => {
+            return {
+              type: 'radio',
+              label: `${indentSize}`,
+              checked: currentIndentSize === indentSize,
+              click: () => {
+                setPreferences({
+                  'editor.indentSize': indentSize,
+                })
+              },
+            }
+          }) as MenuItemConstructorOptions[],
+        },
+      ] as MenuItemConstructorOptions[],
+    })
+  }, [currentIndentType, currentIndentSize, setPreferences])
+
+  return (
+    <BottomBarButton onClick={openEditorIndentationContextMenu}>
+      {capitalize(currentIndentType)}: {currentIndentSize}
+    </BottomBarButton>
+  )
+}
+
+export default EditorIndentationStatus

src/components/molecules/EditorKeyMapSelect.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react'
+import { usePreferences } from '../../lib/preferences'
+import { openContextMenu } from '../../lib/electronOnly'
+import { MenuItemConstructorOptions } from 'electron'
+import BottomBarButton from '../atoms/BottomBarButton'
+import Icon from '../atoms/Icon'
+import { mdiKeyboard } from '@mdi/js'
+
+const EditorKeyMapSelect = () => {
+  const { preferences, setPreferences } = usePreferences()
+  const editorKeyMap = preferences['editor.keyMap']
+
+  const openThemeContextMenu = useCallback(() => {
+    openContextMenu({
+      menuItems: (['default', 'emacs', 'vim'] as [
+        'default',
+        'emacs',
+        'vim'
+      ]).map((keyMap) => {
+        return {
+          type: 'radio',
+          label: keyMap,
+          checked: keyMap === editorKeyMap,
+          click: () => {
+            setPreferences({
+              'editor.keyMap': keyMap,
+            })
+          },
+        } as MenuItemConstructorOptions
+      }),
+    })
+  }, [setPreferences, editorKeyMap])
+
+  return (
+    <BottomBarButton onClick={openThemeContextMenu}>
+      <Icon path={mdiKeyboard} />
+    </BottomBarButton>
+  )
+}
+
+export default EditorKeyMapSelect

src/components/molecules/EditorSelectionStatus.tsx

@@ -44,6 +44,8 @@ export default EditorSelectionStatus
 
 const Container = styled.div`
   padding: 0 5px;
+  height: 24px;
+  font-size: 14px;
   color: ${({ theme }) => theme.uiTextColor};
   user-select: none;
 `

src/components/molecules/EditorThemeSelect.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback } from 'react'
+import { usePreferences } from '../../lib/preferences'
+import { openContextMenu } from '../../lib/electronOnly'
+import { MenuItemConstructorOptions } from 'electron'
+import BottomBarButton from '../atoms/BottomBarButton'
+import Icon from '../atoms/Icon'
+import { mdiPaletteOutline } from '@mdi/js'
+import { themes } from '../../lib/CodeMirror'
+
+const EditorThemeSelect = () => {
+  const { preferences, setPreferences } = usePreferences()
+  const editorTheme = preferences['editor.theme']
+  const codeBlockTheme = preferences['markdown.codeBlockTheme']
+
+  const openThemeContextMenu = useCallback(() => {
+    openContextMenu({
+      menuItems: [
+        {
+          type: 'submenu',
+          label: `Editor Theme: ${editorTheme}`,
+          submenu: themes.map((theme) => {
+            return {
+              type: 'radio',
+              label: theme,
+              checked: editorTheme === theme,
+              click: () => {
+                setPreferences({ 'editor.theme': theme })
+              },
+            } as MenuItemConstructorOptions
+          }),
+        },
+        {
+          type: 'submenu',
+          label: `Markdown Code Block Theme: ${codeBlockTheme}`,
+          submenu: themes.map((theme) => {
+            return {
+              type: 'radio',
+              label: theme,
+              checked: codeBlockTheme === theme,
+              click: () => {
+                setPreferences({ 'markdown.codeBlockTheme': theme })
+              },
+            } as MenuItemConstructorOptions
+          }),
+        },
+      ] as MenuItemConstructorOptions[],
+    })
+  }, [editorTheme, codeBlockTheme, setPreferences])
+
+  return (
+    <BottomBarButton onClick={openThemeContextMenu}>
+      <Icon path={mdiPaletteOutline} />
+    </BottomBarButton>
+  )
+}
+
+export default EditorThemeSelect

src/components/organisms/NoteDetail.tsx

@@ -21,6 +21,9 @@ import {
 } from '../../lib/dom'
 import { EditorPosition } from '../../lib/CodeMirror'
 import EditorSelectionStatus from '../molecules/EditorSelectionStatus'
+import EditorIndentationStatus from '../molecules/EditorIndentationStatus'
+import EditorThemeSelect from '../molecules/EditorThemeSelect'
+import EditorKeyMapSelect from '../molecules/EditorKeymapSelect'
 
 type NoteDetailProps = {
   note: NoteDoc
@@ -333,6 +336,9 @@ class NoteDetail extends React.Component<NoteDetailProps, NoteDetailState> {
             cursor={currentCursor}
             selections={currentSelections}
           />
+          <EditorKeyMapSelect />
+          <EditorThemeSelect />
+          <EditorIndentationStatus />
         </div>
       </Container>
     )
@@ -347,7 +353,12 @@ const Container = styled.div`
   flex-direction: column;
   height: 100%;
   & > .bottomBar {
+    display: flex;
     ${borderTop}
+    height: 24px;
+    & > :first-child {
+      flex: 1;
+    }
   }
 `