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 {

73
components/autocomplete.vue
View File

@@ -2,17 +2,7 @@
<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>
@@ -22,11 +12,12 @@
</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,
ul.suggestions:hover {
display: block; display: block;
} }
@@ -46,20 +37,27 @@
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 {
border-radius: 0 0 4px 4px;
}
&:hover,
&.active {
background-color: var(--ac-color); background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
} }
} }
} }
} }
</style> </style>
<script> <script>
@@ -92,12 +90,12 @@
}, },
watch: { watch: {
value () { value() {
this.$emit('input', this.value); this.$emit('input', this.value);
} }
}, },
data () { data() {
return { return {
value: "", value: "",
@@ -109,9 +107,9 @@
}, },
methods: { methods: {
updateSuggestions (event) { updateSuggestions(event) {
// Hide suggestions if ESC pressed. // Hide suggestions if ESC pressed.
if(event.which && event.which === KEY_ESC){ if (event.which && event.which === KEY_ESC) {
event.preventDefault(); event.preventDefault();
this.suggestionsVisible = false; this.suggestionsVisible = false;
this.currentSuggestionIndex = -1; this.currentSuggestionIndex = -1;
@@ -125,7 +123,7 @@
this.suggestionsVisible = true; this.suggestionsVisible = true;
}, },
forceSuggestion (text) { forceSuggestion(text) {
let input = this.value.substring(0, this.selectionStart); let input = this.value.substring(0, this.selectionStart);
this.value = input + text; this.value = input + text;
@@ -134,26 +132,26 @@
this.currentSuggestionIndex = -1; this.currentSuggestionIndex = -1;
}, },
handleKeystroke (event) { handleKeystroke(event) {
if(event.which === KEY_ARROW_UP){ if (event.which === KEY_ARROW_UP) {
event.preventDefault(); event.preventDefault();
this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0 this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0 ?
? this.currentSuggestionIndex - 1 this.currentSuggestionIndex - 1 :
: 0; 0;
}else if(event.which === KEY_ARROW_DOWN){ } else if (event.which === KEY_ARROW_DOWN) {
event.preventDefault(); event.preventDefault();
this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ?
? this.currentSuggestionIndex + 1 this.currentSuggestionIndex + 1 :
: this.suggestions.length - 1; this.suggestions.length - 1;
} }
if(event.which === KEY_TAB){ if (event.which === KEY_TAB) {
event.preventDefault(); event.preventDefault();
let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0]; let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
if(activeSuggestion){ if (activeSuggestion) {
let input = this.value.substring(0, this.selectionStart); let input = this.value.substring(0, this.selectionStart);
this.value = input + activeSuggestion; this.value = input + activeSuggestion;
} }
@@ -167,12 +165,12 @@
* *
* @returns {default.props.source|{type, required}} * @returns {default.props.source|{type, required}}
*/ */
suggestions () { suggestions() {
let input = this.value.substring(0, this.selectionStart); let input = this.value.substring(0, this.selectionStart);
return this.source.filter((entry) => { return this.source.filter((entry) => {
return entry.toLowerCase().startsWith(input.toLowerCase()) return entry.toLowerCase().startsWith(input.toLowerCase()) &&
&& input.toLowerCase() !== entry.toLowerCase(); input.toLowerCase() !== entry.toLowerCase();
}) })
// Cut off the part that's already been typed. // Cut off the part that's already been typed.
.map((entry) => entry.substring(this.selectionStart)) .map((entry) => entry.substring(this.selectionStart))
@@ -181,10 +179,11 @@
} }
}, },
mounted () { mounted() {
this.updateSuggestions({ this.updateSuggestions({
target: this.$refs.acInput 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()
}); });
}; };