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

Progress

Browse Source
This commit is contained in:
mgabdev 2020-02-22 18:26:23 -05:00
parent bebc39f150
commit d255982ec5
39 changed files with 1054 additions and 885 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/gabsocial/components/block.js Normal file
View File

@ -0,0 +1,11 @@
export default class Block extends PureComponent {
render() {
const { children } = this.props
return (
<div className={[_s.default, _s.backgroundColorPrimary, _s.overflowHidden, _s.radiusSmall, _s.borderColorSecondary, _s.border1PX].join(' ')}>
{children}
</div>
)
}
}

2
app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js
View File

@ -1,6 +1,5 @@
import { defineMessages, injectIntl } from 'react-intl';
import Column from '../column';
import { ColumnHeader } from '../column_header';
import IconButton from '../icon_button';
const messages = defineMessages({
@ -26,7 +25,6 @@ class BundleColumnError extends PureComponent {
return (
<Column>
<ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
<div className='error-column'>
<IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
{formatMessage(messages.body)}

40
app/javascript/gabsocial/components/button.js
View File

@ -35,6 +35,7 @@ export default class Button extends PureComponent {
outline: PropTypes.bool,
narrow: PropTypes.bool,
underlineOnHover: PropTypes.bool,
radiusSmall: PropTypes.bool,
}
static defaultProps = {
@ -56,7 +57,7 @@ export default class Button extends PureComponent {
this.node.focus()
}
render () {
render() {
const {
block,
className,
@ -74,6 +75,7 @@ export default class Button extends PureComponent {
backgroundColor,
underlineOnHover,
narrow,
radiusSmall,
...otherProps
} = this.props
@ -90,6 +92,7 @@ export default class Button extends PureComponent {
backgroundColorPrimary: backgroundColor === COLORS.white,
backgroundColorBrand: backgroundColor === COLORS.brand,
backgroundTransparent: backgroundColor === COLORS.none,
backgroundSubtle2: backgroundColor === COLORS.tertiary,
colorPrimary: color === COLORS.primary,
colorSecondary: color === COLORS.secondary,
@ -100,6 +103,7 @@ export default class Button extends PureComponent {
border1PX: outline,
circle: !text,
radiusSmall: radiusSmall,
paddingVertical5PX: narrow,
paddingVertical10PX: !text && !narrow,
@ -109,6 +113,8 @@ export default class Button extends PureComponent {
underline_onHover: underlineOnHover,
backgroundSubtle2Dark_onHover: backgroundColor === COLORS.tertiary,
backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
backgroundColorBrand_onHover: color === COLORS.brand && outline,
@ -124,19 +130,25 @@ export default class Button extends PureComponent {
</Fragment>
) : children
return React.createElement(
tagName,
{
className: classes,
ref: this.setRef,
disabled: disabled,
to: to || undefined,
to: href || undefined,
onClick: this.handleClick || undefined,
...otherProps
},
theChildren,
)
const options = {
className: classes,
ref: this.setRef,
disabled: disabled,
to: to || undefined,
href: href || undefined,
onClick: this.handleClick || undefined,
}
if (tagName === 'NavLink' && !!to) {
console.log("to: ", to)
return (
<NavLink {...options}>
{theChildren}
</NavLink>
)
}
return React.createElement(tagName, options, theChildren)
}
}

4
app/javascript/gabsocial/components/column/column.js
View File

@ -1,5 +1,4 @@
import { isMobile } from '../../utils/is_mobile';
import { ColumnHeader } from '../column_header';
export default class Column extends PureComponent {
@ -20,9 +19,6 @@ export default class Column extends PureComponent {
const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
const columnHeaderId = showHeading && heading.replace(/ /g, '-');
const header = showHeading && (
<ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
);
return (
<div role='region' aria-labelledby={columnHeaderId} className={[_s.default].join(' ')}>

11
app/javascript/gabsocial/components/column_header.js
View File

@ -1,4 +1,5 @@
import { injectIntl, defineMessages } from 'react-intl'
import TabBar from './tab_bar'
import Icon from './icon'
import Button from './button'
import Heading from './heading'
@ -23,6 +24,7 @@ class ColumnHeader extends PureComponent {
children: PropTypes.node,
showBackBtn: PropTypes.bool,
actions: PropTypes.array,
tabs: PropTypes.array,
}
state = {
@ -49,7 +51,7 @@ class ColumnHeader extends PureComponent {
}
render() {
const { title, showBackBtn, icon, active, children, actions, intl: { formatMessage } } = this.props
const { title, showBackBtn, tabs, icon, active, children, actions, intl: { formatMessage } } = this.props
const { collapsed } = this.state
return (
@ -61,12 +63,17 @@ class ColumnHeader extends PureComponent {
</button>
}
<div className={[_s.default, _s.height100PC, _s.justifyContentCenter].join(' ')}>
<div className={[_s.default, _s.height100PC, _s.justifyContentCenter, _s.marginRight10PX].join(' ')}>
<Heading size='h1'>
{title}
</Heading>
</div>
{
!!tabs &&
<TabBar tabs={tabs} />
}
{
!!actions &&
<div className={[_s.default, _s.backgroundTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.marginLeftAuto].join(' ')}>

123
app/javascript/gabsocial/components/group_collection_item.js Normal file
View File

@ -0,0 +1,123 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import { defineMessages, injectIntl } from 'react-intl'
import classNames from 'classnames/bind'
import { shortNumberFormat } from '../utils/numbers'
import Image from './image'
import Text from './text'
import Button from './button'
import DotTextSeperator from './dot_text_seperator'
const messages = defineMessages({
members: { id: 'groups.card.members', defaultMessage: 'Members' },
new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
})
const mapStateToProps = (state, { id }) => ({
group: state.getIn(['groups', id]),
relationships: state.getIn(['group_relationships', id]),
})
const cx = classNames.bind(_s)
export default
@connect(mapStateToProps)
@injectIntl
class GroupCollectionItem extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
}
render() {
const { intl, group, relationships } = this.props
if (!relationships) return null
const unreadCount = relationships.get('unread_count')
const subtitle = unreadCount > 0 ? (
<Fragment>
{shortNumberFormat(unreadCount)}
&nbsp;
{intl.formatMessage(messages.new_statuses)}
</Fragment>
) : intl.formatMessage(messages.no_recent_activity)
const imageHeight = '200px'
// : todo :
const isMember = false
const outsideClasses = cx({
default: 1,
width50PC: 1,
})
const navLinkClasses = cx({
default: 1,
noUnderline: 1,
overflowHidden: 1,
borderColorSecondary: 1,
radiusSmall: 1,
border1PX: 1,
marginBottom10PX: 1,
marginLeft5PX: 1,
marginRight5PX: 1,
backgroundColorPrimary: 1,
backgroundSubtle_onHover: isMember,
})
return (
<div className={outsideClasses}>
<NavLink
to={`/groups/${group.get('id')}`}
className={navLinkClasses}
>
<Image
src={group.get('cover')}
alt={group.get('title')}
height={imageHeight}
/>
<div className={[_s.default, _s.paddingHorizontal10PX, _s.marginVertical10PX].join(' ')}>
<Text color='primary' size='medium' weight='bold'>
{group.get('title')}
</Text>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.marginTop5PX].join(' ')}>
<Text color='secondary' size='small'>
{shortNumberFormat(group.get('member_count'))}
&nbsp;
{intl.formatMessage(messages.members)}
</Text>
<DotTextSeperator />
<Text color='secondary' size='small' className={_s.marginLeft5PX}>
{subtitle}
</Text>
</div>
</div>
{
!isMember &&
<div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom10PX].join(' ')}>
<Button
color='primary'
backgroundColor='tertiary'
radiusSmall
>
<Text color='inherit' weight='bold'>
Join
</Text>
</Button>
</div>
}
</NavLink>
</div>
)
}
}

76
app/javascript/gabsocial/components/group_list_item.js
View File

@ -3,11 +3,13 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
import { Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import { defineMessages, injectIntl } from 'react-intl'
import classNames from 'classnames/bind'
import { shortNumberFormat } from '../utils/numbers'
import Image from './image'
import Text from './text'
const messages = defineMessages({
members: { id: 'groups.card.members', defaultMessage: 'Members' },
new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
})
@ -17,6 +19,8 @@ const mapStateToProps = (state, { id }) => ({
relationships: state.getIn(['group_relationships', id]),
})
const cx = classNames.bind(_s)
export default
@connect(mapStateToProps)
@injectIntl
@ -24,23 +28,17 @@ class GroupListItem extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
slim: PropTypes.bool,
isLast: PropTypes.bool,
}
state = {
hovering: false,
}
handleOnMouseEnter = () => {
this.setState({ hovering: true })
}
handleOnMouseLeave = () => {
this.setState({ hovering: false })
static defaultProps = {
slim: false,
isLast: false,
}
render() {
const { intl, group, relationships } = this.props
const { hovering } = this.state
const { intl, group, relationships, slim, isLast } = this.props
if (!relationships) return null
@ -54,25 +52,65 @@ class GroupListItem extends ImmutablePureComponent {
</Fragment>
) : intl.formatMessage(messages.no_recent_activity)
const containerClasses = cx({
default: 1,
noUnderline: 1,
overflowHidden: 1,
backgroundSubtle_onHover: 1,
borderColorSecondary: 1,
radiusSmall: !slim,
marginTop5PX: !slim,
marginBottom10PX: !slim,
border1PX: !slim,
borderBottom1PX: slim && !isLast,
flexRow: slim,
paddingVertical5PX: slim,
})
const imageClasses = cx({
height122PX: !slim,
radiusSmall: slim,
height72PX: slim,
width72PX: slim,
marginLeft15PX: slim,
})
const textContainerClasses = cx({
default: 1,
paddingHorizontal10PX: 1,
marginTop5PX: 1,
marginBottom10PX: !slim,
})
return (
<NavLink
to={`/groups/${group.get('id')}`}
className={[_s.default, _s.noUnderline, _s.marginTop5PX, _s.overflowHidden, _s.radiusSmall, _s.marginBottom10PX, _s.border1PX, _s.borderColorSecondary, _s.backgroundSubtle_onHover].join(' ')}
onMouseEnter={() => this.handleOnMouseEnter()}
onMouseLeave={() => this.handleOnMouseLeave()}
className={containerClasses}
>
<Image
src={group.get('cover')}
alt={group.get('title')}
className={_s.height122PX}
className={imageClasses}
/>
<div className={[_s.default, _s.paddingHorizontal10PX, _s.marginVertical5PX].join(' ')}>
<Text color='brand' weight='bold' underline={hovering}>
<div className={textContainerClasses}>
<Text color='brand' weight='bold'>
{group.get('title')}
</Text>
<Text color='secondary' size='small' className={_s.marginVertical5PX}>
{
slim &&
<Text color='secondary' size='small' className={_s.marginTop5PX}>
{shortNumberFormat(group.get('member_count'))}
&nbsp;
{intl.formatMessage(messages.members)}
</Text>
}
<Text color='secondary' size='small' className={_s.marginTop5PX}>
{subtitle}
</Text>
</div>
</NavLink>
)

13
app/javascript/gabsocial/components/layouts/default_layout.js
View File

@ -6,13 +6,17 @@ import Sidebar from '../sidebar'
export default class DefaultLayout extends PureComponent {
static propTypes = {
actions: PropTypes.array,
tabs: PropTypes.array,
layout: PropTypes.object,
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
render() {
const { children, title, showBackBtn, layout, actions } = this.props
const { children, title, showBackBtn, layout, actions, tabs } = this.props
// const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
// const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
return (
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
@ -24,7 +28,12 @@ export default class DefaultLayout extends PureComponent {
<div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundcolorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader title={title} showBackBtn={showBackBtn} actions={actions} />
<ColumnHeader
title={title}
showBackBtn={showBackBtn}
actions={actions}
tabs={tabs}
/>
</div>
<div className={[_s.default, _s.width340PX].join(' ')}>
<Search />

1
app/javascript/gabsocial/components/layouts/profile_layout.js
View File

@ -1,4 +1,3 @@
import ColumnHeader from '../column_header'
import Sidebar from '../sidebar'
export default class ProfileLayout extends PureComponent {

68
app/javascript/gabsocial/components/layouts/search_layout.js Normal file
View File

@ -0,0 +1,68 @@
import Sticky from 'react-stickynode'
import Search from '../search'
import ColumnHeader from '../column_header'
import Sidebar from '../sidebar'
export default class SearchLayout extends PureComponent {
static propTypes = {
actions: PropTypes.array,
tabs: PropTypes.array,
layout: PropTypes.object,
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
render() {
const { children, title, showBackBtn, layout, actions, tabs } = this.props
// const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
// const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
return (
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
<Sidebar />
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundcolorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader
title={title}
showBackBtn={showBackBtn}
actions={actions}
tabs={tabs}
/>
</div>
<div className={[_s.default, _s.width340PX].join(' ')}>
<Search />
</div>
</div>
</div>
<div className={[_s.default, _s.height53PX].join(' ')}></div>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
<div className={_s.default}>
{children}
</div>
</div>
<div className={[_s.default, _s.width340PX].join(' ')}>
<Sticky top={73} enabled>
<div className={[_s.default, _s.width340PX].join(' ')}>
{layout}
</div>
</Sticky>
</div>
</div>
</main>
</div>
)
}
}

5
app/javascript/gabsocial/components/list.js
View File

@ -1,3 +1,4 @@
import Block from './block'
import ScrollableList from './scrollable_list'
import ListItem from './list_item'
@ -13,7 +14,7 @@ export default class List extends PureComponent {
const { items, scrollKey, emptyMessage } = this.props
return (
<div className={[_s.default, _s.backgroundColorPrimary, _s.radiusSmall, _s.overflowHidden, _s.border1PX, _s.borderColorSecondary].join(' ')}>
<Block>
<ScrollableList
scrollKey={scrollKey}
emptyMessage={emptyMessage}
@ -31,7 +32,7 @@ export default class List extends PureComponent {
})
}
</ScrollableList>
</div>
</Block>
)
}

19
app/javascript/gabsocial/components/panel/groups_panel.js
View File

@ -20,26 +20,35 @@ export default @connect(mapStateToProps)
class GroupSidebarPanel extends ImmutablePureComponent {
static propTypes = {
groupIds: ImmutablePropTypes.list,
slim: PropTypes.bool,
}
render() {
const { intl, groupIds } = this.props
const { intl, groupIds, slim } = this.props
const count = groupIds.count()
if (count === 0) return null
const maxCount = slim ? 12 : 6
return (
<PanelLayout
title={intl.formatMessage(messages.title)}
headerButtonTitle={intl.formatMessage(messages.all)}
headerButtonTo='/groups/browse/member'
footerButtonTitle={count > 6 ? intl.formatMessage(messages.show_all) : undefined}
footerButtonTo={count > 6 ? '/groups/browse/member' : undefined}
footerButtonTitle={count > maxCount ? intl.formatMessage(messages.show_all) : undefined}
footerButtonTo={count > maxCount ? '/groups/browse/member' : undefined}
noPadding={slim}
>
<div className={_s.default}>
{
groupIds.slice(0, 6).map(groupId => (
<GroupListItem key={`group-panel-item-${groupId}`} id={groupId} />
groupIds.slice(0, maxCount).map((groupId, i) => (
<GroupListItem
key={`group-panel-item-${groupId}`}
id={groupId}
slim={slim}
isLast={groupIds.length - 1 === i}
/>
))
}
</div>

115
app/javascript/gabsocial/components/panel/panel_layout.js
View File

@ -1,3 +1,4 @@
import Block from '../block'
import Heading from '../heading'
import Button from '../button'
import Text from '../text'
@ -31,68 +32,70 @@ export default class PanelLayout extends PureComponent {
} = this.props
return (
<aside className={[_s.default, _s.backgroundColorPrimary, _s.overflowHidden, _s.radiusSmall, _s.marginBottom15PX, _s.borderColorSecondary, _s.border1PX].join(' ')}>
{
(title || subtitle) &&
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<Heading size='h3'>
{title}
</Heading>
<aside className={[_s.default, _s.marginBottom15PX].join(' ')}>
<Block>
{
(title || subtitle) &&
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<Heading size='h3'>
{title}
</Heading>
{
(!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
<div className={[_s.default, _s.marginLeftAuto].join(' ')}>
<Button
text
backgroundColor='none'
color='brand'
to={headerButtonTo}
onClick={headerButtonAction}
>
<Text size='small' color='inherit' weight='bold'>
{headerButtonTitle}
</Text>
</Button>
</div>
}
</div>
{
(!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
<div className={[_s.default, _s.marginLeftAuto].join(' ')}>
<Button
text
backgroundColor='none'
color='brand'
to={headerButtonTo}
onClick={headerButtonAction}
>
<Text size='small' color='inherit' weight='bold'>
{headerButtonTitle}
</Text>
</Button>
</div>
subtitle &&
<Heading size='h4'>
{subtitle}
</Heading>
}
</div>
{
subtitle &&
<Heading size='h4'>
{subtitle}
</Heading>
}
</div>
}
}
{
!noPadding &&
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
{children}
</div>
}
{
!noPadding &&
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
{children}
</div>
}
{
noPadding && children
}
{
noPadding && children
}
{
(!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
<div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
<Button
text
color='none'
backgroundColor='none'
to={footerButtonTo}
onClick={footerButtonAction}
className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
>
<Text color='brand' align='left' size='medium'>
{footerButtonTitle}
</Text>
</Button>
</div>
}
{
(!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
<div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
<Button
text
color='none'
backgroundColor='none'
to={footerButtonTo}
onClick={footerButtonAction}
className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
>
<Text color='brand' align='left' size='medium'>
{footerButtonTitle}
</Text>
</Button>
</div>
}
</Block>
</aside>
)
}

0
app/javascript/gabsocial/components/popover/popover.js → app/javascript/gabsocial/components/popover/popover_layout.js
View File

24
app/javascript/gabsocial/components/sidebar.js
View File

@ -6,9 +6,9 @@ import Button from './button'
import { closeSidebar } from '../actions/sidebar'
import { me } from '../initial_state'
import { makeGetAccount } from '../selectors'
import GabLogo from './assets/gab_logo'
import SidebarSectionTitle from './sidebar_section_title'
import SidebarSectionItem from './sidebar_section_item'
import SidebarHeader from './sidebar_header'
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
@ -103,6 +103,11 @@ class Sidebar extends ImmutablePureComponent {
to: '/',
count: 124,
},
{
title: 'Search',
icon: 'search-sidebar',
to: '/search',
},
{
title: 'Notifications',
icon: 'notifications',
@ -131,6 +136,11 @@ class Sidebar extends ImmutablePureComponent {
},
]
// more:
// settings/preferences
// help
// logout
const shortcutItems = [
{
title: 'Meme Group',
@ -175,17 +185,7 @@ class Sidebar extends ImmutablePureComponent {
<div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
<div className={[_s.default, _s.height100PC, _s.width240PX, _s.paddingRight15PX, _s.marginVertical10PX].join(' ')}>
<h1 className={[_s.default].join(' ')}>
<NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
<GabLogo />
</NavLink>
</h1>
<SidebarSectionItem
image='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139'
title='@admin'
to='/profile'
/>
<SidebarHeader />
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
<SidebarSectionTitle>Menu</SidebarSectionTitle>

336
app/javascript/gabsocial/components/sidebar_header.js
View File

@ -1,343 +1,47 @@
import { Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { injectIntl, defineMessages } from 'react-intl'
import classNames from 'classnames/bind'
import Button from './button'
import { closeSidebar } from '../actions/sidebar'
import { me } from '../initial_state'
import { makeGetAccount } from '../selectors'
// import ProgressPanel from './progress_panel'
import GabLogo from './assets/gab_logo'
import Icon from './icon'
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Follows' },
profile: { id: 'account.profile', defaultMessage: 'Profile' },
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
lists: { id: 'column.lists', defaultMessage: 'Lists', },
apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
more: { id: 'sidebar.more', defaultMessage: 'More' },
pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
trends: { id: 'promo.trends', defaultMessage: 'Trends' },
search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
donate: { id: 'tabs_bar.donate', defaultMessage: 'Make a Donation' },
})
import SidebarSectionItem from './sidebar_section_item'
const mapStateToProps = state => {
const getAccount = makeGetAccount()
return {
account: getAccount(state, me),
sidebarOpen: state.get('sidebar').sidebarOpen,
}
}
const mapDispatchToProps = (dispatch) => ({
onClose() {
dispatch(closeSidebar())
},
})
const cx = classNames.bind(_s)
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class Sidebar extends ImmutablePureComponent {
export default @connect(mapStateToProps)
class SidebarHeader extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
account: ImmutablePropTypes.map,
sidebarOpen: PropTypes.bool,
onClose: PropTypes.func.isRequired,
}
state = {
moreOpen: false,
hoveringItemIndex: null,
}
componentDidUpdate() {
if (!me) return
if (this.props.sidebarOpen) {
document.body.classList.add('with-modals--active')
} else {
document.body.classList.remove('with-modals--active')
}
}
toggleMore = () => {
this.setState({
moreOpen: !this.state.moreOpen
})
}
handleSidebarClose = () => {
this.props.onClose()
this.setState({
moreOpen: false,
})
}
render() {
const { sidebarOpen, intl, account } = this.props
const { moreOpen, hoveringItemIndex } = this.state
if (!me || !account) return null
const acct = account.get('acct')
const isPro = account.get('is_pro')
// const classes = classNames('sidebar-menu__root', {
// 'sidebar-menu__root--visible': sidebarOpen,
// })
const moreIcon = moreOpen ? 'minus' : 'plus'
const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }
const menuItems = [
{
title: 'Home',
icon: 'home',
to: '/',
count: 124,
},
{
title: 'Notifications',
icon: 'notifications',
to: '/notifications',
count: 40,
},
{
title: 'Groups',
icon: 'group',
to: '/groups',
},
{
title: 'Lists',
icon: 'list',
to: '/lists',
},
{
title: 'Chat',
icon: 'chat',
to: '/',
},
{
title: 'More',
icon: 'more',
to: '/',
},
]
const shortcutItems = [
{
title: 'Meme Group',
icon: 'group',
to: '/',
count: 0,
},
{
title: '@andrew',
image: 'http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139',
to: '/',
count: 3,
},
]
const exploreItems = [
{
title: 'Apps',
icon: 'apps',
to: '/',
},
{
title: 'Shop',
icon: 'shop',
to: '/',
},
{
title: 'Trends',
icon: 'trends',
to: '/',
},
{
title: 'Dissenter',
icon: 'dissenter',
to: '/',
},
]
const titleClasses = cx({
default: 1,
text: 1,
colorSecondary: 1,
displayBlock: 1,
fontSize13PX: 1,
paddingVertical5PX: 1,
marginTop10PX: 1,
paddingHorizontal10PX: 1,
fontWeightBold: 1,
})
const { account } = this.props
return (
<header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
<div className={[_s.default, _s.width240PX].join(' ')}>
<div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
<div className={[_s.default, _s.height100PC, _s.width240PX, _s.paddingRight15PX, _s.marginVertical10PX].join(' ')}>
<h1 className={[_s.default].join(' ')}>
<NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
<GabLogo />
</NavLink>
</h1>
<div>
<HeaderMenuItem me image='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139' title='@admin' to='/profile' />
</div>
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
<span className={titleClasses}>Menu</span>
{
menuItems.map((menuItem, i) => (
<HeaderMenuItem {...menuItem} key={`header-item-menu-${i}`} />
))
}
<span className={titleClasses}>Shortcuts</span>
{
shortcutItems.map((shortcutItem, i) => (
<HeaderMenuItem {...shortcutItem} key={`header-item-shortcut-${i}`} />
))
}
<span className={titleClasses}>Explore</span>
{
exploreItems.map((exploreItem, i) => (
<HeaderMenuItem {...exploreItem} key={`header-item-explore-${i}`} />
))
}
</nav>
<Button block className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')}>
Gab
</Button>
</div>
</div>
</div>
</header>
)
}
<Fragment>
<h1 className={[_s.default].join(' ')}>
<NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
<GabLogo />
</NavLink>
</h1>
}
class HeaderMenuItem extends PureComponent {
static propTypes = {
to: PropTypes.string,
active: PropTypes.bool,
icon: PropTypes.string,
image: PropTypes.string,
title: PropTypes.string,
me: PropTypes.bool,
count: PropTypes.number,
}
state = {
hovering: false,
}
handleOnMouseEnter = () => {
this.setState({ hovering: true })
}
handleOnMouseLeave = () => {
this.setState({ hovering: false })
}
render() {
const { to, active, icon, image, title, me, count } = this.props
const { hovering } = this.state
const iconSize = '16px'
const shouldShowActive = hovering || active
const isNotifications = to === '/notifications'
const containerClasses = cx({
default: 1,
maxWidth100PC: 1,
width100PC: 1,
flexRow: 1,
paddingVertical5PX: 1,
paddingHorizontal10PX: 1,
alignItemsCenter: 1,
radiusSmall: 1,
// border1PX: shouldShowActive,
// borderColorSecondary: shouldShowActive,
backgroundSubtle2: shouldShowActive,
})
const textClasses = cx({
default: 1,
fontWeightNormal: 1,
fontSize15PX: 1,
text: 1,
textOverflowEllipsis: 1,
colorPrimary: shouldShowActive || me,
colorSecondary: !hovering && !active && !me,
})
const iconClasses = cx({
fillColorBlack: shouldShowActive,
fillcolorSecondary: !hovering && !active,
})
const countClasses = cx({
default: 1,
text: 1,
marginLeftAuto: 1,
fontSize12PX: 1,
paddingHorizontal5PX: 1,
marginRight2PX: 1,
lineHeight15: 1,
marginLeft5PX: 1,
colorSecondary: !isNotifications,
colorWhite: isNotifications,
backgroundColorBrand: isNotifications,
radiusSmall: isNotifications,
})
return (
<NavLink
to={to}
onMouseEnter={() => this.handleOnMouseEnter()}
onMouseLeave={() => this.handleOnMouseLeave()}
className={[_s.default, _s.noUnderline, _s.cursorPointer, _s.width100PC, _s.alignItemsStart, _s.flexGrow1].join(' ')}
>
<div className={containerClasses}>
<div className={[_s.default]}>
{ icon && <Icon id={icon} className={iconClasses} width={iconSize} height={iconSize} /> }
{ image &&
<img
className={[_s.default, _s.circle].join(' ')}
width={iconSize}
height={iconSize}
src={image}
/>
}
</div>
<div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
<span className={textClasses}>{title}</span>
</div>
{ count > 0 &&
<span className={countClasses}>
{count}
</span>
}
</div>
</NavLink>
{
(!!me && !!account) &&
<SidebarSectionItem
image={account.get('avatar')}
title={account.get('acct')}
to={`/${account.get('acct')}`}
/>
}
</Fragment>
)
}
}

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

@ -14,6 +14,7 @@ import RelativeTimestamp from '../relative_timestamp';
import DisplayName from '../display_name';
import StatusContent from '../status_content';
import StatusActionBar from '../status_action_bar';
import Block from '../block';
import Icon from '../icon';
import Poll from '../poll';
import StatusHeader from '../status_header'
@ -257,9 +258,9 @@ class Status extends ImmutablePureComponent {
handleOpenProUpgradeModal = () => {
this.props.onOpenProUpgradeModal();
}
}
render () {
render() {
let media = null;
let statusAvatar, prepend, rebloggedByText, reblogContent;
@ -424,51 +425,53 @@ class Status extends ImmutablePureComponent {
return (
<HotKeys handlers={handlers}>
<div
className={[_s.default, _s.backgroundColorPrimary, _s.radiusSmall, _s.marginBottom15PX, _s.border1PX, _s.borderColorSecondary].join(' ')}
className={[_s.default, _s.marginBottom15PX].join(' ')}
tabIndex={this.props.muted ? null : 0}
data-featured={featured ? 'true' : null}
aria-label={textForScreenReader(intl, status, rebloggedByText)}
ref={this.handleRef}
>
<Block>
{prepend}
{prepend}
<div
className={classNames('status', `status-${status.get('visibility')}`, {
'status-reply': !!status.get('in_reply_to_id'),
muted: this.props.muted,
read: unread === false,
})}
data-id={status.get('id')}
>
<div
className={classNames('status', `status-${status.get('visibility')}`, {
'status-reply': !!status.get('in_reply_to_id'),
muted: this.props.muted,
read: unread === false,
})}
data-id={status.get('id')}
>
<StatusHeader status={status} />
<StatusHeader status={status} />
<div className={_s.default}>
<StatusContent
status={status}
reblogContent={reblogContent}
onClick={this.handleClick}
expanded={!status.get('hidden')}
onExpandedToggle={this.handleExpandedToggle}
collapsable
/>
</div>
<div className={_s.default}>
<StatusContent
status={status}
reblogContent={reblogContent}
onClick={this.handleClick}
expanded={!status.get('hidden')}
onExpandedToggle={this.handleExpandedToggle}
collapsable
/>
</div>
{ media }
{media}
{ /* status.get('quote') && <StatusQuote
{ /* status.get('quote') && <StatusQuote
id={status.get('quote')}
/> */ }
{ /* showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
{ /* showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
<button className='status__content__read-more-button' onClick={this.handleClick}>
<FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
</button>
) */ }
<StatusActionBar status={status} account={account} {...other} />
</div>
<StatusActionBar status={status} account={account} {...other} />
</div>
</Block>
</div>
</HotKeys>
);

21
app/javascript/gabsocial/components/tab_bar.js Normal file
View File

@ -0,0 +1,21 @@
import TabBarItem from './tab_bar_item'
export default class TabBar extends PureComponent {
static propTypes = {
tabs: PropTypes.array,
}
render() {
const { tabs } = this.props
return (
<div className={[_s.default, _s.height53PX, _s.paddingHorizontal5PX, _s.flexRow].join(' ')}>
{
tabs.map((tab, i) => (
<TabBarItem key={`tab-bar-item-${i}`} {...tab} />
))
}
</div>
)
}
}

66
app/javascript/gabsocial/components/tab_bar_item.js Normal file
View File

@ -0,0 +1,66 @@
import { NavLink, withRouter } from 'react-router-dom'
import classNames from 'classnames/bind'
import Text from './text'
const cx = classNames.bind(_s)
export default
@withRouter
class TabBarItem extends PureComponent {
static propTypes = {
location: PropTypes.object.isRequired,
title: PropTypes.string,
to: PropTypes.string,
}
state = {
active: -1,
}
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
const isCurrent = this.props.to === this.props.location.pathname
if (this.state.active !== isCurrent) {
this.setState({
active: isCurrent,
})
}
}
}
render() {
const { title, to, location } = this.props
const { active } = this.state
const isCurrent = active === -1 ? to === location.pathname : active
const containerClasses = cx({
default: 1,
height53PX: 1,
noUnderline: 1,
text: 1,
displayFlex: 1,
alignItemsCenter: 1,
justifyContentCenter: 1,
paddingHorizontal10PX: 1,
borderBottom2PX: 1,
borderColorTransparent: !isCurrent,
borderColorBrand: isCurrent,
})
const textOptions = {
size: 'small',
color: isCurrent ? 'brand' : 'primary',
weight: isCurrent ? 'bold' : 'normal',
}
return (
<NavLink to={to} className={containerClasses}>
<Text {...textOptions}>
{title}
</Text>
</NavLink>
)
}
}

25
app/javascript/gabsocial/components/timeline_compose_block.js
View File

@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
import { injectIntl, defineMessages } from 'react-intl'
import { me } from '../initial_state'
import ComposeFormContainer from '../features/compose/containers/compose_form_container'
import Block from './block'
import Avatar from './avatar'
import Heading from './heading'
@ -35,18 +36,20 @@ class TimelineComposeBlock extends ImmutablePureComponent {
const { account, size, intl, ...rest } = this.props
return (
<section className={[_s.default, _s.overflowHidden, _s.radiusSmall, _s.border1PX, _s.borderColorSecondary, _s.backgroundColorPrimary, _s.marginBottom15PX].join(' ')}>
<div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.paddingVertical2PX].join(' ')}>
<Heading size='h5'>
{intl.formatMessage(messages.createPost)}
</Heading>
</div>
<div className={[_s.default, _s.flexRow, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}>
<div className={[_s.default, _s.marginRight10PX].join(' ')}>
<Avatar account={account} size={46} />
<section className={[_s.default, _s.marginBottom15PX].join(' ')}>
<Block>
<div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.paddingVertical2PX].join(' ')}>
<Heading size='h5'>
{intl.formatMessage(messages.createPost)}
</Heading>
</div>
<ComposeFormContainer {...rest} />
</div>
<div className={[_s.default, _s.flexRow, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}>
<div className={[_s.default, _s.marginRight10PX].join(' ')}>
<Avatar account={account} size={46} />
</div>
<ComposeFormContainer {...rest} />
</div>
</Block>
</section>
)
}

84
app/javascript/gabsocial/constants.js Normal file
View File

@ -0,0 +1,84 @@
'use strict';
import WebSocketClient from 'websocket.js';
const randomIntUpTo = max => Math.floor(Math.random() * Math.floor(max));
export function connectStream(path, pollingRefresh = null, callbacks = () => ({ onConnect() { }, onDisconnect() { }, onReceive() { } })) {
return (dispatch, getState) => {
const streamingAPIBaseURL = getState().getIn(['meta', 'streaming_api_base_url']);
const accessToken = getState().getIn(['meta', 'access_token']);
const { onConnect, onDisconnect, onReceive } = callbacks(dispatch, getState);
let polling = null;
const setupPolling = () => {
pollingRefresh(dispatch, () => {
polling = setTimeout(() => setupPolling(), 20000 + randomIntUpTo(20000));
});
};
const clearPolling = () => {
if (polling) {
clearTimeout(polling);
polling = null;
}
};
const subscription = getStream(streamingAPIBaseURL, accessToken, path, {
connected() {
if (pollingRefresh) {
clearPolling();
}
onConnect();
},
disconnected() {
if (pollingRefresh) {
polling = setTimeout(() => setupPolling(), randomIntUpTo(40000));
}
onDisconnect();
},
received(data) {
onReceive(data);
},
reconnected() {
if (pollingRefresh) {
clearPolling();
pollingRefresh(dispatch);
}
onConnect();
},
});
const disconnect = () => {
if (subscription) {
subscription.close();
}
clearPolling();
};
return disconnect;
};
}
export default function getStream(streamingAPIBaseURL, accessToken, stream, { connected, received, disconnected, reconnected }) {
const params = [`stream=${stream}`];
const ws = new WebSocketClient(`${streamingAPIBaseURL}/api/v1/streaming/?${params.join('&')}`, accessToken);
ws.onopen = connected;
ws.onmessage = e => received(JSON.parse(e.data));
ws.onclose = disconnected;
ws.onreconnect = reconnected;
return ws;
};

4
app/javascript/gabsocial/features/community_timeline/community_timeline.js
View File

@ -10,7 +10,6 @@ import {
import StatusListContainer from '../../containers/status_list_container';;
// import ColumnSettingsContainer from '.containers/column_settings_container';
import Column from '../../components/column';
// import { HomeColumnHeader } from '../../components/column_header';
const messages = defineMessages({
title: { id: 'column.community', defaultMessage: 'Community timeline' },
@ -100,9 +99,6 @@ class CommunityTimeline extends PureComponent {
return (
<Column label={intl.formatMessage(messages.title)}>
{ /* <HomeColumnHeader activeItem='all' active={hasUnread} >
<ColumnSettingsContainer />
</HomeColumnHeader> */ }
<StatusListContainer
scrollKey={`${timelineId}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}

44
app/javascript/gabsocial/features/groups_collection/groups_collection.js Normal file
View File

@ -0,0 +1,44 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { fetchGroups } from '../../actions/groups'
import Block from '../../components/block'
import GroupCollectionItem from '../../components/group_collection_item'
const mapStateToProps = (state, { activeTab }) => ({
groupIds: state.getIn(['group_lists', activeTab]),
})
export default @connect(mapStateToProps)
class GroupsCollection extends ImmutablePureComponent {
static propTypes = {
activeTab: PropTypes.string.isRequired,
dispatch: PropTypes.func.isRequired,
groupIds: ImmutablePropTypes.list,
}
componentWillMount() {
this.props.dispatch(fetchGroups(this.props.activeTab))
}
componentDidUpdate(oldProps) {
if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
this.props.dispatch(fetchGroups(this.props.activeTab))
}
}
render() {
const { groupIds } = this.props
console.log("groupIds: ", groupIds)
return (
<div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
{
groupIds.map((groupId, i) => (
<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
))
}
</div>
)
}
}

1
app/javascript/gabsocial/features/groups_collection/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './groups_collection';

104
app/javascript/gabsocial/features/groups_directory/groups_directory.js
View File

@ -1,104 +0,0 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import { fetchGroups } from '../../../actions/groups';
import { openModal } from '../../../actions/modal';
import { me } from '../../../initial_state';
import GroupCard from './card';
import GroupCreate from '../create';
const messages = defineMessages({
heading: { id: 'column.groups', defaultMessage: 'Groups' },
create: { id: 'groups.create', defaultMessage: 'Create group' },
tab_featured: { id: 'groups.tab_featured', defaultMessage: 'Featured' },
tab_member: { id: 'groups.tab_member', defaultMessage: 'Member' },
tab_admin: { id: 'groups.tab_admin', defaultMessage: 'Manage' },
});
const mapStateToProps = (state, { activeTab }) => ({
groupIds: state.getIn(['group_lists', activeTab]),
account: state.getIn(['accounts', me]),
});
export default @connect(mapStateToProps)
@injectIntl
class Groups extends ImmutablePureComponent {
static propTypes = {
params: PropTypes.object.isRequired,
activeTab: PropTypes.string.isRequired,
showCreateForm: PropTypes.bool,
dispatch: PropTypes.func.isRequired,
groups: ImmutablePropTypes.map,
groupIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
};
componentWillMount () {
this.props.dispatch(fetchGroups(this.props.activeTab));
}
componentDidUpdate(oldProps) {
if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
this.props.dispatch(fetchGroups(this.props.activeTab));
}
}
handleOpenProUpgradeModal = () => {
this.props.dispatch(openModal('PRO_UPGRADE'));
}
renderHeader() {
const { intl, activeTab, account, onOpenProUpgradeModal } = this.props;
const isPro = account.get('is_pro');
return (
<div className="group-column-header">
<div className="group-column-header__cta">
{
account && isPro &&
<Link to="/groups/create" className="button standard-small">{intl.formatMessage(messages.create)}</Link>
}
{
account && !isPro &&
<button onClick={this.handleOpenProUpgradeModal} className="button standard-small">{intl.formatMessage(messages.create)}</button>
}
</div>
<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
<div className="column-header__wrapper">
<h1 className="column-header">
<Link to='/groups' className={classNames('btn grouped', {'active': 'featured' === activeTab})}>
{intl.formatMessage(messages.tab_featured)}
</Link>
<Link to='/groups/browse/member' className={classNames('btn grouped', {'active': 'member' === activeTab})}>
{intl.formatMessage(messages.tab_member)}
</Link>
<Link to='/groups/browse/admin' className={classNames('btn grouped', {'active': 'admin' === activeTab})}>
{intl.formatMessage(messages.tab_admin)}
</Link>
</h1>
</div>
</div>
);
}
render () {
const { groupIds, showCreateForm } = this.props;
return (
<div>
{!showCreateForm && this.renderHeader()}
{showCreateForm && <GroupCreate /> }
<div className="group-card-list">
{groupIds.map(id => <GroupCard key={id} id={id} />)}
</div>
</div>
);
}
}

1
app/javascript/gabsocial/features/groups_directory/index.js
View File

@ -1 +0,0 @@
export { default } from './groups_directory';

2
app/javascript/gabsocial/features/hashtag_timeline/hashtag_timeline.js
View File

@ -4,7 +4,6 @@ import { expandHashtagTimeline, clearTimeline } from '../../actions/timelines';
import { connectHashtagStream } from '../../actions/streaming';
import StatusListContainer from '../../containers/status_list_container';
import Column from '../../components/column';
import { ColumnHeader } from '../../components/column_header';
const mapStateToProps = (state, props) => ({
hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}`, 'unread']) > 0,
@ -104,7 +103,6 @@ class HashtagTimeline extends PureComponent {
return (
<Column heading={`#${id}`}>
<ColumnHeader icon='hashtag' active={hasUnread} title={this.title()} />
<StatusListContainer
scrollKey='hashtag_timeline'
timelineId={`hashtag:${id}`}

2
app/javascript/gabsocial/features/notifications/notifications.js
View File

@ -131,6 +131,8 @@ class Notifications extends ImmutablePureComponent {
// ? (<FilterBarContainer />)
// : null;
// : todo : include follow requests
console.log("notifications:", notifications)
if (isLoading && this.scrollableContent) {

4
app/javascript/gabsocial/features/status/status.js
View File

@ -444,7 +444,7 @@ class Status extends ImmutablePureComponent {
return (
<Column heading={intl.formatMessage(messages.detailedStatus)}>
{ me &&
{ /* me &&
<ColumnHeader
extraButton={(
<button
@ -461,7 +461,7 @@ class Status extends ImmutablePureComponent {
</button>
)}
/>
}
*/ }
<div ref={this.setRef}>
{ancestors}

246
app/javascript/gabsocial/features/ui/ui.js
View File

@ -15,19 +15,17 @@ import { fetchFilters } from '../../actions/filters';
import { clearHeight } from '../../actions/height_cache';
import { openModal } from '../../actions/modal';
import WrappedRoute from './util/wrapped_route';
import { isMobile } from '../../utils/is_mobile';
// import NotificationsContainer from '../../containers/notifications_container';
// import LoadingBarContainer from '../../containers/loading_bar_container';
// import ModalContainer from '../../containers/modal_container';
// import UploadArea from '../../components/upload_area';
// import FooterBar from '../../components/footer_bar';
// import TrendsPanel from './components/trends_panel';
// import { WhoToFollowPanel } from '../../components/panel';
// import LinkFooter from '../../components/link_footer';
import ProfilePage from '../../pages/profile_page'
// import GroupsPage from 'gabsocial/pages/groups_page';
// import GroupPage from '../../pages/group_page';
// import SearchPage from '../../pages/search_page';
import GroupsPage from '../../pages/groups_page'
import SearchPage from '../../pages/search_page'
import ErrorPage from '../../pages/error_page'
import HomePage from '../../pages/home_page'
import NotificationsPage from '../../pages/notifications_page'
import ListPage from '../../pages/list_page'
@ -49,15 +47,15 @@ import {
// HashtagTimeline,
Notifications,
// FollowRequests,
// GenericNotFound,
GenericNotFound,
// FavouritedStatuses,
// Blocks,
// DomainBlocks,
// Mutes,
// PinnedStatuses,
// Search,
Search,
// Explore,
// Groups,
GroupsCollection,
// GroupTimeline,
ListTimeline,
ListsDirectory,
@ -113,36 +111,7 @@ const keyMap = {
toggleSensitive: 'h',
};
const LAYOUT = {
// EMPTY: {
// LEFT: null,
// RIGHT: null,
// },
// DEFAULT: {
// LEFT: [
// <WhoToFollowPanel key='0' />,
// <LinkFooter key='1' />,
// ],
// RIGHT: [
// // <TrendsPanel />,
// <GroupSidebarPanel key='0' />
// ],
// },
// STATUS: {
// TOP: null,
// LEFT: null,
// RIGHT: [
// <GroupSidebarPanel key='0' />,
// <WhoToFollowPanel key='1' />,
// // <TrendsPanel />,
// <LinkFooter key='2' />,
// ],
// },
};
const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
class SwitchingColumnsArea extends PureComponent {
class SwitchingArea extends PureComponent {
static propTypes = {
children: PropTypes.node,
@ -150,69 +119,76 @@ class SwitchingColumnsArea extends PureComponent {
onLayoutChange: PropTypes.func.isRequired,
};
state = {
mobile: isMobile(window.innerWidth),
};
componentWillMount() {
window.addEventListener('resize', this.handleResize, { passive: true });
window.addEventListener('resize', this.handleResize, {
passive: true
})
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
window.removeEventListener('resize', this.handleResize)
}
handleResize = debounce(() => {
// The cached heights are no longer accurate, invalidate
this.props.onLayoutChange();
this.setState({ mobile: isMobile(window.innerWidth) });
this.props.onLayoutChange()
}, 500, {
trailing: true,
});
})
setRef = c => {
this.node = c.getWrappedInstance();
this.node = c.getWrappedInstance()
}
render() {
const { children } = this.props;
const { children } = this.props
return (
<Switch>
<Redirect from='/' to='/home' exact />
<WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
{/*<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />
<WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'featured' }} />
{/*<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />*/}
<WrappedRoute path='/groups' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'featured' }} />
<WrappedRoute path='/groups/browse/member' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'member' }} />
<WrappedRoute path='/groups/browse/admin' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'admin' }} />
{ /*
<WrappedRoute path='/groups/create' page={GroupsPage} component={Groups} content={children} componentParams={{ showCreateForm: true, activeTab: 'featured' }} />
<WrappedRoute path='/groups/browse/member' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'member' }} />
<WrappedRoute path='/groups/browse/admin' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'admin' }} />
<WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />
<WrappedRoute path='/groups/:id/removed_accounts' page={GroupPage} component={GroupRemovedAccounts} content={children} />
<WrappedRoute path='/groups/:id/edit' page={GroupPage} component={GroupEdit} content={children} />
<WrappedRoute path='/groups/:id' page={GroupPage} component={GroupTimeline} content={children} />
<WrappedRoute path='/tags/:id' publicRoute component={HashtagTimeline} content={children} />
*/}
<WrappedRoute path='/lists' page={ListsPage} component={ListsDirectory} content={children} />
*/ }
<WrappedRoute path='/lists' exact page={ListsPage} component={ListsDirectory} content={children} />
<WrappedRoute path='/list/:id' page={ListPage} component={ListTimeline} content={children} />
<WrappedRoute path='/notifications' page={NotificationsPage} component={Notifications} content={children} />
{/*
<WrappedRoute path='/notifications' exact page={NotificationsPage} component={Notifications} content={children} />
<WrappedRoute path='/search' exact publicRoute page={SearchPage} component={Search} content={children} />
<WrappedRoute path='/search/people' exact page={SearchPage} component={Search} content={children} />
<WrappedRoute path='/search/hashtags' exact page={SearchPage} component={Search} content={children} />
<WrappedRoute path='/search/groups' exact page={SearchPage} component={Search} content={children} />
<WrappedRoute path='/follow_requests' layout={LAYOUT.DEFAULT} component={FollowRequests} content={children} />
<WrappedRoute path='/blocks' layout={LAYOUT.DEFAULT} component={Blocks} content={children} />
<WrappedRoute path='/domain_blocks' layout={LAYOUT.DEFAULT} component={DomainBlocks} content={children} />
<WrappedRoute path='/mutes' layout={LAYOUT.DEFAULT} component={Mutes} content={children} />
{/*
<WrappedRoute path='/settings/account' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/profile' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/domain_blocks' exact page={SettingsPage} component={DomainBlocks} content={children} />
<WrappedRoute path='/settings/relationships' exact page={SettingsPage} component={DomainBlocks} content={children} />
<WrappedRoute path='/settings/filters' exact page={SettingsPage} component={DomainBlocks} content={children} />
<WrappedRoute path='/settings/blocks' exact page={SettingsPage} component={Blocks} content={children} />
<WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/development' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Mutes} content={children} />
*/ }
<Redirect from='/@:username' to='/:username' exact />
<WrappedRoute path='/:username' publicRoute exact component={AccountTimeline} page={ProfilePage} content={children} />
{ /*
<WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />
{ /*
<Redirect from='/@:username/with_replies' to='/:username/with_replies' />
<WrappedRoute path='/:username/with_replies' component={AccountTimeline} page={ProfilePage} content={children} componentParams={{ withReplies: true }} />
@ -233,27 +209,30 @@ class SwitchingColumnsArea extends PureComponent {
<Redirect from='/@:username/pins' to='/:username/pins' />
<WrappedRoute path='/:username/pins' component={PinnedStatuses} page={ProfilePage} content={children} />
*/ }
<Redirect from='/@:username/posts/:statusId' to='/:username/posts/:statusId' exact />
<WrappedRoute path='/:username/posts/:statusId' publicRoute exact layout={LAYOUT.STATUS} component={Status} content={children} />
<WrappedRoute path='/:username/posts/:statusId' publicRoute exact component={Status} content={children} />
*/ }
{ /*
<Redirect from='/@:username/posts/:statusId/reblogs' to='/:username/posts/:statusId/reblogs' />
<WrappedRoute path='/:username/posts/:statusId/reblogs' layout={LAYOUT.STATUS} component={Reblogs} content={children} />
<WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />*/}
<WrappedRoute path='/:username/posts/:statusId/reblogs' component={Reblogs} content={children} />
*/}
<WrappedRoute page={ErrorPage} component={GenericNotFound} content={children} />
</Switch>
);
}
}
export default @connect(mapStateToProps)
export default
@connect(mapStateToProps)
@injectIntl
@withRouter
class UI extends PureComponent {
static contextTypes = {
router: PropTypes.object.isRequired,
};
}
static propTypes = {
dispatch: PropTypes.func.isRequired,
@ -264,69 +243,79 @@ class UI extends PureComponent {
location: PropTypes.object,
intl: PropTypes.object.isRequired,
dropdownMenuIsOpen: PropTypes.bool,
};
}
state = {
draggingOver: false,
};
}
handleBeforeUnload = (e) => {
const { intl, isComposing, hasComposingText, hasMediaAttachments } = this.props;
const {
intl,
isComposing,
hasComposingText,
hasMediaAttachments
} = this.props
if (isComposing && (hasComposingText || hasMediaAttachments)) {
// Setting returnValue to any string causes confirmation dialog.
// Many browsers no longer display this text to users,
// but we set user-friendly message for other browsers, e.g. Edge.
e.returnValue = intl.formatMessage(messages.beforeUnload);
e.returnValue = intl.formatMessage(messages.beforeUnload)
}
}
handleLayoutChange = () => {
// The cached heights are no longer accurate, invalidate
this.props.dispatch(clearHeight());
this.props.dispatch(clearHeight())
}
handleDragEnter = (e) => {
e.preventDefault();
e.preventDefault()
if (!this.dragTargets) {
this.dragTargets = [];
this.dragTargets = []
}
if (this.dragTargets.indexOf(e.target) === -1) {
this.dragTargets.push(e.target);
this.dragTargets.push(e.target)
}
if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files')) {
this.setState({ draggingOver: true });
this.setState({
draggingOver: true
})
}
}
handleDragOver = (e) => {
if (this.dataTransferIsText(e.dataTransfer)) return false;
e.preventDefault();
e.stopPropagation();
if (this.dataTransferIsText(e.dataTransfer)) return false
e.preventDefault()
e.stopPropagation()
try {
e.dataTransfer.dropEffect = 'copy';
} catch (err) {
//
}
return false;
return false
}
handleDrop = (e) => {
if (!me) return;
if (!me) return
if (this.dataTransferIsText(e.dataTransfer)) return;
e.preventDefault();
if (this.dataTransferIsText(e.dataTransfer)) return
e.preventDefault()
this.setState({ draggingOver: false });
this.dragTargets = [];
this.setState({
draggingOver: false
})
this.dragTargets = []
if (e.dataTransfer && e.dataTransfer.files.length >= 1) {
this.props.dispatch(uploadCompose(e.dataTransfer.files));
this.props.dispatch(uploadCompose(e.dataTransfer.files))
}
}
@ -336,19 +325,25 @@ class UI extends PureComponent {
this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el));
if (this.dragTargets.length > 0) {
return;
}
if (this.dragTargets.length > 0) return
this.setState({ draggingOver: false });
this.setState({
draggingOver: false
})
}
dataTransferIsText = (dataTransfer) => {
return (dataTransfer && Array.from(dataTransfer.types).includes('text/plain') && dataTransfer.items.length === 1);
return (
dataTransfer
&& Array.from(dataTransfer.types).includes('text/plain')
&& dataTransfer.items.length === 1
)
}
closeUploadModal = () => {
this.setState({ draggingOver: false });
this.setState({
draggingOver: false
})
}
handleServiceWorkerPostMessage = ({ data }) => {
@ -388,6 +383,7 @@ class UI extends PureComponent {
componentDidMount() {
if (!me) return;
this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName);
};
@ -451,9 +447,9 @@ class UI extends PureComponent {
handleHotkeyBack = () => {
if (window.history && window.history.length === 1) {
this.context.router.history.push('/home'); // homehack
this.context.router.history.push('/home') // homehack
} else {
this.context.router.history.goBack();
this.context.router.history.goBack()
}
}
@ -462,52 +458,52 @@ class UI extends PureComponent {
}
handleHotkeyToggleHelp = () => {
this.props.dispatch(openModal("HOTKEYS"));
this.props.dispatch(openModal("HOTKEYS"))
}
handleHotkeyGoToHome = () => {
this.context.router.history.push('/home');
this.context.router.history.push('/home')
}
handleHotkeyGoToNotifications = () => {
this.context.router.history.push('/notifications');
this.context.router.history.push('/notifications')
}
handleHotkeyGoToStart = () => {
this.context.router.history.push('/getting-started');
this.context.router.history.push('/getting-started')
}
handleHotkeyGoToFavourites = () => {
this.context.router.history.push(`/${meUsername}/favorites`);
this.context.router.history.push(`/${meUsername}/favorites`)
}
handleHotkeyGoToPinned = () => {
this.context.router.history.push(`/${meUsername}/pins`);
this.context.router.history.push(`/${meUsername}/pins`)
}
handleHotkeyGoToProfile = () => {
this.context.router.history.push(`/${meUsername}`);
this.context.router.history.push(`/${meUsername}`)
}
handleHotkeyGoToBlocked = () => {
this.context.router.history.push('/blocks');
this.context.router.history.push('/blocks')
}
handleHotkeyGoToMuted = () => {
this.context.router.history.push('/mutes');
this.context.router.history.push('/mutes')
}
handleHotkeyGoToRequests = () => {
this.context.router.history.push('/follow_requests');
this.context.router.history.push('/follow_requests')
}
handleOpenComposeModal = () => {
this.props.dispatch(openModal("COMPOSE"));
this.props.dispatch(openModal("COMPOSE"))
}
render() {
const { draggingOver } = this.state;
const { intl, children, isComposing, location, dropdownMenuIsOpen } = this.props;
const { children, location, dropdownMenuIsOpen } = this.props;
const handlers = me ? {
help: this.handleHotkeyToggleHelp,
@ -527,21 +523,29 @@ class UI extends PureComponent {
goToRequests: this.handleHotkeyGoToRequests,
} : {};
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
return (
<HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
<div ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
<SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
<HotKeys
keyMap={keyMap}
handlers={handlers}
ref={this.setHotkeysRef}
attach={window}
focused
>
<div
ref={this.setRef}
style={{
pointerEvents: dropdownMenuIsOpen ? 'none' : null
}}
>
<SwitchingArea
location={location}
onLayoutChange={this.handleLayoutChange}
>
{children}
</SwitchingColumnsArea>
{ /* <FooterBar /> */ }
{ /* me && floatingActionButton */ }
</SwitchingArea>
{ /*
<NotificationsContainer />
<LoadingBarContainer className='loading-bar' />
<ModalContainer />
<UploadArea active={draggingOver} onClose={this.closeUploadModal} />
*/ }

144
app/javascript/gabsocial/features/ui/util/async-components.js
View File

@ -1,143 +1,143 @@
export function EmojiPicker () {
return import(/* webpackChunkName: "emoji_picker" */'../../../components/emoji/emoji_picker');
export function EmojiPicker() {
return import(/* webpackChunkName: "emoji_picker" */'../../../components/emoji/emoji_picker')
}
export function Compose () {
return import(/* webpackChunkName: "features/compose" */'../../compose');
export function Compose() {
return import(/* webpackChunkName: "features/compose" */'../../compose')
}
export function Notifications () {
return import(/* webpackChunkName: "features/notifications" */'../../notifications');
export function Notifications() {
return import(/* webpackChunkName: "features/notifications" */'../../notifications')
}
export function HomeTimeline () {
return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline');
export function HomeTimeline() {
return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline')
}
export function CommunityTimeline () {
return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline');
export function CommunityTimeline() {
return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline')
}
export function HashtagTimeline () {
return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline');
export function HashtagTimeline() {
return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline')
}
export function ListTimeline () {
return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline');
export function ListTimeline() {
return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline')
}
export function GroupTimeline () {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/timeline');
export function GroupTimeline() {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/timeline')
}
export function GroupMembers () {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/members');
export function GroupMembers() {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/members')
}
export function GroupRemovedAccounts () {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/removed_accounts');
export function GroupRemovedAccounts() {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/removed_accounts')
}
export function GroupCreate () {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/create');
export function GroupCreate() {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/create')
}
export function GroupEdit () {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/edit');
export function GroupEdit() {
return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/edit')
}
export function Groups () {
return import(/* webpackChunkName: "features/groups/index" */'../../groups/index');
export function GroupsCollection() {
return import(/* webpackChunkName: "features/groups_collection" */'../../g../../groups_collection')
}
export function ListsDirectory () {
return import(/* webpackChunkName: "features/lists_directory" */'../../lists_directory');
export function ListsDirectory() {
return import(/* webpackChunkName: "features/lists_directory" */'../../lists_directory')
}
export function Status () {
return import(/* webpackChunkName: "features/status" */'../../status');
export function Status() {
return import(/* webpackChunkName: "features/status" */'../../status')
}
export function PinnedStatuses () {
return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses');
export function PinnedStatuses() {
return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses')
}
export function AccountTimeline () {
return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline');
export function AccountTimeline() {
return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline')
}
export function AccountGallery () {
return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery');
export function AccountGallery() {
return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery')
}
export function Followers () {
return import(/* webpackChunkName: "features/followers" */'../../followers');
export function Followers() {
return import(/* webpackChunkName: "features/followers" */'../../followers')
}
export function Following () {
return import(/* webpackChunkName: "features/following" */'../../following');
export function Following() {
return import(/* webpackChunkName: "features/following" */'../../following')
}
export function Reblogs () {
return import(/* webpackChunkName: "features/reblogs" */'../../reblogs');
export function Reblogs() {
return import(/* webpackChunkName: "features/reblogs" */'../../reblogs')
}
export function FollowRequests () {
return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests');
export function FollowRequests() {
return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests')
}
export function GenericNotFound () {
return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found');
export function GenericNotFound() {
return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found')
}
export function FavouritedStatuses () {
return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses');
export function FavouritedStatuses() {
return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses')
}
export function Blocks () {
return import(/* webpackChunkName: "features/blocks" */'../../blocks');
export function Blocks() {
return import(/* webpackChunkName: "features/blocks" */'../../blocks')
}
export function DomainBlocks () {
return import(/* webpackChunkName: "features/domain_blocks" */'../../domain_blocks');
export function DomainBlocks() {
return import(/* webpackChunkName: "features/domain_blocks" */'../../domain_blocks')
}
export function Mutes () {
return import(/* webpackChunkName: "features/mutes" */'../../mutes');
export function Mutes() {
return import(/* webpackChunkName: "features/mutes" */'../../mutes')
}
export function MuteModal () {
return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal');
export function MuteModal() {
return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal')
}
export function StatusRevisionModal () {
return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal');
export function StatusRevisionModal() {
return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal')
}
export function ReportModal () {
return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal');
export function ReportModal() {
return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal')
}
export function MediaGallery () {
return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery');
export function MediaGallery() {
return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery')
}
export function Video () {
return import(/* webpackChunkName: "features/video" */'../../video');
export function Video() {
return import(/* webpackChunkName: "features/video" */'../../video')
}
export function EmbedModal () {
return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal');
export function EmbedModal() {
return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal')
}
export function ListEditor () {
return import(/* webpackChunkName: "features/list_editor" */'../../list_editor');
export function ListEditor() {
return import(/* webpackChunkName: "features/list_editor" */'../../list_editor')
}
export function ListAdder () {
return import(/*webpackChunkName: "features/list_adder" */'../../list_adder');
export function ListAdder() {
return import(/*webpackChunkName: "features/list_adder" */'../../list_adder')
}
export function Search () {
return import(/*webpackChunkName: "features/search" */'../../search');
export function Search() {
return import(/*webpackChunkName: "features/search" */'../../search')
}

100
app/javascript/gabsocial/features/ui/util/bundle.js
View File

@ -1,21 +1,26 @@
import { fetchBundleRequest, fetchBundleSuccess, fetchBundleFail } from '../../../actions/bundles';
import {
fetchBundleRequest,
fetchBundleSuccess,
fetchBundleFail
} from '../../../actions/bundles'
const mapDispatchToProps = dispatch => ({
onFetch() {
dispatch(fetchBundleRequest());
dispatch(fetchBundleRequest())
},
onFetchSuccess() {
dispatch(fetchBundleSuccess());
dispatch(fetchBundleSuccess())
},
onFetchFail(error) {
dispatch(fetchBundleFail(error));
dispatch(fetchBundleFail(error))
},
});
})
const emptyComponent = () => null;
const noop = () => { };
const emptyComponent = () => null
const noop = () => { }
export default @connect(null, mapDispatchToProps)
export default
@connect(null, mapDispatchToProps)
class Bundle extends PureComponent {
static propTypes = {
@ -46,69 +51,94 @@ class Bundle extends PureComponent {
}
componentWillMount() {
this.load(this.props);
this.load(this.props)
}
componentWillReceiveProps(nextProps) {
if (nextProps.fetchComponent !== this.props.fetchComponent) {
this.load(nextProps);
this.load(nextProps)
}
}
componentWillUnmount () {
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
clearTimeout(this.timeout)
}
}
load = (props) => {
const { fetchComponent, onFetch, onFetchSuccess, onFetchFail, renderDelay } = props || this.props;
const cachedMod = Bundle.cache.get(fetchComponent);
const {
fetchComponent,
onFetch,
onFetchSuccess,
onFetchFail,
renderDelay
} = props || this.props
const cachedMod = Bundle.cache.get(fetchComponent)
if (fetchComponent === undefined) {
this.setState({ mod: null });
return Promise.resolve();
this.setState({
mod: null
})
return Promise.resolve()
}
onFetch();
onFetch()
if (cachedMod) {
this.setState({ mod: cachedMod.default });
onFetchSuccess();
return Promise.resolve();
this.setState({
mod: cachedMod.default
})
onFetchSuccess()
return Promise.resolve()
}
this.setState({ mod: undefined });
this.setState({
mod: undefined
})
if (renderDelay !== 0) {
this.timestamp = new Date();
this.timeout = setTimeout(() => this.setState({ forceRender: true }), renderDelay);
this.timestamp = new Date()
this.timeout = setTimeout(() => this.setState({
forceRender: true
}), renderDelay)
}
return fetchComponent()
.then((mod) => {
Bundle.cache.set(fetchComponent, mod);
this.setState({ mod: mod.default });
onFetchSuccess();
Bundle.cache.set(fetchComponent, mod)
this.setState({
mod: mod.default
})
onFetchSuccess()
})
.catch((error) => {
this.setState({ mod: null });
onFetchFail(error);
});
this.setState({
mod: null
})
onFetchFail(error)
})
}
render() {
const { loading: Loading, error: Error, children, renderDelay } = this.props;
const { mod, forceRender } = this.state;
const elapsed = this.timestamp ? (new Date() - this.timestamp) : renderDelay;
const {
loading: LoadingComponent,
error: ErrorComponent,
children,
renderDelay
} = this.props
const { mod, forceRender } = this.state
const elapsed = this.timestamp ? (new Date() - this.timestamp) : renderDelay
if (mod === undefined) {
return (elapsed >= renderDelay || forceRender) ? <Loading /> : null;
return (elapsed >= renderDelay || forceRender) ? <LoadingComponent /> : null
} else if (mod === null) {
return <Error onRetry={this.load} />;
return <ErrorComponent onRetry={this.load} />
}
return children(mod);
return children(mod)
}
}

69
app/javascript/gabsocial/features/ui/util/wrapped_route.js
View File

@ -1,77 +1,64 @@
import { Route } from 'react-router-dom';
import DefaultLayout from '../../../components/layouts/default_layout';
import BundleColumnError from '../../../components/bundle_column_error';
import Bundle from './bundle';
import { me } from '../../../initial_state';
import ColumnIndicator from '../../../components/column_indicator';
import { Route } from 'react-router-dom'
import BundleColumnError from '../../../components/bundle_column_error'
import Bundle from './bundle'
import { me } from '../../../initial_state'
export default class WrappedRoute extends Component {
static propTypes = {
component: PropTypes.func.isRequired,
page: PropTypes.func,
page: PropTypes.func.isRequired,
content: PropTypes.node,
componentParams: PropTypes.object,
layout: PropTypes.object,
publicRoute: PropTypes.bool,
};
}
static defaultProps = {
componentParams: {},
};
}
renderComponent = ({ match }) => {
const { component, content, componentParams, layout, page: Page } = this.props;
if (Page) {
return (
<Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
{Component =>
(
<Page params={match.params} {...componentParams}>
<Component params={match.params} {...componentParams}>
{content}
</Component>
</Page>
)
}
</Bundle>
);
}
const {
component,
content,
componentParams,
page: Page
} = this.props
return (
<Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
<Bundle fetchComponent={component} error={this.renderError}>
{Component =>
(
<DefaultLayout layout={layout}>
<Page params={match.params} {...componentParams}>
<Component params={match.params} {...componentParams}>
{content}
</Component>
</DefaultLayout>
</Page>
)
}
</Bundle>
);
}
renderLoading = () => {
return <div />
)
}
renderError = (props) => {
return <BundleColumnError {...props} />;
return <BundleColumnError {...props} />
}
render() {
const { component: Component, content, publicRoute, ...rest } = this.props;
const {
component: Component,
content,
publicRoute,
...rest
} = this.props
if (!publicRoute && !me) {
const actualUrl = encodeURIComponent(this.props.computedMatch.url);
const actualUrl = encodeURIComponent(this.props.computedMatch.url)
return <Route path={this.props.path} component={() => {
window.location.href = `/auth/sign_in?redirect_uri=${actualUrl}`;
return null;
window.location.href = `/auth/sign_in?redirect_uri=${actualUrl}`
return null
}} />
}
return <Route {...rest} render={this.renderComponent} />;
return <Route {...rest} render={this.renderComponent} />
}
}

12
app/javascript/gabsocial/pages/error_page.js Normal file
View File

@ -0,0 +1,12 @@
export default class ErrorPage extends PureComponent {
render() {
const { children } = this.props;
return (
<div>
{children}
</div>
)
}
}

5
app/javascript/gabsocial/pages/group_page.js
View File

@ -4,8 +4,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { fetchGroup } from '../actions/groups';
import HeaderContainer from '../features/groups/timeline/containers/header_container';
import GroupPanel from '../features/groups/timeline/components/panel';
import GroupSidebarPanel from '../features/groups/sidebar_panel';
import DefaultLayout from '../components/default_layout';
// import GroupSidebarPanel from '../features/groups/sidebar_panel';
import DefaultLayout from '../components/layouts/default_layout';
import { WhoToFollowPanel } from '../components/panel';
import LinkFooter from '../components/link_footer';
@ -39,7 +39,6 @@ class GroupPage extends ImmutablePureComponent {
TOP: top,
RIGHT: (
<Fragment>
<GroupSidebarPanel />
<WhoToFollowPanel />
</Fragment>
),

56
app/javascript/gabsocial/pages/groups_page.js Normal file
View File

@ -0,0 +1,56 @@
import { Fragment } from 'react'
import LinkFooter from '../components/link_footer'
import GroupsPanel from '../components/panel/groups_panel'
import DefaultLayout from '../components/layouts/default_layout'
export default class GroupsPage extends PureComponent {
handleClickNewList () {
console.log("handleClickNewList")
}
handleClickEditLists () {
console.log("handleClickEditLists")
}
render() {
const { children } = this.props
const tabs = [
{
title: 'Featured',
to: '/groups'
},
{
title: 'My Groups',
to: '/groups/browse/member'
},
{ // only if is_pro
title: 'Admin',
to: '/groups/browse/admin'
},
]
return (
<DefaultLayout
title='Groups'
actions={[
{
icon: 'list-delete',
onClick: this.handleClickEditLists
},
]}
layout={(
<Fragment>
<GroupsPanel slim />
<LinkFooter />
</Fragment>
)}
tabs={tabs}
showBackBtn
>
{ children }
</DefaultLayout>
)
}
}

1
app/javascript/gabsocial/pages/notifications_page.js
View File

@ -18,6 +18,7 @@ export default class NotificationsPage extends PureComponent {
<LinkFooter />
</Fragment>
)}
showBackBtn
>
{children}
</DefaultLayout>

37
app/javascript/gabsocial/pages/search_page.js
View File

@ -1,32 +1,17 @@
import { Fragment } from 'react';
import Header from '../features/search/components/header';
import LinkFooter from '../components/link_footer';
import { WhoToFollowPanel, SignUpPanel } from '../components/panel';
import DefaultLayout from '../components/layouts/default_layout';
import { Fragment } from 'react'
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import TrendsPanel from '../components/panel/trends_panel'
import SearchLayout from '../components/layouts/search_layout'
export default class SearchPage extends PureComponent {
static propTypes = {
children: PropTypes.node,
};
render() {
const { children } = this.props
return (
<DefaultLayout
layout={{
TOP: <Header/>,
RIGHT: (
<Fragment>
<SignUpPanel />
<WhoToFollowPanel />
</Fragment>
),
LEFT: <LinkFooter/>,
}}
>
{this.props.children}
</DefaultLayout>
<SearchLayout>
{children}
</SearchLayout>
)
}
};
}

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

@ -106,12 +106,14 @@ body {
.borderColorSecondary { border-color: #ECECED; }
.borderColorWhite { border-color: #fff; }
.borderColorBrand { border-color: #21cf7a; }
.borderColorTransparent { border-color: transparent; }
.borderRight1PX { border-right-width: 1px; }
.borderBottom1PX { border-bottom-width: 1px; }
.borderLeft1PX { border-left-width: 1px; }
.borderTop1PX { border-top-width: 1px; }
.border1PX { border-width: 1px; }
.border2PX { border-width: 2px; }
.borderBottom2PX { border-bottom-width: 2px; }
.marginAuto { margin: auto; }
@ -131,6 +133,7 @@ body {
.backgroundSubtle { background-color: #F5F8FA; }
.backgroundSubtle_onHover:hover { background-color: #F5F8FA; }
.backgroundSubtle2 { background-color: #e8ecef; }
.backgroundSubtle2Dark_onHover:hover { background-color: #d9e0e5; }
.backgroundcolorSecondary3 { background-color: #F6F6F9; }
.backgroundColorPrimary { background-color: #fff; }
.backgroundColorBrandLightOpaque { background-color: rgba(54, 233, 145, 0.1); }
@ -184,6 +187,7 @@ body {
.width240PX { width: 240px; }
.width100PC { width: 100%; }
.width72PX { width: 72px; }
.width50PC { width: 50%; }
.maxWidth100PC { max-width: 100%; }
@media (min-width: 1480px) {