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

refactor: lint + minor ui fixes

Browse Source
This commit is contained in:
liyasthomas
2021-11-27 19:59:28 +05:30
parent da8c446ad7
commit 0bf856291c
68 changed files with 363 additions and 1691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/hoppscotch-app/components/collections/ChooseType.vue
View File

@@ -18,19 +18,7 @@
type="text"
autocomplete="off"
autofocus
class="
border-dividerLight
hover:bg-primaryDark
flex
w-full
px-4
py-2
font-semibold
bg-transparent
border-t
appearance-none
cursor-pointer
"
class="border-dividerLight hover:bg-primaryDark flex w-full px-4 py-2 font-semibold bg-transparent border-t appearance-none cursor-pointer"
@change="updateSelectedTeam(myTeams[$event.target.value])"
>
<option

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-center group"
class="group flex items-center"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -20,16 +20,7 @@
/>
</span>
<span
class="
flex
group-hover:text-secondaryDark
flex-1
min-w-0
py-2
pr-2
transition
cursor-pointer
"
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
@click="toggleShowChildren()"
>
<span class="truncate"> {{ collection.name }} </span>
@@ -39,7 +30,7 @@
v-tippy="{ theme: 'tooltip' }"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
class="group-hover:inline-flex hidden"
@click.native="
$emit('add-folder', {
path: `${collectionIndex}`,
@@ -100,16 +91,7 @@
</div>
<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
"
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">
@@ -150,27 +132,12 @@
v-if="
collection.folders.length === 0 && collection.requests.length === 0
"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
mb-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="$t('empty.collection')"
/>
<span class="text-center">

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-center group"
class="group flex items-center"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -20,16 +20,7 @@
/>
</span>
<span
class="
flex
group-hover:text-secondaryDark
flex-1
min-w-0
py-2
pr-2
transition
cursor-pointer
"
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
@click="toggleShowChildren()"
>
<span class="truncate">
@@ -41,7 +32,7 @@
v-tippy="{ theme: 'tooltip' }"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
class="group-hover:inline-flex hidden"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<span>
@@ -96,16 +87,7 @@
</div>
<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
"
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">
@@ -149,27 +131,12 @@
folder.requests &&
folder.requests.length === 0
"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
mb-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="$t('empty.folder')"
/>
<span class="text-center">

25
packages/hoppscotch-app/components/collections/graphql/Request.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-center group"
class="group flex items-center"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@@ -9,15 +9,7 @@
@dragend="dragging = false"
>
<span
class="
flex
items-center
justify-center
w-16
px-2
truncate
cursor-pointer
"
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
@click="!doc ? selectRequest() : {}"
>
<SmartIcon
@@ -27,16 +19,7 @@
/>
</span>
<span
class="
flex
group-hover:text-secondaryDark
flex-1
min-w-0
py-2
pr-2
transition
cursor-pointer
"
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
@click="!doc ? selectRequest() : {}"
>
<span class="truncate"> {{ request.name }} </span>
@@ -47,7 +30,7 @@
v-tippy="{ theme: 'tooltip' }"
svg="rotate-ccw"
:title="$t('action.restore')"
class="hidden group-hover:inline-flex"
class="group-hover:inline-flex hidden"
@click.native="!doc ? selectRequest() : {}"
/>
<span>

18
packages/hoppscotch-app/components/collections/graphql/index.vue
View File

@@ -4,17 +4,7 @@
:class="{ 'rounded border border-divider': savingMode }"
>
<div
class="
flex
divide-dividerLight
border-dividerLight
sticky
top-0
z-10
flex-col
border-b
divide-y
"
class="divide-dividerLight border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y"
:class="{ 'bg-primary': !savingMode }"
>
<input
@@ -72,7 +62,7 @@
</div>
<div
v-if="collections.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
@@ -91,9 +81,9 @@
</div>
<div
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<i class="pb-2 opacity-75 material-icons">manage_search</i>
<i class="material-icons pb-2 opacity-75">manage_search</i>
<span class="text-center">
{{ $t("state.nothing_found") }} "{{ filterText }}"
</span>

20
packages/hoppscotch-app/components/collections/index.vue
View File

@@ -4,19 +4,7 @@
:class="{ 'rounded border border-divider': saveRequest }"
>
<div
class="
flex
divide-dividerLight
bg-primary
border-dividerLight
sticky
top-0
z-10
flex-col
border-b
divide-y
rounded-t
"
class="divide-dividerLight bg-primary border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y rounded-t"
>
<div v-if="!saveRequest" class="search-wrappe">
<input
@@ -110,7 +98,7 @@
</div>
<div
v-if="filteredCollections.length === 0 && filterText.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
@@ -143,9 +131,9 @@
</div>
<div
v-if="filterText.length !== 0 && filteredCollections.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<i class="pb-2 opacity-75 material-icons">manage_search</i>
<i class="material-icons pb-2 opacity-75">manage_search</i>
<span class="text-center">
{{ $t("state.nothing_found") }} "{{ filterText }}"
</span>

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-center group"
class="group flex items-center"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -20,16 +20,7 @@
/>
</span>
<span
class="
flex
group-hover:text-secondaryDark
flex-1
min-w-0
py-2
pr-2
transition
cursor-pointer
"
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
@click="toggleShowChildren()"
>
<span class="truncate"> {{ collection.name }} </span>
@@ -56,7 +47,7 @@
v-tippy="{ theme: 'tooltip' }"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
class="group-hover:inline-flex hidden"
@click.native="
$emit('add-folder', {
folder: collection,
@@ -119,16 +110,7 @@
</div>
<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
"
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">
@@ -176,27 +158,12 @@
(collection.requests == undefined ||
collection.requests.length === 0)
"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
mb-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="$t('empty.collection')"
/>
<span class="text-center">

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-center group"
class="group flex items-center"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -20,16 +20,7 @@
/>
</span>
<span
class="
flex
group-hover:text-secondaryDark
flex-1
min-w-0
py-2
pr-2
transition
cursor-pointer
"
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
@click="toggleShowChildren()"
>
<span class="truncate">
@@ -41,7 +32,7 @@
v-tippy="{ theme: 'tooltip' }"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
class="group-hover:inline-flex hidden"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<span>
@@ -101,16 +92,7 @@
</div>
<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
"
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">
@@ -158,27 +140,12 @@
folder.requests &&
folder.requests.length === 0
"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
mb-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="$t('empty.folder')"
/>
<span class="text-center">

26
packages/hoppscotch-app/components/collections/my/Request.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-center group"
class="group flex items-center"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@@ -9,15 +9,7 @@
@dragend="dragging = false"
>
<span
class="
flex
items-center
justify-center
w-16
px-2
truncate
cursor-pointer
"
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
>
@@ -32,17 +24,7 @@
</span>
</span>
<span
class="
group-hover:text-secondaryDark
flex
items-center
flex-1
min-w-0
py-2
pr-2
transition
cursor-pointer
"
class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
@click="!doc ? selectRequest() : {}"
>
<span class="truncate"> {{ request.name }} </span>
@@ -62,7 +44,7 @@
v-tippy="{ theme: 'tooltip' }"
svg="rotate-ccw"
:title="$t('action.restore')"
class="hidden group-hover:inline-flex"
class="group-hover:inline-flex hidden"
@click.native="!doc ? selectRequest() : {}"
/>
<span>

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

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col">
<div class="flex items-center group">
<div class="group flex items-center">
<span
class="flex items-center justify-center px-4 cursor-pointer"
@click="toggleShowChildren()"
@@ -12,16 +12,7 @@
/>
</span>
<span
class="
flex
group-hover:text-secondaryDark
flex-1
min-w-0
py-2
pr-2
transition
cursor-pointer
"
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
@click="toggleShowChildren()"
>
<span class="truncate"> {{ collection.title }} </span>
@@ -48,7 +39,7 @@
v-tippy="{ theme: 'tooltip' }"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
class="group-hover:inline-flex hidden"
@click.native="
$emit('add-folder', {
folder: collection,
@@ -115,16 +106,7 @@
</div>
<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
"
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">
@@ -170,27 +152,12 @@
(collection.requests == undefined ||
collection.requests.length === 0)
"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
mb-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="$t('empty.collection')"
/>
<span class="text-center">

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

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col">
<div class="flex items-center group">
<div class="group flex items-center">
<span
class="flex items-center justify-center px-4 cursor-pointer"
@click="toggleShowChildren()"
@@ -12,16 +12,7 @@
/>
</span>
<span
class="
flex
group-hover:text-secondaryDark
flex-1
min-w-0
py-2
pr-2
transition
cursor-pointer
"
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
@click="toggleShowChildren()"
>
<span class="truncate">
@@ -34,7 +25,7 @@
v-tippy="{ theme: 'tooltip' }"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
class="group-hover:inline-flex hidden"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<span>
@@ -98,16 +89,7 @@
</div>
<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
"
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">
@@ -151,27 +133,12 @@
(folder.children == undefined || folder.children.length === 0) &&
(folder.requests == undefined || folder.requests.length === 0)
"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
mb-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="$t('empty.folder')"
/>
<span class="text-center">

26
packages/hoppscotch-app/components/collections/teams/Request.vue
View File

@@ -1,16 +1,8 @@
<template>
<div class="flex flex-col">
<div class="flex items-center group">
<div class="group flex items-center">
<span
class="
flex
items-center
justify-center
w-16
px-2
truncate
cursor-pointer
"
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
>
@@ -25,17 +17,7 @@
</span>
</span>
<span
class="
group-hover:text-secondaryDark
flex
items-center
flex-1
min-w-0
py-2
pr-2
transition
cursor-pointer
"
class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
@click="!doc ? selectRequest() : {}"
>
<span class="truncate"> {{ request.name }} </span>
@@ -54,7 +36,7 @@
v-tippy="{ theme: 'tooltip' }"
svg="rotate-ccw"
:title="$t('action.restore')"
class="hidden group-hover:inline-flex"
class="group-hover:inline-flex hidden"
@click.native="!doc ? selectRequest() : {}"
/>
<span>