random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updates to Gab Deck

Browse Source 
• Updates:
- to Gab Deck
This commit is contained in:
mgabdev 2020-12-08 00:07:04 -05:00
parent 05c5dcb581
commit 6950f67520
16 changed files with 210 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/javascript/gabsocial/actions/deck.js Normal file
View File

@ -0,0 +1,20 @@
import { me } from '../initial_state'
export const DECK_CONNECT = 'DECK_CONNECT'
export const DECK_DISCONNECT = 'DECK_DISCONNECT'
export const DECK_SET_COLUMN_AT_INDEX = 'DECK_SET_COLUMN_AT_INDEX'
export const deckConnect = () => ({
type: DECK_CONNECT,
})
export const deckDisconnect = () => ({
type: DECK_DISCONNECT,
})
export const setDeckColumnAtIndex = (column, index) => ({
type: DECK_SET_COLUMN_AT_INDEX,
column,
index,
})

17
app/javascript/gabsocial/components/deck_column_header.js
View File

@ -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>
)

91
app/javascript/gabsocial/components/modal/deck_column_add_modal.js Normal file
View File

@ -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)

3
app/javascript/gabsocial/components/modal/modal_root.js
View File

@ -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,

8
app/javascript/gabsocial/components/notification.js
View File

@ -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)

89
app/javascript/gabsocial/components/sidebar/deck_sidebar.js
View File

@ -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,
}

12
app/javascript/gabsocial/components/status.js
View File

@ -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(' ')}

8
app/javascript/gabsocial/components/timeline_injections/timeline_injection_layout.js
View File

@ -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)

1
app/javascript/gabsocial/constants.js
View File

@ -52,6 +52,7 @@ export const MODAL_CHAT_CONVERSATION_DELETE = 'CHAT_CONVERSATION_DELETE'
export const MODAL_COMMUNITY_TIMELINE_SETTINGS = 'COMMUNITY_TIMELINE_SETTINGS'
export const MODAL_COMPOSE = 'COMPOSE'
export const MODAL_CONFIRM = 'CONFIRM'
export const MODAL_DECK_COLUMN_ADD = 'DECK_COLUMN_ADD'
export const MODAL_DISPLAY_OPTIONS = 'DISPLAY_OPTIONS'
export const MODAL_EDIT_PROFILE = 'EDIT_PROFILE'
export const MODAL_EDIT_SHORTCUTS = 'EDIT_SHORTCUTS'

8
app/javascript/gabsocial/containers/notification_container.js
View File

@ -18,7 +18,7 @@ const makeMapStateToProps = () => {
const isReposts = !!props.notification.get('repost')
const isGrouped = isFollows || isLikes || isReposts
const lastReadId = state.getIn(['notifications', 'lastReadId'])
const isCompact = state.getIn(['settings', 'isCompact'])
const isDeckConnected = state.getIn(['deck', 'connected'], false)
if (isFollows) {
let lastUpdated
@ -41,7 +41,7 @@ const makeMapStateToProps = () => {
createdAt: lastUpdated,
isUnread: isUnread,
statusId: undefined,
isCompact,
isDeckConnected,
}
} else if (isLikes || isReposts) {
const theType = isLikes ? 'like' : 'repost'
@ -64,7 +64,7 @@ const makeMapStateToProps = () => {
createdAt: lastUpdated,
isUnread: isUnread,
statusId: list.get('status'),
isCompact,
isDeckConnected,
}
} else if (!isGrouped) {
const notification = getNotification(state, props.notification, props.notification.get('account'))
@ -77,7 +77,7 @@ const makeMapStateToProps = () => {
createdAt: notification.get('created_at'),
isUnread: lastReadId < notification.get('id'),
statusId: statusId || undefined,
isCompact,
isDeckConnected,
}
}
}

4
app/javascript/gabsocial/containers/status_container.js
View File

