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

⚡ Better History section

Browse Source
This commit is contained in:
liyasthomas
2019-11-09 14:31:07 +05:30
parent c2519bdb7d
commit 1b21187397
3 changed files with 82 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/styles.scss
View File

@@ -12,16 +12,23 @@ html {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 8px;
background-color: var(--bg-dark-color);
visibility: hidden;
&:hover {
visibility: visible;
}
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--fg-light-color); background-color: var(--fg-light-color);
border-radius: 8px; border-radius: 8px;
border: 2px solid var(--bg-color); border: 2px solid var(--bg-color);
}
::-webkit-scrollbar-thumb:hover { &:hover {
background-color: var(--fg-color); background-color: var(--fg-color);
}
} }
::placeholder { ::placeholder {
@@ -658,10 +665,6 @@ ol li {
background-color: var(--err-color); background-color: var(--err-color);
} }
.virtual-list::-webkit-scrollbar {
width: 0;
}
fieldset#history { fieldset#history {
.method-list-item { .method-list-item {
position: relative; position: relative;

161
components/history.vue
View File

@@ -2,110 +2,93 @@
<pw-section class="green" icon="history" label="History" ref="history"> <pw-section class="green" icon="history" label="History" ref="history">
<ul> <ul>
<li id="filter-history"> <li id="filter-history">
<input <input aria-label="Search" type="text" placeholder="search history" v-model="filterText" />
aria-label="Search"
type="text"
placeholder="search history"
v-model="filterText"
/>
</li> </li>
</ul> </ul>
<ul v-if="history.length !== 0"> <ul v-if="history.length !== 0">
<li></li> <div class="show-on-small-screen">
<li @click="sort_by_label()"> <li>
<label> <button class="icon">
<i class="material-icons">history</i>
</button>
</li>
</div>
<li>
<button class="icon" @click="sort_by_label()">
Label Label
</label> </button>
</li> </li>
<li @click="sort_by_time()"> <li>
<label> <button class="icon" @click="sort_by_time()">
Time Time
</label> </button>
</li> </li>
<li @click="sort_by_status_code()"> <li>
<label> <button class="icon" @click="sort_by_status_code()">
Status Status
</label> </button>
</li> </li>
<li @click="sort_by_url()"> <li>
<label> <button class="icon" @click="sort_by_url()">
URL URL
</label> </button>
</li> </li>
<li @click="sort_by_path()"> <li>
<label> <button class="icon" @click="sort_by_path()">
Path Path
</label> </button>
</li> </li>
<transition name="smooth" v-if="show"> <transition name="smooth" v-if="show">
<li> <li>
<ul> <ul>
<li @click="sort_by_duration()"> <li>
<label> <button class="icon" @click="sort_by_duration()">
Duration Duration
</label> </button>
</li> </li>
<li> <li>
<label> <button class="icon">
Pre-script Pre-script
</label> </button>
</li> </li>
</ul> </ul>
</li> </li>
</transition> </transition>
<li></li> <div class="show-on-small-screen">
<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>
</ul>
<virtual-list
class="virtual-list"
:class="{filled: filteredHistory.length}"
:size="56"
:remain="Math.min(5, filteredHistory.length)"
>
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<li> <li>
<button v-if="entry.usesScripts" <button class="icon" @click="enableHistoryClearing" v-tooltip="'Clear History'">
v-tooltip="'This entry used pre-request scripts'" <i class="material-icons">clear_all</i>
class="icon"
>
<i class="material-icons">code</i>
</button>
<button v-else
v-tooltip="'No pre-request scripts'"
class="icon"
>
<i class="material-icons">http</i>
</button> </button>
</li> </li>
<li> <li>
<input <button class="icon" @click="toggleCollapse()" v-tooltip="{ content: !show ? 'Show more' : 'Hide more'}">
aria-label="Label" <i class="material-icons" v-if="!show">first_page</i>
type="text" <i class="material-icons" v-else>last_page</i>
readonly </button>
:value="entry.label" </li>
placeholder="No label" </div>
/> </ul>
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="56" :remain="Math.min(5, filteredHistory.length)">
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<div class="show-on-small-screen">
<li>
<button v-if="entry.usesScripts" class="icon" v-tooltip="'This entry used pre-request scripts'">
<i class="material-icons">code</i>
</button>
<button v-else class="icon" v-tooltip="'No pre-request scripts'">
<i class="material-icons">http</i>
</button>
</li>
</div>
<li>
<input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label" />
</li> </li>
<li> <li>
<input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" /> <input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
</li> </li>
<li class="method-list-item"> <li class="method-list-item">
<input <input aria-label="Method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}" />
aria-label="Method" <span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
type="text"
readonly
:value="entry.method"
:class="findEntryStatus(entry).className"
:style="{'--status-code': entry.status}"
/>
<span
class="entry-status-code"
:class="findEntryStatus(entry).className"
:style="{'--status-code': entry.status}"
>{{entry.status}}</span>
</li> </li>
<li> <li>
<input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" /> <input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" />
@@ -125,24 +108,12 @@
</transition> </transition>
<div class="show-on-small-screen"> <div class="show-on-small-screen">
<li> <li>
<button <button v-tooltip="'Delete entry'" class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
v-tooltip="'Delete entry'"
class="icon"
:id="'delete-button#'+index"
@click="deleteHistory(entry)"
aria-label="Delete"
>
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
</button> </button>
</li> </li>
<li> <li>
<button <button v-tooltip="'Edit entry'" class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
v-tooltip="'Edit entry'"
class="icon"
:id="'use-button#'+index"
@click="useHistory(entry)"
aria-label="Edit"
>
<i class="material-icons">edit</i> <i class="material-icons">edit</i>
</button> </button>
</li> </li>
@@ -161,12 +132,7 @@
</ul> </ul>
<ul v-if="history.length !== 0"> <ul v-if="history.length !== 0">
<li v-if="!isClearingHistory"> <li v-if="!isClearingHistory">
<button <button class="icon" id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">
class="icon"
id="clear-history-button"
:disabled="history.length === 0"
@click="enableHistoryClearing"
>
<i class="material-icons">clear_all</i> <i class="material-icons">clear_all</i>
<span>Clear All</span> <span>Clear All</span>
</button> </button>
@@ -201,10 +167,13 @@
} }
} }
.smooth-enter-active, .smooth-leave-active { .smooth-enter-active,
.smooth-leave-active {
transition: all 0.2s; transition: all 0.2s;
} }
.smooth-enter, .smooth-leave-to {
.smooth-enter,
.smooth-leave-to {
opacity: 0; opacity: 0;
} }
@@ -213,12 +182,15 @@
min-height: 200px; min-height: 200px;
} }
} }
</style> </style>
<script> <script>
import VirtualList from "vue-virtual-scroll-list"; import VirtualList from "vue-virtual-scroll-list";
import section from "./section"; import section from "./section";
import { findStatusGroup } from "../pages/index"; import {
findStatusGroup
} from "../pages/index";
const updateOnLocalStorage = (propertyName, property) => const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property)); window.localStorage.setItem(propertyName, JSON.stringify(property));
@@ -381,4 +353,5 @@
} }
} }
}; };
</script> </script>

