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

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()
});
};