fix breaks from bad merge (/revert order)

digidem · Jul 4, 2023 · 84d135f · 84d135f
1 parent 795f894
commit 84d135f
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 55 deletions.
diff --git a/src/renderer/components/Home.js b/src/renderer/components/Home.js
@@ -18,8 +18,9 @@ import TitleBarShim from './TitleBarShim'
 import { defineMessages, useIntl } from 'react-intl'
 import createPersistedState from '../hooks/createPersistedState'
 import SyncView from './SyncView'
-import { SettingsView } from './SettingsView'
 import { STATES as updateStates, UpdaterView, UpdateTab } from './UpdaterView'
+import { SettingsView } from './SettingsView'
+
 import useUpdater from './UpdaterView/useUpdater'
 import Loading from './Loading'
 import buildConfig from '../../build-config'

diff --git a/src/renderer/components/SettingsView/AboutMapeo.js b/src/renderer/components/SettingsView/AboutMapeo.js
@@ -1,6 +1,58 @@
 import React from 'react'
 import Paper from '@material-ui/core/Paper'
-
+import styled from 'styled-components'
+import { Typography, useTheme } from '@material-ui/core'
+import { defineMessages, useIntl } from 'react-intl'
+import buildConfig from '../../../build-config'
+const m = defineMessages({
+  mapeoVersion: 'Mapeo Version',
+  mapeoVariant: 'Mapeo Variant'
+})
 export const AboutMapeoMenu = () => {
-  return <Paper></Paper>
+  console.log('test')
+  const { formatMessage: t } = useIntl()
+  return (
+    <Container>
+      <KeyValuePair
+        label={t(m.mapeoVersion)}
+        value={buildConfig.version}
+      ></KeyValuePair>
+      <KeyValuePair
+        label={t(m.mapeoVariant)}
+        value={buildConfig.variant}
+      ></KeyValuePair>
+    </Container>
+  )
 }
+const KeyValuePair = ({ label, value }) => {
+  const theme = useTheme()
+  return (
+    <Column>
+      <Typography variant='body1' component='label' style={{ fontWeight: 500 }}>
+        {label}
+      </Typography>
+      <Typography
+        variant='caption'
+        component='label'
+        style={{ color: theme.palette.grey['700'] }}
+      >
+        {value}
+      </Typography>
+    </Column>
+  )
+}
+const Container = styled(Paper)`
+  width: 300px;
+  padding: 1.2em 1em 1em 1em;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  &.MuiPaper-rounded {
+    border-radius: 0;
+  }
+`
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.1em;
+`
diff --git a/src/renderer/components/SettingsView/SettingsMenu.js b/src/renderer/components/SettingsView/SettingsMenu.js
@@ -2,48 +2,53 @@ import * as React from 'react'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
 import { useIntl } from 'react-intl'
+import ChevronRightIcon from '@material-ui/icons/ChevronRight'
 import styled from 'styled-components'
-import { Paper, Typography } from '@material-ui/core'
+import { Paper, Typography, useTheme } from '@material-ui/core'
 
 export const SettingsMenu = ({ tabs, currentTab, onTabChange }) => {
-  const { formatMessage: t } = useIntl()
-
   return (
-    <Tabs
-      orientation='vertical'
-      value={currentTab}
-      onChange={(e, newValue) => onTabChange(newValue)}
+    <Paper
       style={{
-        maxWidth: '300px'
+        width: 300,
+        height: '100vh',
+        borderRadius: 0
       }}
     >
-      {tabs.map((tab, index) => (
-        <Tab
-          orientation='vertical'
-          key={tab.tabId}
-          value={tab.tabId}
-          component={RenderTab}
-          tab={tab}
-          active={tab.tabId === currentTab}
-        />
-      ))}
-    </Tabs>
+      <StyledTabs
+        orientation='vertical'
+        value={currentTab}
+        onChange={(e, newValue) => onTabChange(newValue)}
+      >
+        {tabs.map((tab, index) => (
+          <Tab
+            disableRipple
+            orientation='vertical'
+            key={tab.tabId}
+            value={tab.tabId}
+            component={RenderTab}
+            tab={tab}
+            active={tab.tabId === currentTab}
+          />
+        ))}
+      </StyledTabs>
+    </Paper>
   )
 }
 
-const RenderTab = ({
-  tab: { icon: Icon, label, subtitle },
-  active,
-  ...rest
-}) => {
-  const { formatMessage: t } = useIntl()
-
-  console.log({ active, rest })
+const RenderTab = React.forwardRef(
+  (
+    { tab: { icon: Icon, label, subtitle }, active, children, ...rest },
+    ref
+  ) => {
+    const { formatMessage: t } = useIntl()
+    const theme = useTheme()
 
-  return (
-    <Paper {...rest}>
-      <WrapperRow>
-        <IconContainer>{Icon ? <Icon /> : null}</IconContainer>
+    return (
+      <WrapperRow ref={ref} {...rest}>
+        <IconContainer>
+          {Icon ? <Icon style={{ color: theme.palette.grey['600'] }} /> : null}
+        </IconContainer>
         <TitleContainer>
           <Typography
             variant='body1'
@@ -54,24 +59,38 @@ const RenderTab = ({
               cursor: 'pointer'
             }}
           >
-            {t(label)}
+            {typeof label === 'string' ? label : t(label)}
           </Typography>
           <Typography
             variant='caption'
             component='label'
             style={{
               textTransform: 'none',
               textAlign: 'left',
-              cursor: 'pointer'
+              cursor: 'pointer',
+              color: theme.palette.grey['700']
             }}
           >
-            {subtitle}
+            {typeof subtitle === 'string' ? subtitle : t(subtitle)}
           </Typography>
         </TitleContainer>
+        <ChevronRightIcon style={{ opacity: active ? 1 : 0 }} />
       </WrapperRow>
-    </Paper>
-  )
-}
+    )
+  }
+)
+
+const StyledTabs = styled(Tabs)`
+  height: 100vh;
+  padding-top: 1em;
+  & .MuiTabs-indicator {
+    display: none;
+  }
+
+  & .MuiTab-root {
+    max-width: 100%;
+  }
+`
 
 const Row = styled.div`
   display: flex;
