btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

🎨 Various UI tweaks

Browse Source
This commit is contained in:
Liyas Thomas
2019-12-18 00:43:15 +05:30
parent ae237f1ad3
commit bc6ea34f14
19 changed files with 150 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -360,13 +360,13 @@ This project is licensed under the [MIT License](https://opensource.org/licenses
<p> <p>
[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io) [![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman)](https://postwoman.io)
<details> <details>
<summary>Default</summary> <summary>Default</summary>
<p> <p>
``` ```
[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io) [![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman)](https://postwoman.io)
``` ```
</p> </p>
</details> </details>

42
assets/css/styles.scss
View File

@@ -146,6 +146,7 @@ footer {
z-index: 1; z-index: 1;
height: 100vh; height: 100vh;
padding: 0 8px; padding: 0 8px;
background-color: var(--bg-light-color);
} }
.main { .main {
@@ -155,7 +156,6 @@ footer {
order: 2; order: 2;
position: relative; position: relative;
padding: 0 16px; padding: 0 16px;
background-color: var(--bg-light-color);
height: 100%; height: 100%;
} }
@@ -257,14 +257,14 @@ h3 {
} }
.tooltip { .tooltip {
$bgcolor: var(--bg-color); $bgcolor: var(--tt-color);
$fgcolor: var(--fg-color); $fgcolor: var(--fg-color);
display: block !important; display: block !important;
z-index: 10000; z-index: 10000;
.tooltip-inner { .tooltip-inner {
background: black; background: $bgcolor;
color: white; color: $fgcolor;
border-radius: 8px; border-radius: 8px;
padding: 8px 16px; padding: 8px 16px;
font-size: 12px; font-size: 12px;
@@ -278,7 +278,7 @@ h3 {
border-style: solid; border-style: solid;
position: absolute; position: absolute;
margin: 5px; margin: 5px;
border-color: black; border-color: $bgcolor;
z-index: 1; z-index: 1;
} }
@@ -424,6 +424,17 @@ button {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
} }
&.primary {
color: var(--ac-color);
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
background-color: var(--ac-color);
color: var(--act-color);
}
}
} }
@keyframes beat { @keyframes beat {
@@ -444,7 +455,6 @@ button {
fieldset { fieldset {
margin: 16px 0; margin: 16px 0;
// border: 1px solid var(--brd-color);
border-radius: 16px; border-radius: 16px;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
background-color: var(--bg-dark-color); background-color: var(--bg-dark-color);
@@ -503,6 +513,11 @@ fieldset.yellow legend {
color: #f1fa8c; color: #f1fa8c;
} }
input[type="file"],
input[type="radio"],
.tab,
.hide-on-large-screen,
#installPWA,
.hidden { .hidden {
display: none; display: none;
} }
@@ -669,18 +684,10 @@ ol li {
display: flex; display: flex;
} }
.hide-on-large-screen {
display: none;
}
.show-on-large-screen { .show-on-large-screen {
display: inline-flex; display: inline-flex;
} }
#installPWA {
display: none;
}
.info-response { .info-response {
color: #ffeb3b; color: #ffeb3b;
} }
@@ -774,12 +781,6 @@ section {
order: 1; order: 1;
} }
input[type="file"],
input[type="radio"],
.tab {
display: none;
}
input[type="radio"] + label { input[type="radio"] + label {
padding: 8px 16px; padding: 8px 16px;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
@@ -856,6 +857,7 @@ input[type="radio"]:checked + label + .tab {
width: 100%; width: 100%;
background-color: var(--bg-color); background-color: var(--bg-color);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
} }
nav.primary-nav { nav.primary-nav {

20
assets/css/themes.scss
View File

@@ -9,13 +9,13 @@
// Dark is the default theme variant. // Dark is the default theme variant.
@mixin darkTheme { @mixin darkTheme {
// Background color // Background color
--bg-color: rgba(18, 18, 18, 1); --bg-color: rgba(32, 33, 36, 1);
// Light Background color // Light Background color
--bg-light-color: rgba(255, 255, 255, 0.02); --bg-light-color: rgba(255, 255, 255, 0.02);
// Dark Background color // Dark Background color
--bg-dark-color: rgba(0, 0, 0, 0.1); --bg-dark-color: rgba(0, 0, 0, 0.1);
// Text color // Text color
--fg-color: rgba(255, 255, 255, 1); --fg-color: rgba(255, 255, 255, 0.9);
// Light Text color // Light Text color
--fg-light-color: rgba(255, 255, 255, 0.5); --fg-light-color: rgba(255, 255, 255, 0.5);
// Border color // Border color
@@ -25,9 +25,11 @@
// Acent color // Acent color
--ac-color: rgba(80, 250, 123, 1); --ac-color: rgba(80, 250, 123, 1);
// Active text color // Active text color
--act-color: rgba(18, 18, 18, 1); --act-color: rgba(32, 33, 36, 1);
// Auto-complete color // Auto-complete color
--atc-color: rgba(18, 18, 18, 1); --atc-color: rgba(32, 33, 36, 1);
// Tooltip color
--tt-color: rgba(53, 53, 53, 1);
} }
@mixin lightTheme { @mixin lightTheme {
@@ -38,7 +40,7 @@
// Dark Background color // Dark Background color
--bg-dark-color: rgba(0, 0, 0, 0.02); --bg-dark-color: rgba(0, 0, 0, 0.02);
// Text color // Text color
--fg-color: rgba(0, 0, 0, 1); --fg-color: rgba(0, 0, 0, 0.9);
// Light Text color // Light Text color
--fg-light-color: rgba(0, 0, 0, 0.6); --fg-light-color: rgba(0, 0, 0, 0.6);
// Border color // Border color
@@ -51,17 +53,19 @@
--act-color: rgba(255, 255, 255, 1); --act-color: rgba(255, 255, 255, 1);
// Auto-complete color // Auto-complete color
--atc-color: rgba(255, 255, 255, 1); --atc-color: rgba(255, 255, 255, 1);
// Tooltip color
--tt-color: rgba(220, 220, 220, 1);
} }
@mixin blackTheme { @mixin blackTheme {
// Background color // Background color
--bg-color: rgba(0, 0, 0, 1); --bg-color: rgba(0, 0, 0, 1);
// Light Background color // Light Background color
--bg-light-color: rgba(255, 255, 255, 0); --bg-light-color: rgba(255, 255, 255, 0.02);
// Dark Background color // Dark Background color
--bg-dark-color: rgba(255, 255, 255, 0.02); --bg-dark-color: rgba(255, 255, 255, 0.02);
// Text color // Text color
--fg-color: rgba(255, 255, 255, 1); --fg-color: rgba(255, 255, 255, 0.9);
// Light Text color // Light Text color
--fg-light-color: rgba(255, 255, 255, 0.5); --fg-light-color: rgba(255, 255, 255, 0.5);
// Border color // Border color
@@ -74,6 +78,8 @@
--act-color: rgba(0, 0, 0, 1); --act-color: rgba(0, 0, 0, 1);
// Auto-complete color // Auto-complete color
--atc-color: rgba(0, 0, 0, 1); --atc-color: rgba(0, 0, 0, 1);
// Tooltip color
--tt-color: rgba(18, 18, 18, 1);
} }
:root { :root {

17
components/collections/addCollection.vue
View File

@@ -22,14 +22,17 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<ul> <div class="flex-wrap">
<li> <span></span>
<button class="icon" @click="addNewCollection"> <span>
<i class="material-icons">add</i> <button class="icon" @click="hideModal">
<span>Create</span> Cancel
</button> </button>
</li> <button class="icon primary" @click="addNewCollection">
</ul> Save
</button>
</span>
</div>
</div> </div>
</modal> </modal>
</template> </template>

17
components/collections/addFolder.vue
View File

@@ -22,14 +22,17 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<ul> <div class="flex-wrap">
<li> <span></span>
<button class="icon" @click="addNewFolder"> <span>
<i class="material-icons">add</i> <button class="icon" @click="hideModal">
<span>Create</span> Cancel
</button> </button>
</li> <button class="icon primary" @click="addNewFolder">
</ul> Save
</button>
</span>
</div>
</div> </div>
</modal> </modal>
</template> </template>

23
components/collections/editCollection.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<modal v-if="show" @close="hideModel"> <modal v-if="show" @close="hideModal">
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="flex-wrap">
<h3 class="title">Edit Collection</h3> <h3 class="title">Edit Collection</h3>
<div> <div>
<button class="icon" @click="hideModel"> <button class="icon" @click="hideModal">
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button> </button>
</div> </div>
@@ -27,14 +27,17 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<ul> <div class="flex-wrap">
<li> <span></span>
<button class="icon" @click="saveCollection"> <span>
<i class="material-icons">save</i> <button class="icon" @click="hideModal">
<span>Save</span> Cancel
</button> </button>
</li> <button class="icon primary" @click="saveCollection">
</ul> Save
</button>
</span>
</div>
</div> </div>
</modal> </modal>
</template> </template>
@@ -66,7 +69,7 @@ export default {
}); });
this.$emit("hide-modal"); this.$emit("hide-modal");
}, },
hideModel() { hideModal() {
this.$emit("hide-modal"); this.$emit("hide-modal");
} }
} }

