Added keyboard shortcut for workspace settings

app/ui/components/base/ModalHeader.js

@@ -14,8 +14,10 @@ const ModalHeader = ({hideCloseButton, className, children}) => {
 
   return (
     <div className={classnames('modal__header', className)}>
+      <div className="modal__header__children">
+        {children}
+      </div>
       {closeButton}
-      {children}
     </div>
   );
 };

app/ui/components/base/dropdown/DropdownHint.js

@@ -2,9 +2,9 @@ import React, {PropTypes} from 'react';
 import {MOD_SYM} from '../../../../common/constants';
 
 const DropdownHint = ({char}) => (
-  <div className="dropdown__hint">
-    <span>{MOD_SYM}{char}</span>
-  </div>
+  <span className="dropdown__hint">
+    {MOD_SYM}{char}
+  </span>
 );
 
 DropdownHint.propTypes = {

app/ui/components/base/dropdown/DropdownItem.js

@@ -32,7 +32,7 @@ class DropdownItem extends PureComponent {
 
     const inner = (
       <div className={classnames('dropdown__inner', className)}>
-        <span className="dropdown__text">{children}</span>
+        <div className="dropdown__text">{children}</div>
       </div>
     );
 

app/ui/components/dropdowns/WorkspaceDropdown.js

@@ -88,36 +88,32 @@ class WorkspaceDropdown extends Component {
         </DropdownButton>
         <DropdownDivider name={activeWorkspace.name}/>
         <DropdownItem onClick={this._handleShowWorkspaceSettings}>
-          <i className="fa fa-wrench"/> Configuration
-        </DropdownItem>
-        <DropdownItem buttonClass={PromptButton}
-                      onClick={this._handleWorkspaceRemove}
-                      addIcon={true}>
-          <i className="fa fa-trash-o"/> Delete <strong>{activeWorkspace.name}</strong>
+          <i className="fa fa-wrench"/> Configure Workspace
+          <DropdownHint char="&#8679;,"/>
         </DropdownItem>
 
-        <DropdownDivider name="All Workspaces"/>
+        <DropdownDivider name="Switch Workspace"/>
 
         {nonActiveWorkspaces.map(w => (
           <DropdownItem key={w._id} onClick={this._handleSwitchWorkspace} value={w._id}>
-            <i className="fa fa-random"/> Switch to <strong>{w.name}</strong>
+            <i className="fa fa-random"/> To <strong>{w.name}</strong>
           </DropdownItem>
         ))}
         <DropdownItem onClick={this._handleWorkspaceCreate}>
-          <i className="fa fa-blank"/> New Workspace
+          <i className="fa fa-empty"/> New Workspace
         </DropdownItem>
 
         <DropdownDivider name={`Insomnia Version ${getAppVersion()}`}/>
 
-        <DropdownItem onClick={this._handleShowExport}>
-          <i className="fa fa-share"/> Import/Export
-        </DropdownItem>
         <DropdownItem onClick={this._handleShowSettings}>
           <i className="fa fa-cog"/> Preferences
           <DropdownHint char=","></DropdownHint>
         </DropdownItem>
+        <DropdownItem onClick={this._handleShowExport}>
+          <i className="fa fa-share"/> Import/Export
+        </DropdownItem>
         <DropdownItem buttonClass={Link} href="https://insomnia.rest/teams/" button={true}>
-          <i className="fa fa-users"/> Insomnia for Teams
+          <i className="fa fa-users"/> Invite Your Team
         </DropdownItem>
       </Dropdown>
     )

app/ui/components/modals/SettingsModal.js

@@ -4,6 +4,7 @@ import {shell} from 'electron';
 import Modal from '../base/Modal';
 import ModalBody from '../base/ModalBody';
 import ModalHeader from '../base/ModalHeader';
+import ModalFooter from '../base/ModalFooter';
 import SettingsShortcuts from '../settings/SettingsShortcuts';
 import SettingsAbout from '../settings/SettingsAbout';
 import SettingsGeneral from '../settings/SettingsGeneral';
@@ -27,6 +28,10 @@ class SettingsModal extends Component {
     this.state = {}
   }
 
+  _handleHide = () => {
+    this.hide();
+  };
+
   show (currentTabIndex = 0) {
     this.setState({currentTabIndex});
     this.modal.show();
@@ -134,6 +139,9 @@ class SettingsModal extends Component {
             </TabPanel>
           </Tabs>
         </ModalBody>
+        <ModalFooter>
+          <button onClick={this._handleHide} className="btn">Done</button>
+        </ModalFooter>
       </Modal>
     );
   }

app/ui/components/modals/WorkspaceSettingsModal.js

@@ -6,6 +6,7 @@ import ModalBody from '../base/ModalBody';
 import ModalHeader from '../base/ModalHeader';
 import ModalFooter from '../base/ModalFooter';
 import * as sync from '../../../sync';
+import PromptButton from '../base/PromptButton';
 
 class WorkspaceSettingsModal extends Component {
   state = {
@@ -14,25 +15,37 @@ class WorkspaceSettingsModal extends Component {
 
   _handleSetModalRef = n => this.modal = n;
 
-  show ({workspace}) {
+  toggle (workspace) {
+    this.modal.toggle();
+    this.setState({workspace});
+  }
+
+  show (workspace) {
     this.modal.show();
-    this.setState({
-      workspace
-    });
+    this.setState({workspace});
   }
 
   hide () {
     this.modal.hide();
   }
 
-  renderBody () {
-    const {workspace} = this.state;
-    if (!workspace) {
-      return null;
-    }
-
+  renderModalBody (workspace) {
     return (
-      <h2>Welcome!</h2>
+      <ModalBody className="pad">
+        <PromptButton onClick={this._handleWorkspaceRemove}
+                      addIcon={true}
+                      className="pull-right btn btn--clicky">
+          <i className="fa fa-trash-o"/> Delete <strong>{workspace.name}</strong>
+        </PromptButton>
+      </ModalBody>
+    )
+  }
+
+  renderModalHeader (workspace) {
+    return (
+      <ModalHeader>
+        {workspace.name} Configuration
+      </ModalHeader>
     )
   }
 
@@ -40,10 +53,8 @@ class WorkspaceSettingsModal extends Component {
     const {workspace} = this.state;
     return (
       <Modal ref={this._handleSetModalRef} tall={true}>
-        <ModalHeader>{workspace ? workspace.name : ''} Configuration</ModalHeader>
-        <ModalBody className="pad selectable txt-sm monospace">
-          {this.renderBody()}
-        </ModalBody>
+        {workspace ? this.renderModalHeader(workspace) : null}
+        {workspace ? this.renderModalBody(workspace) : null}
       </Modal>
     )
   }

app/ui/containers/App.js

@@ -26,6 +26,7 @@ import {trackEvent, trackLegacyEvent} from '../../analytics';
 import {selectEntitiesLists, selectActiveWorkspace, selectSidebarChildren, selectWorkspaceRequestsAndRequestGroups} from '../redux/selectors';
 import RequestCreateModal from '../components/modals/RequestCreateModal';
 import GenerateCodeModal from '../components/modals/GenerateCodeModal';
+import WorkspaceSettingsModal from '../components/modals/WorkspaceSettingsModal';
 
 
 class App extends Component {
@@ -41,6 +42,14 @@ class App extends Component {
       // NOTE: This is controlled via a global menu shortcut in app.js
     },
 
+    // Show Settings
+    'mod+shift+,': () => {
+      // NOTE: This is controlled via a global menu shortcut in app.js
+      const {activeWorkspace} = this.props;
+      toggleModal(WorkspaceSettingsModal, activeWorkspace);
+      trackEvent('HotKey', 'Workspace Settings');
+    },
+
     // Show Request Switcher
     'mod+p': () => {
       toggleModal(RequestSwitcherModal);

app/ui/css/components/dropdown.less

@@ -73,11 +73,6 @@
           width: 2.2em;
           text-align: center;
         }
-
-        .dropdown__hint {
-          color: @hl-xxl;
-          float: right;
-        }
       }
     }
   }
@@ -87,6 +82,27 @@
     bottom: 100%;
   }
 
+  .dropdown__inner {
+    width: 100%;
+  }
+
+  .dropdown__text {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    & > *:not(:first-child) {
+      padding-left: 0.3em;
+    }
+
+    .dropdown__hint {
+      color: @hl-xxl;
+      margin-left: auto;
+      padding-left: @padding-lg;
+    }
+  }
+
   li.dropdown__divider {
     border-bottom: 1px solid @hl-lg;
     overflow: visible !important;

app/ui/css/components/methoddropdown.less

@@ -8,5 +8,6 @@
 
   .dropdown__text {
     padding-left: @padding-sm;
+    display: inline;
   }
 }

app/ui/css/components/modal.less

@@ -61,14 +61,17 @@
     height: @line-height-md;
     font-size: @font-size-lg;
     line-height: @line-height-md;
-    padding: 0 @padding-md;
-    position: relative;
     background-color: @bg-light;
+    display: flex;
+    flex-direction: row;
+
+    .modal__header__children {
+      padding-left: @padding-md;
+      width: 100%;
+    }
 
     .modal__close-btn {
-      position: absolute;
       height: 100%;
-      right: 0;
     }
   }
 
@@ -88,6 +91,7 @@
   .modal__footer {
     border-top: 1px solid @hl-md;
     background-color: @bg-super-light;
+    height: @line-height-md;
     display: flex;
     flex-direction: row;
     align-items: center;