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

Progress on Gab Deck, Updates on Compose

Browse Source 
• Progress on Gab Deck, Updates on Compose
This commit is contained in:
mgabdev
2020-12-08 23:15:33 -05:00
parent 6950f67520
commit 998f00ae48
26 changed files with 895 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { deleteDeckColumnAtIndex } from '../actions/deck'
import Icon from './icon'
import Text from './text'
import Button from './button'
class DeckColumnHeader extends React.PureComponent {
handleClickDelete = () => {
this.props.dispatch(deleteDeckColumnAtIndex(this.props.index))
}
handleClickRefresh = () => {
}
render() {
const {
title,
@@ -15,22 +25,41 @@ class DeckColumnHeader extends React.PureComponent {
} = this.props
return (
<div className={[_s.d, _s.w100PC, _s.flexRow, _s.aiCenter, _s.h60PX, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgPrimary].join(' ')}>
{ !!icon && <Icon id={icon} className={_s.cPrimary} size='20px' /> }
<div data-sort-header className={[_s.d, _s.w100PC, _s.flexRow, _s.aiCenter, _s.h60PX, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgPrimary].join(' ')}>
{
!!icon &&
<div data-sort-header className={[_s.d, _s.flexRow, _s.mr15, _s.cursorEWResize].join(' ')}>
<span className={[_s.d, _s.w1PX, _s.h24PX, _s.mr2, _s.bgSecondary].join(' ')} />
<span className={[_s.d, _s.w1PX, _s.h24PX, _s.mr2, _s.bgSecondary].join(' ')} />
<span className={[_s.d, _s.w1PX, _s.h24PX, _s.bgSecondary].join(' ')} />
</div>
}
{ !!icon && <Icon id={icon} className={_s.cPrimary} size='18px' /> }
<div className={[_s.d, _s.flexRow, _s.aiEnd, _s.ml15].join(' ')}>
{ !!title && <Text size='large' weight='medium'>{title}</Text> }
{ !!subtitle && <Text className={_s.ml5} size='small' color='secondary'>{subtitle}</Text> }
{ !!title && <Text size='extraLarge' weight='medium'>{title}</Text> }
{ !!subtitle && <Text className={_s.ml5} color='secondary'>{subtitle}</Text> }
</div>
<div className={[_s.d, _s.aiCenter, _s.mlAuto, _s.jcCenter].join(' ')}>
{
!!title &&
{
!!title &&
<div className={[_s.d, _s.flexRow, _s.aiCenter, _s.mlAuto, _s.jcCenter].join(' ')}>
<Button
color='primary'
backgroundColor='none'
icon='list'
isNarrow
noClasses
onClick={this.handleClickRefresh}
className={[_s.d, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.bgTransparent, _s.px5, _s.py5].join(' ')}
iconClassName={_s.cSecondary}
icon='repost'
/>
}
</div>
<Button
isNarrow
noClasses
onClick={this.handleClickDelete}
className={[_s.d, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.bgTransparent, _s.px5, _s.py5].join(' ')}
iconClassName={_s.cSecondary}
icon='trash'
/>
</div>
}
</div>
)
}
@@ -41,6 +70,7 @@ DeckColumnHeader.propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
icon: PropTypes.string,
index: PropTypes.number,
}
export default DeckColumnHeader
export default connect()(DeckColumnHeader)