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>

172
components/history.vue
View File

@@ -13,67 +13,46 @@
<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> <li>
<button class="icon"> <button class="icon" @click="sort_by_label()">
<i class="material-icons">star_half</i> <i class="material-icons">label</i>
</button> </button>
</li> </li>
<li> <li>
<button class="icon"> <button class="icon" @click="sort_by_time()">
<i class="material-icons">history</i> <i class="material-icons">access_time</i>
</button> </button>
</li> </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> <li>
<ul> <button class="icon" @click="sort_by_status_code()">
<li> <i class="material-icons">assistant</i>
<button class="icon" @click="sort_by_duration()">
Duration (ms)
</button>
</li>
<li>
<button class="icon">
Pre-script
</button>
</li>
</ul>
</li>
</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> </button>
</li> </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> <li>
<button <button
class="icon" class="icon"
@@ -138,23 +117,23 @@
v-tooltip="entry.date" v-tooltip="entry.date"
/> />
</li> </li>
<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> </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-large-screen"> <div class="show-on-large-screen">
<li> <li>
<input <input
@@ -197,30 +176,37 @@
</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'" </button>
class="icon" <template slot="popover">
:id="'delete-button#' + index" <div>
@click="deleteHistory(entry)" <button
aria-label="Delete" v-tooltip="'Edit entry'"
> class="icon"
<i class="material-icons">delete</i> :id="'use-button#' + index"
</button> @click="useHistory(entry)"
</li> aria-label="Edit"
<li> >
<button <i class="material-icons">edit</i>
v-tooltip="'Edit entry'" <span>Use</span>
class="icon" </button>
:id="'use-button#' + index" </div>
@click="useHistory(entry)" <div>
aria-label="Edit" <button
> v-tooltip="'Delete entry'"
<i class="material-icons">edit</i> class="icon"
</button> :id="'delete-button#' + index"
</li> @click="deleteHistory(entry)"
</div> 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>

16
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="collection-tab">Collections</label>
<div class="tab">
<pw-section class="yellow" label="Collections" ref="collections">
<collections />
</pw-section>
</div>
<input id="history-tab" type="radio" name="side" />
<label for="history-tab">History</label> <label for="history-tab">History</label>
<div class="tab"> <div class="tab">
<history @useHistory="handleUseHistory" ref="historyComponent"></history> <history @useHistory="handleUseHistory" ref="historyComponent"></history>
</div> </div>
<input id="collection-tab" type="radio" name="side" />
<label for="collection-tab">Collections</label>
<div class="tab">
<pw-section class="yellow" label="Collections" ref="collections">
<collections />
</pw-section>
</div>
</section> </section>
</aside> </aside>