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

refactor: minor ui improvements

Browse Source
This commit is contained in:
liyasthomas
2021-08-15 15:18:04 +05:30
parent 8c70f83297
commit bfc0282e49
18 changed files with 525 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/app/Header.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<header class="flex flex-1 py-2 px-4 items-center justify-between"> <header class="flex flex-1 py-2 px-4 items-center justify-between">
<div class="font-bold flex-shrink-0 inline-flex items-center"> <div class="font-bold flex-shrink-0 inline-flex items-center">
Hoppscotch <AppLogo />
</div> </div>
<div class="space-x-2 flex-shrink-0 inline-flex items-center"> <div class="space-x-2 flex-shrink-0 inline-flex items-center">
<AppGitHubStarButton class="flex mx-2 mt-1" /> <AppGitHubStarButton class="flex mx-2 mt-1" />

14
components/app/Logo.vue
View File

@@ -1,14 +1,18 @@
<template> <template>
<svg <svg
class="logo" class="logo"
viewBox="0 0 24 24"
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
> >
<path <path
class="fill-current" d="M17 10.54C16.78 7.44 14.63 5 12 5s-4.78 2.44-5 5.54C4 11.23 2 12.5 2 14c0 2.21 4.5 4 10 4s10-1.79 10-4c0-1.5-2-2.77-5-3.46m-2.07 1.3c-1.9.21-3.96.21-5.86 0c-.04-.28-.07-.56-.07-.84c0-2.2 1.35-4 3-4s3 1.8 3 4c0 .28 0 .56-.07.84z"
d="M2.534 9.287C2.534 15.46 7.56 24 12 24c4.18 0 9.466-8.539 9.466-14.713C21.467 3.113 17.228 0 12 0 6.772 0 2.534 3.113 2.534 9.287zm11.926 4.565a4.649 4.649 0 014.257-1.261 4.649 4.649 0 01-1.262 4.256 4.649 4.649 0 01-4.257 1.262 4.649 4.649 0 011.262-4.257zm-9.177-1.261a4.649 4.649 0 014.258 1.261 4.649 4.649 0 011.261 4.257 4.649 4.649 0 01-4.257-1.262 4.649 4.649 0 01-1.262-4.256z" fill="currentColor"
/> />
</svg> </svg>
</template> </template>

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

