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

💄 Introducing tabs, minor UI changes

Browse Source
This commit is contained in:
Basil K
2019-09-16 13:50:28 +05:30
parent d93c76373c
commit e34662baec
7 changed files with 252 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
assets/css/styles.scss
View File

@@ -11,11 +11,11 @@ $responsiveWidth: 720px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, 0.5);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, 0.6);
} }
::placeholder { ::placeholder {
@@ -134,8 +134,7 @@ legend {
} }
fieldset textarea, fieldset textarea,
fieldset pre fieldset pre code {
code {
resize: vertical; resize: vertical;
} }
@@ -148,11 +147,11 @@ fieldset.blue legend {
} }
fieldset.gray { fieldset.gray {
border-color: #BCC2CD; border-color: #bcc2cd;
} }
fieldset.gray legend { fieldset.gray legend {
color: #BCC2CD; color: #bcc2cd;
} }
fieldset.green { fieldset.green {
@@ -226,7 +225,6 @@ pre {
width: calc(100% - 8px); width: calc(100% - 8px);
background-color: var(--bg-dark-color); background-color: var(--bg-dark-color);
color: var(--fg-color); color: var(--fg-color);
font-weight: 700;
font-size: 18px; font-size: 18px;
font-family: monospace; font-family: monospace;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
@@ -278,7 +276,7 @@ input[type="checkbox"] {
justify-content: center; justify-content: center;
margin: 8px 8px 8px 0; margin: 8px 8px 8px 0;
color: transparent; color: transparent;
transition: .2s; transition: 0.2s;
} }
} }
@@ -368,23 +366,23 @@ ol li {
} }
.info-response { .info-response {
background-color: #FFEB3B; background-color: #ffeb3b;
} }
.success-response { .success-response {
background-color: #4BB543; background-color: #4bb543;
} }
.redir-response { .redir-response {
background-color: #FF5722; background-color: #ff5722;
} }
.cl-error-response { .cl-error-response {
background-color: #A63232; background-color: #a63232;
} }
.sv-error-response { .sv-error-response {
background-color: #B71C1C; background-color: #b71c1c;
} }
.missing-data-response { .missing-data-response {
@@ -403,7 +401,6 @@ fieldset#history {
position: absolute; position: absolute;
top: 44px; top: 44px;
right: 12px; right: 12px;
font-weight: 700;
font-family: monospace, monospace; font-family: monospace, monospace;
} }
} }
@@ -461,3 +458,37 @@ fieldset#history {
} }
} }
} }
section {
display: flex;
flex-wrap: wrap;
}
div.tab {
width: 100%;
order: 1;
}
input[type="radio"],
div.tab {
display: none;
}
input[type="radio"] + label {
padding: 8px 16px;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
border-color: var(--err-color);
}
}
input[type="radio"]:checked + label {
border-color: var(--ac-color);
}
input[type="radio"]:checked + label + div.tab {
display: block;
}

46
build.js
View File

@@ -1,14 +1,16 @@
const axios = require('axios'); const axios = require("axios");
const fs = require('fs'); const fs = require("fs");
const { spawnSync } = require('child_process'); const { spawnSync } = require("child_process");
const runCommand = (command, args) => spawnSync(command, args).stdout.toString().replace(/\n/g, ""); const runCommand = (command, args) =>
spawnSync(command, args)
.stdout.toString()
.replace(/\n/g, "");
const FAIL_ON_ERROR = false; const FAIL_ON_ERROR = false;
const PW_BUILD_DATA_DIR = "./.postwoman"; const PW_BUILD_DATA_DIR = "./.postwoman";
const IS_DEV_MODE = process.argv.includes("--dev"); const IS_DEV_MODE = process.argv.includes("--dev");
try { try {
(async () => { (async () => {
// Create the build data directory if it does not exist. // Create the build data directory if it does not exist.
if (!fs.existsSync(PW_BUILD_DATA_DIR)) { if (!fs.existsSync(PW_BUILD_DATA_DIR)) {
@@ -17,30 +19,36 @@ try {
let version = {}; let version = {};
// Get the current version name as the tag from Git. // Get the current version name as the tag from Git.
version.name = (process.env.TRAVIS_TAG || runCommand('git', ['tag'])); version.name = process.env.TRAVIS_TAG || runCommand("git", ["tag"]);
// FALLBACK: If version.name was unset, let's grab it from GitHub. // FALLBACK: If version.name was unset, let's grab it from GitHub.
if(!version.name){ if (!version.name) {
version.name = ( version.name = (await axios
await axios.get("https://api.github.com/repos/liyasthomas/postwoman/releases") .get("https://api.github.com/repos/liyasthomas/postwoman/releases")
// If we can't get it from GitHub, we'll resort to getting it from package.json // If we can't get it from GitHub, we'll resort to getting it from package.json
.catch( .catch(ex => ({
(ex) => ({ data: [{ 'tag_name': require('./package.json').version }] }) data: [{ tag_name: require("./package.json").version }]
) }))).data[0]["tag_name"];
).data[0]['tag_name'];
} }
// Get the current version hash as the short hash from Git. // Get the current version hash as the short hash from Git.
version.hash = runCommand('git', ['rev-parse', '--short', 'HEAD']); version.hash = runCommand("git", ["rev-parse", "--short", "HEAD"]);
// Get the 'variant' name as the branch, if it's not master. // Get the 'variant' name as the branch, if it's not master.
version.variant = (process.env.TRAVIS_BRANCH || runCommand('git', ['branch']).split("* ")[1].split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "")); version.variant =
if(version.variant === "" || version.variant === "master") delete version.variant; process.env.TRAVIS_BRANCH ||
runCommand("git", ["branch"])
.split("* ")[1]
.split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
if (version.variant === "" || version.variant === "master")
delete version.variant;
// Write version data into a file // Write version data into a file
fs.writeFileSync(PW_BUILD_DATA_DIR + "/version.json", JSON.stringify(version)); fs.writeFileSync(
PW_BUILD_DATA_DIR + "/version.json",
JSON.stringify(version)
);
})(); })();
} catch (ex) {
}catch(ex){
console.error(ex); console.error(ex);
process.exit(FAIL_ON_ERROR ? 1 : 0); process.exit(FAIL_ON_ERROR ? 1 : 0);
} }

7
components/autocomplete.vue
View File

@@ -1,11 +1,9 @@
<template> <template>
<div class="autocomplete-wrapper"> <div class="autocomplete-wrapper">
<label> <label>
<slot />
<input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck"> <input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck">
<ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"> <ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
<li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }">{{ suggestion }}</li> <li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }" :key="index">{{ suggestion }}</li>
</ul> </ul>
</label> </label>
</div> </div>
@@ -13,7 +11,6 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.autocomplete-wrapper { .autocomplete-wrapper {
position: relative; position: relative;
input:focus+ul.suggestions, input:focus+ul.suggestions,
@@ -28,7 +25,6 @@
top: 90%; top: 90%;
margin: 0 4px; margin: 0 4px;
left: 0; left: 0;
padding: 0; padding: 0;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
z-index: 9999; z-index: 9999;
@@ -55,7 +51,6 @@
} }
} }
} }
} }
</style> </style>