17
components/collections/editFolder.vue
View File

@@ -27,14 +27,17 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<ul> <div class="flex-wrap">
<li> <span></span>
<button class="icon" @click="editFolder"> <span>
<i class="material-icons">add</i> <button class="icon" @click="hideModal">
<span>Save</span> Cancel
</button> </button>
</li> <button class="icon primary" @click="editFolder">
</ul> Save
</button>
</span>
</div>
</div> </div>
</modal> </modal>
</template> </template>

17
components/collections/editRequest.vue
View File

@@ -71,14 +71,17 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<ul> <div class="flex-wrap">
<li> <span></span>
<button class="icon" @click="saveRequest"> <span>
<i class="material-icons">save</i> <button class="icon" @click="hideModal">
<span>Save</span> Cancel
</button> </button>
</li> <button class="icon primary" @click="saveRequest">
</ul> Save
</button>
</span>
</div>
</div> </div>
</modal> </modal>
</template> </template>

36
components/collections/importExportCollections.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<modal v-if="show" @close="hideModel"> <modal v-if="show" @close="hideModal">
<div slot="header"> <div slot="header">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="flex-wrap">
<h3 class="title">Import / Export Collections</h3> <h3 class="title">Import / Export Collections</h3>
<div> <div>
<button class="icon" @click="hideModel"> <button class="icon" @click="hideModal">
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button> </button>
</div> </div>
@@ -18,8 +18,8 @@
<textarea v-model="collectionJson" rows="8"></textarea> <textarea v-model="collectionJson" rows="8"></textarea>
</div> </div>
<div slot="footer"> <div slot="footer">
<ul> <div class="flex-wrap">
<li> <span>
<button <button
class="icon" class="icon"
@click="openDialogChooseFileToReplaceWith" @click="openDialogChooseFileToReplaceWith"
@@ -34,8 +34,6 @@
ref="inputChooseFileToReplaceWith" ref="inputChooseFileToReplaceWith"
/> />
</button> </button>
</li>
<li>
<button <button
class="icon" class="icon"
@click="openDialogChooseFileToImportFrom" @click="openDialogChooseFileToImportFrom"
@@ -50,14 +48,24 @@
ref="inputChooseFileToImportFrom" ref="inputChooseFileToImportFrom"
/> />
</button> </button>
</li> </span>
<li> <span></span>
<button class="icon" @click="exportJSON" v-tooltip="'Download file'"> </div>
<i class="material-icons">get_app</i> <div class="flex-wrap">
<span>Export to JSON</span> <span></span>
<span>
<button class="icon" @click="hideModal">
Cancel
</button> </button>
</li> <button
</ul> class="icon primary"
@click="exportJSON"
v-tooltip="'Download file'"
>
Export
</button>
</span>
</div>
</div> </div>
</modal> </modal>
</template> </template>
@@ -76,7 +84,7 @@ export default {
} }
}, },
methods: { methods: {
hideModel() { hideModal() {
this.$emit("hide-modal"); this.$emit("hide-modal");
}, },
openDialogChooseFileToReplaceWith() { openDialogChooseFileToReplaceWith() {

17
components/collections/saveRequestAs.vue
View File

@@ -88,14 +88,17 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<ul> <div class="flex-wrap">
<li> <span></span>
<button class="icon" @click="saveRequestAs"> <span>
<i class="material-icons">save</i> <button class="icon" @click="hideModal">
<span>Save</span> Cancel
</button> </button>
</li> <button class="icon primary" @click="saveRequestAs">
</ul> Save
</button>
</span>
</div>
</div> </div>
</modal> </modal>
</template> </template>

2
components/graphql/field.vue
View File

@@ -15,7 +15,7 @@
.field-box { .field-box {
padding: 16px; padding: 16px;
margin: 4px; margin: 4px;
border-bottom: 1px solid var(--brd-color); border-bottom: 1px dashed var(--brd-color);
} }
.field-deprecated { .field-deprecated {

2
components/history.vue
View File

@@ -308,7 +308,7 @@ ol li {
.entry { .entry {
border-bottom: 1px dashed var(--brd-color); border-bottom: 1px dashed var(--brd-color);
padding: 16px 0; padding: 0 0 8px;
} }
.bg-color { .bg-color {

4
components/logo.vue
View File

@@ -24,9 +24,9 @@
<path <path
:fill="color" :fill="color"
id="path3816" id="path3816"
data-old_color="#121212" data-old_color="#202124"
class="active-path" class="active-path"
data-original="#121212" data-original="#202124"
d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z" d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
/> />
</g> </g>

2
components/modal.vue
View File

@@ -25,7 +25,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.87);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

10
layouts/default.vue
View File

@@ -441,7 +441,7 @@
rel="noopener" rel="noopener"
> >
<button class="icon"> <button class="icon">
<i class="material-icons">favorite</i> <i class="material-icons">donut_large</i>
<span>{{ $t("open_collective") }}</span> <span>{{ $t("open_collective") }}</span>
</button> </button>
</a> </a>
@@ -453,7 +453,7 @@
rel="noopener" rel="noopener"
> >
<button class="icon"> <button class="icon">
<i class="material-icons">favorite</i> <i class="material-icons">payment</i>
<span>{{ $t("paypal") }}</span> <span>{{ $t("paypal") }}</span>
</button> </button>
</a> </a>
@@ -465,7 +465,7 @@
rel="noopener" rel="noopener"
> >
<button class="icon"> <button class="icon">
<i class="material-icons">favorite</i> <i class="material-icons">local_parking</i>
<span>{{ $t("patreon") }}</span> <span>{{ $t("patreon") }}</span>
</button> </button>
</a> </a>
@@ -525,7 +525,7 @@ export default {
document.documentElement.style.setProperty("--ac-color", color); document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--act-color", "--act-color",
vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)" vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
); );
})(); })();
}, },
@@ -539,7 +539,7 @@ export default {
.querySelector("meta[name=theme-color]") .querySelector("meta[name=theme-color]")
.setAttribute( .setAttribute(
"content", "content",
this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#121212" this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#202124"
); );
// Initializes the PWA code - checks if the app is installed, // Initializes the PWA code - checks if the app is installed,

8
nuxt.config.js
View File

@@ -100,7 +100,7 @@ export default {
}, },
{ {
name: "msapplication-TileColor", name: "msapplication-TileColor",
content: "#121212" content: "#202124"
}, },
{ {
name: "msapplication-tap-highlight", name: "msapplication-tap-highlight",
@@ -257,14 +257,14 @@ export default {
display: "standalone", display: "standalone",
theme_color: "#121212", theme_color: "#202124",
background_color: "#121212", background_color: "#202124",
start_url: `${routerBase.router.base}` start_url: `${routerBase.router.base}`
}, },
meta: { meta: {
description: meta.shortDescription, description: meta.shortDescription,
theme_color: "#121212" theme_color: "#202124"
}, },
icons: (sizes => { icons: (sizes => {

17
pages/index.vue
View File

@@ -728,14 +728,17 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<ul> <div class="flex-wrap">
<li> <span></span>
<button class="icon" @click="handleImport"> <span>
<i class="material-icons">get_app</i> <button class="icon" @click="showModal = false">
<span>{{ $t("import") }}</span> Cancel
</button> </button>
</li> <button class="icon primary" @click="handleImport">
</ul> {{ $t("import") }}
</button>
</span>
</div>
</div> </div>
</pw-modal> </pw-modal>

4
pages/settings.vue
View File

@@ -156,7 +156,7 @@ export default {
// set the relevant values. // set the relevant values.
themes: [ themes: [
{ {
color: "#121212", color: "#202124",
name: "Kinda Dark", name: "Kinda Dark",
class: "", class: "",
aceEditor: "twilight" aceEditor: "twilight"
@@ -273,7 +273,7 @@ export default {
document.documentElement.style.setProperty("--ac-color", color); document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--act-color", "--act-color",
vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)" vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
); );
this.applySetting("THEME_COLOR", color.toUpperCase()); this.applySetting("THEME_COLOR", color.toUpperCase());
this.applySetting("THEME_COLOR_VIBRANT", vibrant); this.applySetting("THEME_COLOR_VIBRANT", vibrant);

4
static/icons/alien-head.svg
View File

@@ -54,9 +54,9 @@
transform="translate(516.40798,163.89028)"><g transform="translate(516.40798,163.89028)"><g
id="g3818"><path id="g3818"><path
id="path3816" id="path3816"
data-old_color="#121212" data-old_color="#202124"
class="active-path" class="active-path"
data-original="#121212" data-original="#202124"
d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z" d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
style="fill:#50fa7b" /></g></g></g></svg> style="fill:#50fa7b" /></g></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB