fix: button icons

This commit is contained in:
Liyas Thomas
2021-07-05 12:56:00 +00:00
committed by GitHub
parent 069b26bdc4
commit fde5b0717d
52 changed files with 463 additions and 759 deletions

View File

@@ -101,14 +101,6 @@ a {
}
}
button {
@apply font-medium;
@apply outline-none;
@apply focus-visible:ring;
@apply focus-visible:ring-inset;
@apply focus-visible:ring-accent;
}
.tippy-popper {
.tooltip-theme {
@apply bg-secondary;
@@ -179,32 +171,6 @@ pre.ace_editor {
@apply resize-none;
}
.select-wrapper {
@apply relative;
@apply w-full;
pre,
input {
@apply cursor-pointer;
}
.trigger {
@apply w-full;
}
&::after {
@apply inline-block;
@apply absolute;
@apply pointer-events-none;
@apply font-icon;
@apply text-secondaryLight;
content: "\e313";
top: 16px;
right: 16px;
}
}
select {
@apply cursor-pointer;
@apply appearance-none;
@@ -216,10 +182,6 @@ select {
}
}
option {
@apply bg-primary;
}
input[type="checkbox"] {
@apply hidden;
@@ -258,25 +220,6 @@ input[type="checkbox"] {
@apply text-secondaryLight;
@apply fill-current;
@apply cursor-not-allowed;
&.icon {
@apply text-error;
@apply fill-current;
}
}
.row-wrapper {
@apply flex flex-1 flex-row;
@apply items-center;
@apply justify-between;
span,
div {
@apply inline-flex;
@apply flex-nowrap;
@apply items-center;
@apply justify-center;
}
}
.info-response {
@@ -322,128 +265,30 @@ input[type="checkbox"] {
}
}
#send {
@apply whitespace-nowrap;
@apply outline-none;
@apply border-none;
.toasted-container {
margin-bottom: 68px;
&.show {
@apply flex;
@apply fixed;
@apply shadow-lg;
@apply rounded-lg;
bottom: 86px;
left: 50%;
z-index: 10001;
transform: translateX(-50%);
}
}
section {
@apply flex;
@apply rounded-lg;
@apply w-full;
}
.toasted-container .toasted {
.toasted {
justify-content: space-between !important;
}
.toasted.info {
&.info {
background-color: var(--accent-color) !important;
color: var(--primary-color) !important;
font-weight: 700 !important;
}
.toasted.bubble .action {
&.bubble .action {
color: inherit !important;
}
.toasted .action {
.action {
margin-left: auto !important;
}
.page-columns {
@apply flex flex-1 flex-col;
}
.inner-left {
@apply flex;
@apply order-1;
}
.inner-right {
--width: 33%;
--ml: 1rem;
@apply flex;
@apply order-2;
margin-left: var(--ml);
width: var(--width);
}
@media (max-width: 767px) {
.content,
.columns {
@apply flex-col;
}
main {
padding: 0 8px 68px;
margin-bottom: env(safe-area-inset-bottom);
}
ul,
ol {
@apply flex-col flex-nowrap;
}
ul li,
ol li {
@apply flex;
}
.hide-on-small-screen {
@apply !hidden;
}
.sticky-inner {
@apply relative;
@apply w-full;
}
.inner-left {
order: 0;
}
.inner-right {
--ml: 0;
}
.toasted-container {
margin-bottom: 68px;
}
}
.toasted-ad {
@apply bg-gray-50;
@apply text-gray-900 text-sm;
@apply font-bold;
@apply rounded-lg;
@apply shadow-lg;
padding: 16px !important;
.action {
@apply bg-gray-50;
@apply text-gray-900;
@apply rounded-lg;
@apply font-bold;
text-transform: none !important;
padding: 12px 16px !important;
margin: 0 !important;
margin-left: 8px !important;
}
}

View File

@@ -139,69 +139,6 @@ export default {
],
})
}
// const showAd = localStorage.getItem("showAd") === "no"
// if (!showAd) {
// setTimeout(() => {
// this.$toast.clear()
// this.$toast.show(
// "<span><a href='https://fundoss.org/collective/hoppscotch' target='_blank' rel='noopener'>Sponsor us to support Hoppscotch open source project 💖</a><br><sub>Whoosh this away to dismiss.</sub></span>",
// {
// icon: "",
// duration: 0,
// theme: "toasted-ad",
// action: [
// {
// text: "Donate",
// icon: "chevron_right",
// onClick: (_, toastObject) => {
// localStorage.setItem("showAd", "no")
// toastObject.goAway(0)
// window.open("https://fundoss.org/collective/hoppscotch")
// },
// },
// ],
// onComplete() {
// localStorage.setItem("showAd", "no")
// },
// }
// )
// }, 6000)
// }
// let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
// if (!showExtensionsToast) {
// setTimeout(() => {
// if (!hasExtensionInstalled()) {
// this.$toast.show(this.$t("extensions_info2"), {
// icon: "extension",
// duration: 5000,
// theme: "toasted-primary",
// action: [
// {
// text: this.$t("yes"),
// onClick: (_, toastObject) => {
// this.showExtensions = true
// localStorage.setItem("showExtensionsToast", "yes")
// toastObject.goAway(0)
// },
// },
// {
// text: this.$t("no"),
// onClick: (_, toastObject) => {
// this.$store.commit("setMiscState", {
// value: false,
// attribute: "showExtensionsToast",
// })
// localStorage.setItem("showExtensionsToast", "no")
// toastObject.goAway(0)
// },
// },
// ],
// })
// }
// }, 5000)
// }
},
methods: {
nativeShare() {

View File

@@ -9,58 +9,60 @@
@dragleave="dragging = false"
@dragend="dragging = false"
>
<ButtonSecondary @click.native="toggleShowChildren" />
<ButtonSecondary
:label="collection.name"
@click.native="toggleShowChildren"
/>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.name }}</span>
<div>
<ButtonSecondary
v-if="doc"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
icon="topic"
@click.native="$emit('select-collection')"
/>
<i class="material-icons">topic</i>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<ButtonSecondary
icon="create_new_folder"
:label="$t('new_folder')"
@click.native="
$emit('add-folder', {
path: `${collectionIndex}`,
})
"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<ButtonSecondary @click.native="$emit('edit-collection')" />
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
<ButtonSecondary
icon="create"
label="$t('edit')"
@click.native="$emit('edit-collection')"
/>
</div>
<div>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
<ButtonSecondary
icon="delete"
:label="$t('delete')"
@click.native="confirmRemove = true"
/>
</div>
</tippy>
</div>
@@ -116,7 +118,7 @@
"
class="flex ml-8 border-l border-divider"
>
<p class="info">
<p>
<i class="material-icons">not_interested</i>
{{ $t("collection_empty") }}
</p>

View File

@@ -20,33 +20,37 @@
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name }}</span>
</div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
<i class="material-icons">more_vert</i>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<div>
<ButtonSecondary
icon="create_new_folder"
:label="$t('new_folder')"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<ButtonSecondary
icon="edit"
:labeel="$t('edit')"
@click.native="$emit('edit-folder', { folder, folderPath })"
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
<ButtonSecondary
icon="delete"
:label="$t('delete')"
@click.native="confirmRemove = true"
/>
</div>
</tippy>
</div>
@@ -103,7 +107,7 @@
"
>
<li class="flex ml-8 border-l border-divider">
<p class="info">
<p>
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}
</p>

