diff --git a/package.json b/package.json index 57c127f47..450ae9c4b 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "react-feather": "^1.0.8", "react-modal": "^3.1.7", "react-paginate": "^5.2.1", + "react-pose": "^4.0.5", "react-redux": "^5.0.3", "react-simplemde-editor": "^3.6.16", "react-toggle": "^4.0.2", diff --git a/src/renderer/component/app/index.js b/src/renderer/component/app/index.js index 36381d580..657e6e9a6 100644 --- a/src/renderer/component/app/index.js +++ b/src/renderer/component/app/index.js @@ -7,8 +7,10 @@ import { doError, } from 'lbry-redux'; import { doRecordScroll } from 'redux/actions/navigation'; +import { doToggleEnhancedLayout } from 'redux/actions/app'; import { selectUser } from 'lbryinc'; import { selectThemePath } from 'redux/selectors/settings'; +import { selectEnhancedLayout } from 'redux/selectors/app'; import App from './view'; const select = state => ({ @@ -17,12 +19,14 @@ const select = state => ({ currentStackIndex: selectHistoryIndex(state), currentPageAttributes: selectActiveHistoryEntry(state), theme: selectThemePath(state), + enhancedLayout: selectEnhancedLayout(state), }); const perform = dispatch => ({ alertError: errorList => dispatch(doError(errorList)), recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)), updateBlockHeight: () => dispatch(doUpdateBlockHeight()), + toggleEnhancedLayout: () => dispatch(doToggleEnhancedLayout()), }); export default connect( diff --git a/src/renderer/component/app/view.jsx b/src/renderer/component/app/view.jsx index e258a7ec6..33d3465a0 100644 --- a/src/renderer/component/app/view.jsx +++ b/src/renderer/component/app/view.jsx @@ -6,7 +6,9 @@ import ReactModal from 'react-modal'; import throttle from 'util/throttle'; import SideBar from 'component/sideBar'; import Header from 'component/header'; -import { openContextMenu } from '../../util/context-menu'; +import { openContextMenu } from 'util/context-menu'; +import EnhancedLayoutListener from 'util/enhanced-layout'; +import Native from 'native'; const TWO_POINT_FIVE_MINUTES = 1000 * 60 * 2.5; @@ -18,6 +20,8 @@ type Props = { pageTitle: ?string, theme: string, updateBlockHeight: () => void, + toggleEnhancedLayout: () => void, + enhancedLayout: boolean, }; class App extends React.PureComponent { @@ -41,17 +45,18 @@ class App extends React.PureComponent { } componentDidMount() { - const { updateBlockHeight } = this.props; + const { updateBlockHeight, toggleEnhancedLayout } = this.props; const mainContent = document.getElementById('content'); this.mainContent = mainContent; - if (this.mainContent) { this.mainContent.addEventListener('scroll', throttle(this.scrollListener, 750)); } ReactModal.setAppElement('#window'); // fuck this + this.enhance = new EnhancedLayoutListener(() => toggleEnhancedLayout()); + updateBlockHeight(); setInterval(() => { updateBlockHeight(); @@ -81,6 +86,8 @@ class App extends React.PureComponent { if (this.mainContent) { this.mainContent.removeEventListener('scroll', this.scrollListener); } + + this.enhance = null; } setTitleFromProps = (title: ?string) => { @@ -96,12 +103,22 @@ class App extends React.PureComponent { } mainContent: ?HTMLElement; + enhance: ?any; render() { + const { enhancedLayout } = this.props; + return (
openContextMenu(e)}>
+ {enhancedLayout && ( + Friendly gerbil + )}
diff --git a/src/renderer/component/emailCollection/index.js b/src/renderer/component/emailCollection/index.js new file mode 100644 index 000000000..360e4285f --- /dev/null +++ b/src/renderer/component/emailCollection/index.js @@ -0,0 +1,29 @@ +import * as SETTINGS from 'constants/settings'; +import { connect } from 'react-redux'; +import { doSetClientSetting } from 'redux/actions/settings'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; +import { selectEmailToVerify, selectUser } from 'lbryinc'; +import FirstRunEmailCollection from './view'; + +const select = state => ({ + emailCollectionAcknowledged: makeSelectClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED)( + state + ), + email: selectEmailToVerify(state), + user: selectUser(state), +}); + +const perform = dispatch => () => ({ + completeFirstRun: () => { + dispatch(doSetClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED, true)); + dispatch(doSetClientSetting(SETTINGS.FIRST_RUN_COMPLETED, true)); + }, + acknowledgeEmail: () => { + dispatch(doSetClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED, true)); + }, +}); + +export default connect( + select, + perform +)(FirstRunEmailCollection); diff --git a/src/renderer/component/emailCollection/view.jsx b/src/renderer/component/emailCollection/view.jsx new file mode 100644 index 000000000..6d59bd997 --- /dev/null +++ b/src/renderer/component/emailCollection/view.jsx @@ -0,0 +1,46 @@ +// @flow +import React from 'react'; +import Button from 'component/button'; +import UserEmailNew from 'component/userEmailNew'; +import UserEmailVerify from 'component/userEmailVerify'; + +type Props = { + email: string, + emailCollectionAcknowledged: boolean, + user: ?{ has_verified_email: boolean }, + completeFirstRun: () => void, + acknowledgeEmail: () => void, +}; + +class FirstRunEmailCollection extends React.PureComponent { + render() { + const { + completeFirstRun, + email, + user, + emailCollectionAcknowledged, + acknowledgeEmail, + } = this.props; + + // this shouldn't happen + if (!user) { + return null; + } + + const cancelButton =
+
+ + + +
+ + + +
+
+ +
+

