From fb04f76bdfc7c2bb3d7ba5424bd4f8122fed5d09 Mon Sep 17 00:00:00 2001
From: Iain Maitland <imaitland@protonmail.com>
Date: Fri, 23 Feb 2018 18:58:22 -0500
Subject: [PATCH] complete merge of TopRightMenu and Header
---
src/app/components/App.jsx | 1 -
src/app/components/all.scss | 3 +-
.../modules/{ => Header}/Header.test.js | 0
.../modules/{Header.jsx => Header/index.jsx} | 1 -
.../{Header.scss => Header/styles.scss} | 67 +++++
src/app/components/modules/TopRightMenu.jsx | 242 ------------------
src/app/components/modules/TopRightMenu.scss | 66 -----
7 files changed, 68 insertions(+), 312 deletions(-)
rename src/app/components/modules/{ => Header}/Header.test.js (100%)
rename src/app/components/modules/{Header.jsx => Header/index.jsx} (99%)
rename src/app/components/modules/{Header.scss => Header/styles.scss} (60%)
delete mode 100644 src/app/components/modules/TopRightMenu.jsx
delete mode 100644 src/app/components/modules/TopRightMenu.scss
diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx
index fd14737a9..869af94a3 100644
--- a/src/app/components/App.jsx
+++ b/src/app/components/App.jsx
@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
import AppPropTypes from 'app/utils/AppPropTypes';
import Header from 'app/components/modules/Header';
import * as userActions from 'app/redux/UserReducer';
-import TopRightMenu from 'app/components/modules/TopRightMenu';
import classNames from 'classnames';
import ConnectedSidePanel from 'app/components/modules/ConnectedSidePanel';
import CloseButton from 'react-foundation-components/lib/global/close-button';
diff --git a/src/app/components/all.scss b/src/app/components/all.scss
index e9ea005b8..da3d14562 100644
--- a/src/app/components/all.scss
+++ b/src/app/components/all.scss
@@ -34,7 +34,7 @@
@import "./elements/QrKeyView";
// modules
-@import "./modules/Header";
+@import "./modules/Header/styles";
@import "./modules/SignUp";
@import "./modules/LoginForm";
@import "./modules/MiniHeader";
@@ -43,7 +43,6 @@
@import "./modules/BottomPanel";
@import "./modules/UserWallet";
@import "./modules/Powerdown";
-@import "./modules/TopRightMenu";
@import "./modules/ConfirmTransactionForm";
@import "./modules/Transfer";
diff --git a/src/app/components/modules/Header.test.js b/src/app/components/modules/Header/Header.test.js
similarity index 100%
rename from src/app/components/modules/Header.test.js
rename to src/app/components/modules/Header/Header.test.js
diff --git a/src/app/components/modules/Header.jsx b/src/app/components/modules/Header/index.jsx
similarity index 99%
rename from src/app/components/modules/Header.jsx
rename to src/app/components/modules/Header/index.jsx
index 2ffc5c734..cd251c7b7 100644
--- a/src/app/components/modules/Header.jsx
+++ b/src/app/components/modules/Header/index.jsx
@@ -1,7 +1,6 @@
import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
-import TopRightMenu from 'app/components/modules/TopRightMenu';
import Icon from 'app/components/elements/Icon';
import resolveRoute from 'app/ResolveRoute';
import tt from 'counterpart';
diff --git a/src/app/components/modules/Header.scss b/src/app/components/modules/Header/styles.scss
similarity index 60%
rename from src/app/components/modules/Header.scss
rename to src/app/components/modules/Header/styles.scss
index c5ceaf976..760615f2f 100644
--- a/src/app/components/modules/Header.scss
+++ b/src/app/components/modules/Header/styles.scss
@@ -111,4 +111,71 @@
@media only screen and (min-width: 400px) {
height: 37px;
}
+}
+
+.sub-menu {
+ li.show-for-medium.submit-story > a {
+ @extend .e-btn;
+ margin-right: 22px;
+ margin-left: 16px;
+ padding: 8px 24px;
+ margin: 0 6px;
+ @include themify($themes) {
+ color: themed('buttonText');
+ background: themed('colorAccentReverse');
+ }
+ &:hover, &:focus {
+ @include themify($themes) {
+ color: themed('textColorAccentHover');
+ }
+ }
+ transition: all 0.3s ease-in-out;
+ }
+ }
+
+.TopRightMenu__userpic {
+ padding: 0;
+ position: relative;
+ a {
+ padding: 6px;
+ }
+ .Userpic {
+ width: 36px !important;
+ height: 36px !important;
+ }
+}
+
+.TopRightMenu__notificounter {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ > .NotifiCounter {
+ display: block;
+ }
+}
+
+li.TopRightMenu__hamburger.toggle-menu {
+ @include hamburger();
+ position: relative;
+ > li {
+ padding-left: 0.25rem;
+ }
+ > a {
+ padding: 14px 0 14px 14px;
+ }
+ &::after {
+ transition: 0.2s all ease-in-out;
+ @include themify($themes) {
+ background: themed('textColorPrimary');
+ box-shadow: 0 7px 0 themed('textColorPrimary'), 0 14px 0 themed('textColorPrimary');
+ }
+ }
+ &:hover {
+ &::after {
+ @include themify($themes) {
+ background: themed('textColorAccent');
+ box-shadow: 0 7px 0 themed('textColorAccent'), 0 14px 0 themed('textColorAccent');
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/app/components/modules/TopRightMenu.jsx b/src/app/components/modules/TopRightMenu.jsx
deleted file mode 100644
index 616644e54..000000000
--- a/src/app/components/modules/TopRightMenu.jsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-import { connect } from 'react-redux';
-import { browserHistory } from 'react-router';
-import tt from 'counterpart';
-import { LinkWithDropdown } from 'react-foundation-components/lib/global/dropdown';
-import Icon from 'app/components/elements/Icon';
-import * as userActions from 'app/redux/UserReducer';
-import * as appActions from 'app/redux/AppReducer';
-import Userpic from 'app/components/elements/Userpic';
-import VerticalMenu from 'app/components/elements/VerticalMenu';
-import LoadingIndicator from 'app/components/elements/LoadingIndicator';
-import NotifiCounter from 'app/components/elements/NotifiCounter';
-import { SIGNUP_URL } from 'shared/constants';
-
-const defaultNavigate = e => {
- if (e.metaKey || e.ctrlKey) {
- // prevent breaking anchor tags
- } else {
- e.preventDefault();
- }
- const a =
- e.target.nodeName.toLowerCase() === 'a'
- ? e.target
- : e.target.parentNode;
- browserHistory.push(a.pathname + a.search + a.hash);
-};
-
-function TopRightMenu({
- username,
- showLogin,
- logout,
- loggedIn,
- vertical,
- probablyLoggedIn,
- nightmodeEnabled,
- toggleNightmode,
- userPath,
- showSidePanel,
-}) {
- const mcn = 'menu' + (vertical ? ' vertical show-for-small-only' : '');
- const mcl = vertical ? '' : ' sub-menu';
- const lcn = vertical ? '' : 'show-for-medium';
- const nav = navigate || defaultNavigate;
-
- const submit_story = $STM_Config.read_only_mode ? null : (
- <li className={lcn + ' submit-story' + (vertical ? ' last' : '')}>
- <a href="/submit.html" onClick={nav}>
- {tt('g.submit_a_story')}
- </a>
- </li>
- );
-
- const submit_icon = $STM_Config.read_only_mode ? null : (
- <li className="show-for-small-only">
- <Link to="/submit.html">
- <Icon name="pencil2" />
- </Link>
- </li>
- );
-
- const feed_link = `/@${username}/feed`;
- const replies_link = `/@${username}/recent-replies`;
- const wallet_link = `/@${username}/transfers`;
- const account_link = `/@${username}`;
- const comments_link = `/@${username}/comments`;
- const reset_password_link = `/@${username}/password`;
- const settings_link = `/@${username}/settings`;
- const pathCheck = userPath === '/submit.html' ? true : null;
-
- if (loggedIn) {
- // change back to if(username) after bug fix: Clicking on Login does not cause drop-down to close #TEMP!
- const user_menu = [
- {
- link: feed_link,
- icon: 'home',
- value: tt('g.feed'),
- addon: <NotifiCounter fields="feed" />,
- },
- { link: account_link, icon: 'profile', value: tt('g.blog') },
- { link: comments_link, icon: 'replies', value: tt('g.comments') },
- {
- link: replies_link,
- icon: 'reply',
- value: tt('g.replies'),
- addon: <NotifiCounter fields="comment_reply" />,
- },
- {
- link: wallet_link,
- icon: 'wallet',
- value: tt('g.wallet'),
- addon: (
- <NotifiCounter fields="follow,send,receive,account_update" />
- ),
- },
- {
- link: '#',
- icon: 'eye',
- onClick: toggleNightmode,
- value: tt('g.toggle_nightmode'),
- },
- {
- link: reset_password_link,
- icon: 'key',
- value: tt('g.change_password'),
- },
- { link: settings_link, icon: 'cog', value: tt('g.settings') },
- loggedIn
- ? {
- link: '#',
- icon: 'enter',
- onClick: logout,
- value: tt('g.logout'),
- }
- : { link: '#', onClick: showLogin, value: tt('g.login') },
- ];
- return (
- <ul className={mcn + mcl}>
- {!pathCheck ? submit_story : null}
- {!vertical && submit_icon}
- <LinkWithDropdown
- closeOnClickOutside
- dropdownPosition="bottom"
- dropdownAlignment="right"
- dropdownContent={
- <VerticalMenu items={user_menu} title={username} />
- }
- >
- {!vertical && (
- <li className={'TopRightMenu__userpic '}>
- <a
- href={account_link}
- title={username}
- onClick={e => e.preventDefault()}
- >
- <Userpic account={username} />
- </a>
- <div className="TopRightMenu__notificounter">
- <NotifiCounter fields="total" />
- </div>
- </li>
- )}
- </LinkWithDropdown>
- <li className="toggle-menu TopRightMenu__hamburger">
- <a href="#" onClick={showSidePanel}>
- <span className="hamburger" />
- </a>
- </li>
- </ul>
- );
- }
- if (probablyLoggedIn) {
- return (
- <ul className={mcn + mcl}>
- <li className={lcn} style={{ paddingTop: 0, paddingBottom: 0 }}>
- <LoadingIndicator type="circle" inline />
- </li>
- <li className="toggle-menu TopRightMenu__hamburger">
- <a href="#" onClick={showSidePanel}>
- <span className="hamburger" />
- </a>
- </li>
- </ul>
- );
- }
- return (
- <ul className={mcn + mcl}>
- <li className={lcn}>
- <a href={SIGNUP_URL}>{tt('g.sign_up')}</a>
- </li>
- <li className={lcn}>
- <a href="/login.html" onClick={showLogin}>
- {tt('g.login')}
- </a>
- </li>
- {submit_story}
- {!vertical && submit_icon}
- <li className="toggle-menu TopRightMenu__hamburger">
- <a href="#" onClick={showSidePanel}>
- <span className="hamburger" />
- </a>
- </li>
- </ul>
- );
-}
-
-TopRightMenu.propTypes = {
- username: React.PropTypes.string,
- loggedIn: React.PropTypes.bool,
- probablyLoggedIn: React.PropTypes.bool,
- showLogin: React.PropTypes.func.isRequired,
- logout: React.PropTypes.func.isRequired,
- vertical: React.PropTypes.bool,
- nightmodeEnabled: React.PropTypes.bool,
- toggleNightmode: React.PropTypes.func,
-};
-
-export default connect(
- state => {
- if (!process.env.BROWSER) {
- return {
- username: null,
- loggedIn: false,
- probablyLoggedIn: !!state.offchain.get('account'),
- };
- }
- // Used to decide whether or not to hide the 'submit' button.
- const userPath = state.routing.locationBeforeTransitions.pathname;
- const username = state.user.getIn(['current', 'username']);
- const loggedIn = !!username;
- return {
- username,
- loggedIn,
- userPath,
- probablyLoggedIn: false,
- nightmodeEnabled: state.user.getIn([
- 'user_preferences',
- 'nightmode',
- ]),
- };
- },
- dispatch => ({
- showLogin: e => {
- if (e) e.preventDefault();
- dispatch(userActions.showLogin());
- },
- logout: e => {
- if (e) e.preventDefault();
- dispatch(userActions.logout());
- },
- toggleNightmode: e => {
- if (e) e.preventDefault();
- dispatch(appActions.toggleNightmode());
- },
- showSidePanel: () => {
- dispatch(userActions.showSidePanel());
- },
- hideSidePanel: () => {
- dispatch(userActions.hideSidePanel());
- },
- })
-)(TopRightMenu);
diff --git a/src/app/components/modules/TopRightMenu.scss b/src/app/components/modules/TopRightMenu.scss
deleted file mode 100644
index 383601c3c..000000000
--- a/src/app/components/modules/TopRightMenu.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-.sub-menu {
- li.show-for-medium.submit-story > a {
- @extend .e-btn;
- margin-right: 22px;
- margin-left: 16px;
- padding: 8px 24px;
- margin: 0 6px;
- @include themify($themes) {
- color: themed('buttonText');
- background: themed('colorAccentReverse');
- }
- &:hover, &:focus {
- @include themify($themes) {
- color: themed('textColorAccentHover');
- }
- }
- transition: all 0.3s ease-in-out;
- }
- }
-
-.TopRightMenu__userpic {
- padding: 0;
- position: relative;
- a {
- padding: 6px;
- }
- .Userpic {
- width: 36px !important;
- height: 36px !important;
- }
-}
-
-.TopRightMenu__notificounter {
- position: absolute;
- top: 4px;
- right: 4px;
- > .NotifiCounter {
- display: block;
- }
-}
-
-li.TopRightMenu__hamburger.toggle-menu {
- @include hamburger();
- position: relative;
- > li {
- padding-left: 0.25rem;
- }
- > a {
- padding: 14px 0 14px 14px;
- }
- &::after {
- transition: 0.2s all ease-in-out;
- @include themify($themes) {
- background: themed('textColorPrimary');
- box-shadow: 0 7px 0 themed('textColorPrimary'), 0 14px 0 themed('textColorPrimary');
- }
- }
- &:hover {
- &::after {
- @include themify($themes) {
- background: themed('textColorAccent');
- box-shadow: 0 7px 0 themed('textColorAccent'), 0 14px 0 themed('textColorAccent');
- }
- }
- }
-}
\ No newline at end of file
--
GitLab