⚡ UI optimizations
This commit is contained in:
liyasthomas
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user