From d799921c75e7bfb83504bb79dcc1c269c91d168c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 18 Jan 2018 19:17:25 +0100 Subject: Replace tutorial modal with welcome e-mail (#6273) * Remove onboarding modal * Welcome e-mail * Send welcome e-mail after confirmation * Remove obsolete translations --- app/javascript/images/icon_done.svg | 4 + app/javascript/mastodon/actions/onboarding.js | 14 - app/javascript/mastodon/containers/mastodon.js | 3 - .../mastodon/features/ui/components/modal_root.js | 2 - .../features/ui/components/onboarding_modal.js | 318 --------------------- .../mastodon/features/ui/util/async-components.js | 4 - app/javascript/styles/mailer.scss | 44 +++ app/javascript/styles/mastodon/components.scss | 254 ---------------- 8 files changed, 48 insertions(+), 595 deletions(-) create mode 100644 app/javascript/images/icon_done.svg delete mode 100644 app/javascript/mastodon/actions/onboarding.js delete mode 100644 app/javascript/mastodon/features/ui/components/onboarding_modal.js (limited to 'app/javascript') diff --git a/app/javascript/images/icon_done.svg b/app/javascript/images/icon_done.svg new file mode 100644 index 000000000..446af14d9 --- /dev/null +++ b/app/javascript/images/icon_done.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/javascript/mastodon/actions/onboarding.js b/app/javascript/mastodon/actions/onboarding.js deleted file mode 100644 index a161c50ef..000000000 --- a/app/javascript/mastodon/actions/onboarding.js +++ /dev/null @@ -1,14 +0,0 @@ -import { openModal } from './modal'; -import { changeSetting, saveSettings } from './settings'; - -export function showOnboardingOnce() { - return (dispatch, getState) => { - const alreadySeen = getState().getIn(['settings', 'onboarded']); - - if (!alreadySeen) { - dispatch(openModal('ONBOARDING')); - dispatch(changeSetting(['onboarded'], true)); - dispatch(saveSettings()); - } - }; -}; diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index d1710445b..8ae3b727a 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -2,7 +2,6 @@ import React from 'react'; import { Provider } from 'react-redux'; import PropTypes from 'prop-types'; import configureStore from '../store/configureStore'; -import { showOnboardingOnce } from '../actions/onboarding'; import { BrowserRouter, Route } from 'react-router-dom'; import { ScrollContext } from 'react-router-scroll-4'; import UI from '../features/ui'; @@ -40,8 +39,6 @@ export default class Mastodon extends React.PureComponent { const handlerUrl = window.location.protocol + '//' + window.location.host + '/intent?uri=%s'; window.setTimeout(() => navigator.registerProtocolHandler('web+mastodon', handlerUrl, 'Mastodon'), 5 * 60 * 1000); } - - store.dispatch(showOnboardingOnce()); } componentWillUnmount () { diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index 5839ba40a..dbfb46ee7 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -9,7 +9,6 @@ import VideoModal from './video_modal'; import BoostModal from './boost_modal'; import ConfirmationModal from './confirmation_modal'; import { - OnboardingModal, MuteModal, ReportModal, EmbedModal, @@ -18,7 +17,6 @@ import { const MODAL_COMPONENTS = { 'MEDIA': () => Promise.resolve({ default: MediaModal }), - 'ONBOARDING': OnboardingModal, 'VIDEO': () => Promise.resolve({ default: VideoModal }), 'BOOST': () => Promise.resolve({ default: BoostModal }), 'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js deleted file mode 100644 index 54673e223..000000000 --- a/app/javascript/mastodon/features/ui/components/onboarding_modal.js +++ /dev/null @@ -1,318 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import ReactSwipeableViews from 'react-swipeable-views'; -import classNames from 'classnames'; -import Permalink from '../../../components/permalink'; -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 { List as ImmutableList } from 'immutable'; -import { me } from '../../../initial_state'; - -const noop = () => { }; - -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: PropTypes.string.isRequired, - domain: PropTypes.string.isRequired, -}; - -const PageTwo = ({ myAccount }) => ( -
-
-
- -
- -
- -

-
-); - -PageTwo.propTypes = { - myAccount: ImmutablePropTypes.map.isRequired, -}; - -const PageThree = ({ myAccount }) => ( -
-
- - -
- -
-
- -

#illustration, introductions: #introductions }} />

-

-
-); - -PageThree.propTypes = { - myAccount: ImmutablePropTypes.map.isRequired, -}; - -const PageFour = ({ domain, intl }) => ( -
-
-
-
-
-

-
- -
-
-

-
-
- -
-
-
-
- -
-
-
-
- -

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

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

- ); - } - - return ( -
-

- {adminSection} -

GitHub }} />

