feat: refactor buttons
This commit is contained in:
Liyas Thomas
GitHub
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<li>
|
||||
<input
|
||||
data-testid="'url'"
|
||||
@@ -10,72 +10,64 @@
|
||||
:value="entry.url"
|
||||
:placeholder="$t('empty_req_name')"
|
||||
class="input cursor-pointer text-sm bg-transparent"
|
||||
@click="$emit('use-entry')"
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
</li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
||||
}"
|
||||
data-testid="star_button"
|
||||
class="icon button"
|
||||
:class="{ stared: entry.star }"
|
||||
@click="$emit('toggle-star')"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="$emit('toggle-star')"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: expand ? $t('hide_more') : $t('show_more'),
|
||||
}"
|
||||
data-testid="query_expand"
|
||||
class="icon button"
|
||||
@click="expand = !expand"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ expand ? "unfold_less" : "unfold_more" }}
|
||||
</i>
|
||||
</button>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
@click.native="expand = !expand"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ expand ? "unfold_less" : "unfold_more" }}
|
||||
</i>
|
||||
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('options')"
|
||||
data-testid="options"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="restore_history_entry"
|
||||
class="icon button"
|
||||
:aria-label="$t('restore')"
|
||||
@click="$emit('use-entry')"
|
||||
>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="delete_history_entry"
|
||||
class="icon button"
|
||||
:aria-label="$t('delete')"
|
||||
@click="$emit('delete-entry')"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('delete-entry')"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<li data-testid="'query'">
|
||||
<input
|
||||
v-for="(line, index) in query"
|
||||
@@ -89,7 +81,7 @@
|
||||
</li>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="showMore" class="show-on-large-screen">
|
||||
<div v-if="showMore" class="flex">
|
||||
<li>
|
||||
<input
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AppSection label="history">
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<input
|
||||
v-model="filterText"
|
||||
aria-label="Search"
|
||||
@@ -10,7 +10,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="divide-y virtual-list divide-dashed divide-divider"
|
||||
class="divide-y overflow-auto divide-dashed divide-divider"
|
||||
:class="{ filled: filteredHistory.length }"
|
||||
>
|
||||
<ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
|
||||
@@ -44,49 +44,42 @@
|
||||
</p>
|
||||
<div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
|
||||
<div v-if="!isClearingHistory" class="row-wrapper">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="clear_history"
|
||||
class="icon button"
|
||||
:disabled="history.length === 0"
|
||||
@click="enableHistoryClearing"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
<span>{{ $t("clear_all") }}</span>
|
||||
</button>
|
||||
<button
|
||||
@click.native="enableHistoryClearing"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
<span>{{ $t("clear_all") }}</span>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
|
||||
class="icon button"
|
||||
@click="toggleCollapse()"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !showMore ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
@click.native="toggleCollapse()"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !showMore ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</div>
|
||||
<div v-else class="row-wrapper">
|
||||
<p class="info">
|
||||
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
|
||||
</p>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('yes')"
|
||||
data-testid="confirm_clear_history"
|
||||
class="icon button"
|
||||
@click="clearHistory"
|
||||
>
|
||||
<i class="material-icons">done</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="clearHistory"
|
||||
/>
|
||||
<i class="material-icons">done</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('no')"
|
||||
data-testid="reject_clear_history"
|
||||
class="icon button"
|
||||
@click="disableHistoryClearing"
|
||||
>
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
@click.native="disableHistoryClearing"
|
||||
/>
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -175,28 +168,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 270px);
|
||||
|
||||
[readonly] {
|
||||
@apply cursor-default;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply flex-col;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.virtual-list.filled {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.labels {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<span
|
||||
class="p-2 m-2 truncate inline-flex cursor-pointer items-center text-sm"
|
||||
:class="entryStatus.className"
|
||||
:style="{ '--status-code': entry.status }"
|
||||
@click="$emit('use-entry')"
|
||||
@click.native="$emit('use-entry')"
|
||||
>
|
||||
{{ `${entry.method} \xA0 • \xA0 ${entry.status}` }}
|
||||
</span>
|
||||
@@ -17,28 +17,26 @@
|
||||
:value="entry.name"
|
||||
:placeholder="$t('empty_req_name')"
|
||||
class="input cursor-pointer text-sm bg-transparent"
|
||||
@click="$emit('use-entry')"
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
</li>
|
||||
<span>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
||||
}"
|
||||
data-testid="star_button"
|
||||
class="icon button"
|
||||
:class="{ stared: entry.star }"
|
||||
@click="$emit('toggle-star')"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</button>
|
||||
@click.native="$emit('toggle-star')"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</span>
|
||||
<!-- <li>
|
||||
<button
|
||||
class="icon button"
|
||||
<ButtonSecondary
|
||||
|
||||
v-tippy="{ theme: 'tooltip' }" title="{
|
||||
content: !entry.usesScripts
|
||||
? 'No pre-request script'
|
||||
@@ -48,43 +46,37 @@
|
||||
<i class="material-icons">
|
||||
{{ !entry.usesScripts ? "http" : "code" }}
|
||||
</i>
|
||||
</button>
|
||||
|
||||
</li> -->
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('options')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="restore_history_entry"
|
||||
class="icon button"
|
||||
:aria-label="$t('edit')"
|
||||
@click="$emit('use-entry')"
|
||||
>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="delete_history_entry"
|
||||
class="icon button"
|
||||
:aria-label="$t('delete')"
|
||||
@click="$emit('delete-entry')"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('delete-entry')"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<li>
|
||||
<input
|
||||
:aria-label="$t('url')"
|
||||
@@ -97,7 +89,7 @@
|
||||
</li>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="showMore" class="show-on-large-screen">
|
||||
<div v-if="showMore" class="flex">
|
||||
<li>
|
||||
<input
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
|
||||
Reference in New Issue
Block a user