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

chore: uniform ui in rest and graphql collections

Browse Source
This commit is contained in:
Liyas Thomas
2023-01-31 22:39:24 +05:30
parent 59a8a22e8a
commit cd6e40f01c
10 changed files with 47 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/hoppscotch-common/src/components/collections/MyCollections.vue
View File

@@ -205,7 +205,7 @@
:src="`/images/states/${colorMode.value}/pack.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="`${t('empty.collection')}`"
:alt="`${t('empty.collections')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.collections") }}
@@ -213,7 +213,6 @@
<ButtonSecondary
:label="t('add.new')"
filled
class="mb-4"
outline
@click="emit('display-modal-add')"
/>
@@ -235,7 +234,6 @@
<ButtonSecondary
:label="t('add.new')"
filled
class="mb-4"
outline
@click="
node.data.type === 'collections' &&

3
packages/hoppscotch-common/src/components/collections/SaveRequest.vue
View File

@@ -27,9 +27,8 @@
</label>
<CollectionsGraphql
v-if="mode === 'graphql'"
:show-coll-actions="false"
:picked="picked"
:saving-mode="true"
:save-request="true"
@select="onSelect"
/>
<Collections

7
packages/hoppscotch-common/src/components/collections/TeamCollections.vue
View File

@@ -201,7 +201,7 @@
:src="`/images/states/${colorMode.value}/pack.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="`${t('empty.collection')}`"
:alt="`${t('empty.collections')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.collections") }}
@@ -244,12 +244,11 @@
filled
outline
:title="t('team.no_access')"
:label="t('action.new')"
:label="t('add.new')"
/>
<ButtonSecondary
v-else
:icon="IconPlus"
:label="t('action.new')"
:label="t('add.new')"
filled
outline
@click="

10
packages/hoppscotch-common/src/components/collections/TeamSelect.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-1">
<SmartIntersection
class="flex flex-1 flex-col"
class="flex flex-col flex-1"
@intersecting="onTeamSelectIntersect"
>
<tippy
@@ -37,7 +37,7 @@
>
<div
v-if="isTeamListLoading && myTeams.length === 0"
class="flex flex-col flex-1 items-center justify-center p-2"
class="flex flex-col items-center justify-center flex-1 p-2"
>
<SmartSpinner class="my-2" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
@@ -75,15 +75,15 @@
</div>
<div
v-else
class="flex flex-col items-center justify-center text-secondaryLight p-2"
class="flex flex-col items-center justify-center p-2 text-secondaryLight"
>
<img
:src="`/images/states/${colorMode.value}/add_group.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-14 h-14 mb-4"
class="inline-flex flex-col object-contain object-center mb-4 w-14 h-14"
:alt="`${t('empty.teams')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("empty.teams") }}
</span>
<ButtonSecondary

20
packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
View File

