btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix: button icons

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

167
assets/scss/styles.scss
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 { .tippy-popper {
.tooltip-theme { .tooltip-theme {
@apply bg-secondary; @apply bg-secondary;
@@ -179,32 +171,6 @@ pre.ace_editor {
@apply resize-none; @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 { select {
@apply cursor-pointer; @apply cursor-pointer;
@apply appearance-none; @apply appearance-none;
@@ -216,10 +182,6 @@ select {
} }
} }
option {
@apply bg-primary;
}
input[type="checkbox"] { input[type="checkbox"] {
@apply hidden; @apply hidden;
@@ -258,25 +220,6 @@ input[type="checkbox"] {
@apply text-secondaryLight; @apply text-secondaryLight;
@apply fill-current; @apply fill-current;
@apply cursor-not-allowed; @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 { .info-response {
@@ -322,128 +265,30 @@ input[type="checkbox"] {
} }
} }
#send { .toasted-container {
@apply whitespace-nowrap; margin-bottom: 68px;
@apply outline-none;
@apply border-none;
&.show { .toasted {
@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 {
justify-content: space-between !important; justify-content: space-between !important;
}
.toasted.info { &.info {
background-color: var(--accent-color) !important; background-color: var(--accent-color) !important;
color: var(--primary-color) !important; color: var(--primary-color) !important;
font-weight: 700 !important; font-weight: 700 !important;
} }
.toasted.bubble .action { &.bubble .action {
color: inherit !important; color: inherit !important;
} }
.toasted .action { .action {
margin-left: auto !important; 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) { @media (max-width: 767px) {
.content,
.columns {
@apply flex-col;
}
main { main {
padding: 0 8px 68px;
margin-bottom: env(safe-area-inset-bottom); 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;
}
} }

63
components/app/Header.vue
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: { methods: {
nativeShare() { nativeShare() {

36
components/collections/graphql/Collection.vue
View File

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

26
components/collections/graphql/Folder.vue
View File

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

20
components/collections/graphql/ImportExport.vue
View File

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

12
components/collections/graphql/Request.vue
View File

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

15
components/collections/graphql/index.vue
View File

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

9
components/collections/index.vue
View File

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

38
components/collections/my/Collection.vue
View File

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

31
components/collections/my/Folder.vue
View File

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

19
components/collections/my/Request.vue
View File

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

30
components/collections/teams/Collection.vue
View File

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

24
components/collections/teams/Folder.vue
View File

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

17
components/collections/teams/Request.vue
View File

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

10
components/environments/Edit.vue
View File

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

31
components/environments/Environment.vue
View File

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

28
components/environments/ImportExport.vue
View File

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

2
components/environments/index.vue
View File

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

2
components/graphql/TypeLink.vue
View File

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

22
components/history/graphql/Card.vue
View File

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

22
components/history/index.vue
View File

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

18
components/history/rest/Card.vue
View File

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

28
components/http/BodyParameters.vue
View File

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

2
components/http/CodegenModal.vue
View File

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

28
components/http/Headers.vue
View File

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

28
components/http/Parameters.vue
View File

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

7
components/http/RawBody.vue
View File

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

2
components/http/TokenList.vue
View File

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

1
components/landing/Globe.vue
View File

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

12
components/lenses/renderers/HTMLLensRenderer.vue
View File

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

2
components/lenses/renderers/ImageLensRenderer.vue
View File

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

8
components/lenses/renderers/JSONLensRenderer.vue
View File

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

8
components/lenses/renderers/RawLensRenderer.vue
View File

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

8
components/lenses/renderers/XMLLensRenderer.vue
View File

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

33
components/realtime/Mqtt.vue
View File

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

26
components/realtime/Socketio.vue
View File

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

10
components/realtime/Sse.vue
View File

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

27
components/realtime/Websocket.vue
View File

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

4
components/smart/AceEditor.vue
View File

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

4
components/smart/AutoComplete.vue
View File

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

48
components/smart/HideMenu.vue
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>

3
components/teams/Add.vue
View File

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

16
components/teams/Edit.vue
View File

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

29
components/teams/Team.vue
View File

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

4
components/teams/index.vue
View File

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

45
layouts/default.vue
View File

@@ -16,13 +16,13 @@
:push-other-panes="false" :push-other-panes="false"
class="hoppscotch-theme" class="hoppscotch-theme"
> >
<Pane v-if="!hideHeaderPane" style="height: auto"> <Pane v-if="!zenMode" style="height: auto">
<AppHeader /> <AppHeader />
</Pane> </Pane>
<Pane class="flex-1"> <Pane class="flex-1">
<Splitpanes vertical class="hoppscotch-theme"> <Splitpanes vertical class="hoppscotch-theme">
<Pane class="overflow-y-auto"> <Pane class="overflow-y-auto">
<nuxt class="container" /> <nuxt class="container" :hide-right-pane="hideRightPane" />
</Pane> </Pane>
</Splitpanes> </Splitpanes>
</Pane> </Pane>
@@ -31,16 +31,39 @@
</Splitpanes> </Splitpanes>
</Pane> </Pane>
<Pane style="height: auto" class="bg-primaryDark"> <Pane style="height: auto" class="bg-primaryDark">
<div class="flex justify-between">
<div>
<ButtonSecondary <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" @click.native="hideNavigationPane = !hideNavigationPane"
/> />
<i class="material-icons">menu_open</i>
<ButtonSecondary <ButtonSecondary
class="button icon" v-tippy="{ theme: 'tooltip' }"
@click.native="hideHeaderPane = !hideHeaderPane" :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> </Pane>
</Splitpanes> </Splitpanes>
</div> </div>
@@ -64,9 +87,15 @@ export default {
data() { data() {
return { return {
hideNavigationPane: false, hideNavigationPane: false,
hideHeaderPane: false, zenMode: false,
hideRightPane: false,
} }
}, },
watch: {
zenMode(zenMode) {
this.hideNavigationPane = this.hideRightPane = zenMode
},
},
beforeMount() { beforeMount() {
registerApolloAuthUpdate() registerApolloAuthUpdate()

82
pages/api.vue
View File

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

8
pages/doc.vue
View File

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

4
pages/enter.vue
View File

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

66
pages/graphql.vue
View File

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

3
pages/profile.vue
View File

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

2
pages/settings.vue
View File

@@ -26,7 +26,7 @@
<img <img
v-if="currentUser.photoURL" v-if="currentUser.photoURL"
:src="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> <i v-else class="material-icons">account_circle</i>
</div> </div>