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

2
pages/index.vue
View File

@@ -190,7 +190,7 @@
<pw-section class="gray" label="History"> <pw-section class="gray" label="History">
<ul> <ul>
<li> <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> </li>
</ul> </ul>
<virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)"> <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">

75
pages/settings.vue
View File

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

13
store/postwoman.js
View File

@@ -31,9 +31,14 @@ export const SETTINGS_KEYS = [
*/ */
"PROXY_ENABLED", "PROXY_ENABLED",
/**
* The URL of the proxy to connect to for requests.
*/
"PROXY_URL", "PROXY_URL",
"PROXY_AUTH" /**
* The security key of the proxy.
*/
"PROXY_KEY"
]; ];
export const state = () => ({ export const state = () => ({
@@ -52,9 +57,9 @@ export const mutations = {
// Add your settings key to the SETTINGS_KEYS array at the // Add your settings key to the SETTINGS_KEYS array at the
// top of the file. // top of the file.
// This is to ensure that application settings remain documented. // 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; state.settings[key] = value;
} }
}; };