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

🎨 UI update, moved POST request parameter section to Request section

Browse Source
This commit is contained in:
Liyas Thomas
2019-09-20 18:34:42 +05:30
parent e764df0687
commit df8d176a34
9 changed files with 92 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/fonts.scss
View File

@@ -1,2 +1,2 @@
// Poppins (Google Fonts) // Poppins (Google Fonts)
@import url("https://fonts.googleapis.com/css?family=Poppins:500,700&display=swap"); @import url("https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap");

62
assets/css/styles.scss
View File

@@ -20,7 +20,7 @@ $responsiveWidth: 720px;
} }
::placeholder { ::placeholder {
color: var(--fg-color); color: var(--fg-light-color);
opacity: 0.3; opacity: 0.3;
} }
@@ -34,25 +34,26 @@ a {
display: inline-flex; display: inline-flex;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: 600;
} }
body { body {
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--fg-color); color: var(--fg-color);
font-weight: 500; font-weight: 400;
font-size: 16px;
font-family: "Poppins", "Roboto", "Noto", sans-serif;
line-height: 1.5; line-height: 1.5;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
user-select: none; user-select: none;
font-family: "Poppins", "Roboto", "Noto", sans-serif;
} }
h1, h1,
h2, h2,
h3 { h3 {
margin: 0; margin: 0;
font-weight: 700; font-weight: 600;
} }
h3.title { h3.title {
@@ -93,17 +94,17 @@ button {
justify-content: center; justify-content: center;
margin: 4px; margin: 4px;
padding: 0 16px; padding: 0 16px;
border-radius: 8px; border-radius: 20px;
background-color: var(--ac-color); background-color: var(--ac-color);
color: var(--act-color); color: var(--act-color);
font-weight: 700; font-weight: 600;
font-size: 16px; font-size: 16px;
font-family: "Poppins", "Roboto", "Noto", sans-serif; font-family: "Poppins", "Roboto", "Noto", sans-serif;
cursor: pointer;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
fill: var(--act-color); fill: var(--act-color);
height: 41px; height: 40px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.02);
cursor: pointer;
span { span {
display: inline-flex; display: inline-flex;
@@ -112,15 +113,18 @@ button {
&.icon { &.icon {
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--fg-color); color: var(--fg-light-color);
fill: var(--fg-color); fill: var(--fg-light-color);
&:not([disabled]):hover {
color: var(--fg-color);
fill: var(--fg-color);
}
} }
&:not([disabled]):hover, &:not([disabled]):hover {
&:not(.disabled):focus { color: var(--act-color);
background-color: var(--bg-color); fill: var(--act-color);
color: var(--ac-color);
fill: var(--ac-color);
} }
} }
@@ -133,7 +137,7 @@ fieldset {
legend { legend {
color: var(--fg-color); color: var(--fg-color);
font-weight: 700; font-weight: 600;
cursor: pointer; cursor: pointer;
} }
@@ -190,18 +194,17 @@ pre {
margin: 4px; margin: 4px;
padding: 8px; padding: 8px;
border-radius: 8px; border-radius: 8px;
background-color: var(--brd-color); background-color: var(--bg-dark-color);
color: var(--fg-color); color: var(--fg-color);
font-size: 18px; font-size: 16px;
font-family: monospace; font-family: monospace;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
user-select: text; user-select: text;
width: calc(100% - 8px); width: calc(100% - 8px);
min-height: 40px;
&:not([readonly]):hover, &:not([readonly]):hover {
&:not([readonly]):focus { background-color: var(--bg-dark-color);
background-color: var(--bg-color);
box-shadow: inset 0 0 0 2px var(--fg-color);
} }
} }
@@ -216,14 +219,14 @@ code {
.hljs, .hljs,
.hljs-subst { .hljs-subst {
background-color: var(--brd-color) !important; background-color: var(--bg-dark-color) !important;
color: var(--fg-color) !important; color: var(--fg-color) !important;
} }
select, select,
input, input,
option { option {
height: 41px; height: 40px;
} }
input[type="checkbox"] { input[type="checkbox"] {
@@ -260,18 +263,19 @@ input[type="checkbox"] {
.disabled, .disabled,
[disabled] { [disabled] {
background-color: var(--err-color); background-color: var(--err-color);
color: var(--fg-color); color: var(--fg-light-color);
fill: var(--fg-color); fill: var(--fg-light-color);
cursor: default; cursor: default;
&.icon { &.icon {
color: var(--fg-color); color: var(--bg-color);
fill: var(--fg-color); fill: var(--bg-color);
} }
} }
label { label {
padding: 4px; padding: 4px;
color: var(--fg-light-color);
} }
ul, ul,

26
assets/css/themes.scss
View File

@@ -7,36 +7,42 @@
// Dark is the default theme variant. // Dark is the default theme variant.
:root { :root {
--bg-dark-color: #1d1f27; // Dark Background color
--bg-dark-color: rgb(41, 42, 45);
// Background color // Background color
--bg-color: #282a36; --bg-color: rgb(37, 38, 40);
// Auto-complete color // Auto-complete color
--atc-color: #20212b; --atc-color: rgb(49, 49, 55);
// Text color // Text color
--fg-color: #c4c6d4; --fg-color: rgb(247, 248, 248);
// Light Text color
--fg-light-color: rgb(150, 155, 160);
// Border color // Border color
--brd-color: #333545; --brd-color: rgb(48, 47, 55);
// Error color // Error color
--err-color: #303341; --err-color: rgb(41, 42, 45);
// Active color // Acent color
--ac-color: #50fa7b; --ac-color: #50fa7b;
// Active text color // Active text color
--act-color: #282a36; --act-color: rgb(37, 38, 40);
} }
:root.light { :root.light {
--bg-dark-color: #7a7a7a; // Dark Background color
--bg-dark-color: #e8f0fe;
// Background color // Background color
--bg-color: #fff; --bg-color: #fff;
// Auto-complete color // Auto-complete color
--atc-color: #ebebeb; --atc-color: #ebebeb;
// Text color // Text color
--fg-color: #525252; --fg-color: #525252;
// Light Text color
--fg-light-color: rgb(150, 155, 160);
// Border color // Border color
--brd-color: #f2f2f2; --brd-color: #f2f2f2;
// Error color // Error color
--err-color: invert(#303341, 1); --err-color: invert(#303341, 1);
// Active color // Acent color
--ac-color: #57b5f9; --ac-color: #57b5f9;
// Active text color // Active text color
--act-color: #fff; --act-color: #fff;

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.3); background-color: rgba(0, 0, 0, 0.1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

2
components/section.vue
View File

@@ -9,7 +9,7 @@
<style> <style>
fieldset.no-colored-frames legend { fieldset.no-colored-frames legend {
color: var(--ac-color); color: var(--fg-color);
} }
</style> </style>

9
layouts/default.vue
View File

@@ -31,8 +31,11 @@
</svg> </svg>
<span>Tweet</span> <span>Tweet</span>
</button> </button>
<button id="installPWA" @click.prevent="showInstallPrompt()"> <button class="icon" id="installPWA" @click.prevent="showInstallPrompt()">
Install PWA <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z"/>
</svg>
<span>Install PWA</span>
</button> </button>
</div> </div>
<!-- Bottom section of footer: version/author information --> <!-- Bottom section of footer: version/author information -->
@@ -168,7 +171,7 @@
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT; let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
if (vibrant == null) vibrant = true; if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color); document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff'); document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#fff');
})(); })();
}, },

68
pages/index.vue
View File

@@ -100,36 +100,7 @@
</button> </button>
</li> </li>
</ul> </ul>
</pw-section> <div class="blue" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
<pw-section class="blue" label="Request Code" ref="requestCode" v-if="!isHidden">
<ul>
<li>
<label for="requestType">Request Type</label>
<select id="requestType" v-model="requestType">
<option>JavaScript XHR</option>
<option>Fetch</option>
<option>cURL</option>
</select>
</li>
</ul>
<ul>
<li>
<div class="flex-wrap">
<label for="generatedCode">Generated Code</label>
<div>
<button class="icon" @click="copyRequestCode" id="copyRequestCode" ref="copyRequestCode">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M19.647 15.247c-1.278 0-2.429.551-3.225 1.429l-7.788-3.846c.062-.343.079-.64.067-.942l8.058-4.231c.769.682 1.78 1.097 2.889 1.097 2.404-.001 4.352-1.949 4.352-4.353s-1.948-4.353-4.353-4.353-4.353 1.949-4.353 4.353c0 .18.012.356.033.53l-7.828 4.111c-.793-.829-1.908-1.347-3.146-1.347-2.405 0-4.353 1.949-4.353 4.353s1.948 4.353 4.353 4.353c1.013 0 1.943-.347 2.684-.927l8.26 4.078-.001.047c0 2.404 1.948 4.353 4.353 4.353s4.351-1.949 4.351-4.353-1.948-4.352-4.353-4.352z"/>
</svg>
<span>Copy</span>
</button>
</div>
</div>
<textarea id="generatedCode" ref="generatedCode" name="generatedCode" rows="8" v-model="requestCode"></textarea>
</li>
</ul>
</pw-section>
<pw-section class="blue" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
<ul> <ul>
<li> <li>
<autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type <autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type
@@ -184,6 +155,35 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
</pw-section>
<pw-section class="blue" label="Code" ref="requestCode" v-if="!isHidden">
<ul>
<li>
<label for="requestType">Request Type</label>
<select id="requestType" v-model="requestType">
<option>JavaScript XHR</option>
<option>Fetch</option>
<option>cURL</option>
</select>
</li>
</ul>
<ul>
<li>
<div class="flex-wrap">
<label for="generatedCode">Generated Code</label>
<div>
<button class="icon" @click="copyRequestCode" id="copyRequestCode" ref="copyRequestCode">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M19.647 15.247c-1.278 0-2.429.551-3.225 1.429l-7.788-3.846c.062-.343.079-.64.067-.942l8.058-4.231c.769.682 1.78 1.097 2.889 1.097 2.404-.001 4.352-1.949 4.352-4.353s-1.948-4.353-4.353-4.353-4.353 1.949-4.353 4.353c0 .18.012.356.033.53l-7.828 4.111c-.793-.829-1.908-1.347-3.146-1.347-2.405 0-4.353 1.949-4.353 4.353s1.948 4.353 4.353 4.353c1.013 0 1.943-.347 2.684-.927l8.26 4.078-.001.047c0 2.404 1.948 4.353 4.353 4.353s4.351-1.949 4.351-4.353-1.948-4.352-4.353-4.352z"/>
</svg>
<span>Copy</span>
</button>
</div>
</div>
<textarea id="generatedCode" ref="generatedCode" name="generatedCode" rows="8" v-model="requestCode"></textarea>
</li>
</ul>
</pw-section> </pw-section>
<pw-section class="purple" id="response" label="Response" ref="response"> <pw-section class="purple" id="response" label="Response" ref="response">
<ul> <ul>
@@ -748,14 +748,6 @@
headers headers
); );
const headersObject = {};
Object.keys(headers).forEach(id=>{
headersObject[headers[id].key] = headers[id].value
});
headers = headersObject;
try { try {
const payload = await this.$axios({ const payload = await this.$axios({
method: this.method, method: this.method,

4
pages/settings.vue
View File

@@ -79,7 +79,7 @@
// You should copy the existing light theme as a template and then just // You should copy the existing light theme as a template and then just
// set the relevant values. // set the relevant values.
themes: [{ themes: [{
"color": "#282a36", "color": "rgb(37, 38, 40)",
"name": "Dark (Default)", "name": "Dark (Default)",
"class": "" "class": ""
}, },
@@ -174,7 +174,7 @@
// By default, the color is vibrant. // By default, the color is vibrant.
if (vibrant == null) vibrant = true; if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color); document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#282a36' : '#f8f8f2'); document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#f8f8f2');
this.applySetting('THEME_COLOR', color.toUpperCase()); this.applySetting('THEME_COLOR', color.toUpperCase());
this.applySetting('THEME_COLOR_VIBRANT', vibrant); this.applySetting('THEME_COLOR_VIBRANT', vibrant);
}, },

5
pages/websocket.vue
View File

@@ -32,7 +32,7 @@
<span v-if="communication.log"> <span v-if="communication.log">
<span v-for="(logEntry, index) in communication.log" :style="{ color: logEntry.color }" :key="index">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span> <span v-for="(logEntry, index) in communication.log" :style="{ color: logEntry.color }" :key="index">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span> </span>
<span v-else>(Waiting for connection...)</span> <span v-else>(waiting for connection)</span>
</div> </div>
</li> </li>
</ul> </ul>
@@ -64,14 +64,13 @@
padding: 8px 16px; padding: 8px 16px;
width: calc(100% - 8px); width: calc(100% - 8px);
border-radius: 8px; border-radius: 8px;
background-color: var(--brd-color); background-color: var(--bg-dark-color);
color: var(--fg-color); color: var(--fg-color);
height: 256px; height: 256px;
overflow: auto; overflow: auto;
&, &,
span { span {
font-weight: 700;
font-size: 18px; font-size: 18px;
font-family: monospace; font-family: monospace;
} }