View File

@@ -8,8 +8,8 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<ButtonSecondary
@@ -36,10 +36,10 @@
? true
: false
"
icon="assignment_turned_in"
:label="$t('create_secret_gist')"
@click.native="createCollectionGist"
/>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</div>
</tippy>
<ButtonSecondary icon="close" @click.native="hideModal" />
@@ -50,10 +50,10 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')"
icon="folder_special"
:label="$t('replace_json')"
@click.native="openDialogChooseFileToReplaceWith"
/>
<i class="material-icons">folder_special</i>
<span>{{ $t("replace_json") }}</span>
<input
ref="inputChooseFileToReplaceWith"
class="input"
@@ -65,10 +65,10 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')"
icon="create_new_folder"
:label="$t('import_json')"
@click.native="openDialogChooseFileToImportFrom"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("import_json") }}</span>
<input
ref="inputChooseFileToImportFrom"
class="input"
@@ -80,12 +80,10 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
icon="drive_file_move"
:label="$t('export_as_json')"
@click.native="exportJSON"
/>
<i class="material-icons">drive_file_move</i>
<span>
{{ $t("export_as_json") }}
</span>
</div>
</template>
</SmartModal>

View File

@@ -28,6 +28,8 @@
</template>
<div>
<ButtonSecondary
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-request', {
request,
@@ -36,13 +38,13 @@
})
"
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
<ButtonSecondary
icon="delete"
:label="$t('delete')"
@click.native="confirmRemove = true"
/>
</div>
</tippy>
</div>

View File

@@ -46,17 +46,18 @@
@hide-modal="displayModalImportExport(false)"
/>
<div class="border-b row-wrapper border-divider">
<ButtonSecondary @click.native="displayModalAdd(true)" />
<i class="material-icons">add</i>
<span>{{ $t("new") }}</span>
<ButtonSecondary
icon="new"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-if="showCollActions"
:label="$t('import_export')"
@click.native="displayModalImportExport(true)"
/>
{{ $t("import_export") }}
</div>
<p v-if="collections.length === 0" class="info">
<p v-if="collections.length === 0">
<i class="material-icons">help_outline</i>
{{ $t("create_new_collection") }}
</p>
@@ -84,7 +85,7 @@
</li>
</ul>
</div>
<p v-if="filterText && filteredCollections.length === 0" class="info">
<p v-if="filterText && filteredCollections.length === 0">
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
filterText
}}"

View File

@@ -83,7 +83,7 @@
@click.native="displayModalImportExport(true)"
/>
</div>
<p v-if="collections.length === 0" class="info">
<p v-if="collections.length === 0">
<i class="material-icons">help_outline</i>
{{ $t("create_new_collection") }}
</p>
@@ -123,10 +123,9 @@
</li>
</ul>
</div>
<p v-if="filterText && filteredCollections.length === 0" class="info">
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
filterText
}}"
<p v-if="filterText && filteredCollections.length === 0">
<i class="material-icons">not_interested</i>
{{ $t("nothing_found") }} "{{ filterText }}"
</p>
</AppSection>
</template>

View File

@@ -9,47 +9,47 @@
@dragleave="dragging = false"
@dragend="dragging = false"
>
<ButtonSecondary @click.native="toggleShowChildren" />
<ButtonSecondary
:label="collection.name"
@click.native="toggleShowChildren"
/>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.name }}</span>
<div>
<ButtonSecondary
v-if="doc && !selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
icon="check_box_outline_blank"
@click.native="$emit('select-collection')"
/>
<i class="material-icons">check_box_outline_blank</i>
<ButtonSecondary
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="check_box"
@click.native="$emit('unselect-collection')"
/>
<i class="material-icons">check_box</i>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<ButtonSecondary
icon="create_new_folder"
:label="$t('new_folder')"
@click.native="
$emit('add-folder', {
folder: collection,
@@ -57,18 +57,20 @@
})
"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<ButtonSecondary @click.native="$emit('edit-collection')" />
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
<ButtonSecondary
icon="create"
:label="$t('edit')"
@click.native="$emit('edit-collection')"
/>
</div>
<div>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
<ButtonSecondary
icon="delete"
:label="$t('delete')"
@click.native="confirmRemove = true"
/>
</div>
</tippy>
</div>
@@ -131,7 +133,7 @@
"
class="flex ml-8 border-l border-divider"
>
<p class="info">
<p>
<i class="material-icons">not_interested</i>
{{ $t("collection_empty") }}
</p>

View File

@@ -10,7 +10,10 @@
@dragend="dragging = false"
>
<div>
<ButtonSecondary @click.native="toggleShowChildren" />
<ButtonSecondary
:label="folder.name ? folder.name : folder.title"
@click.native="toggleShowChildren"
/>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
@@ -21,22 +24,26 @@
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
<i class="material-icons">more_vert</i>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<div>
<ButtonSecondary
icon="create_new_folder"
:label="$t('new_folder')"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<ButtonSecondary
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-folder', {
folder,
@@ -46,13 +53,13 @@
})
"
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
<ButtonSecondary
icon="delete"
:labl="$t('delete')"
@click.native="confirmRemove = true"
/>
</div>
</tippy>
</div>
@@ -113,7 +120,7 @@
"
>
<li class="flex ml-8 border-l border-divider">
<p class="info">
<p>
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}
</p>

