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

🎨 Updated color codes

Browse Source
This commit is contained in:
liyasthomas
2019-09-04 08:18:24 +05:30
parent c62e368cee
commit 077cb583b6
7 changed files with 233 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
assets/css/styles.scss
View File

@@ -135,51 +135,59 @@ fieldset.blue legend {
}
fieldset.gray {
border-color: #9B9B9B;
border-color: #BCC2CD;
}
fieldset.gray legend {
color: #9B9B9B;
color: #BCC2CD;
}
fieldset.green {
border-color: #B8E986;
border-color: #50fa7b;
}
fieldset.green legend {
color: #B8E986;
color: #50fa7b;
}
fieldset.cyan {
border-color: #50E3C2;
border-color: #8be9fd;
}
fieldset.cyan legend {
color: #50E3C2;
}
fieldset.blue-dark {
border-color: #4A90E2;
}
fieldset.blue-dark legend {
color: #4A90E2;
color: #8be9fd;
}
fieldset.purple {
border-color: #C198FB;
border-color: #bd93f9;
}
fieldset.purple legend {
color: #C198FB;
color: #bd93f9;
}
fieldset.orange {
border-color: #F5A623;
border-color: #ffb86c;
}
fieldset.orange legend {
color: #F5A623;
color: #ffb86c;
}
fieldset.pink {
border-color: #ff79c6;
}
fieldset.pink legend {
color: #ff79c6;
}
fieldset.red {
border-color: #ff5555;
}
fieldset.red legend {
color: #ff5555;
}
.hidden {

14
assets/css/themes.scss
View File

@@ -7,21 +7,21 @@
// Dark is the default theme variant.
:root {
--bg-dark-color: #000000;
--bg-dark-color: #44475a;
// Background color
--bg-color: #121212;
--bg-color: #282a36;
// Auto-complete color
--atc-color: #212121;
--atc-color: #3C4556;
// Text color
--fg-color: #FFF;
--fg-color: #f8f8f2;
// Error color
--err-color: #393939;
--err-color: #3C4556;
// Active color
--ac-color: #51FF0D;
--ac-color: #50fa7b;
// Active text color
--act-color: #121212;
--act-color: #282a36;
}
:root.light {

331
components/autocomplete.vue
View File

@@ -1,190 +1,189 @@
<template>
<div class="autocomplete-wrapper">
<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">
<div class="autocomplete-wrapper">
<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">
<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>
</ul>
</label>
</div>
<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>
</ul>
</label>
</div>
</template>
<style lang="scss" scoped>
.autocomplete-wrapper {
.autocomplete-wrapper {
position: relative;
position: relative;
input:focus + ul.suggestions, ul.suggestions:hover {
display: block;
}
input:focus+ul.suggestions,
ul.suggestions:hover {
display: block;
}
ul.suggestions {
display: none;
background-color: var(--atc-color);
position: absolute;
top: 90%;
margin: 0 4px;
left: 0;
ul.suggestions {
display: none;
background-color: var(--atc-color);
position: absolute;
top: 90%;
margin: 0 4px;
left: 0;
padding: 0;
border-radius: 0 0 4px 4px;
z-index: 9999;
transition: transform 200ms ease-out;
padding: 0;
border-radius: 0 0 4px 4px;
z-index: 9999;
transition: transform 200ms ease-out;
li {
width: 100%;
display: block;
margin: 5px 0;
padding: 10px 10px;
font-weight: 700;
font-size: 18px;
font-family: monospace;
white-space: pre-wrap;
li {
width: 100%;
display: block;
padding: 8px 16px;
font-weight: 700;
font-size: 18px;
font-family: monospace;
white-space: pre-wrap;
&:hover, &.active {
background-color: var(--ac-color);
}
}
}
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover,
&.active {
background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
}
}
}
}
}
</style>
<script>
const KEY_TAB = 9;
const KEY_ESC = 27;
const KEY_TAB = 9;
const KEY_ESC = 27;
const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40;
const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40;
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false
},
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false
},
placeholder: {
type: String,
default: 'Start typing...',
required: false
},
placeholder: {
type: String,
default: 'Start typing...',
required: false
},
source: {
type: Array,
required: true
},
source: {
type: Array,
required: true
},
value: {}
},
value: {}
},
watch: {
value () {
this.$emit('input', this.value);
}
},
data () {
return {
value: "",
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false
}
},
methods: {
updateSuggestions (event) {
// Hide suggestions if ESC pressed.
if(event.which && event.which === KEY_ESC){
event.preventDefault();
this.suggestionsVisible = false;
this.currentSuggestionIndex = -1;
return;
}
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart;
this.suggestionsOffsetLeft = (12 * this.selectionStart);
this.suggestionsVisible = true;
},
forceSuggestion (text) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + text;
this.selectionStart = this.value.length;
this.suggestionsVisible = true;
this.currentSuggestionIndex = -1;
},
handleKeystroke (event) {
if(event.which === KEY_ARROW_UP){
event.preventDefault();
this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0
? this.currentSuggestionIndex - 1
: 0;
}else if(event.which === KEY_ARROW_DOWN){
event.preventDefault();
this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1;
}
if(event.which === KEY_TAB){
event.preventDefault();
let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
if(activeSuggestion){
let input = this.value.substring(0, this.selectionStart);
this.value = input + activeSuggestion;
}
}
}
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions () {
let input = this.value.substring(0, this.selectionStart);
return this.source.filter((entry) => {
return entry.toLowerCase().startsWith(input.toLowerCase())
&& input.toLowerCase() !== entry.toLowerCase();
})
// Cut off the part that's already been typed.
.map((entry) => entry.substring(this.selectionStart))
// We only want the top 3 suggestions.
.slice(0, 3);
}
},
mounted () {
this.updateSuggestions({
target: this.$refs.acInput
});
watch: {
value() {
this.$emit('input', this.value);
}
},
data() {
return {
value: "",
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false
}
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.which && event.which === KEY_ESC) {
event.preventDefault();
this.suggestionsVisible = false;
this.currentSuggestionIndex = -1;
return;
}
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart;
this.suggestionsOffsetLeft = (12 * this.selectionStart);
this.suggestionsVisible = true;
},
forceSuggestion(text) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + text;
this.selectionStart = this.value.length;
this.suggestionsVisible = true;
this.currentSuggestionIndex = -1;
},
handleKeystroke(event) {
if (event.which === KEY_ARROW_UP) {
event.preventDefault();
this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0 ?
this.currentSuggestionIndex - 1 :
0;
} else if (event.which === KEY_ARROW_DOWN) {
event.preventDefault();
this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ?
this.currentSuggestionIndex + 1 :
this.suggestions.length - 1;
}
if (event.which === KEY_TAB) {
event.preventDefault();
let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
if (activeSuggestion) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + activeSuggestion;
}
}
}
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
let input = this.value.substring(0, this.selectionStart);
return this.source.filter((entry) => {
return entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase();
})
// Cut off the part that's already been typed.
.map((entry) => entry.substring(this.selectionStart))
// We only want the top 3 suggestions.
.slice(0, 3);
}
},
mounted() {
this.updateSuggestions({
target: this.$refs.acInput
});
}
}
</script>