@@ -143,7 +143,7 @@
v-for="(folder, index) in collection.folders"
:key="`folder-${String(index)}`"
:picked="picked"
:saving-mode="savingMode"
:save-request="saveRequest"
:folder="folder"
:folder-index="index"
:folder-path="`${collectionIndex}/${String(index)}`"
@@ -160,7 +160,7 @@
v-for="(request, index) in collection.requests"
:key="`request-${String(index)}`"
:picked="picked"
:saving-mode="savingMode"
:save-request="saveRequest"
:request="request"
:collection-index="collectionIndex"
:folder-index="-1"
@@ -183,9 +183,19 @@
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="`${t('empty.collection')}`"
/>
<span class="text-center">
<span class="pb-4 text-center">
{{ t("empty.collection") }}
</span>
<ButtonSecondary
:label="t('add.new')"
filled
outline
@click="
emit('add-folder', {
path: `${collectionIndex}`,
})
"
/>
</div>
</div>
</div>
@@ -219,7 +229,7 @@ import {
const props = defineProps({
picked: { type: Object, default: null },
// Whether the viewing context is related to picking (activates 'select' events)
savingMode: { type: Boolean, default: false },
saveRequest: { type: Boolean, default: false },
collectionIndex: { type: Number, default: null },
collection: { type: Object, default: () => ({}) },
isFiltered: Boolean,
@@ -275,7 +285,7 @@ const pick = () => {
}
const toggleShowChildren = () => {
if (props.savingMode) {
if (props.saveRequest) {
pick()
}

8
packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
View File

@@ -132,7 +132,7 @@
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${String(subFolderIndex)}`"
:picked="picked"
:saving-mode="savingMode"
:save-request="saveRequest"
:folder="subFolder"
:folder-index="subFolderIndex"
:folder-path="`${folderPath}/${String(subFolderIndex)}`"
@@ -149,7 +149,7 @@
v-for="(request, index) in folder.requests"
:key="`request-${String(index)}`"
:picked="picked"
:saving-mode="savingMode"
:save-request="saveRequest"
:request="request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
@@ -212,7 +212,7 @@ const colorMode = useColorMode()
const props = defineProps({
picked: { type: Object, default: null },
// Whether the request is in a selectable mode (activates 'select' event)
savingMode: { type: Boolean, default: false },
saveRequest: { type: Boolean, default: false },
folder: { type: Object, default: () => ({}) },
folderIndex: { type: Number, default: null },
collectionIndex: { type: Number, default: null },
@@ -263,7 +263,7 @@ const pick = () => {
}
const toggleShowChildren = () => {
if (props.savingMode) {
if (props.saveRequest) {
pick()
}

6
packages/hoppscotch-common/src/components/collections/graphql/Request.vue
View File

@@ -29,7 +29,7 @@
</span>
<div class="flex">
<ButtonSecondary
v-if="!savingMode"
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
:icon="IconRotateCCW"
:title="t('action.restore')"
@@ -148,7 +148,7 @@ const props = defineProps({
// Whether the object is selected (show the tick mark)
picked: { type: Object, default: null },
// Whether the request is being saved (activate 'select' event)
savingMode: { type: Boolean, default: false },
saveRequest: { type: Boolean, default: false },
request: { type: Object as PropType<HoppGQLRequest>, default: () => ({}) },
folderPath: { type: String, default: null },
requestIndex: { type: Number, default: null },
@@ -178,7 +178,7 @@ const pick = () => {
}
const selectRequest = () => {
if (props.savingMode) {
if (props.saveRequest) {
pick()
} else {
setGQLSession({

25
packages/hoppscotch-common/src/components/collections/graphql/index.vue
View File

@@ -1,18 +1,21 @@
<template>
<div :class="{ 'rounded border border-divider': savingMode }">
<div :class="{ 'rounded border border-divider': saveRequest }">
<div
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b divide-y divide-dividerLight border-dividerLight"
:class="{ 'bg-primary': !savingMode }"
class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
:style="
saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
"
>
<input
v-if="showCollActions"
v-model="filterText"
type="search"
autocomplete="off"
:placeholder="t('action.search')"
class="flex px-4 py-2 bg-transparent"
class="py-2 pl-4 pr-2 bg-transparent"
/>
<div class="flex justify-between flex-1">
<div
class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
>
<ButtonSecondary
:icon="IconPlus"
:label="t('action.new')"
@@ -28,7 +31,7 @@
:icon="IconHelpCircle"
/>
<ButtonSecondary
v-if="showCollActions"
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
:title="t('modal.import_export')"
:icon="IconArchive"
@@ -37,7 +40,7 @@
</div>
</div>
</div>
<div class="flex-col">
<div class="flex flex-col">
<CollectionsGraphqlCollection
v-for="(collection, index) in filteredCollections"
:key="`collection-${index}`"
@@ -46,7 +49,7 @@
:collection-index="index"
:collection="collection"
:is-filtered="filterText.length > 0"
:saving-mode="savingMode"
:save-request="saveRequest"
@edit-collection="editCollection(collection, index)"
@add-request="addRequest($event)"
@add-folder="addFolder($event)"
@@ -154,10 +157,8 @@ import { useColorMode } from "@composables/theming"
export default defineComponent({
props: {
// Whether to activate the ability to pick items (activates 'select' events)
savingMode: { type: Boolean, default: false },
saveRequest: { type: Boolean, default: false },
picked: { type: Object, default: null },
// Whether to show the 'New' and 'Import/Export' actions
showCollActions: { type: Boolean, default: true },
},
emits: ["select", "use-collection"],
setup() {

2
packages/hoppscotch-common/src/components/smart/Tree.vue
View File

@@ -29,7 +29,7 @@
</div>
<div
v-else-if="rootNodes.status === 'loading'"
class="flex flex-1 flex-col items-center justify-center p-4"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>

2
packages/hoppscotch-common/src/components/smart/TreeBranch.vue
View File

@@ -44,7 +44,7 @@
<div
v-if="childNodes.status === 'loading'"
class="flex flex-1 flex-col items-center justify-center p-4"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>