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

App ui (#309)

Browse Source 
App ui
This commit is contained in:
Liyas Thomas
2019-11-17 15:13:48 +05:30
committed by GitHub
parent a8f6df16a8 ce8e2c6684
commit 3ba2aa922f
8 changed files with 945 additions and 940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
assets/css/styles.scss
View File

@@ -1,4 +1,4 @@
$responsiveWidth: 720px;
$responsiveWidth: 768px;
html {
scroll-behavior: smooth;
@@ -78,7 +78,7 @@ a {
header,
footer {
&>div {
& > div {
display: flex;
padding: 16px;
width: 100%;
@@ -127,13 +127,17 @@ footer {
color: var(--ac-color);
}
.nav-first {
.nav-first,
.sticky-inner {
display: flex;
order: 1;
flex-flow: column;
position: sticky;
top: 0;
align-self: flex-start;
}
.nav-first {
z-index: 1;
}
@@ -521,7 +525,7 @@ input[type="checkbox"] {
display: none;
&,
&+label {
& + label {
vertical-align: middle;
cursor: pointer;
@@ -540,7 +544,7 @@ input[type="checkbox"] {
}
}
&:checked+label:before {
&:checked + label:before {
background-color: var(--ac-color);
border-color: var(--ac-color);
color: var(--act-color);
@@ -600,6 +604,10 @@ ol li {
display: none;
}
.show-on-large-screen {
display: inline-flex;
}
#installPWA {
display: none;
}
@@ -628,22 +636,6 @@ ol li {
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 {
text-align: left;
}
@@ -692,7 +684,7 @@ fieldset#history {
position: fixed;
top: 12px;
right: 12px;
z-index: 1;
z-index: 2;
#hidden-message {
display: block;
@@ -706,18 +698,18 @@ section {
flex-wrap: wrap;
}
div.tab {
.tab {
width: 100%;
order: 1;
}
input[type="file"],
input[type="radio"],
div.tab {
.tab {
display: none;
}
input[type="radio"]+label {
input[type="radio"] + label {
padding: 8px 16px;
border-bottom: 2px solid transparent;
cursor: pointer;
@@ -730,11 +722,11 @@ input[type="radio"]+label {
}
}
input[type="radio"]:checked+label {
input[type="radio"]:checked + label {
border-color: var(--fg-color);
}
input[type="radio"]:checked+label+div.tab {
input[type="radio"]:checked + label + .tab {
display: block;
}
@@ -751,7 +743,29 @@ input[type="radio"]:checked+label+div.tab {
color: inherit !important;
}
.page-columns {
display: flex;
flex: 1;
flex-flow: column;
}
.inner-left {
display: flex;
order: 1;
margin-right: 16px;
}
.inner-right {
display: flex;
width: 25%;
order: 2;
}
@media (max-width: $responsiveWidth) {
.content {
flex-flow: column;
}
.columns {
flex-flow: column;
}
@@ -791,4 +805,14 @@ input[type="radio"]:checked+label+div.tab {
.show-on-small-screen {
display: inline-flex;
}
.sticky-inner {
position: relative;
width: 100%;
}
.inner-left {
order: 0;
margin-right: 0;
}
}

41
components/collections/collection.vue
View File

@@ -9,30 +9,7 @@
<span>{{ collection.name }}</span>
</button>
</div>
<div class="hide-on-small-screen">
<button
class="icon"
@click="removeCollection"
v-tooltip="'Delete collection'"
>
<i class="material-icons">delete</i>
</button>
<button
class="icon"
@click="$emit('edit-collection')"
v-tooltip="'Edit collection'"
>
<i class="material-icons">create</i>
</button>
<button
class="icon"
@click="$emit('add-folder')"
v-tooltip="'New Folder'"
>
<i class="material-icons">create_new_folder</i>
</button>
</div>
<v-popover class="hide-on-large-screen">
<v-popover>
<button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i>
</button>
@@ -40,12 +17,12 @@
<div>
<button
class="icon"
@click="removeCollection"
v-tooltip="'Delete collection'"
@click="$emit('add-folder')"
v-tooltip="'New Folder'"
v-close-popover
>
<i class="material-icons">delete</i>
<span>Delete</span>
<i class="material-icons">create_new_folder</i>
<span>New folder</span>
</button>
</div>
<div>
@@ -62,12 +39,12 @@
<div>
<button
class="icon"
@click="$emit('add-folder')"
v-tooltip="'New Folder'"
@click="removeCollection"
v-tooltip="'Delete collection'"
v-close-popover
>
<i class="material-icons">create_new_folder</i>
<span>New folder</span>
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
</template>

32
components/collections/folder.vue
View File

@@ -9,30 +9,11 @@
<span>{{ folder.name }}</span>
</button>
</div>
<div class="hide-on-small-screen">
<button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
<i class="material-icons">delete</i>
</button>
<button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
<i class="material-icons">edit</i>
</button>
</div>
<v-popover class="hide-on-large-screen">
<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="removeFolder"
v-tooltip="'Delete folder'"
v-close-popover
>
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
<div>
<button
class="icon"
@@ -44,6 +25,17 @@
<span>Edit</span>
</button>
</div>
<div>
<button
class="icon"
@click="removeFolder"
v-tooltip="'Delete folder'"
v-close-popover
>
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
</template>
</v-popover>
</div>

47
components/collections/index.vue
View File

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

36
components/collections/request.vue
View File

@@ -6,34 +6,11 @@
<span>{{ request.name }}</span>
</button>
</div>
<div class="hide-on-small-screen">
<button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
<i class="material-icons">delete</i>
</button>
<button
class="icon"
@click="$emit('edit-request')"
v-tooltip="'Edit request'"
>
<i class="material-icons">edit</i>
</button>
</div>
<v-popover class="hide-on-large-screen">
<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="removeRequest"
v-tooltip="'Delete request'"
v-close-popover
>
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
<div>
<button
class="icon"
@@ -45,6 +22,17 @@
<span>Edit</span>
</button>
</div>
<div>
<button
class="icon"
@click="removeRequest"
v-tooltip="'Delete request'"
v-close-popover
>
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
</div>
</template>
</v-popover>
</div>

320
components/history.vue
View File

@@ -1,110 +1,97 @@
<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-small-screen">
<li>
<button class="icon">
<i class="material-icons">star_half</i>
</button>
<div class="show-on-large-screen">
<li id="filter-history">
<input
aria-label="Search"
type="text"
placeholder="search history"
v-model="filterText"
/>
</li>
<li>
<button class="icon">
<i class="material-icons">history</i>
</button>
</li>
</div>
<li>
<button class="icon" @click="sort_by_label()">
Label
</button>
</li>
<li>
<button class="icon" @click="sort_by_time()">
Time
</button>
</li>
<li>
<button class="icon" @click="sort_by_status_code()">
Status
</button>
</li>
<li>
<button class="icon" @click="sort_by_url()">
URL
</button>
</li>
<li>
<button class="icon" @click="sort_by_path()">
Path
</button>
</li>
<transition name="smooth" v-if="show">
<li>
<ul>
<li>
<button class="icon" @click="sort_by_duration()">
Duration (ms)
<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>
</li>
<li>
<button class="icon">
Pre-script
</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>
</li>
</ul>
</li>
</transition>
<div class="show-on-small-screen">
<li>
<button
class="icon"
@click="enableHistoryClearing"
v-tooltip="'Clear History'"
>
<i class="material-icons">clear_all</i>
</button>
</li>
<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>
</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">
<div class="show-on-small-screen">
<div class="show-on-large-screen">
<button
class="icon"
:class="{ stared: entry.star }"
@click="toggleStar(index)"
v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star' }"
>
<i class="material-icons" v-if="entry.star">star</i>
<i class="material-icons" v-else>star_border</i>
</button>
<li>
<button
class="icon"
:class="{ stared: entry.star }"
@click="toggleStar(index)"
v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star' }"
>
<i class="material-icons" v-if="entry.star">star</i>
<i class="material-icons" v-else>star_border</i>
</button>
<input
aria-label="Label"
type="text"
readonly
:value="entry.label"
placeholder="No label"
/>
</li>
<!--
<li>
<button
class="icon"
@@ -118,44 +105,58 @@
<i class="material-icons" v-else>code</i>
</button>
</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"
: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-small-screen">
<li>
<div class="show-on-large-screen">
<li class="method-list-item">
<input
aria-label="Label"
aria-label="Method"
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"
: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>
</div>
<li class="method-list-item">
<input
aria-label="Method"
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>
<div class="show-on-small-screen">
<div class="show-on-large-screen">
<li>
<input
aria-label="URL"
@@ -176,7 +177,16 @@
</li>
</div>
<transition name="smooth">
<div v-if="show" class="show-on-small-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"
@@ -197,30 +207,6 @@
</li>
</div>
</transition>
<div class="show-on-small-screen">
<li>
<button
v-tooltip="'Delete entry'"
class="icon"
:id="'delete-button#' + index"
@click="deleteHistory(entry)"
aria-label="Delete"
>
<i class="material-icons">delete</i>
</button>
</li>
<li>
<button
v-tooltip="'Edit entry'"
class="icon"
:id="'use-button#' + index"
@click="useHistory(entry)"
aria-label="Edit"
>
<i class="material-icons">edit</i>
</button>
</li>
</div>
</ul>
</virtual-list>
<ul
@@ -274,7 +260,7 @@
<style scoped lang="scss">
.virtual-list {
min-height: 90px;
max-height: calc(100vh - 284px);
[readonly] {
cursor: default;
@@ -302,6 +288,35 @@ label {
color: #f8e81c !important;
}
ul,
ol {
flex-direction: column;
}
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;
@@ -310,10 +325,6 @@ label {
.labels {
display: none;
}
.entry {
border-bottom: 1px solid var(--brd-color);
}
}
</style>
@@ -322,6 +333,7 @@ import { findStatusGroup } from "../pages/index";
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property));
export default {
components: {
"pw-section": () => import("./section"),
@@ -341,7 +353,7 @@ export default {
reverse_sort_status_code: false,
reverse_sort_url: false,
reverse_sort_path: false,
show: false
showMore: false
};
},
computed: {
@@ -482,7 +494,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"];

18
layouts/default.vue
View File

@@ -137,16 +137,6 @@
<i class="material-icons">cloud_download</i>
</a>
</li>
<li>
<a href="#collections" v-tooltip.right="'Collections'">
<i class="material-icons">folder_special</i>
</a>
</li>
<li>
<a href="#history" v-tooltip.right="'History'">
<i class="material-icons">watch_later</i>
</a>
</li>
</ul>
</nav>
</div>
@@ -239,22 +229,22 @@
<br />
<div>
<label>Send Request</label>
<kbd>Ctrl G</kbd>
<kbd>⌘ G</kbd>
</div>
<br />
<div>
<label>Save to Collections</label>
<kbd>Ctrl S</kbd>
<kbd>⌘ S</kbd>
</div>
<br />
<div>
<label>Copy Request Link</label>
<kbd>Ctrl K</kbd>
<kbd>⌘ K</kbd>
</div>
<br />
<div>
<label>Reset Request</label>
<kbd>Ctrl L</kbd>
<kbd>⌘ L</kbd>
</div>
<br />
</div>

1313
pages/index.vue
View File

File diff suppressed because it is too large Load Diff