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

⚡ UI optimizations

Browse Source
This commit is contained in:
liyasthomas
2019-11-17 05:03:57 +05:30
parent a40d67138b
commit bac0db10a6
7 changed files with 126 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/styles.scss
View File

@@ -765,12 +765,14 @@ input[type="radio"]:checked + label + div.tab {
.inner-left { .inner-left {
display: flex; display: flex;
order: 1; order: 1;
margin-right: 16px;
} }
.inner-right { .inner-right {
display: flex; display: flex;
width: 25%; width: 25%;
order: 2; order: 2;
height: calc(100vh - 80px)
} }
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {

42
components/collections/collection.vue
View File

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

32
components/collections/folder.vue
View File

@@ -9,30 +9,11 @@
<span>{{ folder.name }}</span> <span>{{ folder.name }}</span>
</button> </button>
</div> </div>
<div class="hide-on-small-screen"> <v-popover>
<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">
<button class="tooltip-target icon" v-tooltip="'More'"> <button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<template slot="popover"> <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> <div>
<button <button
class="icon" class="icon"
@@ -44,6 +25,17 @@
<span>Edit</span> <span>Edit</span>
</button> </button>
</div> </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> </template>
</v-popover> </v-popover>
</div> </div>

36
components/collections/request.vue
View File

@@ -6,34 +6,11 @@
<span>{{ request.name }}</span> <span>{{ request.name }}</span>
</button> </button>
</div> </div>
<div class="hide-on-small-screen"> <v-popover>
<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">
<button class="tooltip-target icon" v-tooltip="'More'"> <button class="tooltip-target icon" v-tooltip="'More'">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<template slot="popover"> <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> <div>
<button <button
class="icon" class="icon"
@@ -45,6 +22,17 @@
<span>Edit</span> <span>Edit</span>
</button> </button>
</div> </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> </template>
</v-popover> </v-popover>
</div> </div>

70
components/history.vue
View File

@@ -12,40 +12,29 @@
</ul> </ul>
<ul v-if="history.length !== 0" class="labels"> <ul v-if="history.length !== 0" class="labels">
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<li>
<button class="icon">
<i class="material-icons">star_half</i>
</button>
</li>
<li>
<button class="icon">
<i class="material-icons">history</i>
</button>
</li>
</div>
<li> <li>
<button class="icon" @click="sort_by_label()"> <button class="icon" @click="sort_by_label()">
Label <i class="material-icons">label</i>
</button> </button>
</li> </li>
<li> <li>
<button class="icon" @click="sort_by_time()"> <button class="icon" @click="sort_by_time()">
Time <i class="material-icons">access_time</i>
</button> </button>
</li> </li>
<li> <li>
<button class="icon" @click="sort_by_status_code()"> <button class="icon" @click="sort_by_status_code()">
Status <i class="material-icons">assistant</i>
</button> </button>
</li> </li>
<li> <li>
<button class="icon" @click="sort_by_url()"> <button class="icon" @click="sort_by_url()">
URL <i class="material-icons">language</i>
</button> </button>
</li> </li>
<li> <li>
<button class="icon" @click="sort_by_path()"> <button class="icon" @click="sort_by_path()">
Path <i class="material-icons">http</i>
</button> </button>
</li> </li>
<transition name="smooth" v-if="show"> <transition name="smooth" v-if="show">
@@ -53,27 +42,17 @@
<ul> <ul>
<li> <li>
<button class="icon" @click="sort_by_duration()"> <button class="icon" @click="sort_by_duration()">
Duration (ms) <i class="material-icons">timer</i>
</button> </button>
</li> </li>
<li> <li>
<button class="icon"> <button class="icon">
Pre-script <i class="material-icons">code</i>
</button> </button>
</li> </li>
</ul> </ul>
</li> </li>
</transition> </transition>
<div class="show-on-large-screen">
<li>
<button
class="icon"
@click="enableHistoryClearing"
v-tooltip="'Clear History'"
>
<i class="material-icons">clear_all</i>
</button>
</li>
<li> <li>
<button <button
class="icon" class="icon"
@@ -138,7 +117,6 @@
v-tooltip="entry.date" v-tooltip="entry.date"
/> />
</li> </li>
</div>
<li class="method-list-item"> <li class="method-list-item">
<input <input
aria-label="Method" aria-label="Method"
@@ -155,6 +133,7 @@
>{{ entry.status }}</span >{{ entry.status }}</span
> >
</li> </li>
</div>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<li> <li>
<input <input
@@ -197,19 +176,12 @@
</li> </li>
</div> </div>
</transition> </transition>
<div class="show-on-large-screen"> <v-popover>
<li> <button class="tooltip-target icon" v-tooltip="'More'">
<button <i class="material-icons">more_vert</i>
v-tooltip="'Delete entry'"
class="icon"
:id="'delete-button#' + index"
@click="deleteHistory(entry)"
aria-label="Delete"
>
<i class="material-icons">delete</i>
</button> </button>
</li> <template slot="popover">
<li> <div>
<button <button
v-tooltip="'Edit entry'" v-tooltip="'Edit entry'"
class="icon" class="icon"
@@ -218,9 +190,23 @@
aria-label="Edit" aria-label="Edit"
> >
<i class="material-icons">edit</i> <i class="material-icons">edit</i>
<span>Use</span>
</button> </button>
</li>
</div> </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

18
layouts/default.vue
View File

@@ -137,16 +137,6 @@
<i class="material-icons">cloud_download</i> <i class="material-icons">cloud_download</i>
</a> </a>
</li> </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> </ul>
</nav> </nav>
</div> </div>
@@ -239,22 +229,22 @@
<br /> <br />
<div> <div>
<label>Send Request</label> <label>Send Request</label>
<kbd>Ctrl G</kbd> <kbd>⌘ G</kbd>
</div> </div>
<br /> <br />
<div> <div>
<label>Save to Collections</label> <label>Save to Collections</label>
<kbd>Ctrl S</kbd> <kbd>⌘ S</kbd>
</div> </div>
<br /> <br />
<div> <div>
<label>Copy Request Link</label> <label>Copy Request Link</label>
<kbd>Ctrl K</kbd> <kbd>⌘ K</kbd>
</div> </div>
<br /> <br />
<div> <div>
<label>Reset Request</label> <label>Reset Request</label>
<kbd>Ctrl L</kbd> <kbd>⌘ L</kbd>
</div> </div>
<br /> <br />
</div> </div>

12
pages/index.vue
View File

@@ -642,18 +642,18 @@
<aside class="sticky-inner inner-right"> <aside class="sticky-inner inner-right">
<section> <section>
<input id="collection-tab" type="radio" name="side" checked="checked" /> <input id="history-tab" type="radio" name="side" checked="checked" />
<label for="history-tab">History</label>
<div class="tab">
<history @useHistory="handleUseHistory" ref="historyComponent"></history>
</div>
<input id="collection-tab" type="radio" name="side" />
<label for="collection-tab">Collections</label> <label for="collection-tab">Collections</label>
<div class="tab"> <div class="tab">
<pw-section class="yellow" label="Collections" ref="collections"> <pw-section class="yellow" label="Collections" ref="collections">
<collections /> <collections />
</pw-section> </pw-section>
</div> </div>
<input id="history-tab" type="radio" name="side" />
<label for="history-tab">History</label>
<div class="tab">
<history @useHistory="handleUseHistory" ref="historyComponent"></history>
</div>
</section> </section>
</aside> </aside>