@@ -31,53 +31,63 @@
> >
<span class="truncate"> {{ collection.name }} </span> <span class="truncate"> {{ collection.name }} </span>
</span> </span>
<ButtonSecondary <div class="flex">
v-tippy="{ theme: 'tooltip' }" <ButtonSecondary
icon="create_new_folder" v-tippy="{ theme: 'tooltip' }"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="
$emit('add-folder', {
path: `${collectionIndex}`,
})
"
/>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="create_new_folder" icon="create_new_folder"
:label="$t('folder.new')" :title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native=" @click.native="
$emit('add-folder', { $emit('add-folder', {
path: `${collectionIndex}`, path: `${collectionIndex}`,
}) })
$refs.options.tippy().hide()
" "
/> />
<SmartItem <span>
icon="create" <tippy
:label="$t('edit')" ref="options"
@click.native=" interactive
$emit('edit-collection') trigger="click"
$refs.options.tippy().hide() theme="popover"
" arrow
/> >
<SmartItem <template #trigger>
icon="delete" <ButtonSecondary
color="red" v-tippy="{ theme: 'tooltip' }"
:label="$t('delete')" :title="$t('more')"
@click.native=" icon="more_vert"
confirmRemove = true />
$refs.options.tippy().hide() </template>
" <SmartItem
/> icon="create_new_folder"
</tippy> :label="$t('folder.new')"
@click.native="
$emit('add-folder', {
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="create"
:label="$t('edit')"
@click.native="
$emit('edit-collection')
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="delete"
color="red"
:label="$t('delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered">
<CollectionsGraphqlFolder <CollectionsGraphqlFolder

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

@@ -33,47 +33,57 @@
{{ folder.name ? folder.name : folder.title }} {{ folder.name ? folder.name : folder.title }}
</span> </span>
</span> </span>
<ButtonSecondary <div class="flex">
v-tippy="{ theme: 'tooltip' }" <ButtonSecondary
icon="create_new_folder" v-tippy="{ theme: 'tooltip' }"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="create_new_folder" icon="create_new_folder"
:label="$t('folder.new')" :title="$t('folder.new')"
@click.native=" class="hidden group-hover:inline-flex"
$emit('add-folder', { folder, path: folderPath }) @click.native="$emit('add-folder', { folder, path: folderPath })"
$refs.options.tippy().hide()
"
/> />
<SmartItem <span>
icon="edit" <tippy
:label="$t('edit')" ref="options"
@click.native=" interactive
$emit('edit-folder', { folder, folderPath }) trigger="click"
$refs.options.tippy().hide() theme="popover"
" arrow
/> >
<SmartItem <template #trigger>
icon="delete" <ButtonSecondary
color="red" v-tippy="{ theme: 'tooltip' }"
:label="$t('delete')" :title="$t('more')"
@click.native=" icon="more_vert"
confirmRemove = true />
$refs.options.tippy().hide() </template>
" <SmartItem
/> icon="create_new_folder"
</tippy> :label="$t('folder.new')"
@click.native="
$emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-folder', { folder, folderPath })
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="delete"
color="red"
:label="$t('delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered">
<CollectionsGraphqlFolder <CollectionsGraphqlFolder

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

@@ -38,44 +38,54 @@
> >
<span class="truncate"> {{ request.name }} </span> <span class="truncate"> {{ request.name }} </span>
</span> </span>
<ButtonSecondary <div class="flex">
v-if="!savingMode" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-if="!savingMode"
icon="replay" v-tippy="{ theme: 'tooltip' }"
:title="$t('restore')" icon="replay"
class="hidden group-hover:inline-flex" :title="$t('restore')"
@click.native="!doc ? selectRequest() : {}" class="hidden group-hover:inline-flex"
/> @click.native="!doc ? selectRequest() : {}"
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-request', {
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
"
/> />
<SmartItem <span>
icon="delete" <tippy
color="red" ref="options"
:label="$t('delete')" interactive
@click.native=" trigger="click"
confirmRemove = true theme="popover"
$refs.options.tippy().hide() arrow
" >
/> <template #trigger>
</tippy> <ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-request', {
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="delete"
color="red"
:label="$t('delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div> </div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"

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

@@ -31,72 +31,82 @@
> >
<span class="truncate"> {{ collection.name }} </span> <span class="truncate"> {{ collection.name }} </span>
</span> </span>
<ButtonSecondary <div class="flex">
v-if="doc && !selected" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-if="doc && !selected"
:title="$t('import.title')" v-tippy="{ theme: 'tooltip' }"
icon="check_box_outline_blank" :title="$t('import.title')"
color="green" icon="check_box_outline_blank"
@click.native="$emit('select-collection')" color="green"
/> @click.native="$emit('select-collection')"
<ButtonSecondary />
v-if="doc && selected" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-if="doc && selected"
:title="$t('delete')" v-tippy="{ theme: 'tooltip' }"
icon="check_box" :title="$t('delete')"
color="green" icon="check_box"
@click.native="$emit('unselect-collection')" color="green"
/> @click.native="$emit('unselect-collection')"
<ButtonSecondary />
v-if="!doc" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-if="!doc"
icon="create_new_folder" v-tippy="{ theme: 'tooltip' }"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
/>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="create_new_folder" icon="create_new_folder"
:label="$t('folder.new')" :title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native=" @click.native="
$emit('add-folder', { $emit('add-folder', {
folder: collection, folder: collection,
path: `${collectionIndex}`, path: `${collectionIndex}`,
}) })
$refs.options.tippy().hide()
" "
/> />
<SmartItem <span>
icon="create" <tippy
:label="$t('edit')" ref="options"
@click.native=" interactive
$emit('edit-collection') trigger="click"
$refs.options.tippy().hide() theme="popover"
" arrow
/> >
<SmartItem <template #trigger>
icon="delete" <ButtonSecondary
color="red" v-tippy="{ theme: 'tooltip' }"
:label="$t('delete')" :title="$t('more')"
@click.native=" icon="more_vert"
confirmRemove = true />
$refs.options.tippy().hide() </template>
" <SmartItem
/> icon="create_new_folder"
</tippy> :label="$t('folder.new')"
@click.native="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="create"
:label="$t('edit')"
@click.native="
$emit('edit-collection')
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="delete"
color="red"
:label="$t('delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered">
<CollectionsMyFolder <CollectionsMyFolder

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

@@ -33,52 +33,62 @@
{{ folder.name ? folder.name : folder.title }} {{ folder.name ? folder.name : folder.title }}
</span> </span>
</span> </span>
<ButtonSecondary <div class="flex">
v-tippy="{ theme: 'tooltip' }" <ButtonSecondary
icon="create_new_folder" v-tippy="{ theme: 'tooltip' }"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="create_new_folder" icon="create_new_folder"
:label="$t('folder.new')" :title="$t('folder.new')"
@click.native=" class="hidden group-hover:inline-flex"
$emit('add-folder', { folder, path: folderPath }) @click.native="$emit('add-folder', { folder, path: folderPath })"
$refs.options.tippy().hide()
"
/> />
<SmartItem <span>
icon="edit" <tippy
:label="$t('edit')" ref="options"
@click.native=" interactive
$emit('edit-folder', { trigger="click"
folder, theme="popover"
folderIndex, arrow
collectionIndex, >
folderPath, <template #trigger>
}) <ButtonSecondary
$refs.options.tippy().hide() v-tippy="{ theme: 'tooltip' }"
" :title="$t('more')"
/> icon="more_vert"
<SmartItem />
icon="delete" </template>
color="red" <SmartItem
:label="$t('delete')" icon="create_new_folder"
@click.native=" :label="$t('folder.new')"
confirmRemove = true @click.native="
$refs.options.tippy().hide() $emit('add-folder', { folder, path: folderPath })
" $refs.options.tippy().hide()
/> "
</tippy> />
<SmartItem
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="delete"
color="red"
:label="$t('delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered">
<CollectionsMyFolder <CollectionsMyFolder

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

@@ -46,47 +46,57 @@
> >
<span class="truncate"> {{ request.name }} </span> <span class="truncate"> {{ request.name }} </span>
</span> </span>
<ButtonSecondary <div class="flex">
v-if="!saveRequest && !doc" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-if="!saveRequest && !doc"
icon="replay" v-tippy="{ theme: 'tooltip' }"
:title="$t('restore')" icon="replay"
class="hidden group-hover:inline-flex" :title="$t('restore')"
@click.native="!doc ? selectRequest() : {}" class="hidden group-hover:inline-flex"
/> @click.native="!doc ? selectRequest() : {}"
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
"
/> />
<SmartItem <span>
icon="delete" <tippy
color="red" ref="options"
:label="$t('delete')" interactive
@click.native=" trigger="click"
confirmRemove = true theme="popover"
$refs.options.tippy().hide() arrow
" >
/> <template #trigger>
</tippy> <ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="delete"
color="red"
:label="$t('delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div> </div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"

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

@@ -23,82 +23,86 @@
> >
<span class="truncate"> {{ collection.title }} </span> <span class="truncate"> {{ collection.title }} </span>
</span> </span>
<ButtonSecondary <div class="flex">
v-if="doc && !selected" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-if="doc && !selected"
:title="$t('import.title')" v-tippy="{ theme: 'tooltip' }"
icon="check_box_outline_blank" :title="$t('import.title')"
color="green" icon="check_box_outline_blank"
@click.native="$emit('select-collection')" color="green"
/> @click.native="$emit('select-collection')"
<ButtonSecondary />
v-if="doc && selected" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-if="doc && selected"
:title="$t('delete')" v-tippy="{ theme: 'tooltip' }"
icon="check_box" :title="$t('delete')"
color="green" icon="check_box"
@click.native="$emit('unselect-collection')" color="green"
/> @click.native="$emit('unselect-collection')"
<ButtonSecondary />
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
:title="$t('folder.new')"
class="group-hover:inline-flex hidden"
@click.native="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
/>
<tippy
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
ref="options"
interactive
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder" icon="create_new_folder"
:label="$t('folder.new')" :title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native=" @click.native="
$emit('add-folder', { $emit('add-folder', {
folder: collection, folder: collection,
path: `${collectionIndex}`, path: `${collectionIndex}`,
}) })
$refs.options.tippy().hide()
" "
/> />
<SmartItem <span>
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" <tippy
icon="create" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
:label="$t('edit')" ref="options"
@click.native=" interactive
$emit('edit-collection') trigger="click"
$refs.options.tippy().hide() theme="popover"
" arrow
/> >
<SmartItem <template #trigger>
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" <ButtonSecondary
icon="delete" v-tippy="{ theme: 'tooltip' }"
color="red" :title="$t('more')"
:label="$t('delete')" icon="more_vert"
@click.native=" />
confirmRemove = true </template>
$refs.options.tippy().hide() <SmartItem
" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
/> icon="create_new_folder"
</tippy> :label="$t('folder.new')"
@click.native="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create"
:label="$t('edit')"
@click.native="
$emit('edit-collection')
$refs.options.tippy().hide()
"
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="delete"
color="red"
:label="$t('delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered">
<CollectionsTeamsFolder <CollectionsTeamsFolder

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

@@ -25,63 +25,67 @@
{{ folder.name ? folder.name : folder.title }} {{ folder.name ? folder.name : folder.title }}
</span> </span>
</span> </span>
<ButtonSecondary <div class="flex">
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<tippy
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
ref="options"
interactive
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder" icon="create_new_folder"
:label="$t('folder.new')" :title="$t('folder.new')"
@click.native=" class="hidden group-hover:inline-flex"
$emit('add-folder', { folder, path: folderPath }) @click.native="$emit('add-folder', { folder, path: folderPath })"
$refs.options.tippy().hide()
"
/> />
<SmartItem <span>
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" <tippy
icon="edit" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
:label="$t('edit')" ref="options"
@click.native=" interactive
$emit('edit-folder', { trigger="click"
folder, theme="popover"
folderIndex, arrow
collectionIndex, >
folderPath: '', <template #trigger>
}) <ButtonSecondary
$refs.options.tippy().hide() v-tippy="{ theme: 'tooltip' }"
" :title="$t('more')"
/> icon="more_vert"
<SmartItem />
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'" </template>
icon="delete" <SmartItem
color="red" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
:label="$t('delete')" icon="create_new_folder"
@click.native=" :label="$t('folder.new')"
confirmRemove = true @click.native="
$refs.options.tippy().hide() $emit('add-folder', { folder, path: folderPath })
" $refs.options.tippy().hide()
/> "
</tippy> />
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath: '',
})
$refs.options.tippy().hide()
"
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="delete"
color="red"
:label="$t('delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered">
<CollectionsTeamsFolder <CollectionsTeamsFolder

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

