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

feat: collapse collections/folders on clicking side border

Browse Source
This commit is contained in:
liyasthomas
2021-10-20 13:55:18 +05:30
parent 2f91d25ed4
commit e85f7b8232
7 changed files with 392 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/hoppscotch-app/components/collections/graphql/Collection.vue
View File

@@ -97,11 +97,24 @@
</span> </span>
</div> </div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered" class="flex">
<div
class="
flex
w-1
transform
transition
cursor-nsResize
ml-5.5
bg-dividerLight
hover:scale-x-125 hover:bg-dividerDark
"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<CollectionsGraphqlFolder <CollectionsGraphqlFolder
v-for="(folder, index) in collection.folders" v-for="(folder, index) in collection.folders"
:key="`folder-${String(index)}`" :key="`folder-${String(index)}`"
class="border-l border-dividerLight ml-6"
:picked="picked" :picked="picked"
:saving-mode="savingMode" :saving-mode="savingMode"
:folder="folder" :folder="folder"
@@ -118,7 +131,6 @@
<CollectionsGraphqlRequest <CollectionsGraphqlRequest
v-for="(request, index) in collection.requests" v-for="(request, index) in collection.requests"
:key="`request-${String(index)}`" :key="`request-${String(index)}`"
class="border-l border-dividerLight ml-6"
:picked="picked" :picked="picked"
:saving-mode="savingMode" :saving-mode="savingMode"
:request="request" :request="request"
@@ -136,10 +148,8 @@
collection.folders.length === 0 && collection.requests.length === 0 collection.folders.length === 0 && collection.requests.length === 0
" "
class=" class="
border-l border-dividerLight
flex flex-col flex flex-col
text-secondaryLight text-secondaryLight
ml-6
p-4 p-4
items-center items-center
justify-center justify-center
@@ -151,6 +161,7 @@
</span> </span>
</div> </div>
</div> </div>
</div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="`${$t('confirm.remove_collection')}`" :title="`${$t('confirm.remove_collection')}`"

21
packages/hoppscotch-app/components/collections/graphql/Folder.vue
View File

@@ -93,11 +93,24 @@
</span> </span>
</div> </div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered" class="flex">
<div
class="
flex
w-1
transform
transition
cursor-nsResize
ml-5.5
bg-dividerLight
hover:scale-x-125 hover:bg-dividerDark
"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<CollectionsGraphqlFolder <CollectionsGraphqlFolder
v-for="(subFolder, subFolderIndex) in folder.folders" v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${String(subFolderIndex)}`" :key="`subFolder-${String(subFolderIndex)}`"
class="border-l border-dividerLight ml-6"
:picked="picked" :picked="picked"
:saving-mode="savingMode" :saving-mode="savingMode"
:folder="subFolder" :folder="subFolder"
@@ -114,7 +127,6 @@
<CollectionsGraphqlRequest <CollectionsGraphqlRequest
v-for="(request, index) in folder.requests" v-for="(request, index) in folder.requests"
:key="`request-${String(index)}`" :key="`request-${String(index)}`"
class="border-l border-dividerLight ml-6"
:picked="picked" :picked="picked"
:saving-mode="savingMode" :saving-mode="savingMode"
:request="request" :request="request"
@@ -135,10 +147,8 @@
folder.requests.length === 0 folder.requests.length === 0
" "
class=" class="
border-l border-dividerLight
flex flex-col flex flex-col
text-secondaryLight text-secondaryLight
ml-6
p-4 p-4
items-center items-center
justify-center justify-center
@@ -150,6 +160,7 @@
</span> </span>
</div> </div>
</div> </div>
</div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="`${$t('confirm.remove_folder')}`" :title="`${$t('confirm.remove_folder')}`"

24
packages/hoppscotch-app/components/collections/my/Collection.vue
View File

@@ -116,11 +116,24 @@
</span> </span>
</div> </div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered" class="flex">
<div
class="
flex
w-1
transform
transition
cursor-nsResize
ml-5.5
bg-dividerLight
hover:scale-x-125 hover:bg-dividerDark
"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<CollectionsMyFolder <CollectionsMyFolder
v-for="(folder, index) in collection.folders" v-for="(folder, index) in collection.folders"
:key="`folder-${index}`" :key="`folder-${index}`"
class="border-l border-dividerLight ml-6"
:folder="folder" :folder="folder"
:folder-index="index" :folder-index="index"
:folder-path="`${collectionIndex}/${index}`" :folder-path="`${collectionIndex}/${index}`"
@@ -139,7 +152,6 @@
<CollectionsMyRequest <CollectionsMyRequest
v-for="(request, index) in collection.requests" v-for="(request, index) in collection.requests"
:key="`request-${index}`" :key="`request-${index}`"
class="border-l border-dividerLight ml-6"
:request="request" :request="request"
:collection-index="collectionIndex" :collection-index="collectionIndex"
:folder-index="-1" :folder-index="-1"
@@ -158,13 +170,12 @@
v-if=" v-if="
(collection.folders == undefined || (collection.folders == undefined ||
collection.folders.length === 0) && collection.folders.length === 0) &&
(collection.requests == undefined || collection.requests.length === 0) (collection.requests == undefined ||
collection.requests.length === 0)
" "
class=" class="
border-l border-dividerLight
flex flex-col flex flex-col
text-secondaryLight text-secondaryLight
ml-6
p-4 p-4
items-center items-center
justify-center justify-center
@@ -176,6 +187,7 @@
</span> </span>
</div> </div>
</div> </div>
</div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="$t('confirm.remove_collection')" :title="$t('confirm.remove_collection')"

21
packages/hoppscotch-app/components/collections/my/Folder.vue
View File

@@ -98,11 +98,24 @@
</span> </span>
</div> </div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered" class="flex">
<div
class="
flex
w-1
transform
transition
cursor-nsResize
ml-5.5
bg-dividerLight
hover:scale-x-125 hover:bg-dividerDark
"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<CollectionsMyFolder <CollectionsMyFolder
v-for="(subFolder, subFolderIndex) in folder.folders" v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`" :key="`subFolder-${subFolderIndex}`"
class="border-l border-dividerLight ml-6"
:folder="subFolder" :folder="subFolder"
:folder-index="subFolderIndex" :folder-index="subFolderIndex"
:collection-index="collectionIndex" :collection-index="collectionIndex"
@@ -121,7 +134,6 @@
<CollectionsMyRequest <CollectionsMyRequest
v-for="(request, index) in folder.requests" v-for="(request, index) in folder.requests"
:key="`request-${index}`" :key="`request-${index}`"
class="border-l border-dividerLight ml-6"
:request="request" :request="request"
:collection-index="collectionIndex" :collection-index="collectionIndex"
:folder-index="folderIndex" :folder-index="folderIndex"
@@ -144,10 +156,8 @@
folder.requests.length === 0 folder.requests.length === 0
" "
class=" class="
border-l border-dividerLight
flex flex-col flex flex-col
text-secondaryLight text-secondaryLight
ml-6
p-4 p-4
items-center items-center
justify-center justify-center
@@ -159,6 +169,7 @@
</span> </span>
</div> </div>
</div> </div>
</div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="$t('confirm.remove_folder')" :title="$t('confirm.remove_folder')"