View File

@@ -23,11 +23,16 @@
</div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
<i class="material-icons">more_vert</i>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<div>
<ButtonSecondary
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-request', {
collectionIndex,
@@ -39,13 +44,13 @@
})
"
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
<ButtonSecondary
icon="delete"
:label="$t('delete')"
@click.native="confirmRemove = true"
/>
</div>
</tippy>
</div>

View File

@@ -1,49 +1,49 @@
<template>
<div>
<div>
<ButtonSecondary @click.native="toggleShowChildren" />
<ButtonSecondary
:label="collection.title"
@click.native="toggleShowChildren"
/>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.title }}</span>
<div>
<ButtonSecondary
v-if="doc && !selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
icon="check_box_outline_blank"
@click.native="$emit('select-collection')"
/>
<i class="material-icons">check_box_outline_blank</i>
<ButtonSecondary
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="check_box"
@click.native="$emit('unselect-collection')"
/>
<i class="material-icons">check_box</i>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create_new_folder"
:label="$t('new_folder')"
@click.native="
$emit('add-folder', {
folder: collection,
@@ -51,24 +51,22 @@
})
"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create"
:label="$t('edit')"
@click.native="$emit('edit-collection')"
/>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="delete"
:label="$t('delete')"
@click.native="confirmRemove = true"
/>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>
@@ -131,7 +129,7 @@
"
class="flex ml-8 border-l border-divider"
>
<p class="info">
<p>
<i class="material-icons">not_interested</i>
{{ $t("collection_empty") }}
</p>

View File

@@ -2,20 +2,20 @@
<div>
<div>
<div>
<ButtonSecondary @click.native="toggleShowChildren" />
<ButtonSecondary
:label="folder.name ? folder.name : folder.title"
@click.native="toggleShowChildren"
/>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
@@ -23,20 +23,22 @@
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create_new_folder"
:label="$t('new_folder')"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-folder', {
folder,
@@ -46,16 +48,14 @@
})
"
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="delete"
:label="$t('delete')"
@click.native="confirmRemove = true"
/>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>
@@ -114,7 +114,7 @@
"
>
<li class="flex ml-8 border-l border-divider">
<p class="info">
<p>
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}
</p>

View File

@@ -5,16 +5,15 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="!doc ? $t('use_request') : ''"
:label="request.name"
@click.native="!doc ? selectRequest() : {}"
/>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<span v-else :class="getRequestLabelColor(request.method)">{{
request.method
}}</span>
<span>{{ request.name }}</span>
</div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
@@ -22,11 +21,13 @@
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<ButtonSecondary
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-request', {
collectionIndex,
@@ -37,13 +38,13 @@
})
"
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
<ButtonSecondary
icon="delete"
:label="$t('delete')"
@click.native="confirmRemove = true"
/>
</div>
</tippy>
</div>

View File

@@ -62,17 +62,19 @@
id="variable"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeEnvironmentVariable(index)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary @click.native="addEnvironmentVariable" />
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addEnvironmentVariable"
/>
</li>
</ul>
</template>

View File

@@ -2,24 +2,33 @@
<div>
<div class="row-wrapper">
<div>
<ButtonSecondary @click.native="$emit('edit-environment')" />
<i class="material-icons">layers</i>
<span>{{ environment.name }}</span>
<ButtonSecondary
icon="layers"
:label="environment.name"
@click.native="$emit('edit-environment')"
/>
</div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
<i class="material-icons">more_vert</i>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<div>
<ButtonSecondary @click.native="$emit('edit-environment')" />
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
<ButtonSecondary
icon="create"
:label="$t('edit')"
@click.native="$emit('edit-environment')"
/>
</div>
<div>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
<ButtonSecondary
icon="delete"
:label="$t('delete')"
@click.native="confirmRemove = true"
/>
</div>
</tippy>
</div>

View File

@@ -10,13 +10,15 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<ButtonSecondary @click.native="readEnvironmentGist" />
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
<ButtonSecondary
icon="assignment_returned"
:label="$t('import_from_gist')"
@click.native="readEnvironmentGist"
/>
</div>
<div
v-tippy="{ theme: 'tooltip' }"
@@ -36,10 +38,10 @@
? true
: false
"
icon="assignment_turned_in"
:label="$t('create_secret_gist')"
@click.native="createEnvironmentGist"
/>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</div>
</tippy>
<ButtonSecondary icon="close" @click.native="hideModal" />
@@ -50,10 +52,10 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')"
icon="folder_special"
:label="$t('replace_json')"
@click.native="openDialogChooseFileToReplaceWith"
/>
<i class="material-icons">folder_special</i>
<span>{{ $t("replace_json") }}</span>
<input
ref="inputChooseFileToReplaceWith"
class="input"
@@ -65,10 +67,10 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')"
icon="create_new_folder"
:label="$t('import_json')"
@click.native="openDialogChooseFileToImportFrom"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("import_json") }}</span>
<input
ref="inputChooseFileToImportFrom"
class="input"
@@ -80,12 +82,10 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
icon="drive_file_move"
:label="$t('export_as_json')"
@click.native="exportJSON"
/>
<i class="material-icons">drive_file_move</i>
<span>
{{ $t("export_as_json") }}
</span>
</div>
</template>
</SmartModal>

View File

@@ -48,7 +48,7 @@
{{ $t("import_export") }}
</div>
</div>
<p v-if="environments.length === 0" class="info">
<p v-if="environments.length === 0">
<i class="material-icons">help_outline</i>
{{ $t("create_new_environment") }}
</p>

View File

@@ -2,7 +2,7 @@
<span
:class="{ 'cursor-pointer': !isScalar }"
class="font-mono text-sm text-accent"
@click.native="jumpToType"
@click="jumpToType"
>
{{ typeString }}
</span>

View File

