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 { fieldset.gray {
border-color: #9B9B9B; border-color: #BCC2CD;
} }
fieldset.gray legend { fieldset.gray legend {
color: #9B9B9B; color: #BCC2CD;
} }
fieldset.green { fieldset.green {
border-color: #B8E986; border-color: #50fa7b;
} }
fieldset.green legend { fieldset.green legend {
color: #B8E986; color: #50fa7b;
} }
fieldset.cyan { fieldset.cyan {
border-color: #50E3C2; border-color: #8be9fd;
} }
fieldset.cyan legend { fieldset.cyan legend {
color: #50E3C2; color: #8be9fd;
}
fieldset.blue-dark {
border-color: #4A90E2;
}
fieldset.blue-dark legend {
color: #4A90E2;
} }
fieldset.purple { fieldset.purple {
border-color: #C198FB; border-color: #bd93f9;
} }
fieldset.purple legend { fieldset.purple legend {
color: #C198FB; color: #bd93f9;
} }
fieldset.orange { fieldset.orange {
border-color: #F5A623; border-color: #ffb86c;
} }
fieldset.orange legend { 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 { .hidden {

14
assets/css/themes.scss
View File

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

331
components/autocomplete.vue
View File

@@ -1,190 +1,189 @@
<template> <template>
<div class="autocomplete-wrapper"> <div class="autocomplete-wrapper">
<label> <label>
<slot /> <slot />
<input type="text" <input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck">
: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 }">{{ suggestion }}</li>
</ul> </ul>
</label> </label>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.autocomplete-wrapper { .autocomplete-wrapper {
position: relative; position: relative;
input:focus + ul.suggestions, ul.suggestions:hover { input:focus+ul.suggestions,
display: block; ul.suggestions:hover {
} display: block;
}
ul.suggestions { ul.suggestions {
display: none; display: none;
background-color: var(--atc-color); background-color: var(--atc-color);
position: absolute; position: absolute;
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;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
li { li {
width: 100%; width: 100%;
display: block; display: block;
margin: 5px 0; padding: 8px 16px;
padding: 10px 10px; font-weight: 700;
font-weight: 700; font-size: 18px;
font-size: 18px; font-family: monospace;
font-family: monospace; white-space: pre-wrap;
white-space: pre-wrap;
&:hover, &.active { &:last-child {
background-color: var(--ac-color); border-radius: 0 0 4px 4px;
} }
}
} &:hover,
&.active {
background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
}
}
}
}
}
</style> </style>
<script> <script>
const KEY_TAB = 9; const KEY_TAB = 9;
const KEY_ESC = 27; const KEY_ESC = 27;
const KEY_ARROW_UP = 38; const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40; const KEY_ARROW_DOWN = 40;
export default { export default {
props: { props: {
spellcheck: { spellcheck: {
type: Boolean, type: Boolean,
default: true, default: true,
required: false required: false
}, },
placeholder: { placeholder: {
type: String, type: String,
default: 'Start typing...', default: 'Start typing...',
required: false required: false
}, },
source: { source: {
type: Array, type: Array,
required: true required: true
}, },
value: {} value: {}
}, },
watch: { watch: {
value () { value() {
this.$emit('input', this.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
});
} }
},
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> </script>

6
nuxt.config.js
View File

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

8
pages/index.vue
View File

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

38
pages/settings.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Theme"> <pw-section class="cyan" label="Theme">
<ul> <ul>
<li> <li>
<h3 class="title">Background</h3> <h3 class="title">Background</h3>
@@ -77,12 +77,12 @@
// 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": "#121212", "color": "#282a36",
"name": "Dark (Default)", "name": "Dark (Default)",
"class": "" "class": ""
}, },
{ {
"color": "#DFDFDF", "color": "#F6F8FA",
"name": "Light", "name": "Light",
"vibrant": true, "vibrant": true,
"class": "light" "class": "light"
@@ -92,34 +92,44 @@
colors: [ colors: [
// If the color is vibrant, black is used as the active foreground color. // If the color is vibrant, black is used as the active foreground color.
{ {
"color": "#51ff0d", "color": "#50fa7b",
"name": "Lime (Default)", "name": "Green (Default)",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#FFC107", "color": "#f1fa8c",
"name": "Yellow", "name": "Yellow",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#E91E63", "color": "#ff79c6",
"name": "Pink", "name": "Pink",
"vibrant": false "vibrant": true
}, },
{ {
"color": "#e74c3c", "color": "#ff5555",
"name": "Red", "name": "Red",
"vibrant": false "vibrant": false
}, },
{ {
"color": "#9b59b6", "color": "#bd93f9",
"name": "Purple", "name": "Purple",
"vibrant": false "vibrant": true
}, },
{ {
"color": "#2980b9", "color": "#ffb86c",
"name": "Orange",
"vibrant": true
},
{
"color": "#8be9fd",
"name": "Cyan",
"vibrant": true
},
{
"color": "#57b5f9",
"name": "Blue", "name": "Blue",
"vibrant": false "vibrant": true
}, },
], ],
@@ -162,7 +172,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 ? '#121212' : '#fff'); document.documentElement.style.setProperty('--act-color', vibrant ? '#282a36' : '#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);
}, },

8
pages/websocket.vue
View File

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