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-03-11 19:56:18 -04:00
parent af1627815c
commit 7712ebdbbd
79 changed files with 815 additions and 389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/gabsocial/actions/popover.js
View File

@ -1,12 +1,11 @@
export const POPOVER_OPEN = 'POPOVER_OPEN'
export const POPOVER_CLOSE = 'POPOVER_CLOSE'
export function openPopover(type, keyboard = false, placement = 'top') {
export function openPopover(type, props) {
return {
keyboard,
placement,
type: POPOVER_OPEN,
popoverType: type,
popoverProps: props,
}
}

10
app/javascript/gabsocial/components/account.js
View File

@ -114,7 +114,7 @@ class Account extends ImmutablePureComponent {
onClick: requested ? this.handleUnrequest : this.handleBlock,
color: 'primary',
backgroundColor: 'tertiary',
className: _s.marginTop5PX,
className: _s.mt5,
}
} else if (!account.get('moved') || following) {
buttonOptions = {
@ -122,7 +122,7 @@ class Account extends ImmutablePureComponent {
outline: !following,
color: !following ? 'brand' : 'white',
backgroundColor: !following ? 'none' : 'brand',
className: _s.marginTop5PX,
className: _s.mt5,
onClick: this.handleFollow,
}
buttonText = intl.formatMessage(following ? messages.unfollow : messages.follow)
@ -141,7 +141,7 @@ class Account extends ImmutablePureComponent {
narrow
circle
backgroundColor='none'
className={_s.paddingHorizontal5PX}
className={_s.px5}
onClick={dismissAction}
icon='close'
iconWidth='8px'
@ -151,7 +151,7 @@ class Account extends ImmutablePureComponent {
)
return (
<div className={[_s.default, _s.marginTop5PX, _s.marginBottom15PX].join(' ')}>
<div className={[_s.default, _s.mt5, _s.mb15].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>
<NavLink
@ -165,7 +165,7 @@ class Account extends ImmutablePureComponent {
<NavLink
title={account.get('acct')}
to={`/${account.get('acct')}`}
className={[_s.default, _s.alignItemsStart, _s.paddingHorizontal10PX, _s.flexGrow1].join(' ')}
className={[_s.default, _s.alignItemsStart, _s.px10, _s.flexGrow1].join(' ')}
>
<DisplayName account={account} multiline={compact} />
{!compact && button}

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

@ -222,11 +222,11 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
outlineNone: 1,
backgroundColorPrimary: !small,
backgroundSubtle: small,
paddingVertical15PX: !small,
paddingVertical10PX: small,
py15: !small,
py10: small,
fontSize16PX: !small,
fontSize14PX: small,
marginRight5PX: small,
mr5: small,
})
// <div aria-activedescendant="typeaheadFocus-0.35973815699338085"
@ -248,7 +248,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
return (
<Fragment>
<div className={[_s.default, _s.flexGrow1].join(' ')}>
<div className={[_s.default, _s.marginLeft5PX].join(' ')}>
<div className={[_s.default, _s.ml5].join(' ')}>
<ContentEditable
noFocuscontainerRefocus

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

@ -26,7 +26,7 @@ export default class Badge extends PureComponent {
<Text
color='white'
size='extraSmall'
className={[_s.backgroundColorBrand, _s.paddingHorizontal5PX, _s.lineHeight125, _s.radiusSmall].join(' ')}
className={[_s.backgroundColorBrand, _s.px5, _s.lineHeight125, _s.radiusSmall].join(' ')}
>
{children}
</Text>

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

@ -116,9 +116,9 @@ export default class Button extends PureComponent {
circle: !text,
radiusSmall: radiusSmall,
paddingVertical5PX: narrow,
paddingVertical10PX: !text && !narrow,
paddingHorizontal15PX: !text,
py5: narrow,
py10: !text && !narrow,
px15: !text,
width100PC: block,

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

@ -41,16 +41,16 @@ export default class ColumnHeader extends PureComponent {
showBackBtn &&
<Button
backgroundColor='none'
className={[_s.alignItemsCenter, _s.paddingLeft0, _s.justifyContentCenter].join(' ')}
className={[_s.alignItemsCenter, _s.pl0, _s.justifyContentCenter].join(' ')}
icon='back'
iconWidth='20px'
iconHeight='20px'
iconClassName={[_s.marginRight5PX, _s.fillColorPrimary].join(' ')}
iconClassName={[_s.mr5, _s.fillColorPrimary].join(' ')}
onClick={this.handleBackClick}
/>
}
<div className={[_s.default, _s.height100PC, _s.justifyContentCenter, _s.marginRight10PX].join(' ')}>
<div className={[_s.default, _s.height100PC, _s.justifyContentCenter, _s.mr10].join(' ')}>
<Heading size='h1'>
{title}
</Heading>
@ -71,7 +71,7 @@ export default class ColumnHeader extends PureComponent {
backgroundColor='tertiary'
onClick={() => action.onClick()}
key={`column-header-action-btn-${i}`}
className={[_s.marginLeft5PX, _s.paddingHorizontal10PX].join(' ')}
className={[_s.ml5, _s.px10].join(' ')}
iconClassName={_s.fillColorSecondary}
icon={action.icon}
iconWidth='20px'

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

@ -30,14 +30,14 @@ class ColumnIndicator extends PureComponent {
const title = type !== 'error' ? intl.formatMessage(messages[type]) : message
return (
<div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.paddingVertical15PX].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.py15].join(' ')}>
<Icon id={type} width='44px' height='44px' />
{
type !== 'loading' &&
<Text
align='center'
size='medium'
className={_s.marginTop10PX}
className={_s.mt10}
>
{title}
</Text>

57
app/javascript/gabsocial/components/comment.js
View File

@ -18,14 +18,42 @@ const messages = defineMessages({
})
const makeMapStateToProps = () => {
const getStatus = makeGetStatus();
const getStatus = makeGetStatus()
const mapStateToProps = (state, props) => ({
status: getStatus(state, props),
const mapStateToProps = (state, props) => {
const status = getStatus(state, props)
let descendantsIds = Immutable.List()
if (status) {
// ALL descendants
descendantsIds = descendantsIds.withMutations(mutable => {
const ids = [status.get('id')]
while (ids.length > 0) {
let id = ids.shift();
const replies = state.getIn(['contexts', 'replies', id])
if (status.get('id') !== id) {
mutable.push(id)
}
if (replies) {
replies.reverse().forEach(reply => {
ids.unshift(reply)
});
}
}
})
}
return mapStateToProps;
};
return {
status,
descendantsIds,
}
}
return mapStateToProps
}
export default
@injectIntl
@ -34,6 +62,7 @@ class Comment extends ImmutablePureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
descendantsIds: ImmutablePropTypes.list,
}
handleClick = () => {
@ -55,24 +84,24 @@ class Comment extends ImmutablePureComponent {
console.log("status:", status)
return (
<div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom10PX, _s.paddingVertical5PX].join(' ')} data-comment={status.get('id')}>
<div className={[_s.default, _s.px10, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
<div className={[_s.default].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>
<NavLink
to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])}
className={[_s.default, _s.marginRight10PX, _s.paddingTop5PX].join(' ')}
className={[_s.default, _s.mr10, _s.pt5].join(' ')}
>
<Avatar account={status.get('account')} size={32} />
</NavLink>
<div className={[_s.default, _s.flexGrow1].join(' ')}>
<div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical5PX, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
<div className={_s.paddingTop2PX}>
<div className={[_s.default, _s.px10, _s.py5, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
<div className={_s.pt2}>
<CommentHeader status={status} />
</div>
<div className={[_s.paddingVertical5PX].join(' ')}>
<div className={[_s.py5].join(' ')}>
<StatusContent
status={status}
onClick={this.handleClick}
@ -81,14 +110,14 @@ class Comment extends ImmutablePureComponent {
/>
</div>
</div>
<div className={[_s.default, _s.flexRow, _s.marginTop5PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
<Button
text
radiusSmall
backgroundColor='none'
color='tertiary'
className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
>
<Text size='extraSmall' color='inherit' weight='bold'>
Like
@ -100,7 +129,7 @@ class Comment extends ImmutablePureComponent {
radiusSmall
backgroundColor='none'
color='tertiary'
className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
>
<Text size='extraSmall' color='inherit' weight='bold'>
Reply
@ -112,7 +141,7 @@ class Comment extends ImmutablePureComponent {
radiusSmall
backgroundColor='none'
color='tertiary'
className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
>
<Text size='extraSmall' color='inherit' weight='bold'>
···

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

@ -48,7 +48,7 @@ class CommentHeader extends ImmutablePureComponent {
backgroundColor='none'
color='tertiary'
onClick={this.handleOpenStatusEdits}
className={_s.marginLeft5PX}
className={_s.ml5}
>
<Text size='extraSmall' color='inherit'>
Edited
@ -67,7 +67,7 @@ class CommentHeader extends ImmutablePureComponent {
backgroundColor='none'
color='tertiary'
to={statusUrl}
className={_s.marginLeft5PX}
className={_s.ml5}
>
<Text size='extraSmall' color='inherit'>
{favoriteCount}
@ -87,7 +87,7 @@ class CommentHeader extends ImmutablePureComponent {
backgroundColor='none'
color='tertiary'
to={statusUrl}
className={_s.marginLeft5PX}
className={_s.ml5}
>
<Text size='extraSmall' color='inherit'>
{repostCount}
@ -105,7 +105,7 @@ class CommentHeader extends ImmutablePureComponent {
backgroundColor='none'
color='tertiary'
to={statusUrl}
className={_s.marginLeft5PX}
className={_s.ml5}
>
<Text size='extraSmall' color='inherit'>
<RelativeTimestamp timestamp={status.get('created_at')} />

161
app/javascript/gabsocial/components/comment_list.js Normal file
View File

@ -0,0 +1,161 @@
import { Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { makeGetStatus } from '../selectors';
import CommentHeader from './comment_header'
import Avatar from './avatar'
import Button from './button'
import DisplayName from './display_name'
import DotTextSeperator from './dot_text_seperator'
import RelativeTimestamp from './relative_timestamp'
import Text from './text'
import StatusContent from './status_content'
const messages = defineMessages({
follow: { id: 'follow', defaultMessage: 'Follow' },
})
const makeMapStateToProps = () => {
const getStatus = makeGetStatus()
const mapStateToProps = (state, props) => {
const status = getStatus(state, props)
let descendantsIds = Immutable.List()
if (status) {
// ALL descendants
descendantsIds = descendantsIds.withMutations(mutable => {
const ids = [status.get('id')]
while (ids.length > 0) {
let id = ids.shift();
const replies = state.getIn(['contexts', 'replies', id])
if (status.get('id') !== id) {
mutable.push(id)
}
if (replies) {
replies.reverse().forEach(reply => {
ids.unshift(reply)
});
}
}
})
}
return {
status,
descendantsIds,
}
}
return mapStateToProps
}
export default
@injectIntl
@connect(makeMapStateToProps)
class Comment extends ImmutablePureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
descendantsIds: ImmutablePropTypes.list,
}
handleClick = () => {
// if (this.props.onClick) {
// this.props.onClick();
// return;
// }
// if (!this.context.router) return;
// this.context.router.history.push(
// `/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
// )
}
render() {
const { status } = this.props
console.log("status:", status)
return (
<div className={[_s.default, _s.px10, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
<div className={[_s.default].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>
<NavLink
to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])}
className={[_s.default, _s.mr10, _s.pt5].join(' ')}
>
<Avatar account={status.get('account')} size={32} />
</NavLink>
<div className={[_s.default, _s.flexGrow1].join(' ')}>
<div className={[_s.default, _s.px10, _s.py5, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
<div className={_s.pt2}>
<CommentHeader status={status} />
</div>
<div className={[_s.py5].join(' ')}>
<StatusContent
status={status}
onClick={this.handleClick}
isComment
collapsable
/>
</div>
</div>
<div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
<Button
text
radiusSmall
backgroundColor='none'
color='tertiary'
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
>
<Text size='extraSmall' color='inherit' weight='bold'>
Like
</Text>
</Button>
<Button
text
radiusSmall
backgroundColor='none'
color='tertiary'
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
>
<Text size='extraSmall' color='inherit' weight='bold'>
Reply
</Text>
</Button>
<Button
text
radiusSmall
backgroundColor='none'
color='tertiary'
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
>
<Text size='extraSmall' color='inherit' weight='bold'>
···
</Text>
</Button>
</div>
</div>
</div>
</div>
</div>
)
}
}

30
app/javascript/gabsocial/components/display_name.js
View File

@ -9,8 +9,8 @@ import Icon from './icon'
const cx = classNames.bind(_s)
const mapDispatchToProps = dispatch => ({
openUserInfoPopover() {
dispatch(openPopover('USER_INFO'))
openUserInfoPopover(props) {
dispatch(openPopover('USER_INFO', props))
},
closeUserInfoPopover() {
dispatch(closePopover())
@ -33,13 +33,21 @@ class DisplayName extends ImmutablePureComponent {
}
handleMouseEnter = debounce(() => {
// console.log("SHOW - USER POPOVER")
// this.props.openUserInfoPopover()
}, 50, { leading: true })
console.log("SHOW - USER POPOVER")
this.props.openUserInfoPopover({
targetRef: this.node,
position: 'top',
account: this.props.account,
})
}, 1000, { leading: true })
handleMouseLeave = () => {
// console.log("HIDE - USER POPOVER")
// this.props.closeUserInfoPopover()
handleMouseLeave = debounce(() => {
console.log("HIDE - USER POPOVER")
this.props.closeUserInfoPopover()
}, 1000, { leading: true })
setRef = (n) => {
this.node = n;
}
render() {
@ -72,7 +80,7 @@ class DisplayName extends ImmutablePureComponent {
whiteSpaceNoWrap: 1,
fontWeightBold: 1,
colorPrimary: 1,
marginRight2PX: 1,
mr2: 1,
lineHeight125: !small,
fontSize14PX: small,
fontSize15PX: !large,
@ -90,7 +98,7 @@ class DisplayName extends ImmutablePureComponent {
fontWeightNormal: 1,
lineHeight15: multiline,
lineHeight125: !multiline,
marginLeft5PX: !multiline,
ml5: !multiline,
fontSize14PX: small,
fontSize15PX: !large,
fontSize16PX: large && !small,
@ -102,7 +110,7 @@ class DisplayName extends ImmutablePureComponent {
// : todo :
return (
<span {...containerOptions}>
<span {...containerOptions} ref={this.setRef}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
<strong

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

@ -16,8 +16,8 @@ export default class Divider extends PureComponent {
borderBottom1PX: !invisible,
borderColorSecondary2: !invisible,
width100PC: 1,
marginBottom15PX: !small,
marginVertical10PX: small || invisible,
mb15: !small,
my10: small || invisible,
})
return (

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

@ -4,7 +4,7 @@ export default class DotTextSeperator extends PureComponent {
render() {
return (
<Text size='small' color='secondary' className={_s.marginLeft5PX}>·</Text>
<Text size='small' color='secondary' className={_s.ml5}>·</Text>
)
}

6
app/javascript/gabsocial/components/file_input.js
View File

@ -45,8 +45,8 @@ export default class FileInput extends PureComponent {
borderDashed: 1,
borderColorSecondary: 1,
backgroundColorPrimary: 1,
paddingHorizontal10PX: 1,
paddingVertical10PX: 1,
px10: 1,
py10: 1,
radiusSmall: 1,
cursorPointer: 1,
})
@ -55,7 +55,7 @@ export default class FileInput extends PureComponent {
<div>
{
!!title &&
<div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
<div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
<Text size='small' weight='medium' color='secondary'>
{title}
</Text>

14
app/javascript/gabsocial/components/group_collection_item.js
View File

@ -64,9 +64,9 @@ class GroupCollectionItem extends ImmutablePureComponent {
borderColorSecondary: 1,
radiusSmall: 1,
border1PX: 1,
marginBottom10PX: 1,
marginLeft5PX: 1,
marginRight5PX: 1,
mb10: 1,
ml5: 1,
mr5: 1,
backgroundColorPrimary: 1,
backgroundSubtle_onHover: isMember,
})
@ -83,19 +83,19 @@ class GroupCollectionItem extends ImmutablePureComponent {
height={imageHeight}
/>
<div className={[_s.default, _s.paddingHorizontal10PX, _s.marginVertical10PX].join(' ')}>
<div className={[_s.default, _s.px10, _s.my10].join(' ')}>
<Text color='primary' size='medium' weight='bold'>
{group.get('title')}
</Text>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.marginTop5PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.mt5].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}>
<Text color='secondary' size='small' className={_s.ml5}>
{subtitle}
</Text>
</div>
@ -103,7 +103,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
{
!isMember &&
<div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom10PX].join(' ')}>
<div className={[_s.default, _s.px10, _s.mb10].join(' ')}>
<Button
color='primary'
backgroundColor='tertiary'

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

@ -59,12 +59,12 @@ class GroupListItem extends ImmutablePureComponent {
backgroundSubtle_onHover: 1,
borderColorSecondary: 1,
radiusSmall: !slim,
marginTop5PX: !slim,
marginBottom10PX: !slim,
mt5: !slim,
mb10: !slim,
border1PX: !slim,
borderBottom1PX: slim && !isLast,
flexRow: slim,
paddingVertical5PX: slim,
py5: slim,
})
const imageClasses = cx({
@ -72,14 +72,14 @@ class GroupListItem extends ImmutablePureComponent {
radiusSmall: slim,
height72PX: slim,
width72PX: slim,
marginLeft15PX: slim,
ml15: slim,
})
const textContainerClasses = cx({
default: 1,
paddingHorizontal10PX: 1,
marginTop5PX: 1,
marginBottom10PX: !slim,
px10: 1,
mt5: 1,
mb10: !slim,
})
return (
@ -100,14 +100,14 @@ class GroupListItem extends ImmutablePureComponent {
{
slim &&
<Text color='secondary' size='small' className={_s.marginTop5PX}>
<Text color='secondary' size='small' className={_s.mt5}>
{shortNumberFormat(group.get('member_count'))}
&nbsp;
{intl.formatMessage(messages.members)}
</Text>
}
<Text color='secondary' size='small' className={_s.marginTop5PX}>
<Text color='secondary' size='small' className={_s.mt5}>
{subtitle}
</Text>

6
app/javascript/gabsocial/components/hashtag_item.js
View File

@ -31,13 +31,13 @@ export default class HashtagItem extends ImmutablePureComponent {
return (
<NavLink
to='/tags/test'
className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.paddingHorizontal15PX, _s.paddingVertical5PX].join(' ')}
className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.px15, _s.py5].join(' ')}
onMouseEnter={() => this.handleOnMouseEnter()}
onMouseLeave={() => this.handleOnMouseLeave()}
>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<div>
<Text color='brand' size='medium' weight='bold' className={[_s.paddingVertical2PX, _s.lineHeight15].join(' ')}>
<Text color='brand' size='medium' weight='bold' className={[_s.py2, _s.lineHeight15].join(' ')}>
#randomhashtag
</Text>
</div>
@ -52,7 +52,7 @@ export default class HashtagItem extends ImmutablePureComponent {
className={_s.marginLeftAuto}
/>
</div>
<Text color='secondary' size='small' className={_s.paddingVertical2PX}>
<Text color='secondary' size='small' className={_s.py2}>
10,240 Gabs
</Text>
</NavLink>

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

@ -15,6 +15,7 @@ export default class Heading extends PureComponent {
static propTypes = {
children: PropTypes.any,
size: PropTypes.oneOf(Object.keys(SIZES)),
center: PropTypes.bool,
}
static defaultProps = {
@ -22,11 +23,12 @@ export default class Heading extends PureComponent {
}
render() {
const { children, size } = this.props
const { children, size, center } = this.props
const classes = cx({
default: 1,
text: 1,
textAlignCenter: center,
colorPrimary: [SIZES.h1, SIZES.h3].indexOf(size) > -1,
colorSecondary: [SIZES.h2, SIZES.h4, SIZES.h5].indexOf(size) > -1,
@ -37,10 +39,10 @@ export default class Heading extends PureComponent {
fontSize13PX: size === SIZES.h4,
fontSize12PX: size === SIZES.h5,
marginTop5PX: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
mt5: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
lineHeight2: size === SIZES.h5,
paddingVertical2PX: size === SIZES.h5,
py2: size === SIZES.h5,
// fontWeightNormal: weight === WEIGHTS.normal,
fontWeightMedium: [SIZES.h1, SIZES.h5].indexOf(size) > -1,

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

@ -41,20 +41,20 @@ export default class Input extends PureComponent {
outlineNone: 1,
lineHeight125: 1,
displayBlock: 1,
paddingVertical10PX: 1,
py10: 1,
backgroundTransparent: 1,
fontSize15PX: 1,
flexGrow1: 1,
paddingHorizontal5PX: !!prependIcon,
paddingLeft15PX: !prependIcon,
paddingRight15PX: !hasClear,
px5: !!prependIcon,
pl15: !prependIcon,
pr15: !hasClear,
})
return (
<Fragment>
{
!!title &&
<div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
<div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
<Text size='small' weight='medium' color='secondary'>
{title}
</Text>
@ -63,7 +63,7 @@ export default class Input extends PureComponent {
<div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
{
!!prependIcon &&
<Icon id={prependIcon} width='16px' height='16px' className={[_s.marginLeft15PX, _s.marginRight5PX].join(' ')} />
<Icon id={prependIcon} width='16px' height='16px' className={[_s.ml15, _s.mr5].join(' ')} />
}
<input

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

@ -97,7 +97,7 @@ class LinkFooter extends PureComponent {
]
return (
<div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom15PX].join(' ')}>
<div className={[_s.default, _s.px10, _s.mb15].join(' ')}>
<nav aria-label='Footer' role='navigation' className={[_s.default, _s.flexWrap, _s.flexRow].join(' ')}>
{
linkFooterItems.map((linkFooterItem, i) => {
@ -113,7 +113,7 @@ class LinkFooter extends PureComponent {
href={linkFooterItem.to}
data-method={linkFooterItem.logout ? 'delete' : null}
onClick={linkFooterItem.onClick || null}
className={[_s.marginVertical5PX, _s.paddingRight15PX].join(' ')}
className={[_s.my5, _s.pr15].join(' ')}
>
<Text size='small' color='secondary'>
{linkFooterItem.text}
@ -124,11 +124,11 @@ class LinkFooter extends PureComponent {
}
</nav>
<Text size='small' color='secondary' className={_s.marginTop10PX}>
<Text size='small' color='secondary' className={_s.mt10}>
© {currentYear} Gab AI, Inc.
</Text>
<Text size='small' color='secondary' tagName='p' className={_s.marginTop10PX}>
<Text size='small' color='secondary' tagName='p' className={_s.mt10}>
<FormattedMessage
id='getting_started.open_source_notice'
defaultMessage='Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.'

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

@ -19,8 +19,8 @@ export default class ListItem extends PureComponent {
default: 1,
cursorPointer: 1,
noUnderline: 1,
paddingHorizontal15PX: 1,
paddingVertical15PX: 1,
px15: 1,
py15: 1,
flexRow: 1,
alignItemsCenter: 1,
backgroundSubtle_onHover: 1,

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

@ -521,7 +521,7 @@ class MediaGallery extends PureComponent {
borderColorSecondary: size === 1,
borderTop1PX: size === 1,
borderBottom1PX: size === 1,
paddingHorizontal5PX: size > 1,
px5: size > 1,
})
return (

6
app/javascript/gabsocial/components/media_item.js
View File

@ -81,8 +81,8 @@ export default class MediaItem extends ImmutablePureComponent {
top0: 1,
height100PC: 1,
width100PC: 1,
paddingVertical5PX: !small,
paddingHorizontal5PX: !small,
py5: !small,
px5: !small,
})
const linkClasses = cx({
@ -138,7 +138,7 @@ export default class MediaItem extends ImmutablePureComponent {
{
!!badge &&
<div className={[_s.default, _s.positionAbsolute, _s.radiusSmall, _s.backgroundColorOpaque, _s.paddingHorizontal5PX, _s.paddingVertical5PX, _s.marginRight5PX, _s.marginVertical5PX, _s.bottom0, _s.right0].join(' ')}>
<div className={[_s.default, _s.positionAbsolute, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}>
<Text size='extraSmall' color='white'>
{badge}
</Text>

21
app/javascript/gabsocial/components/modal/compose_modal.js
View File

@ -1,20 +1,20 @@
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { openModal } from '../../actions/modal';
import { cancelReplyCompose } from '../../actions/compose';
import ModalLayout from './modal_layout';
import TimelineComposeBlock from '../timeline_compose_block';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { openModal } from '../../actions/modal'
import { cancelReplyCompose } from '../../actions/compose'
import ModalLayout from './modal_layout'
import TimelineComposeBlock from '../timeline_compose_block'
const messages = defineMessages({
confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
title: { id: 'navigation_bar.compose', defaultMessage: 'Compose new gab' },
});
})
const mapStateToProps = state => {
return {
composeText: state.getIn(['compose', 'text']),
};
};
}
export default
@connect(mapStateToProps)
@ -33,7 +33,8 @@ class ComposeModal extends ImmutablePureComponent {
if (composeText) {
dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
title: <FormattedMessage id='discard-gab-title' defaultMessage='Discard gab?' />,
message: <FormattedMessage id='discard-gab-message' defaultMessage="This can't be undone and you'll lose your draft." />,
confirm: intl.formatMessage(messages.confirm),
onConfirm: () => dispatch(cancelReplyCompose()),
onCancel: () => dispatch(openModal('COMPOSE')),
@ -45,7 +46,7 @@ class ComposeModal extends ImmutablePureComponent {
};
render() {
const { intl } = this.props;
const { intl } = this.props
return (
<ModalLayout

70
app/javascript/gabsocial/components/modal/confirmation_modal.js
View File

@ -1,12 +1,15 @@
import { injectIntl, FormattedMessage } from 'react-intl'
import ModalLayout from './modal_layout'
import Block from '../block'
import Button from '../button'
import Heading from '../heading'
import Text from '../text'
export default
@injectIntl
class ConfirmationModal extends PureComponent {
static propTypes = {
title: PropTypes.node.isRequired,
message: PropTypes.node.isRequired,
confirm: PropTypes.string.isRequired,
onClose: PropTypes.func.isRequired,
@ -42,23 +45,66 @@ class ConfirmationModal extends PureComponent {
}
render() {
const { message, confirm, secondary } = this.props
const {
title,
message,
confirm,
secondary
} = this.props
return (
<div className='modal-root__modal confirmation-modal'>
<div className='confirmation-modal__container'>
<div className={_s.width330PX}>
<Block>
<div className={[_s.default, _s.px15, _s.py15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py15].join(' ')}>
<Heading size='h1' center>
{title}
</Heading>
<div className={[_s.default, _s.mt10].join(' ')}>
<Text align='center' color='secondary'>
{message}
</Text>
<div className={[_s.default, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
<Button
backgroundColor='tertiary'
color='primary'
onClick={this.handleCancel}
className={[_s.mr10, _s.flexGrow1].join(' ')}
>
<Text size='medium' weight='bold' color='inherit'>
<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
</Text>
</Button>
{ /**
: todo :
*/
secondary !== undefined && (
<Button text={secondary} onClick={this.handleSecondary} />
)
}
<Button
backgroundColor='brand'
color='white'
onClick={this.handleClick}
ref={this.setRef}
className={_s.flexGrow1}
>
<Text size='medium' weight='bold' color='inherit'>
{confirm}
</Text>
</Button>
</div>
<div className='confirmation-modal__action-bar'>
<Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
</Button>
{secondary !== undefined && (
<Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
)}
<Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
</div>
</div>
</div>
</Block>
</div>
)
}

4
app/javascript/gabsocial/components/modal/modal_layout.js
View File

@ -27,7 +27,7 @@ class ModalLayout extends PureComponent {
return (
<div className={[_s.width645PX].join(' ')}>
<Block>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.paddingHorizontal15PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
<Heading size='h3'>
{title}
</Heading>
@ -41,7 +41,7 @@ class ModalLayout extends PureComponent {
iconWidth='10px'
/>
</div>
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
{children}
</div>
</Block>

42
app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
View File

@ -23,38 +23,34 @@ class ProUpgradeModal extends ImmutablePureComponent {
return (
<ModalLayout title={intl.formatMessage(messages.title)}>
<div>
<Text>
{intl.formatMessage(messages.text)}
</Text>
<Text>
{intl.formatMessage(messages.benefits)}
</Text>
<div className={[_s.default, _s.my10].join(' ')}>
<Text>• Schedule Posts</Text>
<Text>• Get Verified</Text>
<Text>• Create Groups</Text>
<Text>• Larger Video and Image Uploads</Text>
<Text>• Receive the PRO Badge</Text>
<Text>• Remove in-feed promotions</Text>
</div>
<ul>
<li>
<Text>Schedule Posts</Text>
</li>
<li>
<Text>Get Verified</Text>
</li>
<li>
<Text>Create Groups</Text>
</li>
<li>
<Text>Larger Video and Image Uploads</Text>
</li>
<li>
<Text>Receive the PRO Badge</Text>
</li>
<li>
<Text>Remove in-feed promotions</Text>
</li>
</ul>
<Button icon='pro' href='https://pro.gab.com'>
<Button
centered
backgroundColor='brand'
color='white'
icon='pro'
href='https://pro.gab.com'
className={_s.justifyContentCenter}
iconClassName={[_s.mr5, _s.fillColorWhite].join(' ')}
>
<Text color='inherit' weight='bold' align='center'>
{intl.formatMessage(messages.title)}
</Text>
</Button>
</ModalLayout>

6
app/javascript/gabsocial/components/modal/unauthorized_modal.js
View File

@ -26,15 +26,15 @@ class UnauthorizedModal extends ImmutablePureComponent {
return (
<ModalLayout title={intl.formatMessage(messages.signup)}>
<div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
<Text className={_s.marginBottom15PX}>
<div className={[_s.default, _s.px10, _s.py10].join(' ')}>
<Text className={_s.mb15}>
{intl.formatMessage(messages.text)}
</Text>
<Button href='/auth/sign_up' className={[_s.width240PX, _s.marginLeftAuto, _s.marginLeftAuto].join(' ')}>
{intl.formatMessage(messages.register)}
</Button>
</div>
<div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.px10, _s.py10].join(' ')}>
<Text color='secondary'>
{
intl.formatMessage(messages.login, {

2
app/javascript/gabsocial/components/panel/group_info_panel.js
View File

@ -42,7 +42,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<Icon id='group' height='14px' width='14px' />
<Text size='small' className={_s.marginLeft5PX}>
<Text size='small' className={_s.ml5}>
{intl.formatMessage(messages.members)}
</Text>
</div>

2
app/javascript/gabsocial/components/panel/media_gallery_panel.js
View File

@ -66,7 +66,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
headerButtonTitle={intl.formatMessage(messages.show_all)}
headerButtonTo={`/${account.get('acct')}/media`}
>
<div className={[_s.default, _s.flexRow, _s.flexWrap, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
{
attachments.slice(0, 16).map((attachment) => (
<MediaItem

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

@ -32,11 +32,11 @@ export default class PanelLayout extends PureComponent {
} = this.props
return (
<aside className={[_s.default, _s.marginBottom15PX].join(' ')}>
<aside className={[_s.default, _s.mb15].join(' ')}>
<Block>
{
(title || subtitle) &&
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<Heading size='h3'>
{title}
@ -69,7 +69,7 @@ export default class PanelLayout extends PureComponent {
{
!noPadding &&
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
{children}
</div>
}
@ -87,7 +87,7 @@ export default class PanelLayout extends PureComponent {
backgroundColor='none'
to={footerButtonTo}
onClick={footerButtonAction}
className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
className={[_s.px15, _s.py15, _s.backgroundSubtle_onHover].join(' ')}
>
<Text color='brand' align='left' size='medium'>
{footerButtonTitle}

2
app/javascript/gabsocial/components/panel/profile_info_panel.js
View File

@ -73,7 +73,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
<Text
size='small'
color='secondary'
className={_s.marginLeft5PX}
className={_s.ml5}
>
{
intl.formatMessage(messages.memberSince, {

6
app/javascript/gabsocial/components/panel/user_panel.js
View File

@ -43,18 +43,18 @@ class UserPanel extends ImmutablePureComponent {
/>
<NavLink
className={[_s.default, _s.flexRow, _s.paddingVertical10PX, _s.paddingHorizontal15PX, _s.noUnderline].join(' ')}
className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
to={`/${account.get('acct')}`}
>
<div className={[_s.default, _s.marginTopNeg30PX, _s.circle, _s.borderColorWhite, _s.border2PX].join(' ')}>
<Avatar account={account} size={62} />
</div>
<div className={[_s.default, _s.marginLeft15PX].join(' ')}>
<div className={[_s.default, _s.ml15].join(' ')}>
<DisplayName account={account} multiline />
</div>
</NavLink>
<div className={[_s.default, _s.marginBottom15PX, _s.marginTop5PX, _s.flexRow, _s.paddingHorizontal15PX].join(' ')}>
<div className={[_s.default, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
<UserStat
to={`/${account.get('acct')}`}
title={intl.formatMessage(messages.gabs)}

18
app/javascript/gabsocial/components/poll.js
View File

@ -104,8 +104,8 @@ class Poll extends ImmutablePureComponent {
const listItemClasses = cx({
default: 1,
flexRow: 1,
paddingVertical10PX: showResults,
marginBottom10PX: 1,
py10: showResults,
mb10: 1,
border1PX: !showResults,
borderColorSecondary: !showResults,
circle: !showResults,
@ -117,8 +117,8 @@ class Poll extends ImmutablePureComponent {
const textContainerClasses = cx({
default: 1,
width100PC: 1,
paddingHorizontal15PX: 1,
paddingVertical10PX: !showResults,
px15: 1,
py10: !showResults,
cursorPointer: !showResults,
alignItemsCenter: !showResults,
})
@ -151,7 +151,7 @@ class Poll extends ImmutablePureComponent {
checked={active}
onChange={this.handleOptionChange}
disabled={disabled}
className={[_s.default, _s.marginRight10PX].join(' ')}
className={[_s.default, _s.mr10].join(' ')}
/>
}
@ -188,7 +188,7 @@ class Poll extends ImmutablePureComponent {
const disabled = this.props.disabled || Object.entries(this.state.selected).every(item => !item)
return (
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
<ul className={[_s.default, _s.listStyleNone].join(' ')}>
{
poll.get('options').map((option, i) => this.renderOption(option, i))
@ -200,11 +200,11 @@ class Poll extends ImmutablePureComponent {
!showResults &&
<Button
narrow
className={_s.marginRight10PX}
className={_s.mr10}
disabled={disabled}
onClick={this.handleVote}
>
<Text color='inherit' size='small' className={_s.paddingHorizontal10PX}>
<Text color='inherit' size='small' className={_s.px10}>
{intl.formatMessage(messages.vote)}
</Text>
</Button>
@ -222,7 +222,7 @@ class Poll extends ImmutablePureComponent {
poll.get('expires_at') &&
<Fragment>
<DotTextSeperator />
<Text color='secondary' className={_s.marginLeft5PX}>
<Text color='secondary' className={_s.ml5}>
{timeRemaining}
</Text>
</Fragment>

35
app/javascript/gabsocial/components/popover/popover_base.js
View File

@ -1,5 +1,6 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { Manager, Reference, Popper } from 'react-popper'
import classnames from 'classnames/bind'
import Overlay from 'react-overlays/lib/Overlay'
import spring from 'react-motion/lib/spring'
@ -52,14 +53,16 @@ class PopoverBase extends ImmutablePureComponent {
isModalOpen: PropTypes.bool.isRequired,
onOpen: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
popoverPlacement: PropTypes.string,
position: PropTypes.string,
openPopoverType: PropTypes.number,
openedViaKeyboard: PropTypes.bool,
visible: PropTypes.bool,
targetRef: PropTypes.node,
}
static defaultProps = {
title: 'Menu',
position: 'bottom',
}
state = {
@ -124,7 +127,19 @@ class PopoverBase extends ImmutablePureComponent {
}
render() {
const { icon, children, visible, items, size, title, disabled, popoverPlacement, openPopoverType, openedViaKeyboard } = this.props
const {
icon,
children,
visible,
items,
size,
title,
disabled,
position,
openPopoverType,
openedViaKeyboard,
targetRef,
} = this.props
const open = this.state.id === openPopoverType
const containerClasses = cx({
@ -134,12 +149,24 @@ class PopoverBase extends ImmutablePureComponent {
})
return (
<div onKeyDown={this.handleKeyDown} className={containerClasses}>
<Manager>
<Popper
placement={position}
referenceElement={targetRef}
>
{({ ref, style, placement, arrowProps }) => (
<div ref={ref} style={style} data-placement={placement}>
<div ref={arrowProps.ref} style={arrowProps.style} />
<div data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
{children}
{ /* <div show={open} placement={popoverPlacement} target={this.findTarget}>
<PopoverMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
{children}
</div> */}
</div>
</div>
)}
</Popper>
</Manager>
)
}

45
app/javascript/gabsocial/components/popover/popover_root.js
View File

@ -24,7 +24,7 @@ const POPOVER_COMPONENTS = {
SIDEBAR_MORE: () => Promise.resolve({ default: SidebarMorePopover }),
STATUS_OPTIONS: () => Promise.resolve({ default: StatusOptionsPopover }),
STATUS_VISIBILITY: () => Promise.resolve({ default: StatusVisibilityPopover }),
USER_INFO: () => UserInfoPopover,
USER_INFO: () => Promise.resolve({ default: UserInfoPopover }),
}
const mapStateToProps = state => ({
@ -148,26 +148,45 @@ class PopoverRoot extends PureComponent {
}
}
renderError = (props) => {
return <BundleModalError />
renderError = () => {
return null
}
renderLoading = () => {
return null
}
render() {
const { type, style, placement } = this.props
const {
type,
style,
props,
} = this.props
const { mounted } = this.state
const visible = !!type
console.log("popover root - type, visible:", type, visible)
// <PopoverBase className={`popover-menu ${placement}`} visible={visible} ref={this.setRef}>
// {
// visible &&
// <UserInfoPopover />
// }
// </PopoverBase>
console.log("popover root - type, visible:", type, visible, props, POPOVER_COMPONENTS[type])
return (
<div></div>
<PopoverBase
visible={visible}
ref={this.setRef}
{...props}
>
{
visible &&
<Bundle
fetchComponent={POPOVER_COMPONENTS[type]}
loading={this.renderLoading(type)}
error={this.renderError}
renderDelay={200}
>
{
(SpecificComponent) => <SpecificComponent {...props} />
}
</Bundle>
}
</PopoverBase>
)
}
}

55
app/javascript/gabsocial/components/popover/user_info_popover.js
View File

@ -1,11 +1,62 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { shortNumberFormat } from '../../utils/numbers'
import PopoverLayout from './popover_layout'
import Avatar from '../avatar'
import Button from '../button'
import DisplayName from '../display_name'
import Text from '../text'
export default class UserInfoPopover extends PureComponent {
export default class UserInfoPopover extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
}
render() {
const { account } = this.props
const content = !account ? null : { __html: account.get('note_emojified') }
return (
<PopoverLayout>
<Text>testing</Text>
<div className={[_s.default, _s.px15, _s.py15].join(' ')} style={{width: '260px'}}>
<div className={[_s.default, _s.flexRow].join(' ')}>
<div className={[_s.default, _s.flexGrow1].join(' ')}>
<Avatar account={account} size={42} />
<DisplayName account={account} multiline noHover />
</div>
<div className={[_s.default, _s.marginLeftAuto].join(' ')}>
<Button
color='white'
>
<Text size='medium' weight='bold' color='inherit'>
Following
</Text>
</Button>
</div>
</div>
<div className={[_s.default, _s.my10].join(' ')}>
<div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
</div>
<div className={[_s.default, _s.flexRow].join(' ')}>
<div>
<Text size='small'>
{shortNumberFormat(account.get('following_count'))}
Following
</Text>
</div>
<div>
<Text size='small'>
{shortNumberFormat(account.get('followers_count'))}
Followers
</Text>
</div>
</div>
</div>
</PopoverLayout>
)
}

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

@ -0,0 +1,91 @@
import { Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { makeGetStatus } from '../selectors';
import CommentHeader from './comment_header'
import Avatar from './avatar'
import Button from './button'
import DisplayName from './display_name'
import DotTextSeperator from './dot_text_seperator'
import RelativeTimestamp from './relative_timestamp'
import Text from './text'
import StatusContent from './status_content'
const messages = defineMessages({
follow: { id: 'follow', defaultMessage: 'Follow' },
})
const makeMapStateToProps = () => {
const getStatus = makeGetStatus()
const mapStateToProps = (state, props) => {
const status = getStatus(state, props)
let descendantsIds = Immutable.List()
if (status) {
// ALL descendants
descendantsIds = descendantsIds.withMutations(mutable => {
const ids = [status.get('id')]
while (ids.length > 0) {
let id = ids.shift();
const replies = state.getIn(['contexts', 'replies', id])
if (status.get('id') !== id) {
mutable.push(id)
}
if (replies) {
replies.reverse().forEach(reply => {
ids.unshift(reply)
});
}
}
})
}
return {
status,
descendantsIds,
}
}
return mapStateToProps
}
export default
@injectIntl
@connect(makeMapStateToProps)
class Comment extends ImmutablePureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
descendantsIds: ImmutablePropTypes.list,
}
constructListItem = (item) => {
if (item.nestedItems) {
return (
<List key={item.key}>
{item.nestedItems.map(this.constructListItem)}
</List>
)
} else {
return <ListItem key={item.key} item={item} />
}
}
render() {
const { listItems } = this.props
return (
<List>
{listItems.map(this.constructListItem)}
</List>
)
}
}

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

@ -22,7 +22,7 @@ export default class Select extends ImmutablePureComponent {
return (
<div className={_s.default}>
<select
className={[_s.default, _s.outlineNone, _s.text, _s.border1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.select].join(' ')}
className={[_s.default, _s.outlineNone, _s.text, _s.border1PX, _s.borderColorSecondary, _s.px15, _s.select].join(' ')}
value={value}
onChange={onChange}
>

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

@ -45,7 +45,7 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(closeSidebar())
},
onOpenComposeModal() {
dispatch(openModal('COMPOSE'))
dispatch(openModal('PRO_UPGRADE'))
},
})
@ -199,11 +199,11 @@ class Sidebar extends ImmutablePureComponent {
<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(' ')}>
<div className={[_s.default, _s.height100PC, _s.width240PX, _s.pr15, _s.my10].join(' ')}>
<SidebarHeader />
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
<SidebarSectionTitle>Menu</SidebarSectionTitle>
{
menuItems.map((menuItem, i) => (
@ -227,7 +227,7 @@ class Sidebar extends ImmutablePureComponent {
<Button
block
onClick={this.handleOpenComposeModal}
className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
className={[_s.py15, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
>
Gab
</Button>

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

@ -29,7 +29,7 @@ class SidebarHeader extends ImmutablePureComponent {
return (
<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(' ')}>
<NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.px10].join(' ')}>
<GabLogo />
</NavLink>
</h1>

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

@ -42,8 +42,8 @@ export default class SidebarSectionItem extends PureComponent {
maxWidth100PC: 1,
width100PC: 1,
flexRow: 1,
paddingVertical5PX: 1,
paddingHorizontal10PX: 1,
py5: 1,
px10: 1,
alignItemsCenter: 1,
radiusSmall: 1,
// border1PX: shouldShowActive,
@ -71,10 +71,10 @@ export default class SidebarSectionItem extends PureComponent {
text: 1,
marginLeftAuto: 1,
fontSize12PX: 1,
paddingHorizontal5PX: 1,
marginRight2PX: 1,
px5: 1,
mr2: 1,
lineHeight15: 1,
marginLeft5PX: 1,
ml5: 1,
colorSecondary: !isNotifications,
colorWhite: isNotifications,
backgroundColorBrand: isNotifications,
@ -100,7 +100,7 @@ export default class SidebarSectionItem extends PureComponent {
/>
}
</div>
<div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
<span className={textClasses}>{title}</span>
</div>
{ count > 0 &&

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

@ -10,7 +10,7 @@ export default class SidebarSectionTitle extends PureComponent {
const { children } = this.props
return (
<div className={[_s.default, _s.paddingVertical5PX, _s.paddingHorizontal10PX, _s.marginTop10PX].join(' ')}>
<div className={[_s.default, _s.py5, _s.px10, _s.mt10].join(' ')}>
<Text size='small' weight='bold' color='secondary'>
{children}
</Text>

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

@ -330,14 +330,14 @@ class Status extends ImmutablePureComponent {
);
} else if (featured) {
prepend = (
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingVertical5PX, _s.paddingHorizontal15PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.py5, _s.px15].join(' ')}>
<Icon
id='pin'
width='10px'
height='10px'
className={_s.fillColorSecondary}
/>
<Text size='small' color='secondary' className={_s.marginLeft5PX}>
<Text size='small' color='secondary' className={_s.ml5}>
{intl.formatMessage(messages.pinned)}
</Text>
</div>
@ -452,9 +452,9 @@ class Status extends ImmutablePureComponent {
const containerClasses = cx({
default: 1,
marginBottom15PX: !borderless,
mb15: !borderless,
backgroundColorPrimary: 1,
paddingBottom15PX: featured,
pb15: featured,
borderBottom1PX: featured,
borderColorSecondary: featured,
})
@ -508,9 +508,10 @@ class Status extends ImmutablePureComponent {
) */ }
<StatusActionBar status={status} account={account} {...other} />
<div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.paddingTop10PX, _s.paddingHorizontal15PX, _s.marginBottom10PX].join(' ')}>
{ /* <div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}>
<ComposeFormContainer statusId={status.get('id')} shouldCondense />
</div>
</div> */ }
</div>
</div>
</div>

18
app/javascript/gabsocial/components/status_action_bar.js
View File

@ -143,19 +143,19 @@ class StatusActionBar extends ImmutablePureComponent {
const containerClasses = cx({
default: 1,
paddingHorizontal10PX: 1,
marginTop10PX: !shouldCondense,
marginTop5PX: shouldCondense,
px10: 1,
mt10: !shouldCondense,
mt5: shouldCondense,
})
const innerContainerClasses = cx({
default: 1,
paddingVertical2PX: 1,
py2: 1,
flexRow: 1,
width100PC: 1,
borderTop1PX: !shouldCondense,
borderColorSecondary: !shouldCondense,
marginTop5PX: hasInteractions,
mt5: hasInteractions,
})
const interactionBtnClasses = cx({
@ -163,15 +163,15 @@ class StatusActionBar extends ImmutablePureComponent {
text: 1,
cursorPointer: 1,
fontWeightNormal: 1,
marginRight10PX: 1,
paddingVertical5PX: 1,
mr10: 1,
py5: 1,
})
return (
<div className={containerClasses}>
{
hasInteractions &&
<div className={[_s.default, _s.flexRow, _s.paddingHorizontal5PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.px5].join(' ')}>
{
favoriteCount > 0 &&
<button className={interactionBtnClasses}>
@ -202,7 +202,7 @@ class StatusActionBar extends ImmutablePureComponent {
</div>
}
<div className={innerContainerClasses}>
<div className={[_s.default, _s.flexRow, _s.paddingVertical2PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.py2, _s.width100PC].join(' ')}>
<StatusActionBarItem
title={formatMessage(messages.like)}
icon='like'

1
app/javascript/gabsocial/components/status_action_bar/index.js
View File

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

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

@ -25,8 +25,8 @@ export default class StatusActionBarItem extends PureComponent {
justifyContentCenter: 1,
flexRow: 1,
alignItemsCenter: 1,
paddingVertical10PX: 1,
paddingHorizontal10PX: 1,
py10: 1,
px10: 1,
width100PC: 1,
radiusSmall: 1,
outlineNone: 1,
@ -36,14 +36,14 @@ export default class StatusActionBarItem extends PureComponent {
})
return (
<div className={[_s.default, _s.flexGrow1, _s.paddingHorizontal10PX].join(' ')}>
<div className={[_s.default, _s.flexGrow1, _s.px10].join(' ')}>
<button
className={btnClasses}
onClick={onClick}
active={active}
disabled={disabled}
>
<Icon width='16px' height='16px' id={icon} className={[_s.default, _s.marginRight10PX, _s.fillColorSecondary].join(' ')} />
<Icon width='16px' height='16px' id={icon} className={[_s.default, _s.mr10, _s.fillColorSecondary].join(' ')} />
{title}
</button>
</div>

10
app/javascript/gabsocial/components/status_content/status_content.js
View File

@ -170,7 +170,7 @@ class StatusContent extends ImmutablePureComponent {
// 'status__content--with-action': this.props.onClick && this.context.router,
// 'status__content--with-spoiler': status.get('spoiler_text').length > 0,
// 'status__content--collapsed': this.state.collapsed === true,
// // _s.paddingHorizontal15PX, _s.marginBottom15PX
// // _s.px15, _s.mb15
// });
if (isRtl(status.get('search_index'))) {
@ -209,8 +209,8 @@ class StatusContent extends ImmutablePureComponent {
const hasMarginBottom = !!status.get('card') || !!status.get('poll') || status.get('media_attachments').size > 0
const containerClasses = cx({
paddingHorizontal15PX: !isComment,
marginBottom15PX: hasMarginBottom,
px15: !isComment,
mb15: hasMarginBottom,
})
return (
@ -228,7 +228,7 @@ class StatusContent extends ImmutablePureComponent {
{
this.state.collapsed &&
<button
className={[_s.default, _s.displayFlex, _s.cursorPointer, _s.paddingVertical2PX, _s.text, _s.colorPrimary, _s.fontWeightBold, _s.fontSize15PX].join(' ')}
className={[_s.default, _s.displayFlex, _s.cursorPointer, _s.py2, _s.text, _s.colorPrimary, _s.fontWeightBold, _s.fontSize15PX].join(' ')}
onClick={this.props.onClick}
>
{intl.formatMessage(messages.readMore)}
@ -242,7 +242,7 @@ class StatusContent extends ImmutablePureComponent {
<div
tabIndex='0'
ref={this.setRef}
className={[_s.paddingHorizontal15PX, _s.marginBottom15PX, _s.statusContent].join(' ')}
className={[_s.px15, _s.mb15, _s.statusContent].join(' ')}
style={directionStyle}
dangerouslySetInnerHTML={content}
lang={status.get('language')}

14
app/javascript/gabsocial/components/status_header.js
View File

@ -168,18 +168,18 @@ export default class StatusHeader extends ImmutablePureComponent {
// </div>
return (
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.marginTop5PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
<NavLink
to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])}
className={[_s.default, _s.marginRight10PX].join(' ')}
className={[_s.default, _s.mr10].join(' ')}
>
<Avatar account={status.get('account')} size={50} />
</NavLink>
<div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.marginTop5PX].join(' ')}>
<div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.mt5].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsStart].join(' ')}>
<NavLink
@ -218,7 +218,7 @@ export default class StatusHeader extends ImmutablePureComponent {
<DotTextSeperator />
<Icon id='globe' width='12px' height='12px' className={[_s.default, _s.displayInline, _s.marginLeft5PX, _s.fillColorSecondary].join(' ')} />
<Icon id='globe' width='12px' height='12px' className={[_s.default, _s.displayInline, _s.ml5, _s.fillColorSecondary].join(' ')} />
{
!!status.get('group') &&
@ -230,7 +230,7 @@ export default class StatusHeader extends ImmutablePureComponent {
backgroundColor='none'
color='none'
to={`/groups/${status.getIn(['group', 'id'])}`}
className={_s.marginLeft5PX}
className={_s.ml5}
>
<Text size='small' color='secondary'>
{status.getIn(['group', 'title'])}
@ -249,7 +249,7 @@ export default class StatusHeader extends ImmutablePureComponent {
backgroundColor='none'
color='none'
onClick={this.handleOpenStatusEdits}
className={_s.marginLeft5PX}
className={_s.ml5}
>
<Text size='small' color='secondary'>
Edited

1
app/javascript/gabsocial/components/status_list/index.js
View File

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

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

@ -10,7 +10,7 @@ export default class TabBar extends PureComponent {
const { tabs, large } = this.props
return (
<div className={[_s.default, _s.height53PX, _s.paddingHorizontal5PX, _s.flexRow].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.px5, _s.flexRow].join(' ')}>
{ !!tabs &&
tabs.map((tab, i) => (
<TabBarItem key={`tab-bar-item-${i}`} {...tab} large={large} />

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

@ -45,10 +45,10 @@ class TabBarItem extends PureComponent {
alignItemsCenter: 1,
justifyContentCenter: 1,
borderBottom2PX: 1,
paddingVertical5PX: 1,
py5: 1,
borderColorTransparent: !isCurrent,
borderColorBrand: isCurrent,
marginRight5PX: large,
mr5: large,
})
const textParentClasses = cx({
@ -57,8 +57,8 @@ class TabBarItem extends PureComponent {
alignItemsCenter: 1,
justifyContentCenter: 1,
radiusSmall: 1,
paddingHorizontal10PX: !large,
paddingHorizontal15PX: large,
px10: !large,
px15: large,
backgroundSubtle2Dark_onHover: !isCurrent,
})

10
app/javascript/gabsocial/components/textarea.js
View File

@ -37,22 +37,22 @@ export default class Textarea extends PureComponent {
outlineNone: 1,
lineHeight125: 1,
displayBlock: 1,
paddingVertical10PX: 1,
py10: 1,
backgroundTransparent: 1,
fontSize15PX: 1,
flexGrow1: 1,
heightMax100VH: 1,
resizeVertical: 1,
paddingHorizontal5PX: !!prependIcon,
paddingLeft15PX: !prependIcon,
paddingRight15PX: !hasClear,
px5: !!prependIcon,
pl15: !prependIcon,
pr15: !hasClear,
})
return (
<div>
{
!!title &&
<div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
<div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
<Text size='small' weight='medium' color='secondary'>
{title}
</Text>

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

@ -55,14 +55,14 @@ class TimelineComposeBlock extends ImmutablePureComponent {
}
return (
<section className={[_s.default, _s.marginBottom15PX].join(' ')}>
<section className={[_s.default, _s.mb15].join(' ')}>
<Block>
<div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.paddingVertical2PX].join(' ')}>
<div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2].join(' ')}>
<Heading size='h5'>
{intl.formatMessage(messages.createPost)}
</Heading>
</div>
<div className={[_s.default, _s.flexRow, _s.paddingHorizontal15PX, _s.paddingVertical15PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.px15, _s.py15].join(' ')}>
<ComposeFormContainer {...rest} />
</div>
</Block>

10
app/javascript/gabsocial/components/trends_panel_item.js
View File

@ -47,18 +47,18 @@ export default class TrendingItem extends ImmutablePureComponent {
return (
<NavLink
to='/test'
className={[_s.default, _s.noUnderline, _s.paddingHorizontal15PX, _s.paddingVertical5PX, _s.borderColorSecondary, _s.borderBottom1PX, _s.backgroundSubtle_onHover].join(' ')}
className={[_s.default, _s.noUnderline, _s.px15, _s.py5, _s.borderColorSecondary, _s.borderBottom1PX, _s.backgroundSubtle_onHover].join(' ')}
onMouseEnter={() => this.handleOnMouseEnter()}
onMouseLeave={() => this.handleOnMouseLeave()}
>
<div className={[_s.default, _s.flexRow, _s.marginTop5PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
<Text size='small' color='secondary'>1</Text>
<DotTextSeperator />
<Text size='small' color='secondary' className={_s.marginLeft5PX}>Politics</Text>
<Text size='small' color='secondary' className={_s.ml5}>Politics</Text>
</div>
<div className={[_s.default, _s.paddingVertical5PX].join(' ')}>
<div className={[_s.default, _s.py5].join(' ')}>
<Text color='primary' weight='bold' size='medium'>Trump Campaign</Text>
<Text color='secondary' className={[_s.marginTop5PX, _s.marginBottom10PX].join(' ')}>46.7K Gabs</Text>
<Text color='secondary' className={[_s.mt5, _s.mb10].join(' ')}>46.7K Gabs</Text>
<TrendingItemCard />
</div>
</NavLink>

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

@ -50,7 +50,7 @@ export default class TrendingItemCard extends ImmutablePureComponent {
// URL with title, description, image
return (
<div className={[_s.default, _s.flexRow, _s.overflowHidden, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall, _s.backgroundSubtle_onHover].join(' ')}>
<div className={[_s.default, _s.flexNormal, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
<div className={[_s.default, _s.flexNormal, _s.py10, _s.px10].join(' ')}>
<Text color='secondary' className={_s.lineHeight15}>
NYPost
</Text>

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

@ -60,7 +60,7 @@ class UploadArea extends PureComponent {
opacity: backgroundOpacity
}}
>
<div className={[_s.default, _s.width340PX, _s.height260PX, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.width340PX, _s.height260PX, _s.px10, _s.py10].join(' ')}>
<div
className={[_s.default, _s.positionAbsolute, _s.backgroundColorPrimary, _s.height100PC, _s.width100PC, _s.radiusSmall].join(' ')}
style={{

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

@ -28,7 +28,7 @@ export default class UserStat extends PureComponent {
<NavLink
to={to}
title={`${value} ${title}`}
className={[_s.default, _s.flexGrow1, _s.cursorPointer, _s.noUnderline, _s.paddingRight15PX].join(' ')}
className={[_s.default, _s.flexGrow1, _s.cursorPointer, _s.noUnderline, _s.pr15].join(' ')}
onMouseEnter={() => this.handleOnMouseEnter()}
onMouseLeave={() => this.handleOnMouseLeave()}
>

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

@ -94,7 +94,7 @@ class AccountGallery extends ImmutablePureComponent {
<div
role='feed'
onScroll={this.handleScroll}
className={[_s.default, _s.flexRow, _s.flexWrap, _s.heightMin50VH, _s.paddingVertical5PX, _s.paddingHorizontal5PX].join(' ')}
className={[_s.default, _s.flexRow, _s.flexWrap, _s.heightMin50VH, _s.py5, _s.px5].join(' ')}
>
{

2
app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js
View File

@ -17,7 +17,7 @@ export default class CharacterCounter extends PureComponent {
const dashoffset = circumference * (1 - diff)
return (
<div className={[_s.default, _s.marginRight10PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
<div className={[_s.default, _s.mr10, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
<svg width={actualRadius * 2} height={actualRadius * 2} viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}>
<circle fill='none' cx={actualRadius} cy={actualRadius} r={radius} fill="none" stroke="#e6e6e6" strokeWidth="2" />
<circle style={{

14
app/javascript/gabsocial/features/compose/components/compose_extra_button.js
View File

@ -39,8 +39,8 @@ export default class ComposeExtraButton extends PureComponent {
const containerClasses = cx({
default: 1,
marginRight10PX: !small,
marginRight2PX: small,
mr10: !small,
mr2: small,
})
const btnClasses = cx({
@ -52,15 +52,15 @@ export default class ComposeExtraButton extends PureComponent {
backgroundSubtle: !hovering && !active,
backgroundSubtle2: hovering && !active,
backgroundColorBrandLight: active,
paddingVertical10PX: !small,
paddingHorizontal10PX: !small,
paddingVertical5PX: small,
paddingHorizontal5PX: small,
py10: !small,
px10: !small,
py5: small,
px5: small,
})
const titleClasses = cx({
default: 1,
marginLeft5PX: 1,
ml5: 1,
text: 1,
lineHeight15: 1,
fontSize12PX: 1,

14
app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
View File

@ -243,26 +243,26 @@ class ComposeForm extends ImmutablePureComponent {
flexRow: shouldCondense,
radiusSmall: shouldCondense,
backgroundSubtle: shouldCondense,
paddingHorizontal5PX: shouldCondense,
px5: shouldCondense,
})
const actionsContainerClasses = cx({
default: 1,
flexRow: 1,
alignItemsCenter: 1,
marginTop10PX: !shouldCondense,
mt10: !shouldCondense,
})
const avatarContainerClasses = cx({
default: 1,
marginRight10PX: 1,
marginTop5PX: shouldCondense,
mr10: 1,
mt5: shouldCondense,
})
const contentWarningClasses = cx({
default: 1,
paddingTop5PX: 1,
paddingBottom10PX: 1,
pt5: 1,
pb10: 1,
borderBottom1PX: 1,
borderColorSecondary: 1,
displayNone: !spoiler
@ -355,7 +355,7 @@ class ComposeForm extends ImmutablePureComponent {
{
!shouldCondense &&
<Button
className={[_s.fontSize15PX, _s.paddingHorizontal15PX].join(' ')}
className={[_s.fontSize15PX, _s.px15].join(' ')}
onClick={this.handleSubmit}
disabled={disabledButton}
>

16
app/javascript/gabsocial/features/compose/components/poll_form.js
View File

@ -68,17 +68,17 @@ class PollFormOption extends ImmutablePureComponent {
const toggleClasses = cx({
default: 1,
paddingHorizontal10PX: 1,
paddingVertical10PX: 1,
px10: 1,
py10: 1,
borderColorSecondary: 1,
border1PX: 1,
outlineNone: 1,
marginRight10PX: 1,
mr10: 1,
circle: !isPollMultiple,
})
return (
<li className={[_s.default, _s.flexRow, _s.marginBottom10PX].join(' ')}>
<li className={[_s.default, _s.flexRow, _s.mb10].join(' ')}>
<label className={[_s.default, _s.flexRow, _s.flexGrow1, _s.alignItemsCenter].join(' ')}>
<span
className={toggleClasses}
@ -106,7 +106,7 @@ class PollFormOption extends ImmutablePureComponent {
narrow
circle
backgroundColor='none'
className={[_s.marginLeft5PX, _s.justifyContentCenter].join(' ')}
className={[_s.ml5, _s.justifyContentCenter].join(' ')}
icon='close'
iconWidth='8px'
iconHeight='8px'
@ -167,7 +167,7 @@ class PollForm extends ImmutablePureComponent {
if (!options) return null
return (
<div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
<div className={[_s.default, _s.px10, _s.py10, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
<ul className={[_s.default, _s.listStyleNone].join(' ')}>
{
options.map((title, i) => (
@ -192,12 +192,12 @@ class PollForm extends ImmutablePureComponent {
outline
backgroundColor='none'
color='brand'
className={[_s.alignItemsCenter, _s.marginRight10PX].join(' ')}
className={[_s.alignItemsCenter, _s.mr10].join(' ')}
onClick={this.handleAddOption}
icon='add'
iconWidth='14px'
iconHeight='14px'
iconClassName={[_s.fillColorBrand, _s.marginRight5PX].join(' ')}
iconClassName={[_s.fillColorBrand, _s.mr5].join(' ')}
>
<Text color='brand'>
{intl.formatMessage(messages.add_option)}

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

@ -74,12 +74,12 @@ class Followers extends ImmutablePureComponent {
return (
<Block>
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.justifyContentCenter, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<Heading size='h3'>
{intl.formatMessage(messages.followers)}
</Heading>
</div>
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
<ScrollableList
scrollKey='followers'
hasMore={hasMore}

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

@ -74,12 +74,12 @@ class Following extends ImmutablePureComponent {
return (
<Block>
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.justifyContentCenter, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<Heading size='h3'>
{intl.formatMessage(messages.follows)}
</Heading>
</div>
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
<ScrollableList
scrollKey='following'
hasMore={hasMore}

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

@ -145,7 +145,7 @@ class Create extends ImmutablePureComponent {
<Divider invisible />
<Button
className={_s.marginLeft10PX}
className={_s.ml10}
>
<Text color='white'>
{intl.formatMessage(!!group ? messages.update : messages.create)}

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

@ -52,7 +52,7 @@ class ListCreate extends PureComponent {
disabled={disabled}
/>
<div className={[_s.default, _s.marginVertical10PX, _s.paddingVertical5PX, _s.marginLeft10PX].join(' ')}>
<div className={[_s.default, _s.my10, _s.py5, _s.ml10].join(' ')}>
<Text color='secondary' size='small'>
Lists are private and only you can see who is on a list.<br/>
No one else can view your lists. No one knows that they are on your list.
@ -60,7 +60,7 @@ class ListCreate extends PureComponent {
</div>
<Button
className={_s.marginLeft10PX}
className={_s.ml10}
>
<Text color='white'>
{intl.formatMessage(messages.create)}

28
app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js
View File

@ -41,27 +41,27 @@ class Notification extends ImmutablePureComponent {
const { status, notificationType, accounts } = this.props
return (
<div className={[_s.default, _s.paddingHorizontal10PX].join(' ')}>
<div className={[_s.default, _s.px10].join(' ')}>
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.marginVertical10PX, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
<Icon id='apps' height='20px' width='20px' className={_s.marginTop5PX} />
<Icon id='apps' height='20px' width='20px' className={_s.mt5} />
<div className={[_s.default, _s.marginLeft15PX].join(' ')}>
<div className={[_s.default, _s.ml15].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>
{
accounts.slice(0, 6).map((account, i) => (
<NavLink
to={`/${account.get('acct')}`}
key={`fav-avatar-${i}`}
className={_s.marginRight5PX}
className={_s.mr5}
>
<Avatar size='30' account={account} />
</NavLink>
))
}
</div>
<div className={[_s.default, _s.paddingTop10PX].join(' ')}>
<div className={[_s.default, _s.pt10].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>
<div className={_s.text}>
{
@ -76,7 +76,7 @@ class Notification extends ImmutablePureComponent {
</div>
</div>
<div className={[_s.default, _s.paddingTop10PX].join(' ')}>
<div className={[_s.default, _s.pt10].join(' ')}>
<Text color='secondary' size='medium'>
post this at 1-14-2020 12:15pm (edited)
</Text>
@ -102,28 +102,28 @@ class Notification extends ImmutablePureComponent {
return (
<NavLink
to={`/`}
className={[_s.default, _s.paddingHorizontal10PX, _s.backgroundSubtle_onHover].join(' ')}
className={[_s.default, _s.px10, _s.backgroundSubtle_onHover].join(' ')}
>
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.marginVertical10PX, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
<Icon id='apps' height='20px' width='20px' className={_s.marginTop5PX} />
<Icon id='apps' height='20px' width='20px' className={_s.mt5} />
<div className={[_s.default, _s.marginLeft15PX].join(' ')}>
<div className={[_s.default, _s.ml15].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>
{
accounts.slice(0, 6).map((account, i) => (
<NavLink
to={`/${account.get('acct')}`}
key={`fav-avatar-${i}`}
className={_s.marginRight5PX}
className={_s.mr5}
>
<Avatar size='30' account={account} />
</NavLink>
))
}
</div>
<div className={[_s.default, _s.paddingTop10PX].join(' ')}>
<div className={[_s.default, _s.pt10].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>
<div className={_s.text}>
{
@ -138,7 +138,7 @@ class Notification extends ImmutablePureComponent {
</div>
</div>
<div className={[_s.default, _s.paddingTop10PX].join(' ')}>
<div className={[_s.default, _s.pt10].join(' ')}>
<Text color='secondary' size='medium'>
post this at 1-14-2020 12:15pm (edited)
</Text>

14
app/javascript/gabsocial/features/status/components/card/card.js
View File

@ -161,13 +161,13 @@ export default class Card extends ImmutablePureComponent {
)
const description = (
<div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
<div className={[_s.default, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
{title}
<p className={[_s.default, _s.displayFlex, _s.text, _s.marginVertical5PX, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
<p className={[_s.default, _s.displayFlex, _s.text, _s.my5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
{trim(card.get('description') || '', maxDescription)}
</p>
<span className={[_s.default, _s.marginTopAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}>
<Icon id='link' width='10px' height='10px' className={[_s.fillColorSecondary, _s.marginRight5PX].join(' ')} fixedWidth />
<Icon id='link' width='10px' height='10px' className={[_s.fillColorSecondary, _s.mr5].join(' ')} fixedWidth />
{provider}
</span>
</div>
@ -191,7 +191,7 @@ export default class Card extends ImmutablePureComponent {
}
return (
<div className={[_s.default, _s.width100PC, _s.paddingHorizontal10PX].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
<div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.paddingTop5625PC].join(' ')}>
@ -200,7 +200,7 @@ export default class Card extends ImmutablePureComponent {
{ !embed &&
<div className={[_s.default, _s.positionAbsolute, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<button
className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}
className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
onClick={this.handleEmbedClick}
>
<Icon id={iconVariant} className={[_s.fillColorWhite].join(' ')}/>
@ -221,14 +221,14 @@ export default class Card extends ImmutablePureComponent {
)
} else {
embed = (
<div className={[_s.default, _s.paddingVertical15PX, _s.paddingHorizontal15PX, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<div className={[_s.default, _s.py15, _s.px15, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<Icon id='file-text' width='22px' height='22px' className={_s.fillColorSecondary} />
</div>
)
}
return (
<div className={[_s.default, _s.width100PC, _s.paddingHorizontal10PX].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
<a
href={card.get('url')}
className={[_s.default, _s.cursorPointer, _s.flexRow, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.backgroundSubtle_onHover, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}

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

@ -73,6 +73,8 @@ const makeMapStateToProps = () => {
// ONLY Direct descendants
descendantsIds = state.getIn(['contexts', 'replies', status.get('id')])
console.log("descendantsIds:", descendantsIds)
}
return {
@ -439,7 +441,7 @@ class Status extends ImmutablePureComponent {
{
descendantsIds && descendantsIds.size > 0 &&
<div className={[_s.default, _s.marginRight10PX, _s.marginLeft10PX, _s.marginBottom10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}/>
<div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}/>
}
{descendants}

22
app/javascript/gabsocial/features/video/video.js
View File

@ -456,8 +456,8 @@ class Video extends PureComponent {
default: 1,
positionAbsolute: 1,
circle: 1,
paddingHorizontal10PX: 1,
paddingVertical10PX: 1,
px10: 1,
py10: 1,
backgroundColorBrand: 1,
marginLeftNeg5PX: 1,
z3: 1,
@ -469,7 +469,7 @@ class Video extends PureComponent {
const progressClasses = cx({
default: 1,
radiusSmall: 1,
marginTop10PX: 1,
mt10: 1,
positionAbsolute: 1,
height4PX: 1,
})
@ -549,19 +549,19 @@ class Video extends PureComponent {
ref={this.setVolumeRef}
>
<div
className={[_s.default, _s.radiusSmall, _s.marginVertical10PX, _s.positionAbsolute, _s.width4PX, _s.marginLeft10PX, _s.backgroundColorPrimaryOpaque].join(' ')}
className={[_s.default, _s.radiusSmall, _s.my10, _s.positionAbsolute, _s.width4PX, _s.ml10, _s.backgroundColorPrimaryOpaque].join(' ')}
style={{
height: '102px',
}}
/>
<div
className={[_s.default, _s.radiusSmall, _s.marginVertical10PX, _s.bottom0, _s.positionAbsolute, _s.width4PX, _s.marginLeft10PX, _s.backgroundColorPrimary].join(' ')}
className={[_s.default, _s.radiusSmall, _s.my10, _s.bottom0, _s.positionAbsolute, _s.width4PX, _s.ml10, _s.backgroundColorPrimary].join(' ')}
style={{
height: `${volumeHeight}px`
}}
/>
<span
className={[_s.default, _s.cursorPointer, _s.positionAbsolute, _s.circle, _s.paddingHorizontal5PX, _s.boxShadow1, _s.marginBottomNeg5PX, _s.paddingVertical5PX, _s.backgroundColorPrimary, _s.z3].join(' ')}
className={[_s.default, _s.cursorPointer, _s.positionAbsolute, _s.circle, _s.px5, _s.boxShadow1, _s.marginBottomNeg5PX, _s.py5, _s.backgroundColorPrimary, _s.z3].join(' ')}
tabIndex='0'
style={{
marginLeft: '7px',
@ -570,7 +570,7 @@ class Video extends PureComponent {
/>
</div>
<div className={[_s.default, _s.z2, _s.paddingHorizontal15PX, _s.videoPlayerControlsBackground, _s.positionAbsolute, _s.bottom0, _s.right0, _s.left0].join(' ')}>
<div className={[_s.default, _s.z2, _s.px15, _s.videoPlayerControlsBackground, _s.positionAbsolute, _s.bottom0, _s.right0, _s.left0].join(' ')}>
<div
className={[_s.default, _s.cursorPointer, _s.height22PX, _s.videoPlayerSeek].join(' ')}
@ -591,7 +591,7 @@ class Video extends PureComponent {
/>
</div>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.paddingBottom5PX, _s.noSelect].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.pb5, _s.noSelect].join(' ')}>
<Button
narrow
backgroundColor='none'
@ -601,7 +601,7 @@ class Video extends PureComponent {
iconWidth='16px'
iconHeight='16px'
iconClassName={_s.fillColorWhite}
className={_s.paddingLeft0}
className={_s.pl0}
/>
<div className={[_s.default, _s.marginLeftAuto, _s.flexRow, _s.alignItemsCenter].join(' ')}>
@ -621,7 +621,7 @@ class Video extends PureComponent {
iconWidth='24px'
iconHeight='24px'
iconClassName={_s.fillColorWhite}
className={[_s.paddingHorizontal10PX, _s.marginLeft10PX].join(' ')}
className={[_s.px10, _s.ml10].join(' ')}
onMouseEnter={this.handleMouseEnterAudio}
onMouseLeave={this.handleMouseLeaveAudio}
/>
@ -635,7 +635,7 @@ class Video extends PureComponent {
iconWidth='20px'
iconHeight='20px'
iconClassName={_s.fillColorWhite}
className={[_s.paddingHorizontal10PX, _s.paddingRight0].join(' ')}
className={[_s.px10, _s.pr0].join(' ')}
/>
</div>
</div>

4
app/javascript/gabsocial/layouts/default_layout.js
View File

@ -26,7 +26,7 @@ export default class DefaultLayout extends PureComponent {
<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.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader
title={title}
@ -43,7 +43,7 @@ export default class DefaultLayout extends PureComponent {
<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.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
<div className={_s.default}>
{children}

14
app/javascript/gabsocial/layouts/group_layout.js
View File

@ -51,7 +51,7 @@ export default class GroupLayout extends ImmutablePureComponent {
<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.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader
title={title}
@ -68,21 +68,21 @@ export default class GroupLayout extends ImmutablePureComponent {
<div className={[_s.default, _s.height53PX].join(' ')}></div>
<div className={[_s.default, _s.width1015PX, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
<div className={[_s.default, _s.width1015PX, _s.pl15, _s.py15].join(' ')}>
<div className={[_s.default, _s.z1, _s.width100PC, _s.marginBottom15PX].join(' ')}>
<div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
<Block>
<div className={[_s.default, _s.width100PC].join(' ')}>
<Image className={_s.height350PX} src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg' />
<div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.paddingHorizontal10PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
<TabBar tabs={tabs} />
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.marginLeftAuto].join(' ')}>
<Button
color='primary'
backgroundColor='tertiary'
radiusSmall
className={_s.marginRight5PX}
className={_s.mr5}
>
<Text color='inherit' size='small'>
Leave/Join
@ -92,7 +92,7 @@ export default class GroupLayout extends ImmutablePureComponent {
color='primary'
backgroundColor='tertiary'
radiusSmall
className={_s.marginRight5PX}
className={_s.mr5}
>
<Text color='inherit' size='small'>
Share
@ -102,7 +102,7 @@ export default class GroupLayout extends ImmutablePureComponent {
radiusSmall
color='primary'
backgroundColor='tertiary'
className={_s.marginRight5PX}
className={_s.mr5}
icon='ellipsis'
/>
</div>

20
app/javascript/gabsocial/layouts/profile_layout.js
View File

@ -45,30 +45,30 @@ export default class ProfileLayout extends ImmutablePureComponent {
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
<div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.height350PX, _s.width100PC, _s.radiusSmall, _s.overflowHidden].join(' ')}>
<Image className={_s.height350PX} src={account.get('header')} />
</div>
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.paddingHorizontal15PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.px15].join(' ')}>
<Image
className={[_s.circle, _s.marginTopNeg75PX, _s.borderColorWhite, _s.border2PX].join(' ')}
height='150px'
width='150px'
src={account.get('avatar')}
/>
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
<DisplayName account={account} multiline large />
</div>
</div>
<div className={[_s.default, _s.flexRow, _s.borderBottom1PX, _s.borderColorSecondary, _s.marginTop5PX, _s.height53PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.borderBottom1PX, _s.borderColorSecondary, _s.mt5, _s.height53PX].join(' ')}>
<div className={[_s.default].join(' ')}>
<TabBar tabs={tabs} large />
</div>
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.paddingVertical5PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
<Button
outline
icon='ellipsis'
@ -77,7 +77,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
iconClassName={_s.fillColorBrand}
color='brand'
backgroundColor='none'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.marginRight10PX, _s.paddingHorizontal10PX].join(' ')}
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
/>
<Button
outline
@ -87,17 +87,17 @@ export default class ProfileLayout extends ImmutablePureComponent {
iconClassName={_s.fillColorBrand}
color='brand'
backgroundColor='none'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.marginRight10PX, _s.paddingHorizontal10PX].join(' ')}
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
/>
<Button
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
>
<span className={[_s.paddingHorizontal15PX].join(' ')}>
<span className={[_s.px15].join(' ')}>
<Text
color='white'
weight='bold'
size='medium'
className={[_s.paddingHorizontal15PX].join(' ')}
className={[_s.px15].join(' ')}
>
Follow
</Text>
@ -107,7 +107,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
</div>
</div>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingRight15PX, _s.paddingVertical15PX].join(' ')}>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pr15, _s.py15].join(' ')}>
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
<div className={_s.default}>
{children}

4
app/javascript/gabsocial/layouts/search_layout.js
View File

@ -25,7 +25,7 @@ export default class SearchLayout extends PureComponent {
<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.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader
title={'Search'}
@ -42,7 +42,7 @@ export default class SearchLayout extends PureComponent {
<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.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
<div className={_s.default}>
{children}

3
app/javascript/gabsocial/reducers/popover.js
View File

@ -16,8 +16,7 @@ export default function popoverMenu(state = initialState, action) {
console.log("POPOVER_OPEN:", action)
return {
popoverType: action.popoverType,
placement: action.placement,
keyboard: action.keyboard
popoverProps: action.popoverProps,
}
case POPOVER_CLOSE:
console.log("POPOVER_CLOSE:", action)

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

@ -707,12 +707,12 @@ body {
z-index: 4;
}
.marginVertical5PX {
.my5 {
margin-top: 5px;
margin-bottom: 5px;
}
.marginLeft5PX {
.ml5 {
margin-left: 5px;
}
@ -724,28 +724,28 @@ body {
margin-bottom: -5px;
}
.marginRight2PX {
.mr2 {
margin-right: 2px;
}
.marginRight5PX {
.mr5 {
margin-right: 5px;
}
.marginVertical10PX {
.my10 {
margin-top: 10px;
margin-bottom: 10px;
}
.marginRight10PX {
.mr10 {
margin-right: 10px;
}
.marginLeft15PX {
.ml15 {
margin-left: 15px;
}
.marginLeft10PX {
.ml10 {
margin-left: 10px;
}
@ -757,19 +757,19 @@ body {
margin-right: auto;
}
.marginBottom15PX {
.mb15 {
margin-bottom: 15px;
}
.marginBottom10PX {
.mb10 {
margin-bottom: 10px;
}
.marginTop10PX {
.mt10 {
margin-top: 10px;
}
.marginTop5PX {
.mt5 {
margin-top: 5px;
}
@ -793,86 +793,81 @@ body {
padding-top: 25%;
}
.paddingTop10PX {
.pt10 {
padding-top: 10px;
}
.paddingTop5PX {
.pt5 {
padding-top: 5px;
}
.paddingTop2PX {
.pt2 {
padding-top: 2px;
}
.paddingBottom10PX {
.pb10 {
padding-bottom: 10px;
}
.paddingBottom5PX {
.pb5 {
padding-bottom: 5px;
}
.paddingHorizontal15PX {
.px15 {
padding-left: 15px;
padding-right: 15px;
}
.paddingLeft15PX {
.pl15 {
padding-left: 15px;
}
.paddingLeft0 {
.pl0 {
padding-left: 0;
}
.paddingRight0 {
.pr0 {
padding-right: 0;
}
.paddingRight15PX {
.pr15 {
padding-right: 15px;
}
.paddingVertical5PX {
.py5 {
padding-top: 5px;
padding-bottom: 5px;
}
.paddingVertical10PX {
.py10 {
padding-top: 10px;
padding-bottom: 10px;
}
.paddingVertical15PX {
.py15 {
padding-top: 15px;
padding-bottom: 15px;
}
.paddingVertical2PX {
.py2 {
padding-top: 2px;
padding-bottom: 2px;
}
.paddingBottom15PX {
.pb15 {
padding-bottom: 15px;
}
.paddingHorizontal5PX {
.px5 {
padding-left: 5px;
padding-right: 5px;
}
.paddingHorizontal10PX {
.px10 {
padding-left: 10px;
padding-right: 10px;
}
.paddingHorizontal20PX {
padding-left: 20px;
padding-right: 20px;
}
.opacity0 {
opacity: 0;
}

1
package.json
View File

@ -140,6 +140,7 @@
"react-motion": "^0.5.2",
"react-notification": "^6.8.4",
"react-overlays": "^0.8.3",
"react-popper": "^1.3.7",
"react-redux": "^6.0.1",
"react-redux-loading-bar": "^4.0.8",
"react-router-dom": "^4.1.1",

2
yarn.lock
View File

@ -11455,7 +11455,7 @@ react-popper@^1.3.4:
typed-styles "^0.0.7"
warning "^4.0.2"
react-popper@^1.3.6:
react-popper@^1.3.6, react-popper@^1.3.7:
version "1.3.7"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==