@@ -39,53 +39,57 @@
> >
<span class="truncate"> {{ request.name }} </span> <span class="truncate"> {{ request.name }} </span>
</span> </span>
<ButtonSecondary <div class="flex">
v-if="!saveRequest && !doc" <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-if="!saveRequest && !doc"
icon="replay" v-tippy="{ theme: 'tooltip' }"
:title="$t('restore')" icon="replay"
class="group-hover:inline-flex hidden" :title="$t('restore')"
@click.native="!doc ? selectRequest() : {}" class="hidden group-hover:inline-flex"
/> @click.native="!doc ? selectRequest() : {}"
<tippy
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
ref="options"
interactive
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
})
$refs.options.tippy().hide()
"
/> />
<SmartItem <span>
icon="delete" <tippy
color="red" v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
:label="$t('delete')" ref="options"
@click.native=" interactive
confirmRemove = true trigger="click"
$refs.options.tippy().hide() theme="popover"
" arrow
/> >
</tippy> <template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
/>
</template>
<SmartItem
icon="edit"
:label="$t('edit')"
@click.native="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="delete"
color="red"
:label="$t('delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div> </div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"

2
components/firebase/Login.vue
View File

@@ -6,7 +6,7 @@
@close="hideModal" @close="hideModal"
> >
<template #body> <template #body>
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2"> <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
<SmartItem <SmartItem
:loading="signingInWithGoogle" :loading="signingInWithGoogle"
svg="google" svg="google"