-

}} />

-

-
- ); -}; - -PageSix.propTypes = { - admin: ImmutablePropTypes.map, - domain: PropTypes.string.isRequired, -}; - -const mapStateToProps = state => ({ - myAccount: state.getIn(['accounts', me]), - admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]), - domain: state.getIn(['meta', 'domain']), -}); - -@connect(mapStateToProps) -@injectIntl -export default class OnboardingModal extends React.PureComponent { - - static propTypes = { - onClose: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - myAccount: ImmutablePropTypes.map.isRequired, - domain: PropTypes.string.isRequired, - admin: ImmutablePropTypes.map, - }; - - state = { - currentIndex: 0, - }; - - componentWillMount() { - const { myAccount, admin, domain, intl } = this.props; - this.pages = [ - , - , - , - , - , - ]; - }; - - componentDidMount() { - window.addEventListener('keyup', this.handleKeyUp); - } - - componentWillUnmount() { - window.addEventListener('keyup', this.handleKeyUp); - } - - handleSkip = (e) => { - e.preventDefault(); - this.props.onClose(); - } - - handleDot = (e) => { - const i = Number(e.currentTarget.getAttribute('data-index')); - e.preventDefault(); - this.setState({ currentIndex: i }); - } - - handlePrev = () => { - this.setState(({ currentIndex }) => ({ - currentIndex: Math.max(0, currentIndex - 1), - })); - } - - handleNext = () => { - const { pages } = this; - this.setState(({ currentIndex }) => ({ - currentIndex: Math.min(currentIndex + 1, pages.length - 1), - })); - } - - handleSwipe = (index) => { - this.setState({ currentIndex: index }); - } - - handleKeyUp = ({ key }) => { - switch (key) { - case 'ArrowLeft': - this.handlePrev(); - break; - case 'ArrowRight': - this.handleNext(); - break; - } - } - - handleClose = () => { - this.props.onClose(); - } - - render () { - const { pages } = this; - const { currentIndex } = this.state; - const hasMore = currentIndex < pages.length - 1; - - const nextOrDoneBtn = hasMore ? ( - - ) : ( - - ); - - return ( -
- - {pages.map((page, i) => { - const className = classNames('onboarding-modal__page__wrapper', { - 'onboarding-modal__page__wrapper--active': i === currentIndex, - }); - return ( -
{page}
- ); - })} - - -
-
- -
- -
- {pages.map((_, i) => { - const className = classNames('onboarding-modal__dot', { - active: i === currentIndex, - }); - return ( -
- ); - })} -
- -
- {nextOrDoneBtn} -
-
-
- ); - } - -} diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index d6586680b..a03c4cefd 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -94,10 +94,6 @@ export function Mutes () { return import(/* webpackChunkName: "features/mutes" */'../../mutes'); } -export function OnboardingModal () { - return import(/* webpackChunkName: "modals/onboarding_modal" */'../components/onboarding_modal'); -} - export function MuteModal () { return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal'); } diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index e6422b2ea..b3bcc9209 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -228,6 +228,13 @@ h3 { line-height: 25px; } +h5 { + font-size: 16px; + line-height: 21px; + font-weight: 700; + color: lighten($ui-base-color, 34%); +} + .input { td { background: darken($ui-base-color, 8%); @@ -356,6 +363,19 @@ h3 { font-weight: 500 !important; } } + + &.button-small { + td { + border-radius: 4px; + font-size: 14px; + padding: 8px 16px; + + a { + padding: 5px 16px !important; + line-height: 26px !important; + } + } + } } .button-default { @@ -379,6 +399,14 @@ h3 { padding-right: 16px; } +.padded-bottom { + padding-bottom: 32px; +} + +.margin-bottom { + margin-bottom: 20px; +} + .hero-icon { width: 64px; @@ -463,6 +491,22 @@ h3 { border-top: 1px solid lighten($ui-base-color, 8%); } +ul { + padding-left: 15px; + margin-top: 0; + margin-bottom: 0; + padding-top: 16px; + + li { + margin-bottom: 16px; + color: lighten($ui-base-color, 26%); + + span { + color: $ui-primary-color; + } + } +} + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { body { min-height: 1024px !important; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6fbecee7c..63ee06d8e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3303,7 +3303,6 @@ z-index: 100; } -.onboarding-modal, .error-modal, .embed-modal { background: $ui-secondary-color; @@ -3314,26 +3313,6 @@ flex-direction: column; } -.onboarding-modal__pager { - height: 80vh; - width: 80vw; - max-width: 520px; - max-height: 420px; - - .react-swipeable-view-container > div { - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 25px; - display: none; - flex-direction: column; - align-items: center; - justify-content: center; - display: flex; - user-select: text; - } -} - .error-modal__body { height: 80vh; width: 80vw; @@ -3367,23 +3346,6 @@ text-align: center; } -@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, .error-modal__footer { flex: 0 0 auto; background: darken($ui-secondary-color, 8%); @@ -3394,7 +3356,6 @@ min-width: 33px; } - .onboarding-modal__nav, .error-modal__nav { color: darken($ui-secondary-color, 34%); background-color: transparent; @@ -3410,11 +3371,6 @@ &:active { color: darken($ui-secondary-color, 38%); } - - &.onboarding-modal__done, - &.onboarding-modal__next { - color: $ui-highlight-color; - } } } @@ -3422,216 +3378,6 @@ justify-content: center; } -.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($ui-secondary-color, 16%); - margin: 0 3px; - cursor: pointer; - - &:hover { - background: darken($ui-secondary-color, 18%); - } - - &.active { - cursor: default; - background: darken($ui-secondary-color, 24%); - } -} - -.onboarding-modal__page__wrapper { - pointer-events: none; - - &.onboarding-modal__page__wrapper--active { - pointer-events: auto; - } -} - -.onboarding-modal__page { - cursor: default; - line-height: 21px; - - h1 { - font-size: 18px; - font-weight: 500; - color: $ui-base-color; - margin-bottom: 20px; - } - - a { - color: $ui-highlight-color; - - &:hover, - &:focus, - &:active { - color: lighten($ui-highlight-color, 4%); - } - } - - p { - font-size: 16px; - color: lighten($ui-base-color, 8%); - margin-top: 10px; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - strong { - font-weight: 500; - background: $ui-base-color; - color: $ui-secondary-color; - border-radius: 4px; - font-size: 14px; - padding: 3px 6px; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - } -} - -.onboarding-modal__page-one { - display: flex; - align-items: center; -} - -.onboarding-modal__page-one__elephant-friend { - background: url('../images/elephant-friend-1.png') no-repeat center center / contain; - width: 155px; - height: 193px; - margin-right: 15px; -} - -@media screen and (max-width: 400px) { - .onboarding-modal__page-one { - flex-direction: column; - align-items: normal; - } - - .onboarding-modal__page-one__elephant-friend { - width: 100%; - height: 30vh; - max-height: 160px; - margin-bottom: 5vh; - } -} - -.onboarding-modal__page-two, -.onboarding-modal__page-three, -.onboarding-modal__page-four, -.onboarding-modal__page-five { - p { - text-align: left; - } - - .figure { - background: darken($ui-base-color, 8%); - color: $ui-secondary-color; - margin-bottom: 20px; - border-radius: 4px; - padding: 10px; - text-align: center; - font-size: 14px; - box-shadow: 1px 2px 6px rgba($base-shadow-color, 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: $primary-text-color; - } -} - -@media screen and (max-width: 320px) and (max-height: 600px) { - .onboarding-modal__page p { - font-size: 14px; - line-height: 20px; - } - - .onboarding-modal__page-two .figure, - .onboarding-modal__page-three .figure, - .onboarding-modal__page-four .figure, - .onboarding-modal__page-five .figure { - font-size: 12px; - margin-bottom: 10px; - } - - .onboarding-modal__page-four__columns .row { - margin-bottom: 10px; - } - - .onboarding-modal__page-four__columns .column-header { - padding: 5px; - font-size: 12px; - } -} - -.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, .confirmation-modal, .report-modal, -- cgit From 540b3f37ae904c135809ef2a65f2700ca361de77 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 19 Jan 2018 15:25:27 +0100 Subject: Replace drawer elephant graphic with a vector image (#6286) * Replace drawer elephant graphic with a vector image * Replace wave graphic with SVG * Remove unused elephant graphic --- app/javascript/images/elephant-friend-1.png | Bin 144967 -> 0 bytes app/javascript/images/elephant_ui_plane.svg | 1 + app/javascript/images/mastodon-ui.png | Bin 32449 -> 0 bytes app/javascript/images/wave-compose-standalone.png | Bin 5921 -> 0 bytes app/javascript/images/wave-drawer.png | Bin 3269 -> 0 bytes app/javascript/images/wave-modal.png | Bin 5200 -> 0 bytes app/javascript/styles/application.scss | 3 ++- app/javascript/styles/mastodon/components.scss | 7 ++----- app/javascript/styles/mastodon/modal.scss | 4 ++-- 9 files changed, 7 insertions(+), 8 deletions(-) delete mode 100644 app/javascript/images/elephant-friend-1.png create mode 100644 app/javascript/images/elephant_ui_plane.svg delete mode 100644 app/javascript/images/mastodon-ui.png delete mode 100644 app/javascript/images/wave-compose-standalone.png delete mode 100644 app/javascript/images/wave-drawer.png delete mode 100644 app/javascript/images/wave-modal.png (limited to 'app/javascript') diff --git a/app/javascript/images/elephant-friend-1.png b/app/javascript/images/elephant-friend-1.png deleted file mode 100644 index 2b2383330..000000000 Binary files a/app/javascript/images/elephant-friend-1.png and /dev/null differ diff --git a/app/javascript/images/elephant_ui_plane.svg b/app/javascript/images/elephant_ui_plane.svg new file mode 100644 index 000000000..a2624d170 --- /dev/null +++ b/app/javascript/images/elephant_ui_plane.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/images/mastodon-ui.png b/app/javascript/images/mastodon-ui.png deleted file mode 100644 index a1fb642a0..000000000 Binary files a/app/javascript/images/mastodon-ui.png and /dev/null differ diff --git a/app/javascript/images/wave-compose-standalone.png b/app/javascript/images/wave-compose-standalone.png deleted file mode 100644 index 287ee639b..000000000 Binary files a/app/javascript/images/wave-compose-standalone.png and /dev/null differ diff --git a/app/javascript/images/wave-drawer.png b/app/javascript/images/wave-drawer.png deleted file mode 100644 index ca9f9e1d8..000000000 Binary files a/app/javascript/images/wave-drawer.png and /dev/null differ diff --git a/app/javascript/images/wave-modal.png b/app/javascript/images/wave-modal.png deleted file mode 100644 index 88818a6d7..000000000 Binary files a/app/javascript/images/wave-modal.png and /dev/null differ diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index fd6665f65..300040173 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -6,7 +6,6 @@ @import 'mastodon/reset'; @import 'mastodon/basics'; -@import 'mastodon/modal'; @import 'mastodon/containers'; @import 'mastodon/lists'; @import 'mastodon/footer'; @@ -15,7 +14,9 @@ @import 'mastodon/forms'; @import 'mastodon/accounts'; @import 'mastodon/stream_entries'; +@import 'mastodon/boost'; @import 'mastodon/components'; +@import 'mastodon/modal'; @import 'mastodon/emoji_picker'; @import 'mastodon/about'; @import 'mastodon/tables'; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 63ee06d8e..c0a32ed05 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1762,7 +1762,7 @@ position: absolute; top: 0; left: 0; - background: lighten($ui-base-color, 13%) url('../images/wave-drawer.png') no-repeat bottom / 100% auto; + background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; box-sizing: border-box; padding: 0; display: flex; @@ -1777,7 +1777,7 @@ } > .mastodon { - background: url('../images/mastodon-ui.png') no-repeat left bottom / contain; + background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain; flex: 1; } } @@ -2154,10 +2154,7 @@ } } -@import 'boost'; - .no-reduce-motion button.icon-button i.fa-retweet { - background-position: 0 0; height: 19px; transition: background-position 0.9s steps(10); diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 310dcb924..f9fad732e 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -1,5 +1,5 @@ .modal-layout { - background: $ui-base-color url('../images/wave-modal.png') repeat-x bottom fixed; + background: $ui-base-color url('data:image/svg+xml;utf8,') repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; @@ -15,6 +15,6 @@ > * { flex: 1; max-height: 235px; - background: url('../images/mastodon-ui.png') no-repeat left bottom / contain; + background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain; } } -- cgit From 0b888acfd4ffddd29f25c878373e9b9f5ec6c0ab Mon Sep 17 00:00:00 2001 From: ThibG Date: Fri, 19 Jan 2018 21:48:00 +0100 Subject: Do not throw away statuses obtained via websocket when API request finishes (#6302) --- app/javascript/mastodon/reducers/timelines.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js index 7b7b5470f..9a10bcc59 100644 --- a/app/javascript/mastodon/reducers/timelines.js +++ b/app/javascript/mastodon/reducers/timelines.js @@ -40,7 +40,7 @@ const normalizeTimeline = (state, timeline, statuses, next, isPartial) => { mMap.set('loaded', true); mMap.set('isLoading', false); if (!hadNext) mMap.set('next', next); - mMap.set('items', wasLoaded ? ids.concat(oldIds) : ids); + mMap.set('items', wasLoaded ? ids.concat(oldIds) : oldIds.concat(ids)); mMap.set('isPartial', isPartial); })); }; -- cgit