@@ -10,7 +10,7 @@
:value="entry.url"
:placeholder="$t('empty_req_name')"
class="input cursor-pointer text-sm bg-transparent"
@click.native="$emit('use-entry')"
@click="$emit('use-entry')"
/>
</li>
<ButtonSecondary
@@ -20,50 +20,44 @@
}"
data-testid="star_button"
:class="{ stared: entry.star }"
:icon="entry.star ? 'star' : 'star_border'"
@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"
:icon="expand ? 'unfold_less' : 'unfold_more'"
@click.native="expand = !expand"
/>
<i class="material-icons">
{{ expand ? "unfold_less" : "unfold_more" }}
</i>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('options')"
data-testid="options"
icon="more_vert"
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<ButtonSecondary
data-testid="restore_history_entry"
:aria-label="$t('restore')"
icon="restore"
:label="$t('restore')"
@click.native="$emit('use-entry')"
/>
<i class="material-icons">restore</i>
<span>{{ $t("restore") }}</span>
</div>
<div>
<ButtonSecondary
data-testid="delete_history_entry"
:aria-label="$t('delete')"
icon="delete"
:label="$t('delete')"
@click.native="$emit('delete-entry')"
/>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

View File

@@ -33,13 +33,10 @@
/>
</ul>
</div>
<p
:class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
class="info"
>
<p :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
{{ $t("nothing_found") }} "{{ filterText }}"
</p>
<p v-if="history.length === 0" class="info">
<p v-if="history.length === 0">
<i class="material-icons">schedule</i> {{ $t("history_empty") }}
</p>
<div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
@@ -47,21 +44,19 @@
<ButtonSecondary
data-testid="clear_history"
:disabled="history.length === 0"
icon="clear_all"
:label="$t('clear_all')"
@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') }"
icon="!showMore ? 'unfold_more' : 'unfold_less'"
@click.native="toggleCollapse()"
/>
<i class="material-icons">
{{ !showMore ? "unfold_more" : "unfold_less" }}
</i>
</div>
<div v-else class="row-wrapper">
<p class="info">
<p>
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
</p>
<div>
@@ -69,17 +64,16 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('yes')"
data-testid="confirm_clear_history"
icon="done"
@click.native="clearHistory"
/>
<i class="material-icons">done</i>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('no')"
data-testid="reject_clear_history"
icon="close"
@click.native="disableHistoryClearing"
/>
<i class="material-icons">close</i>
</div>
</div>
</div>

View File

@@ -5,7 +5,7 @@
class="p-2 m-2 truncate inline-flex cursor-pointer items-center text-sm"
:class="entryStatus.className"
:style="{ '--status-code': entry.status }"
@click.native="$emit('use-entry')"
@click="$emit('use-entry')"
>
{{ `${entry.method} \xA0 • \xA0 ${entry.status}` }}
</span>
@@ -17,7 +17,7 @@
:value="entry.name"
:placeholder="$t('empty_req_name')"
class="input cursor-pointer text-sm bg-transparent"
@click.native="$emit('use-entry')"
@click="$emit('use-entry')"
/>
</li>
<span>
@@ -28,11 +28,9 @@
}"
data-testid="star_button"
:class="{ stared: entry.star }"
:icon="entry.star ? 'star' : 'star_border'"
@click.native="$emit('toggle-star')"
/>
<i class="material-icons">
{{ entry.star ? "star" : "star_border" }}
</i>
</span>
<!-- <li>
<ButtonSecondary
@@ -53,26 +51,26 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('options')"
icon="more_vert"
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<ButtonSecondary
data-testid="restore_history_entry"
:aria-label="$t('edit')"
icon="restore"
:label="$t('restore')"
@click.native="$emit('use-entry')"
/>
<i class="material-icons">restore</i>
<span>{{ $t("restore") }}</span>
</div>
<div>
<ButtonSecondary
data-testid="delete_history_entry"
:aria-label="$t('delete')"
icon="delete"
:label="$t('delete')"
@click.native="$emit('delete-entry')"
/>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

View File

@@ -8,9 +8,9 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('bodyParams', $event)"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
</li>
@@ -75,27 +75,25 @@
: $t('turn_on')
: $t('turn_off'),
}"
:icon="
param.hasOwnProperty('active')
? param.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native="toggleActive(index, param)"
/>
<i class="material-icons">
{{
param.hasOwnProperty("active")
? param.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div>
<div v-if="contentType === 'multipart/form-data'">
<li>
<label for="attachment" class="p-0">
<ButtonSecondary
class="w-full button icon"
class="w-full"
icon="attach_file"
@click.native="$refs.attachment[index].click()"
/>
<i class="material-icons">attach_file</i>
</label>
<input
ref="attachment"
@@ -112,9 +110,9 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestBodyParam(index)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
@@ -122,10 +120,10 @@
<li>
<ButtonSecondary
name="addrequest"
icon="add"
:label="$t('add_new')"
@click.native="addRequestBodyParam"
/>
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</li>
</ul>
</div>

View File

@@ -37,9 +37,9 @@
ref="copyRequestCode"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_code')"
:icon="copyIcon"
@click.native="copyRequestCode"
/>
<i class="material-icons">{{ copyIcon }}</i>
</div>
</div>
<SmartAceEditor

View File

@@ -8,9 +8,9 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('headers', $event)"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
</li>
@@ -70,6 +70,13 @@
: $t('turn_on')
: $t('turn_off'),
}"
:icon="
param.hasOwnProperty('active')
? param.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native="
$store.commit('setActiveHeader', {
index,
@@ -77,15 +84,6 @@
})
"
/>
<i class="material-icons">
{{
header.hasOwnProperty("active")
? header.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div>
<div>
@@ -93,17 +91,19 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestHeader(index)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary @click.native="addRequestHeader" />
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addRequestHeader"
/>
</li>
</ul>
</AppSection>

View File

@@ -8,9 +8,9 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('parameters', $event)"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
</li>
@@ -89,6 +89,13 @@
: $t('turn_on')
: $t('turn_off'),
}"
:icon="
param.hasOwnProperty('active')
? param.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native="
$store.commit('setActiveParams', {
index,
@@ -96,15 +103,6 @@
})
"
/>
<i class="material-icons">
{{
param.hasOwnProperty("active")
? param.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div>
<div>
@@ -112,17 +110,19 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestParam(index)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary @click.native="addRequestParam" />
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addRequestParam"
/>
</li>
</ul>
</AppSection>

View File

@@ -10,17 +10,16 @@
ref="prettifyRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('prettify_body')"
:icon="prettifyIcon"
@click.native="prettifyRequestBody"
/>
<i class="material-icons">{{ prettifyIcon }}</i>
<label for="payload" class="p-0">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('import_json')"
icon="post_add"
@click.native="$refs.payload.click()"
/>
<i class="material-icons">post_add</i>
</label>
<input
ref="payload"
@@ -32,9 +31,9 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('rawParams', $event)"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
<div class="relative">

View File

@@ -54,7 +54,7 @@
</li>
</div>
</ul>
<p v-if="tokens.length === 0" class="info">
<p v-if="tokens.length === 0">
{{ $t("empty") }}
</p>
</template>

View File

@@ -139,7 +139,6 @@ export default {
this.camera,
this.renderer.domElement
)
this.tbControls.rotateSpeed = 5
this.tbControls.noZoom = true
this.tbControls.noPan = true
},

View File

@@ -12,38 +12,34 @@
? $t('expand_response')
: $t('collapse_response'),
}"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
<ButtonSecondary
v-if="response.body"
v-tippy="{ theme: 'tooltip' }"
title="{
content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
}"
:icon="!previewEnabled ? 'visibility' : 'visibility_off'"
@click.native.prevent="togglePreview"
/>
<i class="material-icons">
{{ !previewEnabled ? "visibility" : "visibility_off" }}
</i>
<ButtonSecondary
v-if="response.body"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadIcon"
@click.native="downloadResponse"
/>
<i class="material-icons">{{ downloadIcon }}</i>
<ButtonSecondary
v-if="response.body"
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
:icon="copyIcon"
@click.native="copyResponse"
/>
<i class="material-icons">{{ copyIcon }}</i>
</div>
</div>
<div id="response-details-wrapper">

View File

@@ -8,9 +8,9 @@
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadIcon"
@click.native="downloadResponse"
/>
<i class="material-icons">{{ downloadIcon }}</i>
</div>
</div>
<div id="response-details-wrapper">

View File

@@ -12,27 +12,25 @@
? $t('expand_response')
: $t('collapse_response'),
}"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
<ButtonSecondary
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadIcon"
@click.native="downloadResponse"
/>
<i class="material-icons">{{ downloadIcon }}</i>
<ButtonSecondary
v-if="response.body"
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
:icon="copyIcon"
@click.native="copyResponse"
/>
<i class="material-icons">{{ copyIcon }}</i>
</div>
</div>
<div id="response-details-wrapper">

