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

🎨 Major UI update

Browse Source
This commit is contained in:
Liyas Thomas
2019-09-17 13:43:12 +05:30
parent 945da8bf92
commit 42411038e4
8 changed files with 149 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/history.vue
View File

@@ -2,43 +2,36 @@
<pw-section class="gray" label="History">
<ul>
<li id="filter-history">
<label for="filter-history-input">Search</label>
<input id="filter-history-input" type="text" placeholder="search history" :readonly="history.length === 0 || isClearingHistory" v-model="filterText">
<input type="text" placeholder="search history" :readonly="history.length === 0 || isClearingHistory" v-model="filterText">
</li>
</ul>
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="89" :remain="Math.min(5, filteredHistory.length)">
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="54" :remain="Math.min(5, filteredHistory.length)">
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<li>
<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#'+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>
<span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
</li>
<li>
<label :for="'url#'+index">URL</label>
<input :id="'url#'+index" type="text" readonly :value="entry.url">
</li>
<li>
<label :for="'path#'+index">Path</label>
<input :id="'path#'+index" type="text" readonly :value="entry.path">
</li>
<div class="show-on-small-screen">
<li>
<label :for="'delete-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button class="icon" :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M19 24h-14c-1.104 0-2-.896-2-2v-17h-1v-2h6v-1.5c0-.827.673-1.5 1.5-1.5h5c.825 0 1.5.671 1.5 1.5v1.5h6v2h-1v17c0 1.104-.896 2-2 2zm0-19h-14v16.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-16.5zm-9 4c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm6 0c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm-2-7h-4v1h4v-1z"/>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/>
</svg>
</button>
</li>
<li>
<label :for="'use-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button class="icon" :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M14.078 7.061l2.861 2.862-10.799 10.798-3.584.723.724-3.585 10.798-10.798zm0-2.829l-12.64 12.64-1.438 7.128 7.127-1.438 12.642-12.64-5.691-5.69zm7.105 4.277l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z" />
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M19.769 9.923l-12.642 12.639-7.127 1.438 1.438-7.128 12.641-12.64 5.69 5.691zm1.414-1.414l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"/>
</svg>
</button>
</li>
@@ -52,16 +45,16 @@
</ul>
<ul>
<li v-if="!isClearingHistory">
<button id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">Clear All</button>
<button class="icon" id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">Clear All</button>
</li>
<li v-else>
<div class="flex-wrap">
<label for="clear-history-button">Are you sure?</label>
<div>
<button id="confirm-clear-history-button" @click="clearHistory">
<button class="icon" id="confirm-clear-history-button" @click="clearHistory">
Yes
</button>
<button id="reject-clear-history-button" @click="disableHistoryClearing">
<button class="icon" id="reject-clear-history-button" @click="disableHistoryClearing">
No
</button>
</div>
@@ -151,7 +144,7 @@
@media (max-width: 720px) {
.virtual-list.filled {
min-height: 380px;
min-height: 200px;
}
}