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 13:08:49 +05:30
parent 7645d0d2c9
commit 16d9e1e34a
5 changed files with 93 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
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.millis" class="entry">
<ul v-for="entry in filteredHistory" :key="entry.time" class="entry">
<li>
<label :for="'time#' + entry.millis">Time</label>
<input :id="'time#' + entry.millis" type="text" readonly :value="entry.time" :title="entry.date">
<label :for="'time#' + entry.time">Time</label>
<input :id="'time#' + entry.time" type="text" readonly :value="entry.time" :title="entry.date">
</li>
<li class="method-list-item">
<label :for="'time#' + entry.millis">Method</label>
<input :id="'method#' + entry.millis" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
<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}">
<span class="entry-status-code">{{entry.status}}</span>
</li>
<li>
<label :for="'url#' + entry.millis">URL</label>
<input :id="'url#' + entry.millis" type="text" readonly :value="entry.url">
<label :for="'url#' + entry.time">URL</label>
<input :id="'url#' + entry.time" type="text" readonly :value="entry.url">
</li>
<li>
<label :for="'path#' + entry.millis">Path</label>
<input :id="'path#' + entry.millis" type="text" readonly :value="entry.path">
<label :for="'path#' + entry.time">Path</label>
<input :id="'path#' + entry.time" type="text" readonly :value="entry.path">
</li>
<li>
<label :for="'delete-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
<button :id="'delete-button#' + entry.millis" :disabled="isClearingHistory" @click="deleteHistory(entry)">
<label :for="'delete-button#' + entry.time" class="hide-on-small-screen">&nbsp;</label>
<button :id="'delete-button#' + entry.time" :disabled="isClearingHistory" @click="deleteHistory(entry)">
Delete
</button>
</li>
<li>
<label :for="'use-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
<button :id="'use-button#' + entry.millis" :disabled="isClearingHistory" @click="useHistory(entry)">
<label :for="'use-button#' + entry.time" class="hide-on-small-screen">&nbsp;</label>
<button :id="'use-button#' + entry.time" :disabled="isClearingHistory" @click="useHistory(entry)">
Use
</button>
</li>
@@ -67,11 +67,13 @@
</pw-section>
</template>
<script>
import VirtualList from 'vue-virtual-scroll-list'
import section from "./section";
import {findStatusGroup} from "../pages/index";
import VirtualList from 'vue-virtual-scroll-list'
import section from "./section";
import {
findStatusGroup
} from "../pages/index";
const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
export default {
components: {
'pw-section': section,
@@ -126,7 +128,7 @@
updateOnLocalStorage('history', this.history);
},
enableHistoryClearing() {
if (!this.history || !this.history.length) return;
if (!this.history || !this.history.length) return;
this.isClearingHistory = true;
},
disableHistoryClearing() {