View File

@@ -12,27 +12,25 @@
? $t('expand_response')
: $t('collapse_response'),
}"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
<ButtonSecondary
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadIcon"
@click.native="downloadResponse"
/>
<i class="material-icons">{{ downloadIcon }}</i>
<ButtonSecondary
v-if="response.body"
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
:icon="copyIcon"
@click.native="copyResponse"
/>
<i class="material-icons">{{ copyIcon }}</i>
</div>
</div>
<div id="response-details-wrapper">

View File

@@ -12,27 +12,25 @@
? $t('expand_response')
: $t('collapse_response'),
}"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
<ButtonSecondary
v-if="response.body"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadIcon"
@click.native="downloadResponse"
/>
<i class="material-icons">{{ downloadIcon }}</i>
<ButtonSecondary
v-if="response.body"
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
:icon="copyIcon"
@click.native="copyResponse"
/>
<i class="material-icons">{{ copyIcon }}</i>
</div>
</div>
<div id="response-details-wrapper">

View File

@@ -15,19 +15,15 @@
</li>
<div>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<ButtonSecondary
id="connect"
:disabled="!validUrl"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="connectionState ? $t('disconnect') : $t('connect')"
reverse
@click.native="toggleConnection"
/>
{{ connectionState ? $t("disconnect") : $t("connect") }}
<span>
<i class="material-icons">{{
!connectionState ? "sync" : "sync_disabled"
}}</i>
</span>
</li>
</div>
</ul>
@@ -62,18 +58,15 @@
</li>
<div>
<li>
<label for="publish" class="hide-on-small-screen">&nbsp;</label>
<ButtonSecondary
id="publish"
class="button"
name="get"
:disabled="!canpublish"
icon="send"
:label="$t('mqtt_publish')"
@click.native="publish"
/>
{{ $t("mqtt_publish") }}
<span>
<i class="material-icons">send</i>
</span>
</li>
</div>
</ul>
@@ -90,22 +83,20 @@
</li>
<div>
<li>
<label for="subscribe" class="hide-on-small-screen">&nbsp;</label>
<ButtonSecondary
id="subscribe"
name="get"
:disabled="!cansubscribe"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
:icon="subscriptionState ? 'sync_disabled' : 'sync'"
:label="
subscriptionState
? $t('mqtt_unsubscribe')
: $t('mqtt_subscribe')
"
reverse
@click.native="toggleSubscription"
/>
{{
subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe")
}}
<span>
<i class="material-icons">{{
subscriptionState ? "sync_disabled" : "sync"
}}</i>
</span>
</li>
</div>
</ul>

View File

@@ -28,20 +28,16 @@
</div>
<div>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<ButtonSecondary
id="connect"
:disabled="!urlValid"
name="connect"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="!connectionState ? $t('connect') : $t('disconnect')"
reverse
@click.native="toggleConnection"
/>
{{ !connectionState ? $t("connect") : $t("disconnect") }}
<span>
<i class="material-icons">
{{ !connectionState ? "sync" : "sync_disabled" }}
</i>
</span>
</li>
</div>
</ul>
@@ -101,9 +97,9 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeCommunicationInput({ index })"
/>
<i class="material-icons">delete</i>
</li>
</div>
<div v-if="index + 1 === communication.inputs.length">
@@ -113,20 +109,20 @@
class="button"
name="send"
:disabled="!connectionState"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
{{ $t("send") }}
<span>
<i class="material-icons">send</i>
</span>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary @click.native="addCommunicationInput" />
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addCommunicationInput"
/>
</li>
</ul>
</AppSection>

View File

@@ -16,20 +16,16 @@
</li>
<div>
<li>
<label for="start" class="hide-on-small-screen">&nbsp;</label>
<ButtonSecondary
id="start"
:disabled="!serverValid"
name="start"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
:icon="!connectionSSEState ? $t('start') : $t('stop')"
:label="!connectionSSEState ? 'sync' : 'sync_disabled'"
reverse
@click.native="toggleSSEConnection"
/>
{{ !connectionSSEState ? $t("start") : $t("stop") }}
<span>
<i class="material-icons">
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
</i>
</span>
</li>
</div>
</ul>

