diff --git a/README.md b/README.md index 577f4a6d5..505282c90 100644 --- a/README.md +++ b/README.md @@ -38,11 +38,9 @@ ### Features ✨ -❤️ **Lightweight**: Crafted with minimalistic UI design. Simple design is the best design. +❤️ **Lightweight**: Crafted with minimalistic UI design - simple design is the best design. - - Faster, lighter, cleaner, minimal & responsive - -⚡️ **Fast**: Send requests and get/copy responses in real-time! Fast software is the best software. +⚡️ **Fast**: Send requests and get/copy responses in real-time - fast software is the best software. **Methods:** - `GET` - Retrieve information about the REST API resource @@ -50,21 +48,22 @@ - `POST` - Create a REST API resource - `PUT` - Update a REST API resource - `DELETE` - Delete a REST API resource or related component + - `CONNECT` - Establishes a tunnel to the server identified by the target resource - `OPTIONS` - Describe the communication options for the target resource + - `TRACE` - Performs a message loop-back test along the path to the target resource - `PATCH` - Apply partial modifications to a REST API resource + - `` - Some APIs use custom request methods such as `LIST`. Type in your custom methods. -_History entries are synced with local session storage_ - -🌈 **Make it yours**: Customizable combinations for background, foreground and accent colors: because customization === freedom. [Customize now ✨](https://postwoman.io/settings). +🌈 **Make it yours**: Customizable combinations for background, foreground and accent colors: because customization is freedom. [Customize now ✨](https://postwoman.io/settings). **Customizations:** - Choose theme: Kinda Dark (default), Clearly White, Just Black and System theme - Choose accent color: Green (default), Yellow, Pink, Red, Purple, Orange, Cyan and Blue - - Toggle multi-colored frames + - Toggle multi-colored headings -_Customized themes are also synced with local session storage_ +_Customized themes are synced with local session storage_ -🔥 **PWA**: Install as a [PWA](https://developers.google.com/web/progressive-web-apps) (100/100 Lighthouse score) on your device. +🔥 **PWA**: Install as a [PWA](https://developers.google.com/web/progressive-web-apps) on your device. **Features:** - Instant loading with [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers) @@ -74,31 +73,34 @@ _Customized themes are also synced with local session storage_ - [Desktop PWA](https://developers.google.com/web/progressive-web-apps/desktop) support (button in footer) - ([full features](https://developers.google.com/web/progressive-web-apps)) -🚀 **Request**: Retrieve data from a URL without having to do a full page refresh. +🚀 **Request**: Retrieve response from endpoint instantly. - Choose `method` - - Enter `URL` - - Enter `Path` + - Enter `URL` and `Path` + - Send **Features:** - Copy/share public "Share URL" - - Generate request code for JavaScript XHR, Fetch and cURL + - Generate request code for `JavaScript XHR`, `Fetch` and `cURL` - Copy generated request code to clipboard - - Import cURL + - Import `cURL` - Label requests 🔌 **WebSocket**: Establish full-duplex communication channels over a single TCP connection. - Send and receive data + - Basic authentication using username and password + - Token based authentication 📡 **Server Sent Events**: Receive a stream of updates from a server over a HTTP connection without resorting to polling. - - Receive data - 🌍 **GraphQL**: GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. - Set endpoint and get schemas - Multi-column docs + - Set custom request headers + - Query schema + - Get query response 🔐 **Authentication**: Allows to identify the end user. @@ -116,27 +118,28 @@ _Customized themes are also synced with local session storage_ 📃 **Request Body**: Used to send and receive data via the REST API. **Options:** - - Set Content Type + - Set `Content Type` - Add or remove Parameter list - Toggle between key-value and RAW input Parameter list 👋 **Responses**: Contains the status line, headers and the message/response body. - Copy response to clipboard - - Download response to a local file - - View preview for HTML responses - -_HTML responses have "Preview HTML" feature_ + - Download response to as a file + - View preview of HTML responses ⏰ **History**: Request entries are synced with local session storage to reuse with a single click. **Fields:** + - Star - Label - - Timestamp - Method - Status code - URL - Path + - Timestamp + - Duration + - Pre-request script _History entries can be sorted by any fields_ @@ -148,8 +151,6 @@ _Histories can be deleted one-by-one or all together_ - Create infinite collections, folders and requests - Edit, delete, move, export, import and replace -_Export, import and replace collections with JSON files_ - _Collections are synced with local session storage_ 🌐 **Proxy**: Enable Proxy Mode from Settings to access blocked APIs. @@ -165,8 +166,8 @@ _Official Postwoman Proxy is hosted by ApolloTV - [Privacy policy](https://apoll 📜 **Pre-Request Scripts**: Snippets of code associated with a request that are executed before the request is sent. **Use-cases:** - - Including the timestamp in the request headers - - Sending a random alphanumeric string in the URL parameters + - Include timestamp in the request headers + - Send a random alphanumeric string in the URL parameters _Requests with Pre-Request Scripts are indicated in History entries_ @@ -181,9 +182,11 @@ _Requests with Pre-Request Scripts are indicated in History entries_ 🌎 **i18n**: Internationalization β. - Add a new locale in `lang/` - Ex: `lang/es-ES.js` + + Example: `lang/es-ES.js` - Mention `code`, `name`, `iso` and `file` in `nuxt.config.js` - Ex: + + Example: ``` i18n: { locales: [{ @@ -195,7 +198,7 @@ _Requests with Pre-Request Scripts are indicated in History entries_ } ``` -_**All contributions are welcome to `i18n` [branch](https://github.com/liyasthomas/postwoman/tree/i18n) only!**_ +_**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/liyasthomas/postwoman/tree/i18n) only!**_ **To find out more, please check out [Postwoman Wiki](https://github.com/liyasthomas/postwoman/wiki).** @@ -205,11 +208,10 @@ _**All contributions are welcome to `i18n` [branch](https://github.com/liyasthom ## Usage 💡 -1. Specify your request method -2. Type in your API URL -3. Add API path -4. Send request -5. Get response! +1. Specify your request `method` +2. Type in your API `URL` and `path` +3. Send request +4. Get response You're done! diff --git a/assets/css/styles.scss b/assets/css/styles.scss index 4b6aed12e..dbd011504 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -2,7 +2,7 @@ .page-leave-active, .layout-enter-active, .layout-leave-active { - transition: all 0.2s; + transition: opacity 0.2s; } .page-enter, @@ -14,10 +14,6 @@ $responsiveWidth: 768px; -html { - scroll-behavior: smooth; -} - ::selection { background-color: var(--ac-color); color: var(--act-color); @@ -27,12 +23,7 @@ html { width: 4px; height: 4px; border-radius: 4px; - background-color: var(--bg-dark-color); - visibility: hidden; - - &:hover { - visibility: visible; - } + background-color: var(--bg-light-color); } ::-webkit-scrollbar-thumb { @@ -55,6 +46,7 @@ html { border: 0; } +html, body { background-color: var(--bg-color); color: var(--fg-color); @@ -67,14 +59,12 @@ body { user-select: none; padding: 0; margin: 0; + scroll-behavior: smooth; } // Make theme transition smoother. body.afterLoad { - &, - & * { - transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out; - } + transition: background-color 0.2s ease-in-out; } body.sticky-footer footer { @@ -85,13 +75,14 @@ a { display: inline-flex; color: inherit; text-decoration: none; + transition: all 0.2s ease-in-out; } header, footer { & > div { display: flex; - padding: 16px; + padding: 16px 8px; width: 100%; align-items: center; justify-content: space-between; @@ -104,8 +95,8 @@ footer { flex-direction: column; } -.wrapper .content { - min-height: 100vh; +.wrapper .page { + min-height: calc(100vh - 153px); } .header, @@ -135,7 +126,10 @@ footer { .logo { font-size: 22px; - color: var(--ac-color); + + &:hover { + color: var(--ac-color); + } } .nav-first, @@ -153,10 +147,14 @@ footer { } .main { + display: flex; + flex-flow: column; flex: 1; order: 2; position: relative; padding: 0 16px; + background-color: var(--bg-light-color); + height: 100%; } .nav-second { @@ -170,7 +168,6 @@ footer { nav.primary-nav { display: flex; flex-flow: column nowrap; - border-bottom: 1px solid var(--brd-color); svg { fill: var(--fg-light-color); @@ -183,7 +180,7 @@ nav.primary-nav { flex-shrink: 0; padding: 14px; border-radius: 50%; - background-color: var(--brd-color); + background-color: var(--bg-light-color); color: var(--fg-light-color); fill: var(--fg-light-color); margin: 8px; @@ -213,6 +210,7 @@ nav.primary-nav { nav.secondary-nav { display: flex; + border-top: 1px dashed var(--brd-color); ul { display: flex; @@ -426,11 +424,28 @@ button { } } +@keyframes beat { + 30% { + transform: scale(1.1); + } + 50% { + transform: scale(0.9); + } + 100% { + transform: scale(1); + } +} + +.material-icons:active { + animation: beat 0.5s forwards 1; +} + fieldset { margin: 16px 0; - border: 1px solid var(--brd-color); - border-radius: 8px; - background-color: var(--bg-color); + // border: 1px solid var(--brd-color); + border-radius: 16px; + transition: all 0.2s ease-in-out; + background-color: var(--bg-dark-color); } legend { @@ -493,7 +508,6 @@ fieldset.yellow legend { kbd, select, input, -option, textarea, pre { margin: 4px; @@ -534,13 +548,17 @@ code { border-radius: 8px; } -select, -option { +select { height: 37px; line-height: 37px; + background-color: var(--bg-dark-color); cursor: pointer; } +option { + background-color: var(--bg-color); +} + input[type="checkbox"] { display: none; @@ -793,10 +811,6 @@ input[type="radio"]:checked + label + .tab { margin-left: 16px; } -.bg-color { - background-color: var(--bg-color); -} - @media (max-width: $responsiveWidth) { .content { flex-flow: column; @@ -807,12 +821,32 @@ input[type="radio"]:checked + label + .tab { } .nav-first { + position: fixed; + top: auto; + bottom: 0; width: 100%; background-color: var(--bg-color); + transition: all 0.2s ease-in-out; } nav.primary-nav { - flex-flow: row; + flex-flow: row nowrap; + overflow: auto; + justify-content: space-around; + + a { + background-color: transparent; + + &.nuxt-link-exact-active { + background-color: transparent; + color: var(--ac-color); + fill: var(--ac-color); + + svg { + fill: var(--ac-color); + } + } + } } nav.secondary-nav { @@ -820,7 +854,7 @@ input[type="radio"]:checked + label + .tab { } .main { - padding: 0 8px; + padding: 0 8px 68px; } ul, @@ -854,4 +888,8 @@ input[type="radio"]:checked + label + .tab { .inner-right { margin-left: 0; } + + .toasted:last-child { + margin-bottom: 68px; + } } diff --git a/assets/css/themes.scss b/assets/css/themes.scss index 8d3379483..73db76fa3 100644 --- a/assets/css/themes.scss +++ b/assets/css/themes.scss @@ -8,10 +8,12 @@ // Dark is the default theme variant. @mixin darkTheme { - // Dark Background color - --bg-dark-color: rgb(41, 42, 45); // Background color --bg-color: rgb(37, 38, 40); + // Light Background color + --bg-light-color: rgba(255, 255, 255, 0.05); + //Dark Background color + --bg-dark-color: rgba(0, 0, 0, 0.1); // Auto-complete color --atc-color: rgb(49, 49, 55); // Text color @@ -21,26 +23,20 @@ // Border color --brd-color: rgb(48, 47, 55); // Error color - --err-color: rgb(41, 42, 45); + --err-color: rgba(255, 255, 255, 0.05); // Acent color --ac-color: #50fa7b; // Active text color --act-color: rgb(37, 38, 40); } -:root { - @include darkTheme; -} - -@media (prefers-color-scheme: dark) { - :root.auto { - @include darkTheme; - } -} - @mixin lightTheme { // Dark Background color --bg-dark-color: #eeeeee; + // Light Background color + --bg-light-color: rgba(0, 0, 0, 0.02); + //Dark Background color + --bg-dark-color: rgba(0, 0, 0, 0.05); // Background color --bg-color: #ffffff; // Auto-complete color @@ -52,26 +48,20 @@ // Border color --brd-color: #eeeeed; // Error color - --err-color: #eeeeee; + --err-color: rgba(0, 0, 0, 0.02); // Acent color --ac-color: #57b5f9; // Active text color --act-color: #ffffff; } -:root.light { - @include lightTheme; -} - -@media (prefers-color-scheme: light) { - :root.auto { - @include lightTheme; - } -} - @mixin blackTheme { // Dark Background color --bg-dark-color: rgb(8, 8, 8); + // Light Background color + --bg-light-color: rgba(255, 255, 255, 0.02); + //Dark Background color + --bg-dark-color: rgba(255, 255, 255, 0.02); // Background color --bg-color: #000000; // Auto-complete color @@ -83,13 +73,33 @@ // Border color --brd-color: rgb(16, 16, 16); // Error color - --err-color: rgb(8, 8, 8); + --err-color: rgba(255, 255, 255, 0.02); // Acent color --ac-color: #50fa7b; // Active text color --act-color: #000000; } +:root { + @include darkTheme; +} + +:root.light { + @include lightTheme; +} + :root.black { @include blackTheme; } + +@media (prefers-color-scheme: dark) { + :root.auto { + @include darkTheme; + } +} + +@media (prefers-color-scheme: light) { + :root.auto { + @include lightTheme; + } +} diff --git a/components/ace-editor.vue b/components/ace-editor.vue index a54e4c241..5da155019 100644 --- a/components/ace-editor.vue +++ b/components/ace-editor.vue @@ -64,8 +64,8 @@ export default { this.editor = editor; this.cacheValue = this.value; - - editor.on('change', () => { + + editor.on("change", () => { const content = editor.getValue(); this.$emit("input", content); this.cacheValue = content; diff --git a/components/autocomplete.vue b/components/autocomplete.vue index eb46239bd..1cfca1688 100644 --- a/components/autocomplete.vue +++ b/components/autocomplete.vue @@ -3,7 +3,7 @@ = 0 ? this.currentSuggestionIndex : 0 ]; if (activeSuggestion) { - let input = this.value.substring(0, this.selectionStart); - this.value = input + activeSuggestion; + let input = this.text.substring(0, this.selectionStart); + this.text = input + activeSuggestion; } break; @@ -184,7 +190,7 @@ export default { * @returns {default.props.source|{type, required}} */ suggestions() { - let input = this.value.substring(0, this.selectionStart); + let input = this.text.substring(0, this.selectionStart); return ( this.source diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue index e48f01631..03af8ef41 100644 --- a/components/collections/saveRequestAs.vue +++ b/components/collections/saveRequestAs.vue @@ -24,14 +24,7 @@ v-model="requestData.name" v-bind:placeholder="defaultRequestName" @keyup.enter="saveRequestAs" - list="preCollectionLabels" /> - - - - - -