@@ -84,13 +103,14 @@ const Column = styled.div`
 `
 
 const WrapperRow = styled(Row)`
-  padding: 10px;
+  padding: 20px;
   align-items: center;
+  justify-content: space-between;
 `
 
 const IconContainer = styled.div`
   flex: 1;
-  padding: 10px;
+  padding: 10px 30px 10px 10px;
   display: flex;
   align-items: center;
 `

diff --git a/src/renderer/components/SettingsView/index.js b/src/renderer/components/SettingsView/index.js
@@ -1,41 +1,48 @@
 import React, { useState } from 'react'
 import Paper from '@material-ui/core/Paper'
-import InfoIcon from '@material-ui/icons/Info'
+import InfoIcon from '@material-ui/icons/InfoOutlined'
 import { SettingsMenu } from './SettingsMenu'
 import { defineMessages } from 'react-intl'
 import { AboutMapeoMenu } from './AboutMapeo'
+import styled from 'styled-components'
 
 const m = defineMessages({
-  aboutMapeo: 'About Mapeo'
+  aboutMapeo: 'About Mapeo',
+  aboutMapeoSubtitle: 'Version and build number'
 })
 
 const tabs = /** @typedef {const} */ [
   {
     tabId: 'AboutMapeo',
     icon: InfoIcon,
     label: m.aboutMapeo,
-    subtitle: 'Version and build number'
+    subtitle: m.aboutMapeoSubtitle
+  },
+  {
+    tabId: 'TestItem',
+    icon: InfoIcon,
+    label: 'Test item',
+    subtitle: 'Item added to display multiple options'
   }
 ]
 
 export const SettingsView = () => {
-  const [menuItem, setMenuItem] = useState(null)
-
-  console.log({ menuItem })
+  const [menuItem, setMenuItem] = useState(tabs[0].tabId)
 
   return (
-    <div>
+    <Container>
       <SettingsMenu
         tabs={tabs}
         currentTab={menuItem}
         onTabChange={setMenuItem}
       />
 
-      {menuItem === 'AboutMapeo' && (
-        <Paper>
-          <AboutMapeoMenu />
-        </Paper>
-      )}
-    </div>
+      {menuItem === 'AboutMapeo' && <AboutMapeoMenu />}
+    </Container>
   )
 }
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+`