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;