{__('You Are Awesome!')}

+
+
+

{__("Check out some of the neat files below me. I'll see you around!")}

+
+
+
+ +
+ + + ); + } +} diff --git a/src/renderer/component/socialShare/view.jsx b/src/renderer/component/socialShare/view.jsx index fd2895e75..bb2e4a622 100644 --- a/src/renderer/component/socialShare/view.jsx +++ b/src/renderer/component/socialShare/view.jsx @@ -61,7 +61,7 @@ class SocialShare extends React.PureComponent {
-
+
+ +

+ {__('Email')}

- -

- {__('Email')}

+ ); } } diff --git a/src/renderer/constants/action_types.js b/src/renderer/constants/action_types.js index af47919d4..b4b09322b 100644 --- a/src/renderer/constants/action_types.js +++ b/src/renderer/constants/action_types.js @@ -16,6 +16,7 @@ export const VOLUME_CHANGED = 'VOLUME_CHANGED'; export const ADD_COMMENT = 'ADD_COMMENT'; export const SHOW_MODAL = 'SHOW_MODAL'; export const HIDE_MODAL = 'HIDE_MODAL'; +export const ENNNHHHAAANNNCEEE = 'ENNNHHHAAANNNCEEE'; // Navigation export const CHANGE_AFTER_AUTH_PATH = 'CHANGE_AFTER_AUTH_PATH'; diff --git a/src/renderer/constants/settings.js b/src/renderer/constants/settings.js index f63368105..3f039796b 100644 --- a/src/renderer/constants/settings.js +++ b/src/renderer/constants/settings.js @@ -1,9 +1,9 @@ -/* hardcoded names still exist for these in reducers/settings.js - only discovered when debugging */ /* Many SETTINGS are stored in the localStorage by their name - be careful about changing the value of a SETTINGS constant, as doing so can invalidate existing SETTINGS */ export const CREDIT_REQUIRED_ACKNOWLEDGED = 'credit_required_acknowledged'; export const NEW_USER_ACKNOWLEDGED = 'welcome_acknowledged'; export const EMAIL_COLLECTION_ACKNOWLEDGED = 'email_collection_acknowledged'; +export const FIRST_RUN_COMPLETED = 'first_run_completed'; export const LANGUAGE = 'language'; export const SHOW_NSFW = 'showNsfw'; export const SHOW_UNAVAILABLE = 'showUnavailable'; diff --git a/src/renderer/modal/modalEmailCollection/index.js b/src/renderer/modal/modalEmailCollection/index.js deleted file mode 100644 index 070f2b348..000000000 --- a/src/renderer/modal/modalEmailCollection/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as settings from 'constants/settings'; -import { connect } from 'react-redux'; -import { doHideModal } from 'redux/actions/app'; -import { doSetClientSetting } from 'redux/actions/settings'; -import { selectEmailToVerify, selectUser } from 'lbryinc'; -import ModalEmailCollection from './view'; - -const select = state => ({ - email: selectEmailToVerify(state), - user: selectUser(state), -}); - -const perform = dispatch => () => ({ - closeModal: () => { - dispatch(doSetClientSetting(settings.EMAIL_COLLECTION_ACKNOWLEDGED, true)); - dispatch(doHideModal()); - }, -}); - -export default connect( - select, - perform -)(ModalEmailCollection); diff --git a/src/renderer/modal/modalEmailCollection/view.jsx b/src/renderer/modal/modalEmailCollection/view.jsx deleted file mode 100644 index 382d8b251..000000000 --- a/src/renderer/modal/modalEmailCollection/view.jsx +++ /dev/null @@ -1,54 +0,0 @@ -// @flow -import React from 'react'; -import { Modal } from 'modal/modal'; -import Button from 'component/button'; -import UserEmailNew from 'component/userEmailNew'; -import UserEmailVerify from 'component/userEmailVerify'; - -type Props = { - closeModal: () => void, - email: string, - user: ?{ has_verified_email: boolean }, -}; - -class ModalEmailCollection extends React.PureComponent { - getTitle() { - // const { user } = this.props; - // - // if (user && user.email && !user.has_verified_email) { - // return __('Awaiting Confirmation'); - // } - - return __('Can We Stay In Touch?'); - } - - renderInner() { - const { closeModal, email, user } = this.props; - - const cancelButton =