Add organize popup with chocie between gen 2 and gen 3 organize.

bin/run_dev

@@ -11,6 +11,7 @@ docker run \
     --env ZETKIN_APP_ID=1dde6e317a974537b2a0c822e29c8694 \
     --env ZETKIN_APP_KEY=NzBhZTMzN2UtNjk4My00YmViLTlmYTktZDgxZjc0MWUxZTE1 \
     --env ZETKIN_DOMAIN=dev.zetkin.org \
+    --env ZETKIN_APP_URL=app.dev.zetkin.org \
     -p 80:80 \
     -p 81:81 \
     -t \

env/app/Dockerfile

@@ -3,6 +3,7 @@ MAINTAINER Richard Olsson <[email protected]>
 
 ARG NODE_ENV=production
 ARG ZETKIN_DOMAIN=zetk.in
+ARG ZETKIN_APP_URL=https://app.zetkin.org
 ARG ZETKIN_USE_TLS=1
 
 # Install node
@@ -25,6 +26,7 @@ WORKDIR /var/app
 
 ENV NODE_ENV ${NODE_ENV}
 ENV ZETKIN_DOMAIN ${ZETKIN_DOMAIN}
+ENV ZETKIN_APP_URL ${ZETKIN_APP_URL}
 ENV ZETKIN_USE_TLS ${ZETKIN_USE_TLS}
 
 ## First install deps only, to improve image rebuild performance

locale/header/en.yaml

@@ -6,3 +6,5 @@ user:
     logout: Sign out
     settings: Settings
     wrongUser: Is this not you?
+newOrganizePortal: New Organizer Portal
+oldOrganizePortal: Old Organizer Portal

locale/header/sv.yaml

@@ -6,3 +6,5 @@ user:
     logout: Logga ut
     settings: Inställningar
     wrongUser: Är detta inte du?
+newOrganizePortal: Nya organiseringsportalen
+oldOrganizePortal: Gamla organiseringsportalen

src/components/header/Header.jsx

@@ -6,6 +6,7 @@ import Button from '../../common/misc/Button';
 import Logo from './Logo';
 import UserContinueButton from './UserContinueButton';
 import UserMenu from '../../common/misc/userMenu/UserMenu';
+import OrganizePopup from './OrganizePopup';
 
 
 const mapStateToProps = state => ({
@@ -62,10 +63,10 @@ export default class Header extends React.Component {
 
             if (isOfficial) {
                 let organizeUrl = '//organize.' + process.env.ZETKIN_DOMAIN + '/';
+                let gen3Url = process.env.ZETKIN_APP_URL + '/organize/';
 
                 organizeLink = (
-                    <Button href={ organizeUrl } labelMsg="header.organize"
-                        className="Header-navLink linkOrganize"/>
+                    <OrganizePopup organizeUrl={organizeUrl} gen3Url={gen3Url} />
                 );
             }
         }

src/components/header/OrganizePopup.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Button from '../../common/misc/Button';
+import { injectIntl } from 'react-intl';
+
+@injectIntl
+class OrganizerPopup extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false
+    };
+  }
+
+  togglePopup = () => {
+    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+  }
+
+  render() {
+    const { organizeUrl, gen3Url, intl } = this.props;
+    const { isOpen } = this.state;
+
+    return (
+      <div className="OrganizeMenu">
+        <div 
+          className="OrganizeMenu-organize Header-navLink linkOrganize"
+          onClick={this.togglePopup}
+        >
+          { intl.formatMessage({ id: 'header.organize'}) }
+        </div>
+        {isOpen && (
+          <div className="OrganizeMenu-Popup">
+            <div>
+              <a 
+                href={gen3Url}
+                className="OrganizeMenu-PopupLink new-portal"
+              >
+                { intl.formatMessage({ id: "header.newOrganizePortal" }) }
+              </a>
+            </div>
+            <div>
+              <a 
+                href={organizeUrl}
+                className="OrganizeMenu-PopupLink old-portal"
+              >
+                { intl.formatMessage({ id: "header.oldOrganizePortal" }) }
+              </a>
+            </div>
+          </div>
+        )}
+        <style jsx>{`
+
+        `}</style>
+      </div>
+    );
+  }
+}
+
+export default OrganizerPopup;

src/components/header/OrganizePopup.scss

@@ -0,0 +1,65 @@
+.OrganizeMenu {
+    position: relative;
+    float: left;
+    color: $c-brand-main;
+
+    .OrganizeMenu-organize {
+        position: relative;
+        border-radius: 3em;
+        color: $c-brand-main;
+        cursor: pointer;
+        z-index: 2;
+
+        &:hover {
+            background-color: $c-ui-bg;
+        }
+
+        max-width: 3em;
+        overflow: hidden;
+        white-space: nowrap;
+
+        transition: max-width 0.5s ease-in-out;
+
+        @include medium-screen {
+            max-width: 100%;
+            transition: max-width 0.2s ease-in-out;
+        }
+    }
+
+    .OrganizeMenu-Popup {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: rgba(0, 0, 0, 0.7);
+        border-radius: 12px;
+        padding: 16px;
+        margin-top: 8px;
+        z-index: 1000;
+        width: 13em;
+    }
+
+    .OrganizeMenu-Popup::before {
+        content: '';
+        position: absolute;
+        top: -10px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-bottom: 10px solid rgba(0, 0, 0, 0.7);
+    }
+
+    .OrganizeMenu-PopupLink {
+        color: white;
+        text-decoration: none;
+        margin-bottom: 8px;
+    }
+    .OrganizeMenu-PopupLink:hover {
+        text-decoration: underline;
+    }
+
+    .OrganizeMenu-PopupLink.old-portal {
+        color: #cccccc;
+    }
+}

webpack.config.js

@@ -5,6 +5,7 @@ const webpack = require('webpack');
 const APP_ID = process.env.ZETKIN_APP_ID || 'a4';
 const USE_TLS = process.env.ZETKIN_USE_TLS || 0;
 const DOMAIN = process.env.ZETKIN_DOMAIN;
+const ZETKIN_APP_URL = process.env.ZETKIN_APP_URL;
 
 const NODE_ENV = process.env.NODE_ENV || 'development';
 const WEBPACK_HOST = process.env.WEBPACK_HOST || 'www.dev.zetkin.org';
@@ -73,6 +74,7 @@ const config = {
         new webpack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
             'process.env.ZETKIN_DOMAIN': JSON.stringify(DOMAIN),
+            'process.env.ZETKIN_APP_URL': JSON.stringify(ZETKIN_APP_URL),
             'process.env.ZETKIN_APP_ID': JSON.stringify(APP_ID),
             'process.env.ZETKIN_USE_TLS': JSON.stringify(USE_TLS),
         }),