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

🎨 Updated status color codes

Browse Source
This commit is contained in:
Liyas Thomas
2019-08-26 14:37:02 +05:30
parent 997c095f35
commit e1889c1db0
2 changed files with 11 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/styles.scss
View File

@@ -262,21 +262,21 @@ ol li {
} }
.info-response { .info-response {
background-color: #ffeb3b; background-color: #FFEB3B;
} }
.success-response { .success-response {
background-color: #66BB6A; background-color: #4BB543;
} }
.redir-response { .redir-response {
background-color: #ff5722; background-color: #FF5722;
} }
.cl-error-response { .cl-error-response {
background-color: #ef5350; background-color: #A63232;
} }
.sv-error-response { .sv-error-response {
background-color: #b71c1c; background-color: #B71C1C;
} }

19
pages/websocket.vue
View File

@@ -7,9 +7,9 @@
<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="toggleConnection">
</li> </li>
<li class="no-grow"> <li>
<label>&nbsp;</label> <label>&nbsp;</label>
<button class="action" :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button> <button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
@@ -18,7 +18,7 @@
<ul> <ul>
<li> <li>
<label for="log">Log</label> <label for="log">Log</label>
<div id="log" name="log" class="log" readonly> <div id="log" name="log" class="log">
<span v-if="communication.log"> <span v-if="communication.log">
<span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span> <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span> </span>
@@ -33,9 +33,9 @@
<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" :readonly="!connectionState" @keyup.enter="sendMessage">
</li> </li>
<li class="no-grow"> <li>
<label>&nbsp;</label> <label>&nbsp;</label>
<button class="action" name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button> <button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
@@ -44,13 +44,6 @@
</template> </template>
<style lang="scss"> <style lang="scss">
.no-grow { flex-grow: 0; }
.action {
padding-left: 30px;
padding-right: 30px;
width: 150px;
}
div.log { div.log {
margin: 4px; margin: 4px;
padding: 8px 16px; padding: 8px 16px;
@@ -58,7 +51,7 @@
border-radius: 4px; border-radius: 4px;
background-color: var(--bg-dark-color); background-color: var(--bg-dark-color);
color: var(--fg-color); color: var(--fg-color);
height: 300px; height: 256px;
overflow: auto; overflow: auto;
&, span { &, span {