View File

@@ -17,20 +17,16 @@
</li>
<div>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<ButtonSecondary
id="connect"
:disabled="!urlValid"
class="button"
name="connect"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="!connectionState ? $t('connect') : $t('disconnect')"
reverse
@click.native="toggleConnection"
/>
{{ !connectionState ? $t("connect") : $t("disconnect") }}
<span>
<i class="material-icons">
{{ !connectionState ? "sync" : "sync_disabled" }}
</i>
</span>
</li>
</div>
</ul>
@@ -96,17 +92,19 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="deleteProtocol({ index })"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary @click.native="addProtocol" />
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addProtocol"
/>
</li>
</ul>
</AppSection>
@@ -134,18 +132,15 @@
</li>
<div>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<ButtonSecondary
id="send"
name="send"
:disabled="!connectionState"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
{{ $t("send") }}
<span>
<i class="material-icons">send</i>
</span>
</li>
</div>
</ul>

View File

@@ -2,7 +2,7 @@
<div class="show-if-initialized" :class="{ initialized }">
<div v-if="lang == 'json'" class="outline">
<div v-for="(p, index) in currPath" :key="index" class="block">
<div class="label" @click.native="onBlockClick(index)">
<div class="label" @click="onBlockClick(index)">
{{ p }}
</div>
<i v-if="index + 1 !== currPath.length" class="material-icons"
@@ -18,7 +18,7 @@
v-for="(sib, i) in currSib"
:key="i"
class="sib"
@click.native="goToSib(sib)"
@click="goToSib(sib)"
>
{{ sib.key ? sib.key.value : i }}
</div>

View File

@@ -12,7 +12,7 @@
:class="styles"
@input="updateSuggestions"
@keyup="updateSuggestions"
@click.native="updateSuggestions"
@click="updateSuggestions"
@keydown="handleKeystroke"
/>
<ul
@@ -24,7 +24,7 @@
v-for="(suggestion, index) in suggestions"
:key="index"
:class="{ active: currentSuggestionIndex === index }"
@click.native.prevent="forceSuggestion(suggestion)"
@click.prevent="forceSuggestion(suggestion)"
>
{{ suggestion }}
</li>

View File

@@ -1,48 +0,0 @@
<template>
<div
v-tippy="{ theme: 'tooltip' }"
:title="$t(active ? 'hide_sidebar' : 'show_sidebar')"
class="
absolute
hidden
md:flex
items-center
justify-center
px-2
py-1
bg-divider
text-secondaryLight
hover:text-secondary
my-4
z-10
rounded-l
right-0
cursor-pointer
"
@click.native="$emit('toggle')"
>
<i
class="
transition
origin-center
transform
material-icons
pointer-events-none
"
:class="{ 'rotate-180': active }"
>
menu_open
</i>
</div>
</template>
<script>
export default {
props: {
active: {
type: Boolean,
default: false,
},
},
}
</script>

View File

@@ -2,8 +2,7 @@
<SmartModal v-if="show" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("new_team") }}</h3>
<ButtonSecondary @click.native="hideModal" />
<i class="material-icons">close</i>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body>
<ul>

View File

