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

🎨 Fixed few UI glitches

Browse Source
This commit is contained in:
Liyas Thomas
2019-08-28 10:02:40 +05:30
parent 0a4839eaf7
commit ae2d996754
4 changed files with 72 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
assets/css/styles.scss
View File

@@ -58,18 +58,6 @@ footer {
justify-content: space-between;
}
@media(max-width: $responsiveWidth) {
header {
display: block;
text-align: center;
nav {
display: inline-flex;
margin-top: 20px;
}
}
}
nav {
a:not(:last-of-type) {
margin-right: 15px;
@@ -182,8 +170,8 @@ textarea,
pre {
margin: 4px;
padding: 8px 16px;
width: calc(100% - 8px);
border-radius: 4px;
width: calc(100% - 8px);
background-color: var(--bg-dark-color);
color: var(--fg-color);
font-weight: 700;
@@ -195,7 +183,7 @@ pre {
select,
input,
option {
height: 38px;
height: 41px;
}
input[type="checkbox"] {
@@ -242,6 +230,15 @@ ol li {
}
@media (max-width: $responsiveWidth) {
header {
display: block;
text-align: center;
nav {
display: inline-flex;
margin-top: 20px;
}
}
ul,
ol {
@@ -252,6 +249,10 @@ ol li {
ol li {
display: flex;
}
.hide-on-small-screen {
display: none;
}
}
#installPWA {
@@ -295,8 +296,13 @@ fieldset#history {
}
}
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
#response-details-wrapper {
position: relative;
@@ -304,6 +310,10 @@ fieldset#history {
border-radius: 4px;
margin: 4px;
textarea {
width: 100%;
}
#response-details {
margin: 0;
}
@@ -315,8 +325,7 @@ fieldset#history {
right: 0;
bottom: 0;
background-color: white;
height: 100%;
width: 100%;
}
}
}

54
layouts/default.vue
View File

@@ -3,55 +3,54 @@
<header>
<div class="slide-in">
<nuxt-link to="/">
<h1 class="logo"><logo alt="" style="height: 24px; margin-right: 16px"/>Postwoman</h1>
<h1 class="logo">
<logo alt="" style="height: 24px; margin-right: 16px" />Postwoman</h1>
</nuxt-link>
<h3>API request builder</h3>
</div>
<nav>
<nuxt-link to="/">HTTP</nuxt-link>
<nuxt-link to="/websocket">WebSocket</nuxt-link>
<nuxt-link to="/settings">
<!-- Settings cog -->
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z"/>
<path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z" />
</svg>
</nuxt-link>
</nav>
</header>
<nuxt id="main" />
<footer>
<div>
<a href="https://github.com/liyasthomas/postwoman" target="_blank"><img src="~static/icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>
</div>
<button id="installPWA" @click.prevent="showInstallPrompt()">
Install PWA
</button>
</footer>
</div>
</template>
<style lang="scss">
.slide-in {
position: relative;
animation: slideIn 0.4s forwards ease-in-out;
animation: slideIn 0.2s forwards ease-in-out;
}
@keyframes slideIn {
0% {
opacity: 0;
left: -30px;
left: -16px;
}
100% {
opacity: 1;
left: 0px;
}
}
header, #main, footer {
header,
#main,
footer {
margin: 0 auto;
max-width: 1200px;
}
@@ -71,7 +70,11 @@
&.nuxt-link-exact-active {
color: var(--act-color);
fill: var(--act-color);
&:before { width: 100%; height: 100% }
&:before {
width: 100%;
height: 100%
}
}
&:before {
@@ -81,7 +84,6 @@
left: 0;
right: 0;
z-index: -1;
background-color: var(--ac-color);
border-radius: 4px;
margin: auto;
@@ -92,23 +94,28 @@
}
@keyframes linkHover {
0% { width: 0; height: 2px; }
100% { width: 100%; height: 2px; }
0% {
width: 0;
height: 2px;
}
100% {
width: 100%;
height: 2px;
}
}
}
}
</style>
</style>
<script>
import intializePwa from '../assets/js/pwa';
import logo from "../components/logo";
export default {
components: {
logo
},
data () {
data() {
return {
// Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation
@@ -116,24 +123,20 @@
showInstallPrompt: null
}
},
beforeMount () {
beforeMount() {
// Load theme settings
(() => {
// Apply theme from settings.
document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
// Load theme color data from settings, or use default color.
let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D';
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('--act-color', vibrant ? '#121212' : '#fff');
})();
},
mounted () {
mounted() {
// Initializes the PWA code - checks if the app is installed,
// etc.
(async () => {
@@ -141,4 +144,5 @@
})();
}
}
</script>

47
pages/index.vue
View File

@@ -21,7 +21,7 @@
<input id="path" v-model="path" v-on:keyup.enter="sendRequest">
</li>
<li>
<label for="action">&nbsp;</label>
<label for="action" class="hide-on-small-screen">&nbsp;</label>
<button id="action" name="action" @click="sendRequest" :disabled="!isValidURL">Send</button>
</li>
</ul>
@@ -51,7 +51,7 @@
<input :name="'bvalue'+index" v-model="param.value">
</li>
<li>
<label for="request">&nbsp;</label>
<label for="request" class="hide-on-small-screen">&nbsp;</label>
<button name="request" @click="removeRequestBodyParam(index)">Remove</button>
</li>
</ol>
@@ -111,7 +111,7 @@
<input :name="'value'+index" v-model="header.value">
</li>
<li>
<label for="header">&nbsp;</label>
<label for="header" class="hide-on-small-screen">&nbsp;</label>
<button name="header" @click="removeRequestHeader(index)">Remove</button>
</li>
</ol>
@@ -139,7 +139,7 @@
<input :name="'value'+index" v-model="param.value">
</li>
<li>
<label for="param">&nbsp;</label>
<label for="param" class="hide-on-small-screen">&nbsp;</label>
<button name="param" @click="removeRequestParam(index)">Remove</button>
</li>
</ol>
@@ -175,12 +175,10 @@
<label for="body">response</label>
<button v-if="response.body" name="action" @click="copyResponse">Copy Response</button>
</div>
<div id="response-details-wrapper">
<textarea name="body" rows="16" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea>
<iframe src="about:blank" class="covers-response" ref="previewFrame" :class="{hidden: !previewEnabled}"></iframe>
</div>
<div v-if="response.body && responseType === 'text/html'" class="align-right">
<button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button>
</div>
@@ -212,11 +210,11 @@
<input name="path" type="text" readonly :value="entry.path">
</li>
<li>
<label for="delete">&nbsp;</label>
<label for="delete" class="hide-on-small-screen">&nbsp;</label>
<button name="delete" @click="deleteHistory(entry)">Delete</button>
</li>
<li>
<label for="use">&nbsp;</label>
<label for="use" class="hide-on-small-screen">&nbsp;</label>
<button name="use" @click="useHistory(entry)">Use</button>
</li>
</ul>
@@ -255,7 +253,6 @@
statusCodeRegex: new RegExp(/.*/),
className: 'missing-data-response'
}
];
const parseHeaders = xhr => {
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
@@ -357,8 +354,7 @@
}) => `${key}=${encodeURIComponent(value)}`).join('&')
return result == '' ? '' : `?${result}`
},
responseType () {
responseType() {
return (this.response.headers['content-type'] || '').split(';')[0].toLowerCase();
}
},
@@ -391,35 +387,28 @@
alert('Please check the formatting of the URL');
return
}
if (this.$refs.response.$el.classList.contains('hidden')) {
this.$refs.response.$el.classList.toggle('hidden')
}
this.$refs.response.$el.scrollIntoView({
behavior: 'smooth'
});
this.previewEnabled = false;
this.response.status = 'Fetching...';
this.response.body = 'Loading...';
const xhr = new XMLHttpRequest();
const user = this.auth === 'Basic' ? this.httpUser : null;
const password = this.auth === 'Basic' ? this.httpPassword : null;
xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
if (this.auth === 'Bearer Token') xhr.setRequestHeader(
'Authorization',
'Bearer ' + this.bearerToken
'Authorization',
'Bearer ' + this.bearerToken
);
if (this.headers) {
this.headers.forEach(function(element) {
xhr.setRequestHeader(element.key, element.value)
})
}
if (this.method === 'POST' || this.method === 'PUT') {
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
xhr.setRequestHeader('Content-Length', requestBody.length);
@@ -428,16 +417,13 @@
} else {
xhr.send();
}
xhr.onload = e => {
this.response.status = xhr.status;
const headers = this.response.headers = parseHeaders(xhr);
this.response.body = xhr.responseText;
if ((headers['content-type'] || '').startsWith('application/json')) {
this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
}
const n = new Date().toLocaleTimeString();
this.history = [{
status: xhr.status,
@@ -448,7 +434,6 @@
}, ...this.history];
window.localStorage.setItem('history', JSON.stringify(this.history));
};
xhr.onerror = e => {
this.response.status = xhr.status;
this.response.body = xhr.statusText;
@@ -459,7 +444,6 @@
key: '',
value: ''
});
return false
},
removeRequestHeader(index) {
@@ -507,24 +491,20 @@
return false;
}
},
copyResponse() {
var copyText = document.getElementById("response-details");
copyText.select();
document.execCommand("copy");
},
togglePreview () {
togglePreview() {
this.previewEnabled = !this.previewEnabled;
if(this.previewEnabled) {
if (this.previewEnabled) {
// If you want to add 'preview' support for other response types,
// just add them here.
if(this.responseType === "text/html"){
if (this.responseType === "text/html") {
// If the preview already has that URL loaded, let's not bother re-loading it all.
if(this.$refs.previewFrame.getAttribute('data-previewing-url') === this.url)
if (this.$refs.previewFrame.getAttribute('data-previewing-url') === this.url)
return;
// Use DOMParser to parse document HTML.
const previewDocument = new DOMParser().parseFromString(this.response.body, this.responseType);
// Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
@@ -537,4 +517,5 @@
}
}
}
</script>

4
pages/websocket.vue
View File

@@ -7,7 +7,7 @@
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
</li>
<li>
<label>&nbsp;</label>
<label for="action" class="hide-on-small-screen">&nbsp;</label>
<button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
</li>
</ul>
@@ -30,7 +30,7 @@
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
</li>
<li>
<label>&nbsp;</label>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
</li>
</ul>