diff --git a/.vscode/settings.json b/.vscode/settings.json index a161c34a5..d870307fd 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,6 +6,7 @@ "apip", "apiserverchanged", "chromeos", + "fullbleed", "monostate", "rearrangeendpoints", "smartylighting", diff --git a/demo/editor/app.js b/demo/editor/app.js index 14f9398b0..8fa94c358 100644 --- a/demo/editor/app.js +++ b/demo/editor/app.js @@ -1,5 +1,4 @@ import { html, render } from 'lit-html'; -import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js'; import '@advanced-rest-client/oauth-authorization/oauth1-authorization.js'; import '@advanced-rest-client/oauth-authorization/oauth2-authorization.js'; import '@anypoint-web-components/anypoint-styles/colors.js'; @@ -55,7 +54,7 @@ protocols: [HTTP, HTTPS] props.forEach((item) => { Object.defineProperty(this, item, { get() { - return this['_' + item]; + return this[`_${ item}`]; }, set(newValue) { this._setObservableProperty(item, newValue); @@ -67,7 +66,7 @@ protocols: [HTTP, HTTPS] } _setObservableProperty(prop, value) { - const key = '_' + prop; + const key = `_${ prop}`; if (this[key] === value) { return; } diff --git a/demo/element/app.js b/demo/element/app.js index 64f9601d4..945b09f3f 100644 --- a/demo/element/app.js +++ b/demo/element/app.js @@ -3,7 +3,6 @@ import '@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js'; import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js'; import '@anypoint-web-components/anypoint-item/anypoint-item.js'; import '@anypoint-web-components/anypoint-styles/colors.js'; -import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js'; import '@advanced-rest-client/oauth-authorization/oauth1-authorization.js'; import '@advanced-rest-client/oauth-authorization/oauth2-authorization.js'; import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js'; @@ -56,9 +55,9 @@ class ApicApplication extends DemoBase { + allowCustomBaseUri + redirectUri="https://auth.advancedrestclient.com/oauth-popup.html" + oauth2ClientId="821776164331-rserncqpdsq32lmbf5cfeolgcoujb6fm.apps.googleusercontent.com"> Mocking Service diff --git a/demo/standalone/index.html b/demo/standalone/index.html index 71180fbbe..9dcd59716 100644 --- a/demo/standalone/index.html +++ b/demo/standalone/index.html @@ -24,7 +24,7 @@ } .icon { - display: inlink-block; + display: inline-block; width: 24px; height: 24px; fill: currentColor; diff --git a/demo/themed/anypoint-theme.css b/demo/themed/anypoint-theme.css index ff98c6a77..fe77d4d92 100644 --- a/demo/themed/anypoint-theme.css +++ b/demo/themed/anypoint-theme.css @@ -47,14 +47,12 @@ html { --http-method-label-head-background-color: var(--method-display-head-color); --http-method-label-head-color: #fff; --http-method-label-padding: 4px 5px; - --method-display-font-weigth: 100; + --method-display-font-weight: 100; --api-navigation-list-item-selected-background-color: #e8e9ea; --api-navigation-list-item-selected-color: #000; - --api-method-documentation-url-border-radius: 0; - --api-method-documentation-section-background-color: #f9fafb; --api-method-documentation-section-padding: 5px; diff --git a/demo/themed/dark-theme.css b/demo/themed/dark-theme.css index 7e8f42489..127dc4b5b 100644 --- a/demo/themed/dark-theme.css +++ b/demo/themed/dark-theme.css @@ -1,10 +1,17 @@ html { - --secondary-text-color: #616161; - --primary-background-color: #424242; - --code-background-color: #263238; - --code-color: #fff; + --primary-color: #ffcc80; + --primary-text-color: #fff; + --accent-color: #9c27b0; + --secondary-text-color: rgba(255, 255, 255, 0.84); + --primary-background-color: #212121; + --error-color: #ff9090; + --link-color: #8bc34a; + + /* layout */ + --api-console-toolbar-background-color: #424242; + --api-console-menu-background-color: var(--primary-background-color); + --api-console-menu-color: #fff; - --anypoint-input-legacy-label-color: #F5F5F5; --anypoint-checkbox-label-color: #F5F5F5; --anypoint-input-background-color: #494949; --anypoint-input-label-color: #fff; @@ -18,45 +25,50 @@ html { --inline-documentation-background-color: #3a3a3a; + --anypoint-menu-button-border-radius: 12px; + --anypoint-dropdown-menu-background-color: #494949; --anypoint-dropdown-menu-label-background-color: var(--primary-background-color); --anypoint-listbox-background-color: #494949; - --anypoint-dropdown-menu-focus-background-color: #9E9E9E; + --anypoint-dropdown-menu-focus-background-color: #616161; --anypoint-dropdown-menu-label-color: #fff; --anypoint-dropdown-menu-info-message-color: #fff; - --anypoint-item-hover-background-color: #9E9E9E; - --anypoiont-autocomplete-background-color: #494949; - --anypoint-icon-button-emphasis-low-color: #fff; + --anypoint-item-hover-background-color: #616161; + --anypoint-item-focused-background-color: #212121; + --anypoint-autocomplete-background-color: #494949; + --anypoint-icon-button-emphasis-low-color: #c5c5c5; - --code-mirror-background-color: #37474F; + --anypoint-button-emphasis-low-hover-background-color: #616161; + --anypoint-button-emphasis-low-focus-background-color: var(--anypoint-button-emphasis-low-hover-background-color); + --anypoint-button-emphasis-low-focus-color: var(--primary-color); + + --code-mirror-background-color: #1e1e1e; + --code-mirror-gutters-background-color: #1e1e1e; --code-mirror-string-color: #C3E88D; --code-mirror-punctuation-color: #EEFFFF; --code-mirror-atom-color: #F07178; --code-mirror-number-color: #F78C6A; --code-mirror-cursor-color: #009688; - --code-mirror-gutters-background-color: #37474F; + --code-mirror-tag-color: #ffffff; + --code-mirror-tag-color: #b4b4b4; + --code-mirror-gutters-border-right-color: #757575; - --code-type-boolean-value-color: #F07178; - --code-type-number-value-color: #F78C6A; - --code-type-text-value-color: #C3E88D; - --code-property-value-color: #F07178; --code-operator-value-background-color: transparent; + --code-background-color: #212121; + --code-color: #fff; + --code-type-number-value-color: #eb67b0; + --code-property-value-color: #b0e6ff; + --code-type-text-value-color: #ffb89b; + --code-type-boolean-value-color: #72baff; + --code-type-number-value-color: #b5cea8; + --code-token-comment-value-color: #91afcd; + --code-keyword-value-color: #63d0ff; --api-type-document-type-attribute-color: #fff; --api-annotation-document-color: #fff; --api-body-document-description-color: #fff; --api-method-documentation-description-color: #fff; --api-method-documentation-bottom-navigation-color: #fff; - - --http-method-label-get-background-color: rgb(0, 128, 0); - --http-method-label-get-color: #fff; - --http-method-label-post-background-color: rgb(33, 150, 243); - --http-method-label-post-color: #fff; - --http-method-label-put-background-color: rgb(255, 165, 0); - --http-method-label-put-color: #fff; - --http-method-label-delete-background-color: rgb(244, 67, 54); - --http-method-label-delete-color: #fff; - --iron-icon-fill-color: #fff; --api-method-documentation-url-background-color: var(--code-background-color); --markdown-styles-code-text-shadow: none; @@ -76,15 +88,49 @@ html { --auth-method-oauth2-redirect-info-color: #fff; --inline-documentation-color: #fff; - --api-console-menu-background-color: #424242; - --api-console-menu-color: #fff; - - --api-endpoint-documentation-bottom-navigation-color: #fff; - --api-method-documentation-bottom-navigation-color: #fff; + --api-endpoint-documentation-bottom-navigation-color: var(--link-color); + --api-endpoint-documentation-description-color: #fff; + --api-method-documentation-bottom-navigation-color: var(--link-color); + + --authorization-method-oauth2-redirect-info-color: #fff; + + /* Response error message */ + --error-message-icon-color: rgba(255, 255, 255, 0.64); + --error-message-color: #fff; + --error-message-code-color: #9e9e9e; + + /* HTTP method colors */ + --http-get-color: rgba(0, 128, 0, 0.74); + --http-post-color: rgba(33, 150, 243, 0.74); + --http-put-color: rgba(255, 165, 0, 0.74); + --http-patch-color: rgb(156, 39, 176); + --http-delete-color: rgba(244, 67, 54, 0.74); + --http-options-color: rgba(128, 128, 128, 0.74); + --http-head-color: rgba(128, 128, 128, 0.74); + --http-connect-color: rgba(128, 128, 128, 0.74); + --http-trace-color: rgba(128, 128, 128, 0.74); + --http-method-label-get-background-color: var(--http-get-color); + --http-method-label-get-color: #fff; + --http-method-label-post-background-color: var(--http-post-color); + --http-method-label-post-color: #fff; + --http-method-label-patch-background-color: var(--http-patch-color); + --http-method-label-patch-color: #fff; + --http-method-label-put-background-color: var(--http-put-color); + --http-method-label-put-color: #fff; + --http-method-label-delete-background-color: var(--http-delete-color); + --http-method-label-delete-color: #fff; + --http-method-label-options-background-color: var(--http-options-color); + --http-method-label-options-background-color: #fff; + --http-method-label-head-background-color: var(--http-head-color); + --http-method-label-head-background-color: #fff; + --http-method-label-trace-background-color: var(--http-trace-color); + --http-method-label-trace-background-color: #fff; + --http-method-label-connect-background-color: var(--http-connect-color); + --http-method-label-connect-background-color: #fff; } body { - background-color: #424242; + background-color: #212121; color: #fff; margin: 0; diff --git a/src/ApiConsoleApp.js b/src/ApiConsoleApp.js index 880b388c3..7548e3c41 100644 --- a/src/ApiConsoleApp.js +++ b/src/ApiConsoleApp.js @@ -167,13 +167,11 @@ export class ApiConsoleApp extends ApiConsole { this.appendHeaders = undefined; this.proxy = undefined; this.proxyEncodeUrl = undefined; - this.drawerAlign = undefined; + this.drawerAlign = 'left'; } connectedCallback() { - if (super.connectedCallback) { - super.connectedCallback(); - } + super.connectedCallback(); window.addEventListener('popstate', this._onRoute.bind(this)); } @@ -397,7 +395,7 @@ export class ApiConsoleApp extends ApiConsole { ${this._mediaQueriesTemplate()} ${this._drawerToolbarTemplate()} diff --git a/src/ApiConsoleAppStyles.js b/src/ApiConsoleAppStyles.js index bb9973a62..157cb79c9 100644 --- a/src/ApiConsoleAppStyles.js +++ b/src/ApiConsoleAppStyles.js @@ -66,9 +66,9 @@ api-documentation { .api-docs .inline-request { max-width: 600px; margin-left: 12px; - background-color: var(--apic-tryint-wide-background-color, transparent); + background-color: var(--apic-tryit-wide-background-color, transparent); border-left-width: 1px; - border-left-color: var(--apic-tryint-wide-border-color, #e5e5e5); + border-left-color: var(--apic-tryit-wide-border-color, #e5e5e5); border-left-style: solid; padding: 0 12px; box-sizing: border-box;