@@ -2,8 +2,7 @@
<SmartModal v-if="show" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("edit_team") }}</h3>
<ButtonSecondary @click.native="hideModal" />
<i class="material-icons">close</i>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body>
<ul>
@@ -91,9 +90,9 @@
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeExistingTeamMember(member.user.uid)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
@@ -155,17 +154,19 @@
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeTeamMember(index)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary @click.native="addTeamMember" />
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addTeamMember"
/>
</li>
</ul>
</template>
@@ -193,7 +194,6 @@ export default {
data() {
return {
rename: null,
doneButton: '<i class="material-icons">done</i>',
members: [],
newMembers: [],
membersAdapter: new TeamMemberAdapter(null),

View File

@@ -4,32 +4,39 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="team.myRole === 'OWNER' ? $t('edit') : ''"
icon="group"
:label="team.name"
@click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
/>
<i class="material-icons">group</i>
<span>{{ team.name }}</span>
</div>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
<i class="material-icons">more_vert</i>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<div v-if="team.myRole === 'OWNER'">
<ButtonSecondary @click.native="$emit('edit-team')" />
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
<ButtonSecondary
icon="create"
:label="$t('edit')"
@click.native="$emit('edit-team')"
/>
</div>
<div v-if="team.myRole === 'OWNER'">
<ButtonSecondary @click.native="deleteTeam" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
<ButtonSecondary
icon="delete"
:label="$t('delete')"
@click.native="deleteTeam"
/>
</div>
<div>
<ButtonSecondary
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
icon="remove"
@click.native="exitTeam"
/>
<i class="material-icons">remove</i>
<div
v-tippy="{ theme: 'tooltip' }"
title="{

View File

@@ -32,10 +32,10 @@
/>
</div>
</div>
<p v-if="$apollo.queries.myTeams.loading" class="info">
<p v-if="$apollo.queries.myTeams.loading">
{{ $t("loading") }}
</p>
<p v-if="myTeams.length === 0" class="info">
<p v-if="myTeams.length === 0">
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
</p>
<div v-else class="overflow-auto">

View File

@@ -16,13 +16,13 @@
:push-other-panes="false"
class="hoppscotch-theme"
>
<Pane v-if="!hideHeaderPane" style="height: auto">
<Pane v-if="!zenMode" style="height: auto">
<AppHeader />
</Pane>
<Pane class="flex-1">
<Splitpanes vertical class="hoppscotch-theme">
<Pane class="overflow-y-auto">
<nuxt class="container" />
<nuxt class="container" :hide-right-pane="hideRightPane" />
</Pane>
</Splitpanes>
</Pane>
@@ -31,16 +31,39 @@
</Splitpanes>
</Pane>
<Pane style="height: auto" class="bg-primaryDark">
<div class="flex justify-between">
<div>
<ButtonSecondary
class="button icon"
v-tippy="{ theme: 'tooltip' }"
:title="
hideNavigationPane ? $t('show_sidebar') : $t('hide_sidebar')
"
icon="menu_open"
:class="{ 'transform rotate-180': hideNavigationPane }"
@click.native="hideNavigationPane = !hideNavigationPane"
/>
<i class="material-icons">menu_open</i>
<ButtonSecondary
class="button icon"
@click.native="hideHeaderPane = !hideHeaderPane"
v-tippy="{ theme: 'tooltip' }"
:title="
zenMode
? `${$t('turn_off')} Zen mode`
: `${$t('turn_on')} Zen mode`
"
:icon="zenMode ? 'fullscreen_exit' : 'fullscreen'"
:class="{
'text-accent focus:text-accent hover:text-accent': zenMode,
}"
@click.native="zenMode = !zenMode"
/>
<i class="material-icons">menu_open</i>
</div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="hideRightPane ? $t('show_sidebar') : $t('hide_sidebar')"
icon="menu_open"
:class="['transform rotate-180', { ' rotate-0': hideRightPane }]"
@click.native="hideRightPane = !hideRightPane"
/>
</div>
</Pane>
</Splitpanes>
</div>
@@ -64,9 +87,15 @@ export default {
data() {
return {
hideNavigationPane: false,
hideHeaderPane: false,
zenMode: false,
hideRightPane: false,
}
},
watch: {
zenMode(zenMode) {
this.hideNavigationPane = this.hideRightPane = zenMode
},
},
beforeMount() {
registerApolloAuthUpdate()

View File

@@ -54,7 +54,6 @@
<SmartUrlField v-model="uri" v-else />
</li>
<li class="shrink">
<label class="hide-on-small-screen" for="send">&nbsp;</label>
<ButtonSecondary
v-if="!runningRequest"
:disabled="!isValidURL"
@@ -71,11 +70,10 @@
id="send"
class="button"
ref="sendButton"
icon="clear"
:label="$t('cancel')"
reverse
/>
{{ $t("cancel") }}
<span>
<i class="material-icons">clear</i>
</span>
</li>
</ul>
<ul>
@@ -178,16 +176,15 @@
@click.native="showCurlImportModal = !showCurlImportModal"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import_curl')"
icon="import_export"
/>
<i class="material-icons">import_export</i>
<ButtonSecondary
@click.native="showCodegenModal = !showCodegenModal"
:disabled="!isValidURL"
v-tippy="{ theme: 'tooltip' }"
:title="$t('show_code')"
icon="code"
/>
<i class="material-icons">code</i>
</span>
<span>
<ButtonSecondary
@@ -196,26 +193,23 @@
:disabled="!isValidURL"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_request_link')"
:icon="navigatorShare ? 'share' : 'content_copy'"
/>
<i v-if="navigatorShare" class="material-icons">share</i>
<i v-else class="material-icons">content_copy</i>
<ButtonSecondary
@click.native="saveRequest"
ref="saveRequest"
:disabled="!isValidURL"
v-tippy="{ theme: 'tooltip' }"
:title="$t('save_to_collections')"
icon="create_new_folder"
/>
<i class="material-icons">create_new_folder</i>
<ButtonSecondary
@click.native="clearContent('', $event)"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear_all')"
ref="clearAll"
icon="clear_all"
/>
<i class="material-icons">clear_all</i>
</span>
</div>
</AppSection>
@@ -270,8 +264,8 @@
@click.native="clearContent('auth', $event)"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
<span class="select-wrapper">
@@ -307,17 +301,12 @@
<ButtonSecondary
ref="switchVisibility"
@click.native="switchVisibility"
:icon="
passwordFieldType === 'text'
? 'visibility'
: 'visibility_off'
"
/>
<i
class="material-icons"
v-if="passwordFieldType === 'text'"
>visibility</i
>
<i
class="material-icons"
v-if="passwordFieldType !== 'text'"
>visibility_off</i
>
</li>
</div>
</ul>
@@ -337,16 +326,15 @@
"
v-tippy="{ theme: 'tooltip' }"
:title="$t('use_token')"
icon="open_in_new"
/>
<i class="material-icons">open_in_new</i>
<ButtonSecondary
v-if="auth === 'OAuth 2.0'"
@click.native="showTokenRequest = !showTokenRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('get_token')"
icon="vpn_key"
/>
<i class="material-icons">vpn_key</i>
</div>
</li>
</ul>
@@ -373,24 +361,22 @@
@click.native="showTokenRequestList = true"
v-tippy="{ theme: 'tooltip' }"
:title="$t('manage_token_req')"
icon="library_add"
/>
<i class="material-icons">library_add</i>
<ButtonSecondary
@click.native="
clearContent('access_token', $event)
"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
/>
<i class="material-icons">clear_all</i>
<ButtonSecondary
@click.native="showTokenRequest = false"
v-tippy="{ theme: 'tooltip' }"
:title="$t('close')"
icon="close"
/>
<i class="material-icons">close</i>
</div>
</div>
<input
@@ -481,9 +467,9 @@
<li>
<ButtonSecondary
@click.native="handleAccessTokenRequest"
icon="vpn_key"
:label="$t('request_token')"
/>
<i class="material-icons">vpn_key</i>
<span>{{ $t("request_token") }}</span>
</li>
</ul>
</AppSection>
@@ -563,15 +549,15 @@
@click.native="clearContent('tests', $event)"
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
<div
v-for="(testReport, index) in testReports"
:key="index"
>
<div v-if="testReport.startBlock" class="info">
<div v-if="testReport.startBlock">
<hr />
<h4 class="heading">
{{ testReport.startBlock }}
@@ -615,10 +601,7 @@
</Pane>
<Pane max-size="40" class="bg-pink-100">
<TranslateSlideLeft>
<aside
v-if="activeSidebar"
class="sticky-inner inner-right lg:max-w-md"
>
<aside class="lg:max-w-md">
<section>
<SmartTabs>
<SmartTab
@@ -644,11 +627,6 @@
</section>
</aside>
</TranslateSlideLeft>
<SmartHideMenu
:active="activeSidebar"
@toggle="activeSidebar = !activeSidebar"
/>
</Pane>
</Splitpanes>
@@ -689,8 +667,10 @@
<template #header>
<h3 class="heading">{{ $t("manage_token_req") }}</h3>
<div>
<ButtonSecondary @click.native="showTokenRequestList = false" />
<i class="material-icons">close</i>
<ButtonSecondary
@click.native="showTokenRequestList = false"
icon="close"
/>
</div>
</template>
<template #body>
@@ -702,16 +682,15 @@
@click.native="showTokenRequestList = false"
v-tippy="{ theme: 'tooltip' }"
:title="$t('use_token_req')"
icon="input"
/>
<i class="material-icons">input</i>
<ButtonSecondary
:disabled="this.tokenReqs.length === 0"
@click.native="removeOAuthTokenReq"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
/>
<i class="material-icons">delete</i>
</div>
</div>
<ul>
@@ -817,7 +796,6 @@ export default {
showTokenRequestList: false,
showSaveRequestModal: false,
editRequest: {},
activeSidebar: true,
customMethod: false,
files: [],
filenames: "",

View File

@@ -1,11 +1,11 @@
<template>
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<div class="">
<AppSection label="import">
<div class="flex flex-col">
<label>{{ $t("collection") }}</label>
<p class="info">
<p>
{{ $t("generate_docs_message") }}
</p>
<div class="row-wrapper">
@@ -58,7 +58,7 @@
<AppSection label="documentation">
<div class="flex flex-col">
<label>{{ $t("documentation") }}</label>
<p v-if="items.length === 0" class="info">
<p v-if="items.length === 0">
{{ $t("generate_docs_first") }}
</p>
<div v-else class="row-wrapper">
@@ -98,7 +98,7 @@
</AppSection>
</div>
<aside class="sticky-inner inner-right lg:max-w-md">
<aside class="lg:max-w-md">
<Collections
:selected="selected"
:doc="true"

View File

@@ -1,7 +1,7 @@
<template>
<div class="flex container flex-col min-h-screen">
<span v-if="signingInWithEmail" class="info">{{ $t("loading") }}</span>
<span v-else class="info">{{ $t("waiting_for_connection") }}</span>
<span v-if="signingInWithEmail">{{ $t("loading") }}</span>
<span v-else>{{ $t("waiting_for_connection") }}</span>
<pre v-if="error">{{ error }}</pre>
</div>
</template>

View File

@@ -1,7 +1,7 @@
<template>
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<div class="">
<AppSection label="endpoint">
<ul>
<li>
@@ -18,23 +18,13 @@
</li>
<div>
<li>
<label for="get" class="hide-on-small-screen">&nbsp;</label>
<ButtonSecondary
id="get"
name="get"
class="
button
rounded-b-lg
md:rounded-bl-none md:rounded-br-lg
"
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
:label="!isPollingSchema ? $t('connect') : $t('disconnect')"
@click.native="onPollSchemaClick"
/>
{{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
<span
><i class="material-icons">{{
!isPollingSchema ? "sync" : "sync_disabled"
}}</i></span
>
</li>
</div>
</ul>
@@ -51,9 +41,9 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="headers = []"
/>
<i class="material-icons">clear_all</i>
</div>
</div>
</li>
@@ -134,17 +124,19 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestHeader(index)"
/>
<i class="material-icons">delete</i>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary @click.native="addRequestHeader" />
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addRequestHeader"
/>
</li>
</ul>
</div>
@@ -162,27 +154,23 @@
? $t('expand_response')
: $t('collapse_response'),
}"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
<ButtonSecondary
ref="downloadSchema"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadSchemaIcon"
@click.native="downloadSchema"
/>
<i class="material-icons">{{ downloadSchemaIcon }}</i>
<ButtonSecondary
ref="copySchemaCode"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_schema')"
:icon="copySchemaIcon"
@click.native="copySchema"
/>
<i class="material-icons">{{ copySchemaIcon }}</i>
</div>
</div>
<SmartAceEditor
@@ -221,32 +209,29 @@
`${$t('run_query')} (${getSpecialKey()}-Enter)`
"
class="button"
icon="play_arrow"
@click.native="runQuery()"
/>
<i class="material-icons">play_arrow</i>
<ButtonSecondary
ref="copyQueryButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_query')"
:icon="copyQueryIcon"
@click.native="copyQuery"
/>
<i class="material-icons">{{ copyQueryIcon }}</i>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
:icon="prettifyIcon"
@click.native="doPrettifyQuery"
/>
<i class="material-icons">{{ prettifyIcon }}</i>
<ButtonSecondary
ref="saveRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('save_to_collections')"
icon="create_new_folder"
@click.native="saveRequest"
/>
<i class="material-icons">create_new_folder</i>
</div>
</div>
<GraphqlQueryEditor
@@ -296,18 +281,17 @@
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadResponseIcon"
@click.native="downloadResponse"
/>
<i class="material-icons">{{ downloadResponseIcon }}</i>
<ButtonSecondary
v-if="response"
ref="copyResponseButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
:icon="copyResponseIcon"
@click.native="copyResponse"
/>
<i class="material-icons">{{ copyResponseIcon }}</i>
</div>
</div>
<SmartAceEditor
@@ -340,10 +324,7 @@
</div>
<TranslateSlideLeft>
<aside
v-if="activeSidebar"
class="sticky-inner inner-right lg:max-w-md"
>
<aside class="lg:max-w-md">
<SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
@@ -438,7 +419,6 @@
subscriptionFields.length === 0 &&
graphqlTypes.length === 0
"
class="info"
>
{{ $t("send_request_first") }}
</p>
@@ -459,11 +439,6 @@
</SmartTabs>
</aside>
</TranslateSlideLeft>
<SmartHideMenu
:active="activeSidebar"
@toggle="activeSidebar = !activeSidebar"
/>
</div>
<CollectionsSaveRequest
mode="graphql"
@@ -507,7 +482,6 @@ export default {
graphqlFieldsFilterText: undefined,
isPollingSchema: false,
timeoutSubscription: null,
activeSidebar: true,
editRequest: {},
showSaveRequestModal: false,
}

View File

@@ -8,6 +8,8 @@
<div v-if="currentBackendUser && currentBackendUser.eaInvited">
<Teams />
</div>
{{ hideRightPane }}
<div v-if="!hideRightPane">hide this thingy</div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
</div>
</template>
@@ -17,6 +19,7 @@ import { currentUser$ } from "~/helpers/fb/auth"
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
export default {
props: { hideRightPane: { type: Boolean, default: false } },
data() {
return {
showLogin: false,

View File

@@ -26,7 +26,7 @@
<img
v-if="currentUser.photoURL"
:src="currentUser.photoURL"
class="w-5 h-5 rounded-full material-icons"
class="w-5 h-5 rounded-full"
/>
<i v-else class="material-icons">account_circle</i>
</div>