⚡ UI optimizations
This commit is contained in:
liyasthomas
@@ -765,12 +765,14 @@ input[type="radio"]:checked + label + div.tab {
|
||||
.inner-left {
|
||||
display: flex;
|
||||
order: 1;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.inner-right {
|
||||
display: flex;
|
||||
width: 25%;
|
||||
order: 2;
|
||||
height: calc(100vh - 80px)
|
||||
}
|
||||
|
||||
@media (max-width: $responsiveWidth) {
|
||||
|
||||
@@ -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,11 @@
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="removeCollection"
|
||||
v-tooltip="'Delete collection'"
|
||||
v-close-popover
|
||||
@click="$emit('add-folder')"
|
||||
v-tooltip="'New Folder'"
|
||||
>
|
||||
<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 +38,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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -13,67 +13,46 @@
|
||||
<ul v-if="history.length !== 0" class="labels">
|
||||
<div class="show-on-large-screen">
|
||||
<li>
|
||||
<button class="icon">
|
||||
<i class="material-icons">star_half</i>
|
||||
<button class="icon" @click="sort_by_label()">
|
||||
<i class="material-icons">label</i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon">
|
||||
<i class="material-icons">history</i>
|
||||
<button class="icon" @click="sort_by_time()">
|
||||
<i class="material-icons">access_time</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)
|
||||
</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 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"
|
||||
@@ -138,23 +117,23 @@
|
||||
v-tooltip="entry.date"
|
||||
/>
|
||||
</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>
|
||||
<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">
|
||||
<li>
|
||||
<input
|
||||
@@ -197,30 +176,37 @@
|
||||
</li>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="show-on-large-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>
|
||||
<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>
|
||||
</virtual-list>
|
||||
<ul
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -642,18 +642,18 @@
|
||||
|
||||
<aside class="sticky-inner inner-right">
|
||||
<section>
|
||||
<input id="collection-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" />
|
||||
<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>
|
||||
<div class="tab">
|
||||
<pw-section class="yellow" label="Collections" ref="collections">
|
||||
<collections />
|
||||
</pw-section>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user