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 {

45
components/autocomplete.vue
View File

@@ -2,17 +2,7 @@
<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">
<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>
@@ -26,7 +16,8 @@
position: relative;
input:focus + ul.suggestions, ul.suggestions:hover {
input:focus+ul.suggestions,
ul.suggestions:hover {
display: block;
}
@@ -46,20 +37,27 @@
li {
width: 100%;
display: block;
margin: 5px 0;
padding: 10px 10px;
padding: 8px 16px;
font-weight: 700;
font-size: 18px;
font-family: monospace;
white-space: pre-wrap;
&:hover, &.active {
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover,
&.active {
background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
}
}
}
}
</style>
<script>
@@ -138,15 +136,15 @@
if (event.which === KEY_ARROW_UP) {
event.preventDefault();
this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0
? this.currentSuggestionIndex - 1
: 0;
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;
this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ?
this.currentSuggestionIndex + 1 :
this.suggestions.length - 1;
}
if (event.which === KEY_TAB) {
@@ -171,8 +169,8 @@
let input = this.value.substring(0, this.selectionStart);
return this.source.filter((entry) => {
return entry.toLowerCase().startsWith(input.toLowerCase())
&& input.toLowerCase() !== entry.toLowerCase();
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))
@@ -187,4 +185,5 @@
});
}
}
</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()
});
};