From 6d70a8026309c2d41e2402ec84875ced8e181105 Mon Sep 17 00:00:00 2001 From: Eugen Date: Sun, 16 Apr 2017 20:32:00 +0200 Subject: [PATCH] Onboarding modal (#1883) * Basic onboarding modal that's shown to users once * Lay out pages 2 through 5, add images, style modals (#1509) * Lay out pages 2 through 5 Added images and laid out pages 2 through 5 in the jsx file. SCSS will come, still working on just seeing if this works at all. * Fix jsx errors, add images to modal pages, style modal pages * Add animations to onboarding pager changes, improve wording and styling * Finishing touches on the onboarding * Add missing propTypes * Update wording --- app/assets/images/elephant-friend.png | Bin 0 -> 24466 bytes .../components/actions/onboarding.jsx | 14 + .../components/containers/mastodon.jsx | 3 + .../features/ui/components/modal_root.jsx | 2 + .../ui/components/onboarding_modal.jsx | 251 ++++++++++++++++++ .../components/reducers/settings.jsx | 2 + app/assets/stylesheets/components.scss | 238 +++++++++++++++++ app/controllers/home_controller.rb | 1 + app/views/home/initial_state.json.rabl | 9 +- 9 files changed, 517 insertions(+), 3 deletions(-) create mode 100644 app/assets/images/elephant-friend.png create mode 100644 app/assets/javascripts/components/actions/onboarding.jsx create mode 100644 app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx diff --git a/app/assets/images/elephant-friend.png b/app/assets/images/elephant-friend.png new file mode 100644 index 0000000000000000000000000000000000000000..3c5145ba987ff14621d0632cec74e02eb3886d8b GIT binary patch literal 24466 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 { + const alreadySeen = getState().getIn(['settings', 'onboarded']); + + if (!alreadySeen) { + dispatch(openModal('ONBOARDING')); + dispatch(changeSetting(['onboarded'], true)); + dispatch(saveSettings()); + } + }; +}; diff --git a/app/assets/javascripts/components/containers/mastodon.jsx b/app/assets/javascripts/components/containers/mastodon.jsx index a771d12696d..08576913e3a 100644 --- a/app/assets/javascripts/components/containers/mastodon.jsx +++ b/app/assets/javascripts/components/containers/mastodon.jsx @@ -8,6 +8,7 @@ import { connectTimeline, disconnectTimeline } from '../actions/timelines'; +import { showOnboardingOnce } from '../actions/onboarding'; import { updateNotifications, refreshNotifications } from '../actions/notifications'; import createBrowserHistory from 'history/lib/createBrowserHistory'; import { @@ -134,6 +135,8 @@ const Mastodon = React.createClass({ if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') { Notification.requestPermission(); } + + store.dispatch(showOnboardingOnce()); }, componentWillUnmount () { diff --git a/app/assets/javascripts/components/features/ui/components/modal_root.jsx b/app/assets/javascripts/components/features/ui/components/modal_root.jsx index a1ed8fd8822..ace3e085f50 100644 --- a/app/assets/javascripts/components/features/ui/components/modal_root.jsx +++ b/app/assets/javascripts/components/features/ui/components/modal_root.jsx @@ -1,11 +1,13 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import MediaModal from './media_modal'; +import OnboardingModal from './onboarding_modal'; import VideoModal from './video_modal'; import BoostModal from './boost_modal'; import { TransitionMotion, spring } from 'react-motion'; const MODAL_COMPONENTS = { 'MEDIA': MediaModal, + 'ONBOARDING': OnboardingModal, 'VIDEO': VideoModal, 'BOOST': BoostModal }; diff --git a/app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx b/app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx new file mode 100644 index 00000000000..8d5132ea251 --- /dev/null +++ b/app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx @@ -0,0 +1,251 @@ +import { connect } from 'react-redux'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import Permalink from '../../../components/permalink'; +import { TransitionMotion, spring } from 'react-motion'; +import ComposeForm from '../../compose/components/compose_form'; +import Search from '../../compose/components/search'; +import NavigationBar from '../../compose/components/navigation_bar'; +import ColumnHeader from './column_header'; +import Immutable from 'immutable'; + +const messages = defineMessages({ + home_title: { id: 'column.home', defaultMessage: 'Home' }, + notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' }, + local_title: { id: 'column.community', defaultMessage: 'Local timeline' }, + federated_title: { id: 'column.public', defaultMessage: 'Federated timeline' } +}); + +const PageOne = ({ acct, domain }) => ( +

+
+
+
+ +
+

+

+

{acct}@{domain} }}/>