@ -183,12 +183,12 @@ const makeMapStateToProps = () => {
isComment,
commentSortingType,
isComposeModalOpen: state.getIn(['modal', 'modalType']) === 'COMPOSE',
isCompact: state.getIn(['settings', 'isCompact']),
isDeckConnected: state.getIn(['deck', 'connected'], false),
}
}
return mapStateToProps
};
}
const mapDispatchToProps = (dispatch) => ({
onReply (status, router, showModal) {

40
app/javascript/gabsocial/features/deck.js
View File

@ -1,10 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import {
deckConnect,
deckDisconnect,
} from '../actions/deck'
import WrappedBundle from './ui/util/wrapped_bundle'
import DeckColumn from '../components/deck_column'
import {
AccountTimeline,
Compose,
HomeTimeline,
Notifications,
HashtagTimeline,
@ -17,19 +24,33 @@ class Deck extends React.PureComponent {
}
componentDidMount () {
// this.props.connectDeck()
this.props.connectDeck()
}
componentWillUnmount() {
// this.props.disconnectDeck()
this.props.disconnectDeck()
}
componentDidMount () {
this.props.dispatch(deckConnect())
}
componentWillUnmount() {
this.props.dispatch(deckDisconnect())
}
render () {
const { account, children } = this.props
const { gabDeckOrder } = this.props
console.log("gabDeckOrder:", gabDeckOrder)
return (
<div className={[_s.d, _s.flexRow].join(' ')}>
<DeckColumn title='Home' icon='home'>
<DeckColumn title='Compose' icon='pencil'>
<WrappedBundle component={Compose} />
</DeckColumn>
<DeckColumn />
{/*<DeckColumn title='Home' icon='home'>
<WrappedBundle component={HomeTimeline} />
</DeckColumn>
<DeckColumn title='Notifications' icon='notifications'>
@ -41,6 +62,7 @@ class Deck extends React.PureComponent {
<DeckColumn title='Jonny' icon='group' subtitle='@admin'>
<WrappedBundle component={AccountTimeline} componentParams={{ account }} />
</DeckColumn>
</DeckColumn>*/}
</div>
)
}
@ -48,15 +70,11 @@ class Deck extends React.PureComponent {
}
const mapStateToProps = (state) => ({
account: state.getIn(['accounts', '1']),
})
const mapDispatchToProps = (dispatch) => ({
gabDeckOrder: state.getIn(['settings', 'gabDeckOrder']),
})
Deck.propTypes = {
//
gabDeckOrder: ImmutablePropTypes.list,
}
export default connect(mapStateToProps, mapDispatchToProps)(Deck)
export default connect(mapStateToProps)(Deck)

1
app/javascript/gabsocial/features/ui/util/async_components.js
View File

@ -24,6 +24,7 @@ export function ComposeModal() { return import(/* webpackChunkName: "components/
export function ConfirmationModal() { return import(/* webpackChunkName: "components/confirmation_modal" */'../../../components/modal/confirmation_modal') }
export function DatePickerPopover() { return import(/* webpackChunkName: "components/date_picker_popover" */'../../../components/popover/date_picker_popover') }
export function Deck() { return import(/* webpackChunkName: "features/deck" */'../../deck') }
export function DeckColumnAddModal() { return import(/* webpackChunkName: "components/deck_column_add_modal" */'../../../components/modal/deck_column_add_modal') }
export function DisplayOptionsModal() { return import(/* webpackChunkName: "components/display_options_modal" */'../../../components/modal/display_options_modal') }
export function DMCA() { return import(/* webpackChunkName: "features/about/dmca" */'../../about/dmca') }
export function EditProfileModal() { return import(/* webpackChunkName: "components/edit_profile_modal" */'../../../components/modal/edit_profile_modal') }

20
app/javascript/gabsocial/reducers/deck.js Normal file
View File

@ -0,0 +1,20 @@
import {
DECK_CONNECT,
DECK_DISCONNECT,
} from '../actions/deck'
import { Map as ImmutableMap } from 'immutable'
const initialState = ImmutableMap({
connected: false,
})
export default function deck(state = initialState, action) {
switch(action.type) {
case DECK_CONNECT:
return state.set('connected', true)
case DECK_DISCONNECT:
return state.set('connected', false)
default:
return state;
}
}

2
app/javascript/gabsocial/reducers/index.js
View File

@ -10,6 +10,7 @@ import chat_messages from './chat_messages'
import compose from './compose'
import contexts from './contexts'
import custom_emojis from './custom_emojis'
import deck from './deck'
import filters from './filters'
import groups from './groups'
import group_categories from './group_categories'
@ -59,6 +60,7 @@ const reducers = {
compose,
contexts,
custom_emojis,
deck,
filters,
groups,
group_categories,

1
app/javascript/styles/global.css
View File

@ -317,6 +317,7 @@ pre {
.flexShrink1 { flex-shrink: 1; }
.flexRow { flex-direction: row; }
.flexColumn { flex-direction: column; }
.flexRowReverse { flex-direction: row-reverse; }
.flexWrap { flex-wrap: wrap; }
.flexColumnReverse { flex-direction: column-reverse; }