Progress

2020-04-30 00:34:50 -04:00
parent 03de4c4fea
commit 8673eb8975
26 changed files with 406 additions and 164 deletions
--- a/app/javascript/gabsocial/components/error_boundary.js
+++ b/app/javascript/gabsocial/components/error_boundary.js
@@ -1,3 +1,5 @@
+import Layout from '../layouts/layout'
+
 export default class ErrorBoundary extends PureComponent {

  static propTypes = {
--- a/app/javascript/gabsocial/components/modal/display_options_modal.js
+++ b/app/javascript/gabsocial/components/modal/display_options_modal.js
@@ -1,24 +1,30 @@
 import { injectIntl, defineMessages } from 'react-intl'
-import { muteAccount } from '../../actions/accounts'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import Text from '../text'
+import SettingSwitch from '../setting_switch'

 const messages = defineMessages({
-  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  title: { id: 'display_options', defaultMessage: 'Display Options' },
+  message: { id: 'display_options.message', defaultMessage: 'Display settings affect your Gab account on this browser. These settings are only visible to you.' },
+  title: { id: 'display_options', defaultMessage: 'Customize your view' },
 })

 const mapStateToProps = (state) => ({
-  
+  settings: state.getIn(['notifications', 'filter']),
 })

 const mapDispatchToProps = (dispatch) => ({
-  
+  onChange(path, value) {
+    dispatch(setFilter(path, value))
+  },
 })

 export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
-class DisplayOptionsModal extends PureComponent {
+class DisplayOptionsModal extends ImmutablePureComponent {

  static propTypes = {
    isSubmitting: PropTypes.bool.isRequired,
@@ -26,10 +32,8 @@ class DisplayOptionsModal extends PureComponent {
    onConfirm: PropTypes.func.isRequired,
    onClose: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
-  }
-
-  componentDidMount() {
-    this.button.focus()
+    onChange: PropTypes.func.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
  }

  handleClick = () => {
@@ -37,20 +41,107 @@ class DisplayOptionsModal extends PureComponent {
    this.props.onConfirm(this.props.account, this.props.notifications)
  }

-  handleCancel = () => {
-    this.props.onClose()
-  }
-
  // document.documentElement.style.setProperty("--color-surface", "black");
  
  render() {
-    const { account, intl } = this.props
+    const {
+      account,
+      intl,
+      settings,
+      onChange,
+      onClose,
+    } = this.props
+
+    // theme - light, muted, dark
+    // text size - extra small, small, normal, medium, large, extra large
+    // rounded borders

    return (
      <ModalLayout
-        width={320}
+        onClose={onClose}
+        width={520}
        title={intl.formatMessage(messages.title)}
      >
+
+        <div className={[_s.default, _s.mb15].join(' ')}>
+          <Text>
+            {intl.formatMessage(messages.message)}
+          </Text>
+        </div>
+
+        <div className={[_s.default, _s.mb10].join(' ')}>
+          <Text weight='bold' color='secondary'>
+            Font Size
+          </Text>
+          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+            test
+          </div>
+        </div>
+
+        <div className={[_s.default, _s.mb10].join(' ')}>
+          <Text weight='bold' color='secondary'>
+            Rounded
+          </Text>
+          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+            <SettingSwitch
+              prefix='notification'
+              settings={settings}
+              settingPath={'onlyVerified'}
+              onChange={onChange}
+              label={'Small Radius'}
+            />
+
+            <SettingSwitch
+              prefix='notification'
+              settings={settings}
+              settingPath={'onlyVerified'}
+              onChange={onChange}
+              label={'Circle Radius'}
+            />
+          </div>
+        </div>
+
+        <div className={[_s.default, _s.mb10].join(' ')}>
+          <Text weight='bold' color='secondary'>
+            Theme
+          </Text>
+          <div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+
+            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
+                <Text>
+                  Light
+                </Text>
+              </div>
+            </div>
+
+            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
+                <Text>
+                  Muted
+                </Text>
+              </div>
+            </div>
+
+            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
+                <Text>
+                  Black
+                </Text>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        
+        <div className={[_s.mlAuto, _s.mrAuto].join(' ')}>
+          <Button>
+            <Text size='medium' color='inherit'>
+              Done
+            </Text>
+          </Button>
+        </div>
+
      </ModalLayout> 
    )
  }
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar.js
@@ -1,14 +1,15 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { NavLink } from 'react-router-dom'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
 import Responsive from '../features/ui/util/responsive_component'
 import { CX } from '../constants'
-import Search from './search'
 import Avatar from './avatar'
+import Button from './button'
 import Icon from './icon'
+import Search from './search'
+import Text from './text'

 const mapStateToProps = (state) => ({
  account: makeGetAccount()(state, me),
@@ -48,9 +49,9 @@ class NavigationBar extends ImmutablePureComponent {
            <div className={[_s.default, _s.flexRow].join(' ')}>

              <h1 className={[_s.default, _s.mr15].join(' ')}>
-                <NavLink to='/' aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
+                <Button to='/' aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
                  <Icon id='gab-logo' className={_s.fillWhite} />
-                </NavLink>
+                </Button>
              </h1>

              <Responsive min={BREAKPOINT_EXTRA_SMALL}>
@@ -68,12 +69,12 @@ class NavigationBar extends ImmutablePureComponent {
                <NavigationBarButtonDivider />

                <NavigationBarButton icon='notifications' to='/notifications' />
-                <NavigationBarButton icon='cog' to='/notifications' />
+                <NavigationBarButton icon='cog' href='/settings/preferences' />

                <NavigationBarButtonDivider />

                <button onClick={this.handleProfileClick} className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter, _s.ml15].join(' ')}>
-                  <Avatar account={account} size={32} />
+                  <Avatar account={account} size={32} noHover />
                </button>
              </div>
            </div>
@@ -103,7 +104,7 @@ class NavigationBarButton extends PureComponent {
    title: PropTypes.string,
    icon: PropTypes.string,
    to: PropTypes.string,
-    onClick: PropTypes.func,
+    href: PropTypes.string,
  }

  render() {
@@ -111,7 +112,7 @@ class NavigationBarButton extends PureComponent {
      title,
      icon,
      to,
-      onClick,
+      href,
    } = this.props

    const active = false
@@ -131,6 +132,7 @@ class NavigationBarButton extends PureComponent {
      fs13PX: !!title,
      fontWeightNormal: !!title,
      textUppercase: !!title,
+      noUnderline: 1,
    })

    const iconClasses = CX({
@@ -142,14 +144,21 @@ class NavigationBarButton extends PureComponent {
    const iconSize = !!title ? 16 : 18

    return (
-      <button
-        noClasses
+      <Button
+        to={to}
+        href={href}
        color='white'
        className={classes}
+        noClasses
      >
        <Icon className={iconClasses} id={icon} size={iconSize} />
-        {title}
-      </button>
+        {
+          !!title &&
+          <Text color='white'>
+            {title}
+          </Text>
+        }
+      </Button>
    )
  }

--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar.js
@@ -153,11 +153,6 @@ class Sidebar extends ImmutablePureComponent {
        icon: 'list',
        to: '/lists',
      },
-      {
-        title: 'Chat',
-        icon: 'chat',
-        href: 'https://chat.gab.com',
-      },
      {
        title: 'More',
        icon: 'more',
@@ -183,6 +178,11 @@ class Sidebar extends ImmutablePureComponent {
    ]

    const exploreItems = [
+      {
+        title: 'Chat',
+        icon: 'chat',
+        href: 'https://chat.gab.com',
+      },
      {
        title: 'Apps',
        icon: 'apps',
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -52,7 +52,7 @@ export default class SidebarSectionItem extends PureComponent {
    const { hovering } = this.state

    const iconSize = '16px'
-    const currentPathname = this.context.router.route.location.pathname
+    const currentPathname = this.context.router ? this.context.router.route.location.pathname : undefined
    const shouldShowActive = hovering || active || currentPathname === to || currentPathname === href
    const isNotifications = to === '/notifications'