+
+
+); + +PageOne.propTypes = { + acct: React.PropTypes.string.isRequired, + domain: React.PropTypes.string.isRequired +}; + +const PageTwo = () => ( +
+
+ {}} + onSubmit={() => {}} + onPaste={() => {}} + onPickEmoji={() => {}} + onChangeSpoilerText={() => {}} + onClearSuggestions={() => {}} + onFetchSuggestions={() => {}} + onSuggestionSelected={() => {}} + /> +
+ +

+
+); + +const PageThree = ({ me, domain }) => ( +
+
+ {}} + onSubmit={() => {}} + onClear={() => {}} + onShow={() => {}} + /> + +
+ +
+
+ +

#illustration, introductions: #introductions }}/>

+

+
+); + +PageThree.propTypes = { + me: ImmutablePropTypes.map.isRequired, + domain: React.PropTypes.string.isRequired +}; + +const PageFour = ({ domain, intl }) => ( +
+
+
+
+
+

+
+ +
+
+

+
+
+ +
+
+
+
+ +
+
+
+
+ +

+
+
+); + +PageFour.propTypes = { + domain: React.PropTypes.string.isRequired, + intl: React.PropTypes.object.isRequired +}; + +const PageSix = ({ admin }) => { + let adminSection = ''; + + if (admin) { + adminSection = ( +

+ @{admin.get('acct')} }} /> +
+ }}/> +

+ ); + } + + return ( +
+

+ {adminSection} +

GitHub }} />

+

}} />

