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

UI tweaks, finish proxy settings input

Browse Source
This commit is contained in:
NBTX
2019-08-29 23:58:10 +01:00
parent bac9dd1eec
commit ca568cd3eb
5 changed files with 68 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/css/styles.scss
View File

@@ -84,6 +84,11 @@ button {
font-weight: 700;
font-size: 16px;
cursor: pointer;
&[disabled], &.disabled {
opacity: 0.7;
cursor: default;
}
}
fieldset {
@@ -220,7 +225,7 @@ input[type="checkbox"] {
background-color: var(--err-color);
}
.disabled {
.disabled, input[disabled] {
background-color: var(--err-color);
color: #b2b2b2;
}

2
pages/index.vue
View File

@@ -190,7 +190,7 @@
<pw-section class="gray" label="History">
<ul>
<li>
<button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
<button :class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
</li>
</ul>
<virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">

75
pages/settings.vue
View File

@@ -31,29 +31,26 @@
</ul>
</pw-section>
<!--<pw-section class="blue" label="Proxy">
<ul>
<li>
<p>
<input :checked="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')"
id="enableProxy"
type="checkbox">
<label for="enableProxy">Enable proxy</label>
</p>
</li>
</ul>
<pw-section class="blue" label="Proxy">
<ul>
<li>
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
</pw-toggle>
</li>
</ul>
<ul>
<li>
<label for="url">URL</label>
<input id="url" type="url" v-model="url">
</li>
<li>
<label for="key">Key</label>
<input id="key" type="password" v-model="url">
</li>
</ul>
</pw-section>-->
<ul>
<li>
<label for="url">URL</label>
<input id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED">
</li>
<li>
<label for="key">Key</label>
<input id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)">
</li>
</ul>
</pw-section>
</div>
</template>
<script>
@@ -62,6 +59,12 @@
import toggle from "../components/toggle";
export default {
components: {
'pw-section': section,
'pw-toggle': toggle,
'swatch': swatch
},
data() {
return {
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
@@ -113,21 +116,30 @@
"vibrant": false
},
],
settings: {
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
THEME_COLOR: '',
THEME_COLOR_VIBRANT: true,
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
}
}
},
components: {
'pw-section': section,
'pw-toggle': toggle,
'swatch': swatch
watch: {
proxySettings: {
deep: true,
handler (value) {
this.applySetting('PROXY_URL', value.url);
this.applySetting('PROXY_KEY', value.key);
}
}
},
methods: {
applyTheme(name) {
this.applySetting('THEME_CLASS', name);
@@ -164,6 +176,15 @@
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
},
computed: {
proxySettings () {
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
}
}
}
}

8
pages/websocket.vue
View File

@@ -4,11 +4,11 @@
<ul>
<li>
<label for="url">URL</label>
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
</li>
<li>
<label for="action" class="hide-on-small-screen">&nbsp;</label>
<button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
<button :disabled="!urlValid" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
</li>
</ul>
</pw-section>
@@ -27,11 +27,11 @@
<ul>
<li>
<label for="message">Message</label>
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
<input id="message" name="message" type="text" v-model="communication.input" :disabled="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
</li>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
<button name="send" :disabled="!connectionState" @click="sendMessage">Send</button>
</li>
</ul>
</pw-section>

11
store/postwoman.js
View File

@@ -31,9 +31,14 @@ export const SETTINGS_KEYS = [
*/
"PROXY_ENABLED",
/**
* The URL of the proxy to connect to for requests.
*/
"PROXY_URL",
"PROXY_AUTH"
/**
* The security key of the proxy.
*/
"PROXY_KEY"
];
export const state = () => ({
@@ -52,7 +57,7 @@ export const mutations = {
// Add your settings key to the SETTINGS_KEYS array at the
// top of the file.
// This is to ensure that application settings remain documented.
if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings key does not include the key " + key);
if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
state.settings[key] = value;
}