14
components/section.vue
View File

@@ -18,20 +18,19 @@
</style> </style>
<script> <script>
export default { export default {
computed: { computed: {
noFrameColors () { noFrameColors() {
return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false; return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
} }
}, },
props: { props: {
"label": { label: {
type: String, type: String,
default: "Section" default: "Section"
}, },
"collapsed": { collapsed: {
type: Boolean type: Boolean
} }
}, },
@@ -39,9 +38,8 @@
methods: { methods: {
collapse({ target }) { collapse({ target }) {
const parent = target.parentNode; const parent = target.parentNode;
parent.querySelector(".collapsible").classList.toggle('hidden'); parent.querySelector(".collapsible").classList.toggle("hidden");
},
} }
} }
};
</script> </script>

9
layouts/default.vue
View File

@@ -35,12 +35,13 @@
<!-- Bottom section of footer: version/author information --> <!-- Bottom section of footer: version/author information -->
<p class="align-center"> <p class="align-center">
<span v-if="version.name"> <span v-if="version.name">
<a v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name" target="_blank">{{version.name }}</a> <a v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name" target="_blank">{{version.name}}</a>
<span v-if="version.hash"> <span v-if="version.hash">
- <a v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash" target="_blank">{{ version.hash }}</a> - <a v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash" target="_blank">{{version.hash}}</a>
</span> </span>
<span v-if="version.variant"> ({{ version.variant }})</span> <span v-if="version.variant"> ({{version.variant}})</span>
&#x2022; </span>by <a href="https://liyasthomas.web.app" target="_blank">Liyas Thomas 🦄</a> &#x2022;
</span> by <a href="https://liyasthomas.web.app" target="_blank">Liyas Thomas 🦄</a>
</p> </p>
</footer> </footer>
</div> </div>

20
pages/index.vue
View File

@@ -223,7 +223,11 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="green" collapsed label="Authentication"> <section>
<input id="tab-one" type="radio" name="grp" checked="checked">
<label for="tab-one">Authentication</label>
<div class="tab">
<pw-section class="green" label="Authentication">
<ul> <ul>
<li> <li>
<label for="auth">Authentication Type</label> <label for="auth">Authentication Type</label>
@@ -264,7 +268,11 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="orange" collapsed label="Headers"> </div>
<input id="tab-two" type="radio" name="grp">
<label for="tab-two">Headers</label>
<div class="tab">
<pw-section class="orange" label="Headers">
<ul v-for="(header, index) in headers" :key="index"> <ul v-for="(header, index) in headers" :key="index">
<li> <li>
<label :for="'header'+index">Header {{index + 1}}</label> <label :for="'header'+index">Header {{index + 1}}</label>
@@ -297,7 +305,11 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="pink" collapsed label="Parameters"> </div>
<input id="tab-three" type="radio" name="grp">
<label for="tab-three">Parameters</label>
<div class="tab">
<pw-section class="pink" label="Parameters">
<ul v-for="(param, index) in params" :key="index"> <ul v-for="(param, index) in params" :key="index">
<li> <li>
<label :for="'param'+index">Parameter {{index + 1}}</label> <label :for="'param'+index">Parameter {{index + 1}}</label>
@@ -330,6 +342,8 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
</div>
</section>
<history @useHistory="handleUseHistory" ref="historyComponent"></history> <history @useHistory="handleUseHistory" ref="historyComponent"></history>
</div> </div>
</template> </template>

2
pages/websocket.vue
View File

@@ -28,7 +28,7 @@
<label for="log">Log</label> <label for="log">Log</label>
<div id="log" name="log" class="log"> <div id="log" name="log" class="log">
<span v-if="communication.log"> <span v-if="communication.log">
<span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">@ {{ 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>