2
components/http/CodegenModal.vue
View File

@@ -9,7 +9,7 @@
<label for="requestType" class="px-4 pb-4"> <label for="requestType" class="px-4 pb-4">
{{ $t("request.choose_language") }} {{ $t("request.choose_language") }}
</label> </label>
<div class="flex flex-1"> <div class="flex">
<tippy <tippy
ref="options" ref="options"
interactive interactive

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

@@ -39,7 +39,7 @@
<SmartAceEditor <SmartAceEditor
:value="jsonBodyText" :value="jsonBodyText"
:lang="'json'" :lang="'json'"
:provide-j-s-o-n-outline="true" :provide-outline="true"
:options="{ :options="{
maxLines: Infinity, maxLines: Infinity,
minLines: 16, minLines: 16,

10
components/smart/AceEditor.vue
View File

@@ -2,7 +2,7 @@
<div class="show-if-initialized" :class="{ initialized }"> <div class="show-if-initialized" :class="{ initialized }">
<pre ref="editor" :class="styles"></pre> <pre ref="editor" :class="styles"></pre>
<div <div
v-if="provideJSONOutline" v-if="provideOutline"
class=" class="
bg-primaryLight bg-primaryLight
border-t border-divider border-t border-divider
@@ -63,7 +63,7 @@ import outline from "~/helpers/outline"
export default { export default {
props: { props: {
provideJSONOutline: { provideOutline: {
type: Boolean, type: Boolean,
default: false, default: false,
required: false, required: false,
@@ -160,7 +160,7 @@ export default {
this.editor = editor this.editor = editor
this.cacheValue = this.value this.cacheValue = this.value
if (this.lang === "json" && this.provideJSONOutline) if (this.lang === "json" && this.provideOutline)
this.initOutline(this.value) this.initOutline(this.value)
editor.on("change", () => { editor.on("change", () => {
@@ -168,12 +168,12 @@ export default {
this.$emit("input", content) this.$emit("input", content)
this.cacheValue = content this.cacheValue = content
if (this.provideJSONOutline) debounce(this.initOutline(content), 500) if (this.provideOutline) debounce(this.initOutline(content), 500)
if (this.lint) this.provideLinting(content) if (this.lint) this.provideLinting(content)
}) })
if (this.lang === "json" && this.provideJSONOutline) { if (this.lang === "json" && this.provideOutline) {
editor.session.selection.on("changeCursor", () => { editor.session.selection.on("changeCursor", () => {
const index = editor.session.doc.positionToIndex( const index = editor.session.doc.positionToIndex(
editor.selection.getCursor(), editor.selection.getCursor(),

8
components/smart/ColorModePicker.vue
View File

@@ -38,15 +38,15 @@ export default defineComponent({
getIcon(color: HoppBgColor) { getIcon(color: HoppBgColor) {
switch (color) { switch (color) {
case "system": case "system":
return "desktop_windows" return "devices"
case "light": case "light":
return "wb_sunny" return "light_mode"
case "dark": case "dark":
return "nights_stay" return "nights_stay"
case "black": case "black":
return "bedtime" return "dark_mode"
default: default:
return "desktop_windows" return "devices"
} }
}, },
}, },

2
helpers/outline.js
View File

@@ -106,7 +106,7 @@ export default () => {
} }
const getSiblings = (index) => { const getSiblings = (index) => {
const parent = path[index].obj.parent const parent = path[index]?.obj?.parent
if (!parent) return [] if (!parent) return []
else if (parent.kind === "Object") { else if (parent.kind === "Object") {
return parent.members return parent.members

10
pages/enter.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="flex flex-col min-h-screen items-center justify-center"> <div class="flex flex-col min-h-screen items-center justify-center">
<span v-if="signingInWithEmail"> <div v-if="signingInWithEmail">
<SmartSpinner /> <SmartSpinner />
</span> </div>
<span v-else class="text-secondaryLight"> <div v-else class="text-sm text-secondaryLight animate-pulse">
{{ $t("waiting_for_connection") }} <AppLogo class="h-8 w-8" />
</span> </div>
<pre v-if="error">{{ error }}</pre> <pre v-if="error">{{ error }}</pre>
</div> </div>
</template> </template>