Skip to content
Permalink
Browse files

fix(ui): convert channel view mode buttons to a switch

  • Loading branch information...
korhaliv authored and mrfelton committed Apr 20, 2019
1 parent 870bc79 commit 806fa2cc74334c3548cd667de0c1f678dcf2f37f
Showing with 24 additions and 66 deletions.
  1. +24 −66 renderer/components/Channels/ChannelsViewSwitcher.js
@@ -1,78 +1,36 @@
import React from 'react'
import PropTypes from 'prop-types'
import { injectIntl } from 'react-intl'
import styled from 'styled-components'
import { Flex } from 'rebass'
import { Button } from 'components/UI'
import { SwitchButton } from 'components/UI'
import LayoutCards from 'components/Icon/LayoutCards'
import LayoutList from 'components/Icon/LayoutList'
import { CHANNEL_LIST_VIEW_MODE_SUMMARY, CHANNEL_LIST_VIEW_MODE_CARD } from './constants'
import messages from './messages'

const StyledButton = styled(Button)`
color: ${props => (props.active ? props.theme.colors.lightningOrange : null)};
&:hover {
color: ${props => props.theme.colors.lightningOrange};
const ChannelsViewSwitcher = injectIntl(
({ channelViewMode, setChannelViewMode, intl, ...rest }) => {
const isCardView = channelViewMode === CHANNEL_LIST_VIEW_MODE_CARD
//
const onClick = () => {
if (isCardView) {
setChannelViewMode(CHANNEL_LIST_VIEW_MODE_SUMMARY)
} else {
setChannelViewMode(CHANNEL_LIST_VIEW_MODE_CARD)
}
}
return (
<SwitchButton
{...rest}
data-hint={intl.formatMessage({
...(isCardView ? messages.view_mode_list : messages.view_mode_card),
})}
Icon1={LayoutList}
Icon2={LayoutCards}
isSwitched={isCardView}
onClick={onClick}
/>
)
}
`
StyledButton.propTypes = {
active: PropTypes.bool,
}

const CardButton = injectIntl(({ active, onClick, intl, ...rest }) => (
<StyledButton
active={active}
className="hint--bottom-left"
data-hint={intl.formatMessage({ ...messages.view_mode_card })}
onClick={onClick}
size="small"
variant="secondary"
{...rest}
>
<LayoutCards height="16px" width="16px" />
</StyledButton>
))

CardButton.propTypes = {
active: PropTypes.bool,
onClick: PropTypes.func.isRequired,
}

const ListButton = injectIntl(({ active, onClick, intl, ...rest }) => (
<StyledButton
active={active}
alignSelf="center"
className="hint--bottom-left"
data-hint={intl.formatMessage({ ...messages.view_mode_list })}
onClick={onClick}
size="small"
variant="secondary"
{...rest}
>
<LayoutList height="16px" width="16px" />
</StyledButton>
))

ListButton.propTypes = {
active: PropTypes.bool,
onClick: PropTypes.func.isRequired,
}

const ChannelsViewSwitcher = ({ channelViewMode, setChannelViewMode, ...rest }) => (
<Flex alignItems="center" as="section" {...rest}>
<CardButton
active={channelViewMode === CHANNEL_LIST_VIEW_MODE_CARD}
onClick={() => setChannelViewMode(CHANNEL_LIST_VIEW_MODE_CARD)}
px={2}
py={1}
/>
<ListButton
active={channelViewMode === CHANNEL_LIST_VIEW_MODE_SUMMARY}
onClick={() => setChannelViewMode(CHANNEL_LIST_VIEW_MODE_SUMMARY)}
px={2}
py={1}
/>
</Flex>
)

ChannelsViewSwitcher.propTypes = {

0 comments on commit 806fa2c

Please sign in to comment.
You can’t perform that action at this time.