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

feat: revamp graphql sidebar ui

Browse Source
This commit is contained in:
liyasthomas
2021-07-08 23:42:15 +05:30
parent f1ef403c83
commit c6490818d0
21 changed files with 708 additions and 620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/scss/styles.scss
View File

@@ -187,6 +187,23 @@ select {
}
}
.select-wrapper {
@apply relative;
@apply w-full;
&::after {
@apply inline-block;
@apply absolute;
@apply pointer-events-none;
@apply font-icon;
@apply text-secondaryLight;
@apply top-3;
@apply right-3;
content: "\e313";
}
}
input[type="checkbox"] {
@apply hidden;

6
components/collections/ChooseType.vue
View File

@@ -12,6 +12,7 @@
:label="'Team Collections'"
>
<SmartIntersection @intersecting="onTeamSelectIntersect">
<div class="select-wrapper">
<select
id="team"
type="text"
@@ -21,10 +22,10 @@
w-full
px-4
text-xs
py-2
py-3
focus:outline-none
border-b border-dividerLight
bg-primary
bg-primaryLight
"
@change="updateSelectedTeam(myTeams[$event.target.value])"
>
@@ -45,6 +46,7 @@
{{ team.name }}
</option>
</select>
</div>
</SmartIntersection>
</SmartTab>
</SmartTabs>

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

@@ -1,7 +1,7 @@
<template>
<div>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
:class="[{ 'bg-primaryDark': dragging }]"
class="flex items-center group"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -9,27 +9,47 @@
@dragleave="dragging = false"
@dragend="dragging = false"
>
<span
class="
flex
justify-center
items-center
text-xs
w-10
truncate
cursor-pointer
"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
{{ getCollectionIcon }}
</i>
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
"
@click="toggleShowChildren()"
>
<span class="truncate"> {{ collection.name }} </span>
</span>
<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>
<div>
<ButtonSecondary
v-if="doc"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
icon="topic"
@click.native="$emit('select-collection')"
icon="create_new_folder"
:title="$t('new_folder')"
class="group-hover:inline-flex hidden"
@click.native="
$emit('add-folder', {
path: `${collectionIndex}`,
})
"
/>
<tippy
ref="options"
@@ -74,15 +94,11 @@
/>
</tippy>
</div>
</div>
<div v-show="showChildren || isFiltered">
<ul class="flex-col">
<li
<CollectionsGraphqlFolder
v-for="(folder, index) in collection.folders"
:key="folder.name"
class="ml-5 border-l border-dividerLight"
>
<CollectionsGraphqlFolder
:picked="picked"
:saving-mode="savingMode"
:folder="folder"
@@ -96,15 +112,10 @@
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
/>
</li>
</ul>
<ul class="flex-col">
<li
<CollectionsGraphqlRequest
v-for="(request, index) in collection.requests"
:key="index"
class="ml-5 border-l border-dividerLight"
>
<CollectionsGraphqlRequest
:picked="picked"
:saving-mode="savingMode"
:request="request"
@@ -117,26 +128,26 @@
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
/>
</li>
</ul>
<ul>
<li
<div
v-if="
collection.folders.length === 0 && collection.requests.length === 0
"
class="
ml-5
border-l border-dividerLight
flex
items-center
text-secondaryLight
flex-col
p-4
justify-center
ml-5
border-l border-dividerLight
"
>
<p>
<i class="material-icons">not_interested</i>
<i class="material-icons opacity-50 pb-2">folder_open</i>
<span class="text-xs">
{{ $t("collection_empty") }}
</p>
</li>
</ul>
</span>
</div>
</div>
<SmartConfirmModal
:show="confirmRemove"
@@ -180,6 +191,12 @@ export default Vue.extend({
this.picked.collectionIndex === this.collectionIndex
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else return "folder"
},
},
methods: {
pick() {

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

@@ -1,7 +1,7 @@
<template>
<div>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
:class="[{ 'bg-primaryDark': dragging }]"
class="flex items-center group"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -9,20 +9,46 @@
@dragleave="dragging = false"
@dragend="dragging = false"
>
<div>
<ButtonSecondary @click.native="toggleShowChildren" />
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
<span
class="
flex
justify-center
items-center
text-xs
w-10
truncate
cursor-pointer
"
@click="toggleShowChildren()"
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
{{ getCollectionIcon }}
</i>
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
"
@click="toggleShowChildren()"
>
<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>
<span class="truncate">
{{ folder.name ? folder.name : folder.title }}
</span>
</span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
:title="$t('new_folder')"
class="group-hover:inline-flex hidden"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<tippy
ref="options"
interactive
@@ -48,7 +74,7 @@
/>
<SmartItem
icon="edit"
:labeel="$t('edit')"
:label="$t('edit')"
@click.native="
$emit('edit-folder', { folder, folderPath })
$refs.options.tippy().hide()
@@ -65,13 +91,10 @@
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<ul class="flex-col">
<li
<CollectionsGraphqlFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name"
class="ml-5 border-l border-dividerLight"
>
<CollectionsGraphqlFolder
:picked="picked"
:saving-mode="savingMode"
:folder="subFolder"
@@ -85,15 +108,10 @@
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
/>
</li>
</ul>
<ul class="flex-col">
<li
<CollectionsGraphqlRequest
v-for="(request, index) in folder.requests"
:key="index"
class="ml-5 border-l border-dividerLight"
>
<CollectionsGraphqlRequest
:picked="picked"
:saving-mode="savingMode"
:request="request"
@@ -106,30 +124,29 @@
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
/>
</li>
</ul>
<ul
<div
v-if="
folder.folders &&
folder.folders.length === 0 &&
folder.requests &&
folder.requests.length === 0
"
>
<li
class="
ml-5
border-l border-dividerLight
flex
items-center
text-secondaryLight
flex-col
p-4
justify-center
ml-5
border-l border-dividerLight
"
>
<p>
<i class="material-icons">not_interested</i>
<i class="material-icons opacity-50 pb-2">folder_open</i>
<span class="text-xs">
{{ $t("folder_empty") }}
</p>
</li>
</ul>
</span>
</div>
</div>
<SmartConfirmModal
:show="confirmRemove"
@@ -172,6 +189,12 @@ export default Vue.extend({
this.picked.folderPath === this.folderPath
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else return "folder"
},
},
methods: {
pick() {

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

@@ -1,21 +1,46 @@
<template>
<div>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
:class="[{ 'bg-primaryDark': dragging }]"
class="flex items-center group"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@dragleave="dragging = false"
@dragend="dragging = false"
>
<div>
<ButtonSecondary
:class="{ 'mx-3 text-green-400': isSelected }"
:icon="isSelected ? 'check_circle' : 'description'"
:label="request.name"
@click.native="!doc ? selectRequest() : {}"
/>
</div>
<span
class="
font-mono font-bold
flex
justify-center
items-center
text-xs
w-12
mx-2
truncate
cursor-pointer
"
@click="!doc ? selectRequest() : {}"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
{{ isSelected ? "check_circle" : "description" }}
</i>
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
"
@click="!doc ? selectRequest() : {}"
>
<span class="truncate"> {{ request.name }} </span>
</span>
<tippy
ref="options"
interactive

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

@@ -1,15 +1,21 @@
<template>
<AppSection label="collections">
<div class="flex">
<div class="flex flex-col sticky top-10 z-10 bg-primary">
<input
v-if="showCollActions"
v-model="filterText"
aria-label="Search"
type="search"
:placeholder="$t('search')"
class="input rounded-t-lg"
class="
px-4
py-3
text-xs
border-b border-dividerLight
flex flex-1
bg-primaryLight
focus:outline-none
"
/>
</div>
<CollectionsGraphqlAdd
:show="showModalAdd"
@hide-modal="displayModalAdd(false)"
@@ -45,29 +51,34 @@
:show="showModalImportExport"
@hide-modal="displayModalImportExport(false)"
/>
<div class="border-b flex flex-1 border-divider">
<div class="border-b flex justify-between flex-1 border-dividerLight">
<ButtonSecondary
icon="new"
icon="add"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-if="showCollActions"
:label="$t('import_export')"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import_export')"
icon="import_export"
@click.native="displayModalImportExport(true)"
/>
</div>
<p v-if="collections.length === 0">
<i class="material-icons">help_outline</i>
</div>
<div
v-if="collections.length === 0"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
>
<i class="material-icons opacity-50 pb-2">create_new_folder</i>
<span class="text-xs">
{{ $t("create_new_collection") }}
</p>
<div class="overflow-auto">
<ul class="flex-col">
<li
</span>
</div>
<div class="flex-col">
<CollectionsGraphqlCollection
v-for="(collection, index) in filteredCollections"
:key="collection.name"
>
<CollectionsGraphqlCollection
:picked="picked"
:name="collection.name"
:collection-index="index"
@@ -82,14 +93,16 @@
@select-collection="$emit('use-collection', collection)"
@select="$emit('select', $event)"
/>
</li>
</ul>
</div>
<p v-if="filterText && filteredCollections.length === 0">
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
filterText
}}"
</p>
<div
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
>
<i class="material-icons opacity-50 pb-2">manage_search</i>
<span class="text-xs">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>
</div>
</AppSection>
</template>

81
components/collections/index.vue
View File

@@ -1,15 +1,21 @@
<template>
<AppSection label="collections">
<div class="flex sticky top-10 border-b border-dividerLight">
<div class="flex flex-col sticky top-10 z-10 bg-primary">
<input
v-if="!saveRequest"
v-model="filterText"
aria-label="Search"
type="search"
:placeholder="$t('search')"
class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
class="
px-4
py-3
text-xs
border-b border-dividerLight
flex flex-1
bg-primaryLight
focus:outline-none
"
/>
</div>
<CollectionsChooseType
:collections-type="collectionsType"
:show="showTeamCollections"
@@ -17,6 +23,39 @@
@update-collection-type="updateCollectionType"
@update-selected-team="updateSelectedTeam"
/>
<div class="border-b flex justify-between flex-1 border-dividerLight">
<ButtonSecondary
v-if="
collectionsType.type == 'team-collections' &&
(collectionsType.selectedTeam == undefined ||
collectionsType.selectedTeam.myRole == 'VIEWER')
"
v-tippy="{ theme: 'tooltip' }"
disabled
icon="add"
:title="$t('disable_new_collection')"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-else
icon="add"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
:disabled="
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam == undefined
"
icon="import_export"
:title="$t('import_export')"
@click.native="displayModalImportExport(true)"
/>
</div>
</div>
<CollectionsAdd
:show="showModalAdd"
@submit="addNewRootCollection"
@@ -53,38 +92,6 @@
@hide-modal="displayModalImportExport(false)"
@update-team-collections="updateTeamCollections"
/>
<div class="border-b flex justify-between flex-1 border-dividerLight">
<ButtonSecondary
v-if="
collectionsType.type == 'team-collections' &&
(collectionsType.selectedTeam == undefined ||
collectionsType.selectedTeam.myRole == 'VIEWER')
"
v-tippy="{ theme: 'tooltip' }"
disabled
icon="add"
:title="$t('disable_new_collection')"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-else
icon="add"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
:disabled="
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam == undefined
"
icon="import_export"
:title="$t('import_export')"
@click.native="displayModalImportExport(true)"
/>
</div>
<div
v-if="collections.length === 0"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
@@ -126,7 +133,7 @@
/>
</div>
<div
v-if="filterText && filteredCollections.length === 0"
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
>
<i class="material-icons opacity-50 pb-2">manage_search</i>

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

@@ -21,13 +21,15 @@
"
@click="toggleShowChildren()"
>
<i class="material-icons">{{ getCollectionIcon }}</i>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
{{ getCollectionIcon }}
</i>
</span>
<span
class="
py-3
cursor-pointer
pr-3
pr-2
flex flex-1
min-w-0
text-xs

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

@@ -21,13 +21,15 @@
"
@click="toggleShowChildren()"
>
<i class="material-icons">{{ getCollectionIcon }}</i>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
{{ getCollectionIcon }}
</i>
</span>
<span
class="
py-3
cursor-pointer
pr-3
pr-2
flex flex-1
min-w-0
text-xs

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

@@ -16,23 +16,29 @@
items-center
text-xs
w-12
mx-2
truncate
cursor-pointer
"
:class="[
getRequestLabelColor(request.method),
{ 'mx-3 text-green-400': isSelected },
]"
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
>
<i v-if="isSelected" class="material-icons">check_circle</i>
<i
v-if="isSelected"
class="material-icons"
:class="{ 'text-green-400': isSelected }"
>
check_circle
</i>
<span v-else>
{{ request.method }}
</span>
</span>
<span
class="
py-3
cursor-pointer
pr-3
pr-2
flex flex-1
min-w-0
text-xs

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

@@ -13,13 +13,15 @@
"
@click="toggleShowChildren()"
>
<i class="material-icons">{{ getCollectionIcon }}</i>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
{{ getCollectionIcon }}
</i>
</span>
<span
class="
py-3
cursor-pointer
pr-3
pr-2
flex flex-1
min-w-0
text-xs

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

@@ -13,13 +13,15 @@
"
@click="toggleShowChildren()"
>
<i class="material-icons">{{ getCollectionIcon }}</i>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
{{ getCollectionIcon }}
</i>
</span>
<span
class="
py-3
cursor-pointer
pr-3
pr-2
flex flex-1
min-w-0
text-xs

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

@@ -9,23 +9,29 @@
items-center
text-xs
w-12
mx-2
truncate
cursor-pointer
"
:class="[
getRequestLabelColor(request.method),
{ 'mx-3 text-green-400': isSelected },
]"
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
>
<i v-if="isSelected" class="material-icons">check_circle</i>
<i
v-if="isSelected"
class="material-icons"
:class="{ 'text-green-400': isSelected }"
>
check_circle
</i>
<span v-else>
{{ request.method }}
</span>
</span>
<span
class="
py-3
cursor-pointer
pr-3
pr-2
flex flex-1
min-w-0
text-xs

2
components/environments/Environment.vue
View File

@@ -18,7 +18,7 @@
class="
py-3
cursor-pointer
pr-3
pr-2
flex flex-1
min-w-0
text-xs

34
components/environments/index.vue
View File

@@ -1,5 +1,7 @@
<template>
<AppSection label="environments">
<div class="flex flex-col sticky z-10 top-10 bg-primary">
<div class="select-wrapper">
<select
v-model="selectedEnvironmentIndex"
:disabled="environments.length == 0"
@@ -8,10 +10,10 @@
w-full
px-4
text-xs
py-2
py-3
focus:outline-none
border-b border-dividerLight
bg-primary
bg-primaryLight
"
>
<option :value="-1">No environment</option>
@@ -26,6 +28,21 @@
{{ environment.name }}
</option>
</select>
</div>
<div class="border-b flex justify-between flex-1 border-dividerLight">
<ButtonSecondary
icon="add"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="import_export"
:title="$t('import_export')"
@click.native="displayModalImportExport(true)"
/>
</div>
</div>
<EnvironmentsAdd
:show="showModalAdd"
@hide-modal="displayModalAdd(false)"
@@ -40,19 +57,6 @@
:show="showModalImportExport"
@hide-modal="displayModalImportExport(false)"
/>
<div class="border-b flex justify-between flex-1 border-dividerLight">
<ButtonSecondary
icon="add"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="import_export"
:title="$t('import_export')"
@click.native="displayModalImportExport(true)"
/>
</div>
<div
v-if="environments.length === 0"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"

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

@@ -1,119 +1,65 @@
<template>
<div>
<div class="flex">
<li>
<input
data-testid="'url'"
:aria-label="$t('url')"
type="text"
readonly
:value="entry.url"
:placeholder="$t('empty_req_name')"
class="input cursor-pointer text-sm bg-transparent"
<div class="flex flex-col group">
<div class="flex items-center">
<span
class="
py-3
cursor-pointer
pr-2
pl-4
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
"
@click="$emit('use-entry')"
/>
</li>
>
<span class="truncate">
{{ entry.url }}
</span>
</span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="!entry.star ? $t('add_star') : $t('remove_star')"
data-testid="star_button"
:icon="entry.star ? 'star' : 'star_border'"
color="yellow"
@click.native="$emit('toggle-star')"
icon="delete"
:title="$t('delete')"
class="group-hover:inline-flex hidden"
color="red"
@click.native="$emit('delete-entry')"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="expand ? $t('hide_more') : $t('show_more')"
data-testid="query_expand"
:icon="expand ? 'unfold_less' : 'unfold_more'"
class="group-hover:inline-flex hidden"
@click.native="expand = !expand"
/>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<TabPrimary
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('options')"
data-testid="options"
icon="more_vert"
:title="!entry.star ? $t('add_star') : $t('remove_star')"
:icon="entry.star ? 'star' : 'star_border'"
color="yellow"
:class="{ 'group-hover:inline-flex hidden': !entry.star }"
@click.native="$emit('toggle-star')"
/>
</template>
<SmartItem
data-testid="restore_history_entry"
:aria-label="$t('restore')"
icon="restore"
:label="$t('restore')"
@click.native="
$emit('use-entry')
$refs.options.tippy().hide()
"
/>
<SmartItem
data-testid="delete_history_entry"
:aria-label="$t('delete')"
icon="delete"
:label="$t('delete')"
@click.native="
$emit('delete-entry')
$refs.options.tippy().hide()
"
/>
</tippy>
</div>
<div class="flex">
<li data-testid="'query'">
<input
<div class="flex flex-col">
<span
v-for="(line, index) in query"
:key="`line-${index}`"
:aria-label="$t('query')"
type="text"
readonly
:value="`${line}`"
class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li>
class="
text-xs
cursor-pointer
truncate
px-4
font-mono
text-secondaryLight
"
@click="$emit('use-entry')"
>
{{ line }}
</span>
</div>
<transition name="fade">
<div v-if="showMore" class="flex">
<li>
<input
v-tippy="{ theme: 'tooltip' }"
title="entry.date"
:aria-label="$t('time')"
type="text"
readonly
:value="entry.time"
class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li>
<li>
<input
:aria-label="$t('duration')"
type="text"
readonly
:value="`Duration: ${entry.duration}ms`"
:placeholder="$t('no_duration')"
class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li>
<!-- <li>
<input class="input"
:aria-label="$t('prerequest_script')"
type="text"
readonly
:value="entry.preRequestScript"
:placeholder="$t('no_prerequest_script')"
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/>
</li> -->
</div>
</transition>
</div>
</template>

16
components/history/index.vue
View File

@@ -1,11 +1,19 @@
<template>
<AppSection label="history">
<div class="flex sticky top-10 border-b border-dividerLight">
<div
class="
flex
sticky
z-10
bg-primaryLight
top-10
border-b border-dividerLight
"
>
<input
v-model="filterText"
aria-label="Search"
type="search"
class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
class="px-4 py-3 text-xs flex flex-1 bg-primaryLight focus:outline-none"
:placeholder="$t('search')"
/>
<ButtonSecondary
@@ -39,7 +47,7 @@
</div>
</div>
<div
:class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
v-if="!(filteredHistory.length !== 0 || history.length === 0)"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
>
<i class="material-icons opacity-50 pb-2">manage_search</i>

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

@@ -21,7 +21,7 @@
class="
py-3
cursor-pointer
pr-3
pr-2
flex flex-1
min-w-0
text-xs
@@ -36,7 +36,6 @@
</span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
data-testid="delete_history_entry"
icon="delete"
:title="$t('delete')"
class="group-hover:inline-flex hidden"

2
pages/api.vue
View File

@@ -601,7 +601,7 @@
</Pane>
<Pane max-size="30" size="25" min-size="20" class="overflow-auto hide-scrollbar">
<aside class="h-full">
<SmartTabs styles="sticky top-0">
<SmartTabs styles="sticky z-10 top-0">
<SmartTab :id="'history'" :label="$t('history')" :selected="true">
<History
:page="'rest'"

40
pages/graphql.vue
View File

@@ -323,30 +323,43 @@
</Pane>
</Splitpanes>
</Pane>
<Pane max-size="35" min-size="20" class="overflow-auto">
<Pane
max-size="30"
size="25"
min-size="20"
class="overflow-auto hide-scrollbar"
>
<aside class="lg:max-w-md">
<SmartTabs>
<SmartTabs styles="sticky z-10 top-0">
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<section class="flex-col">
<div class="flex flex-col sticky z-10 bg-primaryLight top-10">
<input
v-model="graphqlFieldsFilterText"
type="text"
:placeholder="$t('search')"
class="input rounded-t-lg"
class="
px-4
py-3
text-xs
flex flex-1
bg-primaryLight
focus:outline-none
"
/>
<SmartTabs ref="gqlTabs" styles="m-4">
<div class="gqlTabs">
</div>
<SmartTabs
ref="gqlTabs"
styles="
border-t border-dividerLight sticky z-10 top-20"
>
<SmartTab
v-if="queryFields.length > 0"
:id="'queries'"
:label="$t('queries')"
:selected="true"
>
<div
v-for="field in filteredQueryFields"
:key="field.name"
>
<div v-for="field in filteredQueryFields" :key="field.name">
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
@@ -392,10 +405,7 @@
ref="typesTab"
:label="$t('types')"
>
<div
v-for="type in filteredGraphqlTypes"
:key="type.name"
>
<div v-for="type in filteredGraphqlTypes" :key="type.name">
<GraphqlType
:gql-type="type"
:gql-types="graphqlTypes"
@@ -409,9 +419,7 @@
/>
</div>
</SmartTab>
</div>
</SmartTabs>
</section>
<p
v-if="
queryFields.length === 0 &&

1
pages/settings.vue
View File

@@ -282,7 +282,6 @@
</div>
</div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
<FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
<SmartConfirmModal
:show="confirmRemove"
:title="`${$t('are_you_sure_remove_telemetry')} ${$t(