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

⚡ Minor UI tweaks

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-01 20:42:17 +05:30
parent c019ef0a24
commit 3f66d87a8a
3 changed files with 43 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/history.vue
View File

@@ -12,37 +12,33 @@
</li> </li>
</ul> </ul>
<ul> <ul>
<li style="max-width: 44px"></li> <li></li>
<li @click="sort_by_label()"> <li @click="sort_by_label()">
<label class="flex-wrap"> <label>
Label Label
<i class="material-icons">unfold_more</i>
</label> </label>
</li> </li>
<li @click="sort_by_time()"> <li @click="sort_by_time()">
<label class="flex-wrap"> <label>
Time Time
<i class="material-icons">unfold_more</i>
</label> </label>
</li> </li>
<li @click="sort_by_status_code()"> <li @click="sort_by_status_code()">
<label class="flex-wrap"> <label>
Status Status
<i class="material-icons">unfold_more</i>
</label> </label>
</li> </li>
<li @click="sort_by_url()"> <li @click="sort_by_url()">
<label class="flex-wrap"> <label>
URL URL
<i class="material-icons">unfold_more</i>
</label> </label>
</li> </li>
<li @click="sort_by_path()"> <li @click="sort_by_path()">
<label class="flex-wrap"> <label>
Path Path
<i class="material-icons">unfold_more</i>
</label> </label>
</li> </li>
<li></li>
</ul> </ul>
<virtual-list <virtual-list
class="virtual-list" class="virtual-list"
@@ -51,11 +47,19 @@
:remain="Math.min(5, filteredHistory.length)" :remain="Math.min(5, filteredHistory.length)"
> >
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry"> <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<li style="width: 44px"> <li>
<button v-if="entry.usesScripts" <button v-if="entry.usesScripts"
v-tooltip="'This entry used pre-request scripts.'" v-tooltip="'This entry used pre-request scripts'"
class="icon" class="icon"
><i class="material-icons" style="z-index: 10050;">code</i></button> >
<i class="material-icons">code</i>
</button>
<button v-else
v-tooltip="'No pre-request scripts'"
class="icon"
>
<i class="material-icons">http</i>
</button>
</li> </li>
<li> <li>
<input <input
@@ -67,7 +71,7 @@
/> />
</li> </li>
<li> <li>
<input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date" /> <input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
</li> </li>
<li class="method-list-item"> <li class="method-list-item">
<input <input
@@ -139,7 +143,7 @@
</button> </button>
</li> </li>
<li v-else> <li v-else>
<div class="flex-wrap"> <div>
<label for="clear-history-button">Are you sure?</label> <label for="clear-history-button">Are you sure?</label>
<div> <div>
<button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button> <button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button>
@@ -158,8 +162,12 @@
} }
} }
.flex-wrap { label {
cursor: pointer;
&:hover {
cursor: pointer;
color: var(--fg-color);
}
} }
@media (max-width: 720px) { @media (max-width: 720px) {

7
layouts/default.vue
View File

@@ -209,7 +209,7 @@
flex: 1; flex: 1;
order: 2; order: 2;
position: relative; position: relative;
padding: 0 8px; padding: 0 16px;
} }
.nav-second { .nav-second {
@@ -294,7 +294,7 @@
background-color: var(--brd-color); background-color: var(--brd-color);
color: var(--fg-light-color); color: var(--fg-light-color);
margin: 8px; margin: 8px;
transition: border-radius .2s ease-in-out; transition: all .2s ease-in-out;
&:hover { &:hover {
color: var(--fg-color); color: var(--fg-color);
@@ -332,6 +332,9 @@
nav.secondary-nav { nav.secondary-nav {
display: none; display: none;
} }
.main {
padding: 0 8px;
}
} }
</style> </style>

13
pages/index.vue
View File

@@ -41,7 +41,7 @@
</pw-modal> </pw-modal>
<pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request • β (experimental)" ref="preRequest"> <pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request • β (experimental)" ref="preRequest">
<textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="rawParams" spellcheck="false"></textarea> <textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="preRequestScript" spellcheck="false" placeholder='pw.environment.set("variable", "value");'></textarea>
</pw-section> </pw-section>
<pw-section class="blue" label="Request" ref="request"> <pw-section class="blue" label="Request" ref="request">
@@ -282,10 +282,15 @@
</ul> </ul>
</pw-section> </pw-section>
<br>
<section id="options"> <section id="options">
<input id="tab-one" type="radio" name="grp" checked="checked" /> <input id="tab-one" type="radio" name="grp" checked="checked" />
<label for="tab-one">Authentication</label> <label for="tab-one">Authentication</label>
<div class="tab"> <div class="tab">
<br>
<pw-section class="cyan" label="Authentication" ref="authentication"> <pw-section class="cyan" label="Authentication" ref="authentication">
<ul> <ul>
<li> <li>
@@ -348,6 +353,9 @@
<input id="tab-two" type="radio" name="grp" /> <input id="tab-two" type="radio" name="grp" />
<label for="tab-two">Headers</label> <label for="tab-two">Headers</label>
<div class="tab"> <div class="tab">
<br>
<pw-section class="orange" label="Headers" ref="headers"> <pw-section class="orange" label="Headers" ref="headers">
<ul> <ul>
<li> <li>
@@ -411,6 +419,9 @@
<input id="tab-three" type="radio" name="grp" /> <input id="tab-three" type="radio" name="grp" />
<label for="tab-three">Parameters</label> <label for="tab-three">Parameters</label>
<div class="tab"> <div class="tab">
<br>
<pw-section class="pink" label="Parameters" ref="parameters"> <pw-section class="pink" label="Parameters" ref="parameters">
<ul> <ul>
<li> <li>