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

✨ Adds expandable columns to History component for showing request duration and pre-request scripts if any. Fixes #233 #225

Browse Source
This commit is contained in:
liyasthomas
2019-11-08 23:22:48 +05:30
parent aae182a9f8
commit f71b940197
1 changed files with 43 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/history.vue
View File

@@ -37,12 +37,27 @@
Path Path
</label> </label>
</li> </li>
<transition name="smooth" v-if="show">
<li>
<ul>
<li @click="sort_by_duration()"> <li @click="sort_by_duration()">
<label> <label>
Duration Duration
</label> </label>
</li> </li>
<li>
<label>
Pre-script
</label>
</li>
</ul>
</li>
</transition>
<li></li> <li></li>
<button class="icon" @click="toggleCollapse()" v-tooltip="'Show more'">
<i class="material-icons" v-if="!show">first_page</i>
<i class="material-icons" v-else>last_page</i>
</button>
</ul> </ul>
<virtual-list <virtual-list
class="virtual-list" class="virtual-list"
@@ -98,12 +113,16 @@
<li> <li>
<input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" /> <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
</li> </li>
<transition name="smooth">
<div v-if="show" class="show-on-small-screen">
<li> <li>
<input aria-label="Duration" type="text" readonly :value="entry.duration" placeholder="No duration" /> <input aria-label="Duration" type="text" readonly :value="entry.duration" placeholder="No duration" />
</li> </li>
<li> <li>
<input aria-label="Pre Request Script" type="text" readonly :value="entry.preRequestScript" placeholder="No pre request script" /> <input aria-label="Pre Request Script" type="text" readonly :value="entry.preRequestScript" placeholder="No pre request script" />
</li> </li>
</div>
</transition>
<div class="show-on-small-screen"> <div class="show-on-small-screen">
<li> <li>
<button <button
@@ -182,6 +201,13 @@
} }
} }
.smooth-enter-active, .smooth-leave-active {
transition: all 0.2s;
}
.smooth-enter, .smooth-leave-to {
opacity: 0;
}
@media (max-width: 720px) { @media (max-width: 720px) {
.virtual-list.filled { .virtual-list.filled {
min-height: 200px; min-height: 200px;
@@ -214,7 +240,8 @@
reverse_sort_time: false, reverse_sort_time: false,
reverse_sort_status_code: false, reverse_sort_status_code: false,
reverse_sort_url: false, reverse_sort_url: false,
reverse_sort_path: false reverse_sort_path: false,
show: false
}; };
}, },
computed: { computed: {
@@ -348,6 +375,9 @@
}); });
this.history = byDuration; this.history = byDuration;
this.reverse_sort_duration = !this.reverse_sort_duration; this.reverse_sort_duration = !this.reverse_sort_duration;
},
toggleCollapse: function() {
this.show = !this.show
} }
} }
}; };