Updates to Gab Deck

• Updates: - to Gab Deck
2020-12-08 00:07:04 -05:00
parent 05c5dcb581
commit 6950f67520
16 changed files with 210 additions and 115 deletions
--- a/app/javascript/gabsocial/components/deck_column_header.js
+++ b/app/javascript/gabsocial/components/deck_column_header.js
@@ -16,17 +16,20 @@ class DeckColumnHeader extends React.PureComponent {

    return (
      <div className={[_s.d, _s.w100PC, _s.flexRow, _s.aiCenter, _s.h60PX, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgPrimary].join(' ')}>
-        <Icon id={icon} className={_s.cPrimary} size='20px' />
+        { !!icon && <Icon id={icon} className={_s.cPrimary} size='20px' /> }
        <div className={[_s.d, _s.flexRow, _s.aiEnd, _s.ml15].join(' ')}>
-          <Text size='large' weight='medium'>{title}</Text>
+          { !!title && <Text size='large' weight='medium'>{title}</Text> }
          { !!subtitle && <Text className={_s.ml5} size='small' color='secondary'>{subtitle}</Text> }
        </div>
        <div className={[_s.d, _s.aiCenter, _s.mlAuto, _s.jcCenter].join(' ')}>
-          <Button
-            color='primary'
-            backgroundColor='none'
-            icon='list'
-          />
+          {
+            !!title &&
+            <Button
+              color='primary'
+              backgroundColor='none'
+              icon='list'
+            />
+          }
        </div>
      </div>
    )
--- a/app/javascript/gabsocial/components/modal/deck_column_add_modal.js
+++ b/app/javascript/gabsocial/components/modal/deck_column_add_modal.js
@@ -0,0 +1,91 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { setDeckColumnAtIndex } from '../../actions/deck'
+import { saveSettings } from '../../actions/settings'
+import { openModal } from '../../actions/modal'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import Text from '../text'
+
+class DeckColumnAddModal extends React.PureComponent {
+
+  onAdd = (column) => {
+    switch (column) {
+      case 'user':
+        // 
+        break
+      case 'list':
+        // 
+        break
+      case 'groups':
+        // 
+        break
+      case 'group':
+        // 
+        break
+      default:
+        this.props.dispatch(setDeckColumnAtIndex(column))
+        this.props.dispatch(saveSettings())
+        break
+    }
+  }
+
+  render() {
+    const {
+      intl,
+      onClose,
+    } = this.props
+
+    return (
+      <ModalLayout
+        title='Choose a column type to add'
+        onClose={onClose}
+        width={520}
+      >
+        <div className={_s.d}>
+          <div className={[_s.d, _s.pl10, _s.borderBottom1PX, _s.borderColorSecondary, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
+            <DeckColumnAddModalButton icon='home' type='Home' onClick={() => this.onAdd('home')} />
+            <DeckColumnAddModalButton icon='group' type='User' onClick={() => this.onAdd('user')} />
+            <DeckColumnAddModalButton icon='notifications' type='Notifications' onClick={() => this.onAdd('home')} />
+          </div>
+          <div className={[_s.d, _s.pl10, _s.borderBottom1PX, _s.borderColorSecondary, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
+            <DeckColumnAddModalButton icon='list' type='List' onClick={() => this.onAdd('list')} />
+            <DeckColumnAddModalButton icon='like' type='Likes' onClick={() => this.onAdd('likes')} />
+            <DeckColumnAddModalButton icon='bookmark' type='Bookmarks' onClick={() => this.onAdd('bookmarks')} />
+          </div>
+          <div className={[_s.d, _s.pl10, _s.pb10, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
+            <DeckColumnAddModalButton icon='pro' type='PRO Timeline' onClick={() => this.onAdd('pro')} />
+            <DeckColumnAddModalButton icon='group' type='Groups Timeline' onClick={() => this.onAdd('groups')} />
+            <DeckColumnAddModalButton icon='group' type='Group Timeline' onClick={() => this.onAdd('group')} />
+          </div>
+        </div>
+      </ModalLayout>
+    )
+  }
+
+}
+
+const DeckColumnAddModalButton = ({ icon, type, onClick }) => (
+  <Button
+    radiusSmall
+    color='primary'
+    backgroundColor='none'
+    icon={icon}
+    iconSize='28px'
+    onClick={onClick}
+    iconClassName={[_s.px15, _s.pb5, _s.py10].join(' ')}
+    className={[_s.flexColumn, _s.bgSubtle_onHover, _s.my10, _s.mr10, _s.aiCenter, _s.flexNormal].join(' ')}
+  >
+    <Text color='inherit' size='medium' weight='medium' className={_s.pb5}>
+      {type}
+    </Text>
+  </Button>
+)
+
+
+DeckColumnAddModalButton.propTypes = {
+  onSetDeckColumnAtIndex: PropTypes.func.isRequired,
+}
+
+export default connect()(DeckColumnAddModal)
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -15,6 +15,7 @@ import {
  MODAL_COMMUNITY_TIMELINE_SETTINGS,
  MODAL_COMPOSE,
  MODAL_CONFIRM,
+  MODAL_DECK_COLUMN_ADD,
  MODAL_DISPLAY_OPTIONS,
  MODAL_EDIT_PROFILE,
  MODAL_EDIT_SHORTCUTS,
@@ -49,6 +50,7 @@ import {
  CommunityTimelineSettingsModal,
  ComposeModal,
  ConfirmationModal,
+  DeckColumnAddModal,
  DisplayOptionsModal,
  EditProfileModal,
  EditShortcutsModal,
@@ -86,6 +88,7 @@ const MODAL_COMPONENTS = {
  [MODAL_COMMUNITY_TIMELINE_SETTINGS]: CommunityTimelineSettingsModal,
  [MODAL_COMPOSE]: ComposeModal,
  [MODAL_CONFIRM]: ConfirmationModal,
+  [MODAL_DECK_COLUMN_ADD]: DeckColumnAddModal,
  [MODAL_DISPLAY_OPTIONS]: DisplayOptionsModal,
  [MODAL_EDIT_SHORTCUTS]: EditShortcutsModal,
  [MODAL_EDIT_PROFILE]: EditProfileModal,
--- a/app/javascript/gabsocial/components/notification.js
+++ b/app/javascript/gabsocial/components/notification.js
@@ -33,7 +33,7 @@ class Notification extends ImmutablePureComponent {
      statusId,
      isHidden,
      isUnread,
-      isCompact,
+      isDeckConnected,
    } = this.props
    
    const count = !!accounts ? accounts.size : 0
@@ -93,7 +93,7 @@ class Notification extends ImmutablePureComponent {

    const containerClasses = CX({
      d: 1,
-      px10: !isCompact,
+      px10: !isDeckConnected,
      cursorPointer: 1,
      bgSubtle_onHover: !isUnread,
      highlightedComment: isUnread,
@@ -109,7 +109,7 @@ class Notification extends ImmutablePureComponent {
          <div className={[_s.d, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>

            {
-              !isCompact &&
+              !isDeckConnected &&
              <Responsive min={BREAKPOINT_EXTRA_SMALL}>
                <Icon id={icon} size='20px' className={[_s.cPrimary, _s.minW20PX, _s.mt5, _s.mr15].join(' ')} />
              </Responsive>
@@ -195,7 +195,7 @@ Notification.propTypes = {
  type: PropTypes.string.isRequired,
  isHidden: PropTypes.bool,
  isUnread: PropTypes.bool,
-  isCompact: PropTypes.bool,
+  isDeckConnected: PropTypes.bool,
 }

 export default injectIntl(Notification)
--- a/app/javascript/gabsocial/components/sidebar/deck_sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar/deck_sidebar.js
@@ -5,33 +5,20 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { openPopover } from '../../actions/popover'
 import { changeSetting, saveSettings } from '../../actions/settings'
-import { resendUserConfirmationEmail } from '../../actions/user'
 import { openModal } from '../../actions/modal'
-import {
-  BREAKPOINT_EXTRA_SMALL,
-  MODAL_EMAIL_CONFIRMATION_REMINDER,
-} from '../../constants'
-import {
-  me,
-  meEmail,
-  emailConfirmed,
-} from '../../initial_state'
+import { me } from '../../initial_state'
 import { makeGetAccount } from '../../selectors'
-import Responsive from '../../features/ui/util/responsive_component'
 import {
-  CX,
  THEMES,
  DEFAULT_THEME,
  POPOVER_NAV_SETTINGS,
+  MODAL_DECK_COLUMN_ADD,
 } from '../../constants'
 import Avatar from '../avatar'
 import BackButton from '../back_button'
 import Button from '../button'
-import Heading from '../heading'
 import Icon from '../icon'
 import NavigationBarButton from '../navigation_bar_button'
-import Search from '../search'
-import Text from '../text'
 import Divider from '../divider'

 class DeckSidebar extends ImmutablePureComponent {
@@ -47,12 +34,8 @@ class DeckSidebar extends ImmutablePureComponent {
    this.props.onOpenNavSettingsPopover(this.avatarNode)
  }

-  handleOnClickResendConfirmationEmail = () => {
-    const { emailConfirmationResends } = this.props
-    if (emailConfirmationResends % 2 === 0 && emailConfirmationResends > 0) {
-      this.props.onOpenEmailModal()
-    }
-    this.props.onResendUserConfirmationEmail()
+  handleOnOpenNewColumnModel = () => {
+    this.props.onOpenNewColumnModal()
  }

  setAvatarNode = (c) => {
@@ -60,45 +43,12 @@ class DeckSidebar extends ImmutablePureComponent {
  }

  render() {
-    const {
-      title,
-      showBackBtn,
-      actions,
-      tabs,
-      account,
-      noActions,
-      logoDisabled,
-      unreadChatsCount,
-      notificationCount,
-    } = this.props
-
-    const navigationContainerClasses = CX({
-      d: 1,
-      z4: 1,
-      w76PX: 1,
-      w100PC: 1,
-    })
-
-    const innerNavigationContainerClasses = CX({
-      d: 1,
-      w76PX: 1,
-      bgNavigation: 1,
-      aiCenter: 1,
-      z3: 1,
-      top0: 1,
-      bottom0: 1,
-      left0: 1,
-      borderRight1PX: 1,
-      borderColorSecondary: 1,
-      posFixed: 1,
-    })
-
-    const isHome = title === 'Home'
+    const { account, logoDisabled } = this.props

    return (
-      <div className={navigationContainerClasses}>
+      <div className={[_s.d, _s.z4, _s.w76PX, _s.w100PC].join(' ')}>

-        <div className={innerNavigationContainerClasses}>
+        <div className={[_s.d, _s.w76PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.bottom0, _s.left0, _s.borderRight1PX, _s.borderColorSecondary, _s.posFixed].join(' ')}>

          <div className={[_s.d, _s.flexRow, _s.w76PX, _s.h100PC].join(' ')}>

@@ -128,7 +78,7 @@ class DeckSidebar extends ImmutablePureComponent {

                <Divider isSmall />

-                <NavigationBarButton title='&nbsp;' icon='add' />
+                <NavigationBarButton title='&nbsp;' icon='add' onClick={this.handleOnOpenNewColumnModel} />
              </div>

              <div className={[_s.d, _s.mtAuto, _s.aiCenter].join(' ')}>
@@ -159,25 +109,19 @@ class DeckSidebar extends ImmutablePureComponent {

 const mapStateToProps = (state) => ({
  account: makeGetAccount()(state, me),
-  emailConfirmationResends: state.getIn(['user', 'emailConfirmationResends'], 0),
  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
  logoDisabled: state.getIn(['settings', 'displayOptions', 'logoDisabled'], false),
-  notificationCount: state.getIn(['notifications', 'unread']),
-  unreadChatsCount: state.getIn(['chats', 'chatsUnreadCount']),
 })

 const mapDispatchToProps = (dispatch) => ({
  onOpenNavSettingsPopover(targetRef) {
    dispatch(openPopover(POPOVER_NAV_SETTINGS, {
      targetRef,
-      position: 'left-end',
+      position: 'right-start',
    }))
  },
-  onOpenEmailModal() {
-    dispatch(openModal(MODAL_EMAIL_CONFIRMATION_REMINDER))
-  },
-  onResendUserConfirmationEmail() {
-    dispatch(resendUserConfirmationEmail())
+  onOpenNewColumnModal() {
+    dispatch(openModal(MODAL_DECK_COLUMN_ADD))
  },
  onChange(key, value) {
    dispatch(changeSetting(['displayOptions', key], value))
@@ -187,17 +131,8 @@ const mapDispatchToProps = (dispatch) => ({

 DeckSidebar.propTypes = {
  account: ImmutablePropTypes.map,
-  actions: PropTypes.array,
-  tabs: PropTypes.array,
-  title: PropTypes.string,
-  showBackBtn: PropTypes.bool,
-  notificationCount: PropTypes.number.isRequired,
-  unreadChatsCount: PropTypes.number.isRequired,
  onOpenNavSettingsPopover: PropTypes.func.isRequired,
-  onOpenEmailModal: PropTypes.func.isRequired,
-  onResendUserConfirmationEmail: PropTypes.func.isRequired,
-  emailConfirmationResends: PropTypes.number.isRequired,
-  noActions: PropTypes.bool,
+  onOpenNewColumnModal: PropTypes.func.isRequired,
  theme: PropTypes.string,
  logoDisabled: PropTypes.bool,
 }
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -309,7 +309,7 @@ class Status extends ImmutablePureComponent {
      isComposeModalOpen,
      commentSortingType,
      onOpenProModal,
-      isCompact,
+      isDeckConnected,
    } = this.props
    // const { height } = this.state

@@ -362,7 +362,7 @@ class Status extends ImmutablePureComponent {
    }

    const parentClasses = CX({
-      pb15: !isChild && !isCompact,
+      pb15: !isChild && !isDeckConnected,
    })

    const containerClasses = CX({
@@ -438,7 +438,7 @@ class Status extends ImmutablePureComponent {
                  <StatusHeader
                    status={status}
                    reduced={isChild}
-                    isCompact={isCompact}
+                    isCompact={isDeckConnected}
                  />

                  <div className={_s.d}>
@@ -453,7 +453,7 @@ class Status extends ImmutablePureComponent {
                  </div>

                  <StatusMedia
-                    isChild={isChild || isCompact}
+                    isChild={isChild || isDeckConnected}
                    isComposeModalOpen={isComposeModalOpen}
                    status={status}
                    onOpenMedia={this.props.onOpenMedia}
@@ -492,12 +492,12 @@ class Status extends ImmutablePureComponent {
                      onOpenLikes={this.props.onOpenLikes}
                      onOpenReposts={this.props.onOpenReposts}
                      onQuote={this.handleOnQuote}
-                      isCompact={isCompact}
+                      isCompact={isDeckConnected}
                    />
                  }

                  {
-                    !isChild && !!me && !isCompact &&
+                    !isChild && !!me && !isDeckConnected &&
                    <ResponsiveClassesComponent
                      classNames={[_s.d, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}
                      classNamesXS={[_s.d, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px10, _s.mb10].join(' ')}
--- a/app/javascript/gabsocial/components/timeline_injections/timeline_injection_layout.js
+++ b/app/javascript/gabsocial/components/timeline_injections/timeline_injection_layout.js
@@ -40,7 +40,7 @@ class TimelineInjectionLayout extends React.PureComponent {
      buttonHref,
      buttonTitle,
      isXS,
-      isCompact,
+      isDeckConnected,
    } = this.props
    const { dismissed } = this.state

@@ -53,7 +53,7 @@ class TimelineInjectionLayout extends React.PureComponent {
      borderTop1PX: isXS,
      borderBottom1PX: isXS,
      border1PX: !isXS,
-      radiusSmall: !isXS && !isCompact,
+      radiusSmall: !isXS && !isDeckConnected,
      borderColorSecondary: 1,
      bgPrimary: 1,
      overflowHidden: 1,
@@ -106,9 +106,8 @@ class TimelineInjectionLayout extends React.PureComponent {

 }

-
 const mapStateToProps = (state) => ({
-  isCompact: state.getIn(['settings', 'isCompact']),
+  isDeckConnected: state.getIn(['deck', 'connected'], false),
 })

 TimelineInjectionLayout.propTypes = {
@@ -119,6 +118,7 @@ TimelineInjectionLayout.propTypes = {
  id: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  isXS: PropTypes.bool,
+  isDeckConnected: PropTypes.bool,
 }

 export default connect(mapStateToProps)(TimelineInjectionLayout)