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
Download Patch File Download Diff File Expand all files Collapse all files

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>