Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Highlight focused keyboard tab (#1299) #1300

Merged
merged 2 commits into from Dec 12, 2018
Merged

Highlight focused keyboard tab (#1299) #1300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
775675e
Apply styling to keyboard focused tabs
Dec 12, 2018
2b3213e
Add tab-index to tabs so only their contents are focusable
gschier Dec 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js
View file
Open in desktop
Expand Up @@ -245,7 +245,6 @@ class GraphQLEditor extends React.PureComponent<Props, State> {
})
);

console.log('FETCH SCHEMA');
responsePatch = await network.send(introspectionRequest._id, environmentId);
const bodyBuffer = models.response.getBodyBuffer(responsePatch);

Expand Down
4 changes: 2 additions & 2 deletions packages/insomnia-app/app/ui/components/markdown-editor.js
View file
Open in desktop
Expand Up @@ -59,10 +59,10 @@ class MarkdownEditor extends PureComponent {
return (
<Tabs className={classes} defaultIndex={defaultPreviewMode ? 1 : 0}>
<TabList>
<Tab>
<Tab tabIndex="-1">
<Button value="Write">Write</Button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button value="Preview">Preview</Button>
</Tab>
</TabList>
Expand Down
14 changes: 7 additions & 7 deletions packages/insomnia-app/app/ui/components/modals/cookie-modify-modal.js
View file
Open in desktop
Expand Up @@ -69,7 +69,7 @@ class CookieModifyModal extends React.PureComponent<Props, State> {
this.modal && this.modal.hide();
}

async _saveChanges(cookieJar: CookieJar) {
static async _saveChanges(cookieJar: CookieJar) {
await models.cookieJar.update(cookieJar);
}

Expand Down Expand Up @@ -131,7 +131,7 @@ class CookieModifyModal extends React.PureComponent<Props, State> {

this.setState({ cookie });

await this._saveChanges(cookieJar);
await CookieModifyModal._saveChanges(cookieJar);

return cookie;
}
Expand Down Expand Up @@ -162,7 +162,7 @@ class CookieModifyModal extends React.PureComponent<Props, State> {
}, DEBOUNCE_MILLIS * 2);
}

_capitalize(str: string) {
static _capitalize(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1);
}

Expand Down Expand Up @@ -199,7 +199,7 @@ class CookieModifyModal extends React.PureComponent<Props, State> {
return (
<div className="form-control form-control--outlined">
<label>
{this._capitalize(field)} <span className="danger">{error}</span>
{CookieModifyModal._capitalize(field)} <span className="danger">{error}</span>
<OneLineEditor
render={handleRender}
getRenderContext={handleGetRenderContext}
Expand All @@ -226,10 +226,10 @@ class CookieModifyModal extends React.PureComponent<Props, State> {
cookie && (
<Tabs>
<TabList>
<Tab>
<Tab tabIndex="-1">
<button>Friendly</button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<button>Raw</button>
</Tab>
</TabList>
Expand All @@ -254,7 +254,7 @@ class CookieModifyModal extends React.PureComponent<Props, State> {

return (
<label key={i}>
{this._capitalize(field)}
{CookieModifyModal._capitalize(field)}
<input
className="space-left"
type="checkbox"
Expand Down
14 changes: 7 additions & 7 deletions packages/insomnia-app/app/ui/components/modals/settings-modal.js
View file
Open in desktop
Expand Up @@ -95,25 +95,25 @@ class SettingsModal extends PureComponent {
<ModalBody noScroll>
<Tabs className="react-tabs" defaultIndex={currentTabIndex}>
<TabList>
<Tab>
<Tab tabIndex="-1">
<Button value="General">General</Button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button value="Import/Export">Data</Button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button value="Themes">Themes</Button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button value="Shortcuts">Keyboard</Button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button value="Account">Account</Button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button value="Plugins">Plugins</Button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button value="About">About</Button>
</Tab>
</TabList>
Expand Down
12 changes: 6 additions & 6 deletions packages/insomnia-app/app/ui/components/modals/workspace-settings-modal.js
View file
Open in desktop
Expand Up @@ -153,11 +153,11 @@ class WorkspaceSettingsModal extends React.PureComponent<Props, State> {
this._handleToggleCertificateForm();
}

async _handleDeleteCertificate(certificate: ClientCertificate) {
static async _handleDeleteCertificate(certificate: ClientCertificate) {
await models.clientCertificate.remove(certificate);
}

async _handleToggleCertificate(certificate: ClientCertificate) {
static async _handleToggleCertificate(certificate: ClientCertificate) {
await models.clientCertificate.update(certificate, {
disabled: !certificate.disabled
});
Expand Down Expand Up @@ -222,7 +222,7 @@ class WorkspaceSettingsModal extends React.PureComponent<Props, State> {
<button
className="btn btn--super-compact width-auto"
title="Enable or disable certificate"
onClick={() => this._handleToggleCertificate(certificate)}>
onClick={() => WorkspaceSettingsModal._handleToggleCertificate(certificate)}>
{certificate.disabled ? (
<i className="fa fa-square-o" />
) : (
Expand All @@ -233,7 +233,7 @@ class WorkspaceSettingsModal extends React.PureComponent<Props, State> {
className="btn btn--super-compact width-auto"
confirmMessage=" "
addIcon
onClick={() => this._handleDeleteCertificate(certificate)}>
onClick={() => WorkspaceSettingsModal._handleDeleteCertificate(certificate)}>
<i className="fa fa-trash-o" />
</PromptButton>
</div>
Expand Down Expand Up @@ -273,10 +273,10 @@ class WorkspaceSettingsModal extends React.PureComponent<Props, State> {
<ModalBody key={`body::${workspace._id}`} noScroll>
<Tabs forceRenderTabPanel className="react-tabs">
<TabList>
<Tab>
<Tab tabIndex="-1">
<button>Overview</button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<button>Client Certificates</button>
</Tab>
</TabList>
Expand Down
10 changes: 5 additions & 5 deletions packages/insomnia-app/app/ui/components/request-pane.js
View file
Open in desktop
Expand Up @@ -254,7 +254,7 @@ class RequestPane extends React.PureComponent<Props> {
</header>
<Tabs className={paneBodyClasses + ' react-tabs'} forceRenderTabPanel>
<TabList>
<Tab>
<Tab tabIndex="-1">
<ContentTypeDropdown
onChange={updateRequestMimeType}
contentType={request.body.mimeType}
Expand All @@ -267,7 +267,7 @@ class RequestPane extends React.PureComponent<Props> {
<i className="fa fa-caret-down space-left" />
</ContentTypeDropdown>
</Tab>
<Tab>
<Tab tabIndex="-1">
<AuthDropdown
onChange={updateRequestAuthentication}
authentication={request.authentication}
Expand All @@ -276,19 +276,19 @@ class RequestPane extends React.PureComponent<Props> {
<i className="fa fa-caret-down space-left" />
</AuthDropdown>
</Tab>
<Tab>
<Tab tabIndex="-1">
<button>
Query
{numParameters > 0 && <span className="bubble space-left">{numParameters}</span>}
</button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<button>
Header
{numHeaders > 0 && <span className="bubble space-left">{numHeaders}</span>}
</button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<button>
Docs
{request.description && (
Expand Down
8 changes: 4 additions & 4 deletions packages/insomnia-app/app/ui/components/response-pane.js
View file
Open in desktop
Expand Up @@ -244,31 +244,31 @@ class ResponsePane extends React.PureComponent<Props> {
)}
<Tabs className={paneBodyClasses + ' react-tabs'} forceRenderTabPanel>
<TabList>
<Tab>
<Tab tabIndex="-1">
<PreviewModeDropdown
download={this._handleDownloadResponseBody}
fullDownload={this._handleDownloadFullResponseBody}
previewMode={previewMode}
updatePreviewMode={handleSetPreviewMode}
/>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button>
Header{' '}
{response.headers.length > 0 && (
<span className="bubble">{response.headers.length}</span>
)}
</Button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button>
Cookie{' '}
{cookieHeaders.length ? (
<span className="bubble">{cookieHeaders.length}</span>
) : null}
</Button>
</Tab>
<Tab>
<Tab tabIndex="-1">
<Button>Timeline</Button>
</Tab>
</TabList>
Expand Down
9 changes: 9 additions & 0 deletions packages/insomnia-app/app/ui/css/components/tabs.less
View file
Open in desktop
Expand Up @@ -2,6 +2,7 @@
@import '../constants/dimensions';

@border-color: var(--hl-md);
@focus-color: var(--hl-md);

.react-tabs {
width: 100%;
Expand Down Expand Up @@ -110,6 +111,14 @@
opacity: @opacity-super-subtle;
}

&.react-tabs__tab--selected:focus {
background-color: @focus-color;
}

&.react-tabs__tab button:focus {
text-decoration: underline;
}

&.react-tabs__tab--selected {
border: 1px solid @border-color;
border-bottom-color: transparent;
Expand Down