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

Progress

Browse Source
This commit is contained in:
mgabdev
2020-02-20 19:57:29 -05:00
parent e37500c0cf
commit bebc39f150
61 changed files with 1181 additions and 802 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,39 +1,57 @@
import Heading from '../heading'
import Button from '../button'
import Text from '../text'
export default class PanelLayout extends PureComponent {
static propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
children: PropTypes.node,
buttonTitle: PropTypes.string,
buttonAction: PropTypes.func,
buttonTo: PropTypes.func,
headerButtonTitle: PropTypes.string,
headerButtonAction: PropTypes.func,
headerButtonTo: PropTypes.func,
footerButtonTitle: PropTypes.string,
footerButtonAction: PropTypes.func,
footerButtonTo: PropTypes.func,
noPadding: PropTypes.bool,
}
render() {
const { title, subtitle, buttonTitle, buttonAction, buttonTo, noPadding, children } = this.props
const {
title,
subtitle,
headerButtonTitle,
headerButtonAction,
headerButtonTo,
footerButtonTitle,
footerButtonAction,
footerButtonTo,
noPadding,
children,
} = this.props
return (
<aside className={[_s.default, _s.backgroundWhite, _s.overflowHidden, _s.radiusSmall, _s.marginBottom15PX, _s.bordercolorSecondary, _s.border1PX].join(' ')}>
<aside className={[_s.default, _s.backgroundColorPrimary, _s.overflowHidden, _s.radiusSmall, _s.marginBottom15PX, _s.borderColorSecondary, _s.border1PX].join(' ')}>
{
(title || subtitle) &&
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.bordercolorSecondary, _s.borderBottom1PX].join(' ')}>
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<Heading size='h3'>
{title}
</Heading>
{
(!!buttonTitle && (!!buttonAction || !!buttonTo)) &&
(!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
<div className={[_s.default, _s.marginLeftAuto].join(' ')}>
<Button
text
to={buttonTo}
onClick={buttonAction}
className={[_s.default, _s.cursorPointer, _s.fontWeightBold, _s.text, _s.colorBrand, _s.fontSize13PX, _s.noUnderline].join(' ')}
backgroundColor='none'
color='brand'
to={headerButtonTo}
onClick={headerButtonAction}
>
{buttonTitle}
<Text size='small' color='inherit' weight='bold'>
{headerButtonTitle}
</Text>
</Button>
</div>
}
@@ -57,6 +75,24 @@ export default class PanelLayout extends PureComponent {
{
noPadding && children
}
{
(!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
<div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
<Button
text
color='none'
backgroundColor='none'
to={footerButtonTo}
onClick={footerButtonAction}
className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
>
<Text color='brand' align='left' size='medium'>
{footerButtonTitle}
</Text>
</Button>
</div>
}
</aside>
)
}