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

🎨 Minor UI update

Browse Source
This commit is contained in:
Liyas Thomas
2019-09-02 16:32:29 +05:30
parent a43ec422c0
commit 7aee2f4211
2 changed files with 619 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/history.vue
View File

@@ -7,33 +7,33 @@
</li>
</ul>
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="89" :remain="Math.min(5, filteredHistory.length)">
<ul v-for="entry in filteredHistory" :key="entry.time" class="entry">
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<li>
<label :for="'time#' + entry.time">Time</label>
<input :id="'time#' + entry.time" type="text" readonly :value="entry.time" :title="entry.date">
<label :for="'time#'+index">Time</label>
<input :id="'time#'+index" type="text" readonly :value="entry.time" :title="entry.date">
</li>
<li class="method-list-item">
<label :for="'time#' + entry.time">Method</label>
<input :id="'method#' + entry.time" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
<label :for="'time#'+index">Method</label>
<input :id="'method#'+index" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
<span class="entry-status-code">{{entry.status}}</span>
</li>
<li>
<label :for="'url#' + entry.time">URL</label>
<input :id="'url#' + entry.time" type="text" readonly :value="entry.url">
<label :for="'url#'+index">URL</label>
<input :id="'url#'+index" type="text" readonly :value="entry.url">
</li>
<li>
<label :for="'path#' + entry.time">Path</label>
<input :id="'path#' + entry.time" type="text" readonly :value="entry.path">
<label :for="'path#'+index">Path</label>
<input :id="'path#'+index" type="text" readonly :value="entry.path">
</li>
<li>
<label :for="'delete-button#' + entry.time" class="hide-on-small-screen">&nbsp;</label>
<button :id="'delete-button#' + entry.time" :disabled="isClearingHistory" @click="deleteHistory(entry)">
<label :for="'delete-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)">
Delete
</button>
</li>
<li>
<label :for="'use-button#' + entry.time" class="hide-on-small-screen">&nbsp;</label>
<button :id="'use-button#' + entry.time" :disabled="isClearingHistory" @click="useHistory(entry)">
<label :for="'use-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)">
Use
</button>
</li>

75
pages/index.vue
View File

@@ -16,8 +16,7 @@
</li>
<li>
<label for="url">URL</label>
<input :class="{ error: !isValidURL }" @keyup.enter="isValidURL ? sendRequest() : null" id="url" type="url"
v-model="url">
<input :class="{ error: !isValidURL }" @keyup.enter="isValidURL ? sendRequest() : null" id="url" type="url" v-model="url">
</li>
<li>
<label for="path">Path</label>
@@ -30,8 +29,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-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
<ul>
<li>
<autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type
@@ -73,10 +71,39 @@
</ul>
</div>
<div v-else>
<textarea @keydown="formatRawParams" rows="16" style="font-family: monospace;" v-model="rawParams"
v-textarea-auto-height="rawParams"></textarea>
<textarea @keydown="formatRawParams" rows="16" style="font-family: monospace;" v-model="rawParams" v-textarea-auto-height="rawParams"></textarea>
</div>
</pw-section>
<pw-section class="purple" id="response" label="Response" ref="response">
<ul>
<li>
<label for="status">status</label>
<input :class="statusCategory ? statusCategory.className : ''" :value="response.status || '(waiting to send request)'" name="status" readonly type="text">
</li>
</ul>
<ul v-for="(value, key) in response.headers">
<li>
<label for="value">{{key}}</label>
<input :value="value" name="value" readonly>
</li>
</ul>
<ul v-if="response.body">
<li>
<div class="flex-wrap">
<label for="body">response</label>
<button @click="copyResponse" name="action" v-if="response.body">Copy Response</button>
</div>
<div id="response-details-wrapper">
<textarea id="response-details" name="body" readonly rows="16">{{response.body || '(waiting to send request)'}}</textarea>
<iframe :class="{hidden: !previewEnabled}" class="covers-response" ref="previewFrame" src="about:blank"></iframe>
</div>
<div class="align-right" v-if="response.body && responseType === 'text/html'">
<button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button>
</div>
</li>
</ul>
<br>
</pw-section>
<pw-section class="green" collapsed label="Authentication">
<ul>
<li>
@@ -161,38 +188,6 @@
</li>
</ul>
</pw-section>
<pw-section class="purple" id="response" label="Response" ref="response">
<ul>
<li>
<label for="status">status</label>
<input :class="statusCategory ? statusCategory.className : ''"
:value="response.status || '(waiting to send request)'" name="status" readonly type="text">
</li>
</ul>
<ul v-for="(value, key) in response.headers">
<li>
<label for="value">{{key}}</label>
<input :value="value" name="value" readonly>
</li>
</ul>
<ul v-if="response.body">
<li>
<div class="flex-wrap">
<label for="body">response</label>
<button @click="copyResponse" name="action" v-if="response.body">Copy Response</button>
</div>
<div id="response-details-wrapper">
<textarea id="response-details" name="body" readonly rows="16">{{response.body || '(waiting to send request)'}}</textarea>
<iframe :class="{hidden: !previewEnabled}" class="covers-response" ref="previewFrame"
src="about:blank"></iframe>
</div>
<div class="align-right" v-if="response.body && responseType === 'text/html'">
<button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button>
</div>
</li>
</ul>
<br>
</pw-section>
<history @useHistory="handleUseHistory" ref="historyComponent" />
</div>
</template>
@@ -595,7 +590,9 @@
entries.forEach(entry => {
sendButtonElement.classList.toggle('show');
});
}, {threshold: 1});
}, {
threshold: 1
});
observer.observe(requestElement);
}