diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components')
3 files changed, 86 insertions, 53 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.js b/app/javascript/flavours/glitch/features/ui/components/actions_modal.js index 0873c282f..c8b040f95 100644 --- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.js @@ -6,15 +6,26 @@ import StatusContent from 'flavours/glitch/components/status_content'; import Avatar from 'flavours/glitch/components/avatar'; import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp'; import DisplayName from 'flavours/glitch/components/display_name'; -import IconButton from 'flavours/glitch/components/icon_button'; import classNames from 'classnames'; +import Icon from 'flavours/glitch/components/icon'; +import Link from 'flavours/glitch/components/link'; +import Toggle from 'react-toggle'; export default class ActionsModal extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, - actions: PropTypes.array, - onClick: PropTypes.func, + actions: PropTypes.arrayOf(PropTypes.shape({ + active: PropTypes.bool, + href: PropTypes.string, + icon: PropTypes.string, + meta: PropTypes.node, + name: PropTypes.string, + on: PropTypes.bool, + onClick: PropTypes.func, + onPassiveClick: PropTypes.func, + text: PropTypes.node, + })), }; renderAction = (action, i) => { @@ -22,17 +33,57 @@ export default class ActionsModal extends ImmutablePureComponent { return <li key={`sep-${i}`} className='dropdown-menu__separator' />; } - const { icon = null, text, meta = null, active = false, href = '#' } = action; + const { + active, + href, + icon, + meta, + name, + on, + onClick, + onPassiveClick, + text, + } = action; return ( - <li key={`${text}-${i}`}> - <a href={href} target='_blank' rel='noopener' onClick={this.props.onClick} data-index={i} className={classNames({ active })}> - {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' />} - <div> - <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div> - <div>{meta}</div> - </div> - </a> + <li key={name || i}> + <Link + className={classNames('link', { active })} + href={href} + onClick={on !== null && typeof on !== 'undefined' && onPassiveClick || onClick} + role={onClick ? 'button' : null} + > + {function () { + + // We render a `<Toggle>` if we were provided an `on` + // property, and otherwise show an `<Icon>` if available. + switch (true) { + case on !== null && typeof on !== 'undefined': + return ( + <Toggle + checked={on} + onChange={onPassiveClick || onClick} + /> + ); + case !!icon: + return ( + <Icon + className='icon' + fullwidth + icon={icon} + /> + ); + default: + return null; + } + }()} + {meta ? ( + <div> + <strong>{text}</strong> + {meta} + </div> + ) : <div>{text}</div>} + </Link> </li> ); } diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js index 91d4df93f..e4556899d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -11,13 +11,13 @@ import BundleContainer from '../containers/bundle_container'; import ColumnLoading from './column_loading'; import DrawerLoading from './drawer_loading'; import BundleColumnError from './bundle_column_error'; -import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from 'flavours/glitch/util/async-components'; +import { Drawer, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from 'flavours/glitch/util/async-components'; import detectPassiveEvents from 'detect-passive-events'; import { scrollRight } from 'flavours/glitch/util/scroll'; const componentMap = { - 'COMPOSE': Compose, + 'COMPOSE': Drawer, 'HOME': HomeTimeline, 'NOTIFICATIONS': Notifications, 'PUBLIC': PublicTimeline, diff --git a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js index 21f1addea..91a83f330 100644 --- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js @@ -6,18 +6,12 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ReactSwipeableViews from 'react-swipeable-views'; import classNames from 'classnames'; import Permalink from 'flavours/glitch/components/permalink'; -import ComposeForm from 'flavours/glitch/features/compose/components/compose_form'; -import Search from 'flavours/glitch/features/compose/components/search'; -import NavigationBar from 'flavours/glitch/features/compose/components/navigation_bar'; +import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer'; +import DrawerAccount from 'flavours/glitch/features/drawer/account'; +import DrawerSearch from 'flavours/glitch/features/drawer/search'; import ColumnHeader from './column_header'; -import { - List as ImmutableList, - Map as ImmutableMap, -} from 'immutable'; import { me } from 'flavours/glitch/util/initial_state'; -const noop = () => { }; - const messages = defineMessages({ home_title: { id: 'column.home', defaultMessage: 'Home' }, notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' }, @@ -44,29 +38,21 @@ PageOne.propTypes = { domain: PropTypes.string.isRequired, }; -const PageTwo = ({ myAccount }) => ( +const composerState = { + showSearch: true, + text: 'Awoo! #introductions', +}; + +const PageTwo = ({ intl, myAccount }) => ( <div className='onboarding-modal__page onboarding-modal__page-two'> <div className='figure non-interactive'> <div className='pseudo-drawer'> - <NavigationBar onClose={noop} account={myAccount} /> + <DrawerAccount account={myAccount} /> + <RawComposer + intl={intl} + state={composerState} + /> </div> - <ComposeForm - text='Awoo! #introductions' - suggestions={ImmutableList()} - mentionedDomains={[]} - spoiler={false} - onChange={noop} - onSubmit={noop} - onPaste={noop} - onPickEmoji={noop} - onChangeSpoilerText={noop} - onClearSuggestions={noop} - onFetchSuggestions={noop} - onSuggestionSelected={noop} - onPrivacyChange={noop} - showSearch - settings={ImmutableMap.of('side_arm', 'none')} - /> </div> <p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p> @@ -74,22 +60,17 @@ const PageTwo = ({ myAccount }) => ( ); PageTwo.propTypes = { + intl: PropTypes.object.isRequired, myAccount: ImmutablePropTypes.map.isRequired, }; -const PageThree = ({ myAccount }) => ( +const PageThree = ({ intl, myAccount }) => ( <div className='onboarding-modal__page onboarding-modal__page-three'> <div className='figure non-interactive'> - <Search - value='' - onChange={noop} - onSubmit={noop} - onClear={noop} - onShow={noop} - /> + <DrawerSearch intl={intl} /> <div className='pseudo-drawer'> - <NavigationBar onClose={noop} account={myAccount} /> + <DrawerAccount account={myAccount} /> </div> </div> @@ -99,6 +80,7 @@ const PageThree = ({ myAccount }) => ( ); PageThree.propTypes = { + intl: PropTypes.object.isRequired, myAccount: ImmutablePropTypes.map.isRequired, }; @@ -192,8 +174,8 @@ export default class OnboardingModal extends React.PureComponent { const { myAccount, admin, domain, intl } = this.props; this.pages = [ <PageOne acct={myAccount.get('acct')} domain={domain} />, - <PageTwo myAccount={myAccount} />, - <PageThree myAccount={myAccount} />, + <PageTwo myAccount={myAccount} intl={intl} />, + <PageThree myAccount={myAccount} intl={intl} />, <PageFour domain={domain} intl={intl} />, <PageSix admin={admin} domain={domain} />, ]; |