activate quick add menu

decaporg · Dec 5, 2017 · c80ddb9 · c80ddb9
1 parent 7485ce0
commit c80ddb9
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 31 deletions.
diff --git a/src/components/App/Header.css b/src/components/App/Header.css
@@ -61,7 +61,7 @@
   font-size: 12px;
   font-weight: 600;
   background-color: #7d8190;
-  padding: 6px 12px;
+  padding: 4px 24px 4px 14px;
   margin-right: 8px;
   color: #fff;
 
@@ -70,6 +70,10 @@
   &:focus {
     color: #fff;
   }
+
+  &:after {
+    top: 11px;
+  }
 }
 
 .nc-appHeader-avatar {

diff --git a/src/components/App/Header.js b/src/components/App/Header.js
@@ -6,7 +6,6 @@ import { Icon, Dropdown, DropdownItem } from 'UI';
 import { stripProtocol } from 'Lib/urlHelper';
 
 export default class Header extends React.Component {
-
   static propTypes = {
     user: ImmutablePropTypes.map.isRequired,
     collections: ImmutablePropTypes.orderedMap.isRequired,
@@ -15,6 +14,13 @@ export default class Header extends React.Component {
     displayUrl: PropTypes.string,
   };
 
+  handleCreatePostClick = (collectionName) => {
+    const { onCreateEntryClick } = this.props;
+    if (onCreateEntryClick) {
+      onCreateEntryClick(collectionName);
+    }
+  };
+
   render() {
     const {
       user,
@@ -26,29 +32,6 @@ export default class Header extends React.Component {
       displayUrl,
     } = this.props;
 
-    /**
-     * preserve the Quick New dropdown code
-    {
-      collections.filter(collection => collection.get('create')).toList().map(collection =>
-        <MenuItem
-          key={collection.get("name")}
-          value={collection.get("name")}
-          onClick={this.handleCreatePostClick.bind(this, collection.get('name'))} // eslint-disable-line
-          caption={collection.get("label")}
-        />
-      )
-    }
-          <MenuItem onClick={onLogoutClick} value="log out" caption="Log Out" />
-
-
-          handleCreatePostClick = (collectionName) => {
-            const { onCreateEntryClick } = this.props;
-            if (onCreateEntryClick) {
-              onCreateEntryClick(collectionName);
-            }
-          };
-
-    */
     const avatarUrl = user.get('avatar_url');
 
     return (
@@ -79,9 +62,22 @@ export default class Header extends React.Component {
               </button>
             </nav>
             <div className="nc-appHeader-actions">
-              <button className="nc-appHeader-button nc-appHeader-quickNew">
-                Quick new
-              </button>
+              <Dropdown
+                classNameButton="nc-appHeader-button nc-appHeader-quickNew"
+                label="Quick add"
+                dropdownWidth="160px"
+                dropdownPosition="right"
+              >
+                {
+                  collections.filter(collection => collection.get('create')).toList().map(collection =>
+                    <DropdownItem
+                      key={collection.get("name")}
+                      label={collection.get("label")}
+                      onClick={() => this.handleCreatePostClick(collection.get('name'))}
+                    />
+                  )
+                }
+              </Dropdown>
               {
                 displayUrl
                   ? <a

diff --git a/src/components/UI/Dropdown/Dropdown.js b/src/components/UI/Dropdown/Dropdown.js
@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import c from 'classnames';
 import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton';
 import { Icon } from 'UI';
 
 const Dropdown = ({
   label,
   button,
+  classNameButton = '',
   dropdownWidth = 'auto',
   dropdownPosition = 'left',
   children
@@ -20,7 +22,7 @@ const Dropdown = ({
       {
         button
           ? <Button>{button}</Button>
-          : <Button className="nc-dropdownButton">{label}</Button>
+          : <Button className={c('nc-dropdownButton', classNameButton)}>{label}</Button>
       }
       <Menu>
         <ul className="nc-dropdownList" style={style}>

diff --git a/src/components/UI/UI.css b/src/components/UI/UI.css
@@ -1,3 +1,4 @@
+@import "./Icon/Icon.css";
 @import "./Loader/Loader.css";
 @import "./Toast/Toast.css";
 @import "./Modal/Modal.css";

diff --git a/src/index.css b/src/index.css
@@ -3,16 +3,15 @@
  */
 @import "reboot.css/dist/reboot.css";
 @import "./components/UI/base.css";
-@import "./components/UI/Icon/Icon.css";
 
 /**
  * Components
  */
+@import "./components/UI/UI.css";
 @import "./components/App/App.css";
 @import "./components/Collection/Collection.css";
 @import "./components/Workflow/Workflow.css";
 @import "./components/Editor/Editor.css";
-@import "./components/UI/UI.css";
 @import "./components/MediaLibrary/MediaLibrary.css";
 @import "./components/EditorWidgets/EditorWidgets.css";