6
nuxt.config.js
View File

@@ -51,7 +51,7 @@ export default {
// Windows phone tile icon
{ name: 'msapplication-TileImage', content: `${routerBase.router.base}icons/icon-144x144.png` },
{ name: 'msapplication-TileColor', content: '#121212' },
{ name: 'msapplication-TileColor', content: '#282a36' },
{ name: 'msapplication-tap-highlight', content: 'no' },
// OpenGraph
@@ -119,8 +119,8 @@ export default {
description: meta.shortDescription,
display: "standalone",
theme_color: "#121212",
background_color: "#121212",
theme_color: "#282a36",
background_color: "#282a36",
icons: ((sizes) => {
let icons = [];

8
pages/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="page">
<pw-section class="blue" label="Request" ref="request">
<pw-section class="cyan" label="Request" ref="request">
<ul>
<li>
<label for="method">Method</label>
@@ -48,7 +48,7 @@
</li>
</ul>
</pw-section>
<pw-section class="blue-dark" label="Request Code" ref="requestCode" v-if="!isHidden">
<pw-section class="blue" label="Request Code" ref="requestCode" v-if="!isHidden">
<ul>
<li>
<label for="requestType">Request Type</label>
@@ -76,7 +76,7 @@
</li>
</ul>
</pw-section>
<pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
<pw-section class="blue" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
<ul>
<li>
<autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type
@@ -212,7 +212,7 @@
</li>
</ul>
</pw-section>
<pw-section class="cyan" collapsed label="Parameters">
<pw-section class="pink" collapsed label="Parameters">
<ol v-for="(param, index) in params">
<li>
<label :for="'param'+index">Key {{index + 1}}</label>

38
pages/settings.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="page">
<pw-section class="blue" label="Theme">
<pw-section class="cyan" label="Theme">
<ul>
<li>
<h3 class="title">Background</h3>
@@ -77,12 +77,12 @@
// You should copy the existing light theme as a template and then just
// set the relevant values.
themes: [{
"color": "#121212",
"color": "#282a36",
"name": "Dark (Default)",
"class": ""
},
{
"color": "#DFDFDF",
"color": "#F6F8FA",
"name": "Light",
"vibrant": true,
"class": "light"
@@ -92,34 +92,44 @@
colors: [
// If the color is vibrant, black is used as the active foreground color.
{
"color": "#51ff0d",
"name": "Lime (Default)",
"color": "#50fa7b",
"name": "Green (Default)",
"vibrant": true
},
{
"color": "#FFC107",
"color": "#f1fa8c",
"name": "Yellow",
"vibrant": true
},
{
"color": "#E91E63",
"color": "#ff79c6",
"name": "Pink",
"vibrant": false
"vibrant": true
},
{
"color": "#e74c3c",
"color": "#ff5555",
"name": "Red",
"vibrant": false
},
{
"color": "#9b59b6",
"color": "#bd93f9",
"name": "Purple",
"vibrant": false
"vibrant": true
},
{
"color": "#2980b9",
"color": "#ffb86c",
"name": "Orange",
"vibrant": true
},
{
"color": "#8be9fd",
"name": "Cyan",
"vibrant": true
},
{
"color": "#57b5f9",
"name": "Blue",
"vibrant": false
"vibrant": true
},
],
@@ -162,7 +172,7 @@
// By default, the color is vibrant.
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
document.documentElement.style.setProperty('--act-color', vibrant ? '#282a36' : '#f8f8f2');
this.applySetting('THEME_COLOR', color.toUpperCase());
this.applySetting('THEME_COLOR_VIBRANT', vibrant);
},

8
pages/websocket.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="page">
<pw-section class="blue" label="Request" ref="request">
<pw-section class="cyan" label="Request" ref="request">
<ul>
<li>
<label for="url">URL</label>
@@ -104,7 +104,7 @@
this.communication.log = [{
payload: `Connecting to ${this.url}...`,
source: 'info',
color: 'lime'
color: 'var(--ac-color)'
}];
try {
this.socket = new WebSocket(this.url);
@@ -113,7 +113,7 @@
this.communication.log = [{
payload: `Connected to ${this.url}.`,
source: 'info',
color: 'lime',
color: 'var(--ac-color)',
ts: (new Date()).toLocaleTimeString()
}];
};
@@ -125,7 +125,7 @@
this.communication.log.push({
payload: `Disconnected from ${this.url}.`,
source: 'info',
color: 'red',
color: '#ff5555',
ts: (new Date()).toLocaleTimeString()
});
};