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

feat: revamp collections ui

Browse Source
This commit is contained in:
liyasthomas
2021-07-08 13:00:41 +05:30
parent 6635d449a5
commit 207dc2b6a6
29 changed files with 821 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,13 +33,14 @@
/>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<TabPrimary
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
@@ -79,7 +80,7 @@
<li
v-for="(folder, index) in collection.folders"
:key="folder.name"
class="ml-8 border-l border-divider"
class="ml-5 border-l border-dividerLight"
>
<CollectionsGraphqlFolder
:picked="picked"
@@ -101,7 +102,7 @@
<li
v-for="(request, index) in collection.requests"
:key="index"
class="ml-8 border-l border-divider"
class="ml-5 border-l border-dividerLight"
>
<CollectionsGraphqlRequest
:picked="picked"
@@ -123,7 +124,12 @@
v-if="
collection.folders.length === 0 && collection.requests.length === 0
"
class="flex ml-8 border-l border-divider"
class="
ml-5
border-l border-dividerLight
ml-5
border-l border-dividerLight
"
>
<p>
<i class="material-icons">not_interested</i>

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

@@ -23,9 +23,16 @@
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name }}</span>
</div>
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<TabPrimary
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"
@@ -62,7 +69,7 @@
<li
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name"
class="ml-8 border-l border-divider"
class="ml-5 border-l border-dividerLight"
>
<CollectionsGraphqlFolder
:picked="picked"
@@ -84,7 +91,7 @@
<li
v-for="(request, index) in folder.requests"
:key="index"
class="flex ml-8 border-l border-divider"
class="ml-5 border-l border-dividerLight"
>
<CollectionsGraphqlRequest
:picked="picked"
@@ -109,7 +116,14 @@
folder.requests.length === 0
"
>
<li class="flex ml-8 border-l border-divider">
<li
class="
ml-5
border-l border-dividerLight
ml-5
border-l border-dividerLight
"
>
<p>
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}

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

@@ -5,6 +5,7 @@
<div>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"

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

@@ -10,17 +10,22 @@
>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="!doc ? $t('use_request') : ''"
:class="{ 'mx-3 text-green-400': isSelected }"
:icon="isSelected ? 'check_circle' : 'description'"
:label="request.name"
@click.native="!doc ? selectRequest() : {}"
/>
</div>
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<TabPrimary
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="more_vert"