diff --git a/app/ui/components/base/ModalHeader.js b/app/ui/components/base/ModalHeader.js
index 8e5dbc7de0..a15bba2cc4 100644
--- a/app/ui/components/base/ModalHeader.js
+++ b/app/ui/components/base/ModalHeader.js
@@ -14,8 +14,10 @@ const ModalHeader = ({hideCloseButton, className, children}) => {
return (
+
+ {children}
+
{closeButton}
- {children}
);
};
diff --git a/app/ui/components/base/dropdown/DropdownHint.js b/app/ui/components/base/dropdown/DropdownHint.js
index 04a6369a6f..b48d58fc6f 100644
--- a/app/ui/components/base/dropdown/DropdownHint.js
+++ b/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}) => (
-
- {MOD_SYM}{char}
-
+
+ {MOD_SYM}{char}
+
);
DropdownHint.propTypes = {
diff --git a/app/ui/components/base/dropdown/DropdownItem.js b/app/ui/components/base/dropdown/DropdownItem.js
index f796813318..1c67f62cb3 100644
--- a/app/ui/components/base/dropdown/DropdownItem.js
+++ b/app/ui/components/base/dropdown/DropdownItem.js
@@ -32,7 +32,7 @@ class DropdownItem extends PureComponent {
const inner = (
-
{children}
+
{children}
);
diff --git a/app/ui/components/dropdowns/WorkspaceDropdown.js b/app/ui/components/dropdowns/WorkspaceDropdown.js
index 5d772473c6..c2989dd7d6 100644
--- a/app/ui/components/dropdowns/WorkspaceDropdown.js
+++ b/app/ui/components/dropdowns/WorkspaceDropdown.js
@@ -88,36 +88,32 @@ class WorkspaceDropdown extends Component {
- Configuration
-
-
- Delete {activeWorkspace.name}
+ Configure Workspace
+
-
+
{nonActiveWorkspaces.map(w => (
- Switch to {w.name}
+ To {w.name}
))}
- New Workspace
+ New Workspace
-
- Import/Export
-
Preferences
+
+ Import/Export
+
- Insomnia for Teams
+ Invite Your Team
)
diff --git a/app/ui/components/modals/SettingsModal.js b/app/ui/components/modals/SettingsModal.js
index bc2cf1cdbf..952b36b8f4 100644
--- a/app/ui/components/modals/SettingsModal.js
+++ b/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 {
+
+
+
);
}
diff --git a/app/ui/components/modals/WorkspaceSettingsModal.js b/app/ui/components/modals/WorkspaceSettingsModal.js
index b2ee5953e7..b386c64b5e 100644
--- a/app/ui/components/modals/WorkspaceSettingsModal.js
+++ b/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 (
- Welcome!
+
+
+ Delete {workspace.name}
+
+
+ )
+ }
+
+ renderModalHeader (workspace) {
+ return (
+
+ {workspace.name} Configuration
+
)
}
@@ -40,10 +53,8 @@ class WorkspaceSettingsModal extends Component {
const {workspace} = this.state;
return (
- {workspace ? workspace.name : ''} Configuration
-
- {this.renderBody()}
-
+ {workspace ? this.renderModalHeader(workspace) : null}
+ {workspace ? this.renderModalBody(workspace) : null}
)
}
diff --git a/app/ui/containers/App.js b/app/ui/containers/App.js
index afaa0a0060..3502b5e3aa 100644
--- a/app/ui/containers/App.js
+++ b/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);
diff --git a/app/ui/css/components/dropdown.less b/app/ui/css/components/dropdown.less
index 77b41eef02..394690aacb 100644
--- a/app/ui/css/components/dropdown.less
+++ b/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;
diff --git a/app/ui/css/components/methoddropdown.less b/app/ui/css/components/methoddropdown.less
index 4898d103dd..692420c456 100644
--- a/app/ui/css/components/methoddropdown.less
+++ b/app/ui/css/components/methoddropdown.less
@@ -8,5 +8,6 @@
.dropdown__text {
padding-left: @padding-sm;
+ display: inline;
}
}
diff --git a/app/ui/css/components/modal.less b/app/ui/css/components/modal.less
index e7caed853c..61bfea6ea2 100644
--- a/app/ui/css/components/modal.less
+++ b/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;