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

✨ Moved History and Collection sections to right side bar

Browse Source
This commit is contained in:
liyasthomas
2019-11-17 08:25:07 +05:30
parent bac0db10a6
commit 3ae9c49029
4 changed files with 180 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
components/history.vue
View File

@@ -1,74 +1,74 @@
<template>
<pw-section class="green" icon="history" label="History" ref="history">
<ul>
<li id="filter-history">
<input
aria-label="Search"
type="text"
placeholder="search history"
v-model="filterText"
/>
</li>
</ul>
<ul v-if="history.length !== 0" class="labels">
<div class="show-on-large-screen">
<li>
<button class="icon" @click="sort_by_label()">
<i class="material-icons">label</i>
</button>
</li>
<li>
<button class="icon" @click="sort_by_time()">
<i class="material-icons">access_time</i>
</button>
</li>
<li>
<button class="icon" @click="sort_by_status_code()">
<i class="material-icons">assistant</i>
</button>
</li>
<li>
<button class="icon" @click="sort_by_url()">
<i class="material-icons">language</i>
</button>
</li>
<li>
<button class="icon" @click="sort_by_path()">
<i class="material-icons">http</i>
</button>
</li>
<transition name="smooth" v-if="show">
<li>
<ul>
<li>
<button class="icon" @click="sort_by_duration()">
<i class="material-icons">timer</i>
</button>
</li>
<li>
<button class="icon">
<i class="material-icons">code</i>
</button>
</li>
</ul>
</li>
</transition>
<li>
<button
class="icon"
@click="toggleCollapse()"
v-tooltip="{ content: !show ? 'Show more' : 'Hide more' }"
>
<i class="material-icons" v-if="!show">first_page</i>
<i class="material-icons" v-else>last_page</i>
</button>
<li id="filter-history">
<input
aria-label="Search"
type="text"
placeholder="search history"
v-model="filterText"
/>
</li>
<v-popover>
<button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="sort_by_label()" v-close-popover>
<i class="material-icons">label</i>
<span>Sort by label</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_time()" v-close-popover>
<i class="material-icons">access_time</i>
<span>Sort by time</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_status_code()" v-close-popover>
<i class="material-icons">assistant</i>
<span>Sort by status</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_url()" v-close-popover>
<i class="material-icons">language</i>
<span>Sort by url</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_path()" v-close-popover>
<i class="material-icons">timeline</i>
<span>Sort by path</span>
</button>
</div>
<div v-if="showMore">
<button class="icon" @click="sort_by_duration()" v-close-popover>
<i class="material-icons">timer</i>
<span>Sort by duration</span>
</button>
</div>
<div>
<button
class="icon"
@click="toggleCollapse()"
>
<i class="material-icons" v-if="!showMore">first_page</i>
<i class="material-icons" v-else>last_page</i>
<span>{{ !showMore ? 'Show more' : 'Hide more' }}</span>
</button>
</div>
</template>
</v-popover>
</div>
</ul>
<virtual-list
class="virtual-list"
:class="{ filled: filteredHistory.length }"
:size="56"
:size="185"
:remain="Math.min(5, filteredHistory.length)"
>
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
@@ -84,6 +84,16 @@
<i class="material-icons" v-else>star_border</i>
</button>
</li>
<li>
<input
aria-label="Label"
type="text"
readonly
:value="entry.label"
placeholder="No label"
/>
</li>
<!--
<li>
<button
class="icon"
@@ -97,26 +107,42 @@
<i class="material-icons" v-else>code</i>
</button>
</li>
-->
<v-popover>
<li>
<button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i>
</button>
</li>
<template slot="popover">
<div>
<button
class="icon"
:id="'use-button#' + index"
@click="useHistory(entry)"
aria-label="Edit"
v-close-popover
>
<i class="material-icons">edit</i>
<span>Use</span>
</button>
</div>
<div>
<button
class="icon"
:id="'delete-button#' + index"
@click="deleteHistory(entry)"
aria-label="Delete"
v-close-popover
>
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
</template>
</v-popover>
</div>
<div class="show-on-large-screen">
<li>
<input
aria-label="Label"
type="text"
readonly
:value="entry.label"
placeholder="No label"
/>
</li>
<li>
<input
aria-label="Time"
type="text"
readonly
:value="entry.time"
v-tooltip="entry.date"
/>
</li>
<li class="method-list-item">
<input
aria-label="Method"
@@ -155,7 +181,16 @@
</li>
</div>
<transition name="smooth">
<div v-if="show" class="show-on-large-screen">
<div v-if="showMore" class="show-on-large-screen">
<li>
<input
aria-label="Time"
type="text"
readonly
:value="entry.time"
v-tooltip="entry.date"
/>
</li>
<li>
<input
aria-label="Duration"
@@ -176,37 +211,6 @@
</li>
</div>
</transition>
<v-popover>
<button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-tooltip="'Edit entry'"
class="icon"
:id="'use-button#' + index"
@click="useHistory(entry)"
aria-label="Edit"
>
<i class="material-icons">edit</i>
<span>Use</span>
</button>
</div>
<div>
<button
v-tooltip="'Delete entry'"
class="icon"
:id="'delete-button#' + index"
@click="deleteHistory(entry)"
aria-label="Delete"
>
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
</template>
</v-popover>
</ul>
</virtual-list>
<ul
@@ -260,7 +264,7 @@
<style scoped lang="scss">
.virtual-list {
min-height: 90px;
max-height: calc(100vh - 284px);
[readonly] {
cursor: default;
@@ -297,7 +301,26 @@ ul li,
ol li {
display: flex;
}
.method-list-item {
position: relative;
span {
position: absolute;
top: 10px;
right: 8px;
font-family: 'Roboto Mono', monospace;
background-color: var(--bg-color);
padding: 2px 8px;
border-radius: 8px;
}
}
.entry {
border-bottom: 1px solid var(--brd-color);
padding: 16px 0;
}
@media (max-width: 720px) {
.virtual-list.filled {
min-height: 320px;
@@ -306,10 +329,6 @@ ol li {
.labels {
display: none;
}
.entry {
border-bottom: 1px solid var(--brd-color);
}
}
</style>
@@ -318,6 +337,7 @@ import { findStatusGroup } from "../pages/index";
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property));
export default {
components: {
"pw-section": () => import("./section"),
@@ -337,7 +357,7 @@ export default {
reverse_sort_status_code: false,
reverse_sort_url: false,
reverse_sort_path: false,
show: false
showMore: false
};
},
computed: {
@@ -478,7 +498,7 @@ export default {
this.reverse_sort_duration = !this.reverse_sort_duration;
},
toggleCollapse() {
this.show = !this.show;
this.showMore = !this.showMore;
},
toggleStar(index) {
this.history[index]["star"] = !this.history[index]["star"];