8
pages/index.vue
View File

@@ -64,7 +64,7 @@
v-model="preRequestScript" v-model="preRequestScript"
v-textarea-auto-height="preRequestScript" v-textarea-auto-height="preRequestScript"
spellcheck="false" spellcheck="false"
placeholder="pw.environment.set('variable', 'value');" placeholder="pw.env.set('variable', 'value');"
></textarea> ></textarea>
</li> </li>
</ul> </ul>
@@ -1185,11 +1185,12 @@ export default {
behavior: "smooth" behavior: "smooth"
}); });
}, },
handleUseHistory({ label, method, url, path, preRequestScript }) { handleUseHistory({ label, method, url, path, usesScripts, preRequestScript }) {
this.label = label; this.label = label;
this.method = method; this.method = method;
this.url = url; this.url = url;
this.path = path; this.path = path;
this.showPreRequestScript = usesScripts;
this.preRequestScript = preRequestScript; this.preRequestScript = preRequestScript;
this.scrollInto("request"); this.scrollInto("request");
}, },
@@ -1371,7 +1372,8 @@ export default {
method: this.method, method: this.method,
url: this.url, url: this.url,
path: this.path, path: this.path,
usesScripts: Boolean(this.preRequestScript) usesScripts: Boolean(this.preRequestScript),
preRequestScript: this.preRequestScript
}; };
this.$refs.historyComponent.addEntry(entry); this.$refs.historyComponent.addEntry(entry);
return; return;