+
+ ); +}; + +PageSix.propTypes = { + admin: ImmutablePropTypes.map +}; + +const mapStateToProps = state => ({ + me: state.getIn(['accounts', state.getIn(['meta', 'me'])]), + admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]), + domain: state.getIn(['meta', 'domain']) +}); + +const OnboardingModal = React.createClass({ + + propTypes: { + onClose: React.PropTypes.func.isRequired, + intl: React.PropTypes.object.isRequired, + me: ImmutablePropTypes.map.isRequired, + domain: React.PropTypes.string.isRequired, + admin: ImmutablePropTypes.map + }, + + getInitialState () { + return { + currentIndex: 0 + }; + }, + + mixins: [PureRenderMixin], + + handleSkip (e) { + e.preventDefault(); + this.props.onClose(); + }, + + handleDot (i, e) { + e.preventDefault(); + this.setState({ currentIndex: i }); + }, + + handleNext (maxNum, e) { + e.preventDefault(); + + if (this.state.currentIndex < maxNum - 1) { + this.setState({ currentIndex: this.state.currentIndex + 1 }); + } else { + this.props.onClose(); + } + }, + + render () { + const { me, admin, domain, intl } = this.props; + + const pages = [ + , + , + , + , + + ]; + + const { currentIndex } = this.state; + const hasMore = currentIndex < pages.length - 1; + + let nextOrDoneBtn; + + if(hasMore) { + nextOrDoneBtn = ; + } else { + nextOrDoneBtn = ; + } + + const styles = pages.map((page, i) => ({ + key: i, + style: { opacity: spring(i === currentIndex ? 1 : 0) } + })); + + return ( +
+ + {interpolatedStyles => +
+ {pages.map((page, i) => +
{page}
+ )} +
+ } + + +
+
+ +
+ +
+ {pages.map((_, i) =>
)} +
+ +
+ {nextOrDoneBtn} +
+
+
+ ); + } + +}); + +export default connect(mapStateToProps)(injectIntl(OnboardingModal)); diff --git a/app/assets/javascripts/components/reducers/settings.jsx b/app/assets/javascripts/components/reducers/settings.jsx index 8acc3facaf0..820af99edb4 100644 --- a/app/assets/javascripts/components/reducers/settings.jsx +++ b/app/assets/javascripts/components/reducers/settings.jsx @@ -3,6 +3,8 @@ import { STORE_HYDRATE } from '../actions/store'; import Immutable from 'immutable'; const initialState = Immutable.Map({ + onboarded: false, + home: Immutable.Map({ shows: Immutable.Map({ reblog: true, diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 8bd35819a93..84344e94d4c 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -932,6 +932,12 @@ a.status__content__spoiler-link { } } +.pseudo-drawer { + background: lighten($color1, 13%); + font-size: 13px; + text-align: left; +} + .drawer__header { flex: 0 0 auto; font-size: 16px; @@ -2018,6 +2024,7 @@ button.icon-button.active i.fa-retweet { .modal-root__modal { pointer-events: auto; display: flex; + z-index: 9999; } .media-modal { @@ -2031,6 +2038,237 @@ button.icon-button.active i.fa-retweet { } } +.onboarding-modal { + background: $color2; + color: $color1; + border-radius: 8px; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.onboarding-modal__pager { + height: 80vh; + width: 80vw; + max-width: 500px; + max-height: 350px; + position: relative; + + & > div { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 25px; + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + display: flex; + opacity: 0; + user-select: text; + } +} + +@media screen and (max-width: 550px) { + .onboarding-modal { + width: 100%; + height: 100%; + border-radius: 0; + } + + .onboarding-modal__pager { + width: 100%; + height: auto; + max-width: none; + max-height: none; + flex: 1 1 auto; + } +} + +.onboarding-modal__paginator { + flex: 0 0 auto; + background: darken($color2, 8%); + display: flex; + padding: 25px; + + & > div { + min-width: 33px; + } + + a { + color: darken($color2, 34%); + text-decoration: none; + font-size: 14px; + font-weight: 500; + + &:hover, &:focus, &:active { + color: darken($color2, 38%); + } + + &.onboarding-modal__done, &.onboarding-modal__next { + color: $color4; + } + } +} + +.onboarding-modal__dots { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; +} + +.onboarding-modal__dot { + width: 14px; + height: 14px; + border-radius: 14px; + background: darken($color2, 16%); + margin: 0 3px; + cursor: pointer; + + &:hover { + background: darken($color2, 18%); + } + + &.active { + cursor: default; + background: darken($color2, 24%); + } +} + +.onboarding-modal__page { + cursor: default; + line-height: 21px; + + h1 { + font-size: 18px; + font-weight: 500; + color: $color1; + margin-bottom: 20px; + } + + a { + color: $color4; + + &:hover, &:focus, &:active { + color: lighten($color4, 4%); + } + } + + p { + font-size: 16px; + color: lighten($color1, 8%); + margin-top: 10px; + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + + strong { + font-weight: 500; + background: $color1; + color: $color2; + border-radius: 4px; + font-size: 14px; + padding: 3px 6px; + } + } +} + +.onboarding-modal__page-one { + display: flex; +} + +.onboarding-modal__page-one__elephant-friend { + background: image-url('elephant-friend.png') no-repeat 0 0; + width: 147px; + height: 160px; + margin-right: 10px; +} + +.onboarding-modal__page-two, +.onboarding-modal__page-three, +.onboarding-modal__page-four, +.onboarding-modal__page-five { + p { + text-align: left; + } + + .figure { + background: darken($color1, 8%); + color: $color2; + margin-bottom: 20px; + border-radius: 4px; + padding: 10px; + text-align: center; + font-size: 14px; + box-shadow: 1px 2px 6px rgba($color8, 0.3); + + .onboarding-modal__image { + border-radius: 4px; + margin-bottom: 10px; + } + + &.non-interactive { + pointer-events: none; + text-align: left; + } + } +} + +.onboarding-modal__page-four__columns { + .row { + display: flex; + margin-bottom: 20px; + + & > div { + flex: 1 1 0; + margin: 0 10px; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + + p { + text-align: center; + } + } + + &:last-child { + margin-bottom: 0; + } + } + + .column-header { + color: $color5; + } +} + +.onboarding-modal__image { + border-radius: 8px; + width: 70vw; + max-width: 450px; + max-height: auto; + display: block; + margin: auto; + margin-bottom: 20px; +} + +.onboard-sliders { + display: inline-block; + max-width: 30px; + max-height: auto; + margin-left: 10px; +} + .boost-modal { background: lighten($color2, 8%); color: $color1; diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index 2d1cf74f03e..0a25b52aa33 100644 --- a/app/controllers/home_controller.rb +++ b/app/controllers/home_controller.rb @@ -7,6 +7,7 @@ class HomeController < ApplicationController @body_classes = 'app-body' @token = find_or_create_access_token.token @web_settings = Web::Setting.find_by(user: current_user)&.data || {} + @admin = Account.find_local(Setting.site_contact_username) @streaming_api_base_url = Rails.configuration.x.streaming_api_base_url end diff --git a/app/views/home/initial_state.json.rabl b/app/views/home/initial_state.json.rabl index 9f94e6141df..ce7bfbd44cf 100644 --- a/app/views/home/initial_state.json.rabl +++ b/app/views/home/initial_state.json.rabl @@ -5,7 +5,9 @@ node(:meta) do streaming_api_base_url: @streaming_api_base_url, access_token: @token, locale: I18n.locale, + domain: Rails.configuration.x.local_domain, me: current_account.id, + admin: @admin.try(:id), boost_modal: current_account.user.setting_boost_modal, } end @@ -18,9 +20,10 @@ node(:compose) do end node(:accounts) do - { - current_account.id => partial('api/v1/accounts/show', object: current_account), - } + store = {} + store[current_account.id] = partial('api/v1/accounts/show', object: current_account) + store[@admin.id] = partial('api/v1/accounts/show', object: @admin) unless @admin.nil? + store end node(:settings) { @web_settings }