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

Added NavigationBarButton component

Browse Source 
• Added:
- NavigationBarButton component

• Removed:
- the component code from NavigationBar component
This commit is contained in:
mgabdev 2020-07-24 18:51:14 -05:00
parent 86c1b3c75d
commit a48eb1d3a3
2 changed files with 73 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/javascript/gabsocial/components/navigation_bar.js
View File

@ -15,6 +15,7 @@ import BackButton from './back_button'
import Button from './button'
import Heading from './heading'
import Icon from './icon'
import NavigationBarButton from './navigation_bar_button'
import Search from './search'
import Text from './text'
@ -238,72 +239,4 @@ class NavigationBarButtonDivider extends PureComponent {
)
}
}
class NavigationBarButton extends PureComponent {
static propTypes = {
title: PropTypes.string,
icon: PropTypes.string,
to: PropTypes.string,
href: PropTypes.string,
attrTitle: PropTypes.string,
}
render() {
const {
title,
icon,
to,
href,
attrTitle,
} = this.props
const active = false
const classes = CX({
default: 1,
height53PX: 1,
flexRow: 1,
alignItemsCenter: 1,
justifyContentCenter: 1,
outlineNone: 1,
cursorPointer: 1,
bgTransparent: 1,
noUnderline: 1,
colorNavigation: 1,
px10: !!title,
px5: !title,
colorWhite: !!title,
fs13PX: !!title,
fontWeightNormal: !!title,
})
const iconClasses = CX({
fillNavigation: !!title || active,
fillNavigationBlend: !title,
mr10: !!title,
})
const iconSize = !!title ? '16px' : '18px'
return (
<Button
to={to}
href={href}
title={attrTitle}
className={classes}
noClasses
>
<Icon className={iconClasses} id={icon} size={iconSize} />
{
!!title &&
<Text color='white'>
{title}
</Text>
}
</Button>
)
}
}

72
app/javascript/gabsocial/components/navigation_bar_button.js Normal file
View File

@ -0,0 +1,72 @@
import { CX } from '../constants'
import Button from './button'
import Icon from './icon'
import Text from './text'
export default class NavigationBarButton extends PureComponent {
static propTypes = {
title: PropTypes.string,
icon: PropTypes.string,
to: PropTypes.string,
href: PropTypes.string,
attrTitle: PropTypes.string,
}
render() {
const {
title,
icon,
to,
href,
attrTitle,
} = this.props
const active = false
const classes = CX({
default: 1,
height53PX: 1,
flexRow: 1,
alignItemsCenter: 1,
justifyContentCenter: 1,
outlineNone: 1,
cursorPointer: 1,
bgTransparent: 1,
noUnderline: 1,
colorNavigation: 1,
px10: !!title,
px5: !title,
colorWhite: !!title,
fs13PX: !!title,
fontWeightNormal: !!title,
})
const iconClasses = CX({
fillNavigation: !!title || active,
fillNavigationBlend: !title,
mr10: !!title,
})
const iconSize = !!title ? '16px' : '18px'
return (
<Button
to={to}
href={href}
title={attrTitle}
className={classes}
noClasses
>
<Icon className={iconClasses} id={icon} size={iconSize} />
{
!!title &&
<Text color='white'>
{title}
</Text>
}
</Button>
)
}
}