add avatar dropdown to editor top bar

decaporg · Dec 7, 2017 · 39e4ca6 · 39e4ca6
1 parent d47ca93
commit 39e4ca6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/src/components/Editor/Editor.js b/src/components/Editor/Editor.js
@@ -5,6 +5,7 @@ import { Map } from 'immutable';
 import { get } from 'lodash';
 import { connect } from 'react-redux';
 import history from 'Routing/history';
+import { logoutUser } from 'Actions/auth';
 import {
   loadEntry,
   loadEntries,
@@ -69,6 +70,7 @@ class Editor extends React.Component {
     publishUnpublishedEntry: PropTypes.func.isRequired,
     deleteUnpublishedEntry: PropTypes.func.isRequired,
     currentStatus: PropTypes.string,
+    logoutUser: PropTypes.func.isRequired,
   };
 
   componentDidMount() {
@@ -281,6 +283,7 @@ class Editor extends React.Component {
       newEntry,
       isModification,
       currentStatus,
+      logoutUser,
     } = this.props;
 
     if (entry && entry.get('error')) {
@@ -320,6 +323,7 @@ class Editor extends React.Component {
         isNewEntry={newEntry}
         isModification={isModification}
         currentStatus={currentStatus}
+        onLogoutClick={logoutUser}
       />
     );
   }
@@ -381,5 +385,6 @@ export default connect(
     updateUnpublishedEntryStatus,
     publishUnpublishedEntry,
     deleteUnpublishedEntry,
+    logoutUser,
   }
 )(withWorkflow(Editor));
diff --git a/src/components/Editor/EditorInterface.js b/src/components/Editor/EditorInterface.js
@@ -80,6 +80,7 @@ class EditorInterface extends Component {
       isNewEntry,
       isModification,
       currentStatus,
+      onLogoutClick,
     } = this.props;
 
     const { previewVisible, scrollSyncEnabled, showEventBlocker } = this.state;
@@ -161,6 +162,7 @@ class EditorInterface extends Component {
           isNewEntry={isNewEntry}
           isModification={isModification}
           currentStatus={currentStatus}
+          onLogoutClick={onLogoutClick}
         />
         <div className="nc-entryEditor-container">
           <div className="nc-entryEditor-viewControls">
@@ -216,6 +218,7 @@ EditorInterface.propTypes = {
   isNewEntry: PropTypes.bool,
   isModification: PropTypes.bool,
   currentStatus: PropTypes.string,
+  onLogoutClick: PropTypes.func.isRequired,
 };
 
 export default EditorInterface;
diff --git a/src/components/Editor/EditorToolbar.js b/src/components/Editor/EditorToolbar.js
@@ -31,6 +31,7 @@ export default class EditorToolbar extends React.Component {
     isNewEntry: PropTypes.bool,
     isModification: PropTypes.bool,
     currentStatus: PropTypes.string,
+    onLogoutClick: PropTypes.func.isRequired,
   };
 
   renderSimpleSaveControls = () => {
@@ -177,6 +178,7 @@ export default class EditorToolbar extends React.Component {
       collection,
       hasWorkflow,
       hasUnpublishedChanges,
+      onLogoutClick,
     } = this.props;
     const disabled = !enableSave || isPersisting;
     const avatarUrl = user.get('avatar_url');
@@ -212,13 +214,22 @@ export default class EditorToolbar extends React.Component {
                 </a>
               : null
           }
-          <button className="nc-appHeader-avatar">
-            {
-              avatarUrl
-                ? <img className="nc-appHeader-avatar-image" src={user.get('avatar_url')}/>
-                : <Icon className="nc-appHeader-avatar-placeholder" type="user" size="large"/>
+          <Dropdown
+            dropdownTopOverlap="50px"
+            dropdownWidth="100px"
+            dropdownPosition="right"
+            button={
+              <button className="nc-appHeader-avatar">
+                {
+                  avatarUrl
+                    ? <img className="nc-appHeader-avatar-image" src={user.get('avatar_url')}/>
+                    : <Icon className="nc-appHeader-avatar-placeholder" type="user" size="large"/>
+                }
+              </button>
             }
-          </button>
+          >
+            <DropdownItem label="Log Out" onClick={onLogoutClick}/>
+          </Dropdown>
         </div>
       </div>
     );