Merge pull request #993 from outoftime/hamburgler

Move remaining functionality into Hamburger menu

Author: outoftime

locales/en/translation.json

@@ -1,21 +1,17 @@
 {
   "top-bar": {
     "create-snapshot": "Snapshot",
+    "export-gist": "Export Gist",
+    "export-repo": "Export Repo",
     "libraries": "Libraries",
     "load-project": "My Projects",
     "new-project": "New Project",
+    "send-feedback": "Send Feedback",
     "session": {
       "log-in-prompt": "Log in to save",
       "log-out-prompt": "Log out"
     }
   },
-  "dashboard": {
-    "menu": {
-      "export-gist": "Export Gist",
-      "send-feedback": "Send Feedback",
-      "export-repo": "Export Repo"
-    }
-  },
   "editors": {
     "help-text": "Type in your $t(languages.{{language}}) code here."
   },

src/actions/index.js

@@ -16,6 +16,7 @@ import {
   toggleLibrary,
   hideComponent,
   unhideComponent,
+  toggleComponent,
   updateProjectSource,
 } from './projects';
 
@@ -44,10 +45,6 @@ import {
   userLoggedOut,
 } from './user';
 
-function toggleDashboard() {
-  return {type: 'DASHBOARD_TOGGLED'};
-}
-
 export {
   createProject,
   createSnapshot,
@@ -59,7 +56,7 @@ export {
   addRuntimeError,
   hideComponent,
   unhideComponent,
-  toggleDashboard,
+  toggleComponent,
   focusLine,
   editorFocusedRequestedLine,
   dragRowDivider,

src/actions/projects.js

@@ -36,6 +36,12 @@ export const unhideComponent = createAction(
   (_projectKey, _componentName, timestamp = Date.now()) => ({timestamp}),
 );
 
+export const toggleComponent = createAction(
+  'TOGGLE_COMPONENT',
+  (projectKey, componentName) => ({projectKey, componentName}),
+  (_projectKey, _componentName, timestamp = Date.now()) => ({timestamp}),
+);
+
 export const gistImported = createAction(
   'GIST_IMPORTED',
   (projectKey, gistData) => ({projectKey, gistData}),

src/components/Dashboard.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import remark from 'remark';
+import remarkReact from 'remark-react';
+import classnames from 'classnames';
+
+export default function Instructions({instructions, isOpen}) {
+  if (!instructions || !isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classnames(
+        'layout__instructions',
+        'instructions',
+        'u__flex-container',
+        'u__flex-container_column',
+      )}
+    >
+      {remark().use(remarkReact).processSync(instructions).contents}
+    </div>
+  );
+}
+
+Instructions.propTypes = {
+  instructions: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+};

src/components/Instructions.jsx

@@ -0,0 +1,79 @@
+import classnames from 'classnames';
+import {noop} from 'lodash/noop';
+import {t} from 'i18next';
+import PropTypes from 'prop-types';
+import React from 'react';
+import config from '../../config';
+
+export default function HamburgerMenu({
+  isExperimental,
+  isGistExportInProgress,
+  isOpen,
+  isUserAuthenticated,
+  onExportGist,
+  onExportRepo,
+}) {
+  if (!isOpen) {
+    return null;
+  }
+
+
+  return (
+    <div className="top-bar__menu">
+      <div
+        className="top-bar__menu-item"
+        onClick={isGistExportInProgress ? noop : onExportGist}
+      >
+        {t('top-bar.export-gist')}
+      </div>
+      <div
+        className={
+          classnames(
+            'top-bar__menu-item',
+            {u__hidden: !(isUserAuthenticated && isExperimental)},
+          )
+        }
+        onClick={onExportRepo}
+      >
+        {t('top-bar.export-repo')}
+      </div>
+      <a
+        className="top-bar__menu-item"
+        href={config.feedbackUrl}
+        rel="noopener noreferrer"
+        target="blank"
+      >
+        {t('top-bar.send-feedback')}
+      </a>
+      <div className="top-bar__menu-item top-bar__menu-item_icons">
+        <a
+          className="u__icon"
+          href="https://github.com/popcodeorg/popcode"
+          rel="noopener noreferrer"
+          target="_blank"
+        >&#xf09b;</a>
+        <a
+          className="u__icon"
+          href="https://twitter.com/popcodeorg"
+          rel="noopener noreferrer"
+          target="_blank"
+        >&#xf099;</a>
+        <a
+          className="u__icon"
+          href="https://slack.popcode.org/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >&#xf198;</a>
+      </div>
+    </div>
+  );
+}
+
+HamburgerMenu.propTypes = {
+  isExperimental: PropTypes.bool.isRequired,
+  isGistExportInProgress: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  isUserAuthenticated: PropTypes.bool.isRequired,
+  onExportGist: PropTypes.func.isRequired,
+  onExportRepo: PropTypes.func.isRequired,
+};

src/components/Sidebar.jsx

@@ -0,0 +1,45 @@
+import classnames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import HamburgerMenu from './HamburgerMenu';
+
+export default function HamburgerMenuButton({
+  isExperimental,
+  isGistExportInProgress,
+  isOpen,
+  isUserAuthenticated,
+  onClick,
+  onExportGist,
+  onExportRepo,
+}) {
+  return (
+    <div
+      className={classnames(
+        'top-bar__menu-button',
+        'top-bar__menu-button_hamburger',
+        {'top-bar__menu-button_active': isOpen},
+      )}
+      onClick={onClick}
+    >
+      <span className="u__icon top-bar__hamburger">&#xf0c9;</span>
+      <HamburgerMenu
+        isExperimental={isExperimental}
+        isGistExportInProgress={isGistExportInProgress}
+        isOpen={isOpen}
+        isUserAuthenticated={isUserAuthenticated}
+        onExportGist={onExportGist}
+        onExportRepo={onExportRepo}
+      />
+    </div>
+  );
+}
+
+HamburgerMenuButton.propTypes = {
+  isExperimental: PropTypes.bool.isRequired,
+  isGistExportInProgress: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  isUserAuthenticated: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onExportGist: PropTypes.func.isRequired,
+  onExportRepo: PropTypes.func.isRequired,
+};