24
packages/hoppscotch-app/components/collections/teams/Collection.vue
View File

@@ -112,11 +112,24 @@
</span> </span>
</div> </div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered" class="flex">
<div
class="
flex
w-1
transform
transition
cursor-nsResize
ml-5.5
bg-dividerLight
hover:scale-x-125 hover:bg-dividerDark
"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<CollectionsTeamsFolder <CollectionsTeamsFolder
v-for="(folder, index) in collection.children" v-for="(folder, index) in collection.children"
:key="`folder-${index}`" :key="`folder-${index}`"
class="border-l border-dividerLight ml-6"
:folder="folder" :folder="folder"
:folder-index="index" :folder-index="index"
:folder-path="`${collectionIndex}/${index}`" :folder-path="`${collectionIndex}/${index}`"
@@ -136,7 +149,6 @@
<CollectionsTeamsRequest <CollectionsTeamsRequest
v-for="(request, index) in collection.requests" v-for="(request, index) in collection.requests"
:key="`request-${index}`" :key="`request-${index}`"
class="border-l border-dividerLight ml-6"
:request="request.request" :request="request.request"
:collection-index="collectionIndex" :collection-index="collectionIndex"
:folder-index="-1" :folder-index="-1"
@@ -154,13 +166,12 @@
v-if=" v-if="
(collection.children == undefined || (collection.children == undefined ||
collection.children.length === 0) && collection.children.length === 0) &&
(collection.requests == undefined || collection.requests.length === 0) (collection.requests == undefined ||
collection.requests.length === 0)
" "
class=" class="
border-l border-dividerLight
flex flex-col flex flex-col
text-secondaryLight text-secondaryLight
ml-6
p-4 p-4
items-center items-center
justify-center justify-center
@@ -172,6 +183,7 @@
</span> </span>
</div> </div>
</div> </div>
</div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="$t('confirm.remove_collection')" :title="$t('confirm.remove_collection')"

21
packages/hoppscotch-app/components/collections/teams/Folder.vue
View File

@@ -95,11 +95,24 @@
</span> </span>
</div> </div>
</div> </div>
<div v-if="showChildren || isFiltered"> <div v-if="showChildren || isFiltered" class="flex">
<div
class="
flex
w-1
transform
transition
cursor-nsResize
ml-5.5
bg-dividerLight
hover:scale-x-125 hover:bg-dividerDark
"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">
<CollectionsTeamsFolder <CollectionsTeamsFolder
v-for="(subFolder, subFolderIndex) in folder.children" v-for="(subFolder, subFolderIndex) in folder.children"
:key="`subFolder-${subFolderIndex}`" :key="`subFolder-${subFolderIndex}`"
class="border-l border-dividerLight ml-6"
:folder="subFolder" :folder="subFolder"
:folder-index="subFolderIndex" :folder-index="subFolderIndex"
:collection-index="collectionIndex" :collection-index="collectionIndex"
@@ -119,7 +132,6 @@
<CollectionsTeamsRequest <CollectionsTeamsRequest
v-for="(request, index) in folder.requests" v-for="(request, index) in folder.requests"
:key="`request-${index}`" :key="`request-${index}`"
class="border-l border-dividerLight ml-6"
:request="request.request" :request="request.request"
:collection-index="collectionIndex" :collection-index="collectionIndex"
:folder-index="folderIndex" :folder-index="folderIndex"
@@ -139,10 +151,8 @@
(folder.requests == undefined || folder.requests.length === 0) (folder.requests == undefined || folder.requests.length === 0)
" "
class=" class="
border-l border-dividerLight
flex flex-col flex flex-col
text-secondaryLight text-secondaryLight
ml-6
p-4 p-4
items-center items-center
justify-center justify-center
@@ -154,6 +164,7 @@
</span> </span>
</div> </div>
</div> </div>
</div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="$t('confirm.remove_folder')" :title="$t('confirm.remove_folder')"

3
packages/hoppscotch-app/windi.config.js
View File

@@ -41,6 +41,9 @@ export default defineConfig({
mono: "var(--font-mono)", mono: "var(--font-mono)",
icon: "var(--font-icon)", icon: "var(--font-icon)",
}, },
cursor: {
nsResize: "ns-resize",
},
}, },
}, },
}) })