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

33
assets/css/styles.scss
View File

@@ -135,6 +135,9 @@ footer {
position: sticky; position: sticky;
top: 0; top: 0;
align-self: flex-start; align-self: flex-start;
}
.nav-first {
z-index: 1; z-index: 1;
} }
@@ -633,22 +636,6 @@ ol li {
background-color: var(--err-color); background-color: var(--err-color);
} }
fieldset#history {
.method-list-item {
position: relative;
span {
position: absolute;
top: 8px;
right: 8px;
font-family: 'Roboto Mono', monospace;
background-color: var(--bg-color);
padding: 4px 8px;
border-radius: 8px;
}
}
}
.align-left { .align-left {
text-align: left; text-align: left;
} }
@@ -697,7 +684,7 @@ fieldset#history {
position: fixed; position: fixed;
top: 12px; top: 12px;
right: 12px; right: 12px;
z-index: 1; z-index: 2;
#hidden-message { #hidden-message {
display: block; display: block;
@@ -711,14 +698,14 @@ section {
flex-wrap: wrap; flex-wrap: wrap;
} }
div.tab { .tab {
width: 100%; width: 100%;
order: 1; order: 1;
} }
input[type="file"], input[type="file"],
input[type="radio"], input[type="radio"],
div.tab { .tab {
display: none; display: none;
} }
@@ -739,7 +726,7 @@ input[type="radio"]:checked + label {
border-color: var(--fg-color); border-color: var(--fg-color);
} }
input[type="radio"]:checked + label + div.tab { input[type="radio"]:checked + label + .tab {
display: block; display: block;
} }
@@ -772,7 +759,7 @@ input[type="radio"]:checked + label + div.tab {
display: flex; display: flex;
width: 25%; width: 25%;
order: 2; order: 2;
height: calc(100vh - 80px) height: calc(100vh - 80px);
} }
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {
@@ -824,4 +811,8 @@ input[type="radio"]:checked + label + div.tab {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.inner-left {
margin-right: 0;
}
} }

47
components/collections/index.vue
View File

@@ -50,9 +50,8 @@ TODO:
</button> </button>
</div> </div>
<div> <div>
<button class="icon" @click="displayModalImportExport(true)"> <button class="icon" @click="displayModalImportExport(true)" v-tooltip="'Import / Export'">
<i class="material-icons">import_export</i> <i class="material-icons">import_export</i>
<span>Import / Export</span>
</button> </button>
<a <a
href="https://github.com/liyasthomas/postwoman/wiki/Collections" href="https://github.com/liyasthomas/postwoman/wiki/Collections"
@@ -66,25 +65,36 @@ TODO:
</div> </div>
</div> </div>
<ul> <virtual-list
<li v-for="(collection, index) in collections" :key="collection.name"> class="virtual-list"
<collection :class="{ filled: collections.length }"
v-bind:collection-index="index" :size="152"
v-bind:collection="collection" :remain="Math.min(5, collections.length)"
v-on:edit-collection="editCollection(collection, index)" >
v-on:add-folder="addFolder(collection, index)" <ul>
v-on:edit-folder="editFolder($event)" <li v-for="(collection, index) in collections" :key="collection.name">
v-on:edit-request="editRequest($event)" <collection
></collection> v-bind:collection-index="index"
</li> v-bind:collection="collection"
<li v-if="collections.length === 0"> v-on:edit-collection="editCollection(collection, index)"
<label>Collections are empty</label> v-on:add-folder="addFolder(collection, index)"
</li> v-on:edit-folder="editFolder($event)"
</ul> v-on:edit-request="editRequest($event)"
></collection>
</li>
<li v-if="collections.length === 0">
<label>Collections are empty</label>
</li>
</ul>
</virtual-list>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.virtual-list {
max-height: calc(100vh - 220px);
}
ul { ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -102,7 +112,8 @@ export default {
editCollection: () => import("./editCollection"), editCollection: () => import("./editCollection"),
editFolder: () => import("./editFolder"), editFolder: () => import("./editFolder"),
editRequest: () => import("./editRequest"), editRequest: () => import("./editRequest"),
importExportCollections: () => import("./importExportCollections") importExportCollections: () => import("./importExportCollections"),
VirtualList: () => import("vue-virtual-scroll-list")
}, },
data() { data() {
return { return {

256
components/history.vue
View File

@@ -1,74 +1,74 @@
<template> <template>
<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">
<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"> <div class="show-on-large-screen">
<li> <li id="filter-history">
<button class="icon" @click="sort_by_label()"> <input
<i class="material-icons">label</i> aria-label="Search"
</button> type="text"
</li> placeholder="search history"
<li> v-model="filterText"
<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> </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> </div>
</ul> </ul>
<virtual-list <virtual-list
class="virtual-list" class="virtual-list"
:class="{ filled: filteredHistory.length }" :class="{ filled: filteredHistory.length }"
:size="56" :size="185"
:remain="Math.min(5, filteredHistory.length)" :remain="Math.min(5, filteredHistory.length)"
> >
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry"> <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
@@ -84,6 +84,16 @@
<i class="material-icons" v-else>star_border</i> <i class="material-icons" v-else>star_border</i>
</button> </button>
</li> </li>
<li>
<input
aria-label="Label"
type="text"
readonly
:value="entry.label"
placeholder="No label"
/>
</li>
<!--
<li> <li>
<button <button
class="icon" class="icon"
@@ -97,26 +107,42 @@
<i class="material-icons" v-else>code</i> <i class="material-icons" v-else>code</i>
</button> </button>
</li> </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>
<div class="show-on-large-screen"> <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"> <li class="method-list-item">
<input <input
aria-label="Method" aria-label="Method"
@@ -155,7 +181,16 @@
</li> </li>
</div> </div>
<transition name="smooth"> <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> <li>
<input <input
aria-label="Duration" aria-label="Duration"
@@ -176,37 +211,6 @@
</li> </li>
</div> </div>
</transition> </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> </ul>
</virtual-list> </virtual-list>
<ul <ul
@@ -260,7 +264,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.virtual-list { .virtual-list {
min-height: 90px; max-height: calc(100vh - 284px);
[readonly] { [readonly] {
cursor: default; cursor: default;
@@ -298,6 +302,25 @@ ol li {
display: flex; 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) { @media (max-width: 720px) {
.virtual-list.filled { .virtual-list.filled {
min-height: 320px; min-height: 320px;
@@ -306,10 +329,6 @@ ol li {
.labels { .labels {
display: none; display: none;
} }
.entry {
border-bottom: 1px solid var(--brd-color);
}
} }
</style> </style>
@@ -318,6 +337,7 @@ 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));
export default { export default {
components: { components: {
"pw-section": () => import("./section"), "pw-section": () => import("./section"),
@@ -337,7 +357,7 @@ export default {
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 showMore: false
}; };
}, },
computed: { computed: {
@@ -478,7 +498,7 @@ export default {
this.reverse_sort_duration = !this.reverse_sort_duration; this.reverse_sort_duration = !this.reverse_sort_duration;
}, },
toggleCollapse() { toggleCollapse() {
this.show = !this.show; this.showMore = !this.showMore;
}, },
toggleStar(index) { toggleStar(index) {
this.history[index]["star"] = !this.history[index]["star"]; this.history[index]["star"] = !this.history[index]["star"];

2
pages/index.vue
View File

@@ -636,8 +636,6 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<br />
</div> </div>
<aside class="sticky-inner inner-right"> <aside class="sticky-inner inner-right">