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

refactor(ui): minor ui improvements

Browse Source
This commit is contained in:
liyasthomas
2021-08-20 15:08:54 +05:30
parent a121445b1e
commit 7082eb27db
63 changed files with 296 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/collections/Add.vue
View File

@@ -44,8 +44,8 @@ export default {
methods: {
addNewCollection() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name"), {
icon: "error_outline",
})
return
}

4
components/collections/AddFolder.vue
View File

@@ -48,8 +48,8 @@ export default {
methods: {
addFolder() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("folder.invalid_name"), {
icon: "error_outline",
})
return
}

4
components/collections/Edit.vue
View File

@@ -45,8 +45,8 @@ export default {
methods: {
saveCollection() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name"), {
icon: "error_outline",
})
return
}

4
components/collections/EditFolder.vue
View File

@@ -45,8 +45,8 @@ export default {
methods: {
editFolder() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("folder.invalid_name"), {
icon: "error_outline",
})
return
}

4
components/collections/EditRequest.vue
View File

@@ -44,8 +44,8 @@ export default {
methods: {
saveRequest() {
if (!this.requestUpdateData.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("request.invalid_name"), {
icon: "error_outline",
})
return
}

39
components/collections/ImportExport.vue
View File

@@ -43,7 +43,7 @@
$refs.options.tippy().hide()
"
/>
<SmartItem
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
@@ -52,20 +52,23 @@
? $t('export.require_github')
: null
"
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createCollectionGist
$refs.options.tippy().hide()
"
/>
>
<SmartItem
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createCollectionGist
$refs.options.tippy().hide()
"
/>
</span>
</tippy>
</span>
</template>
@@ -225,7 +228,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -405,7 +408,7 @@ export default defineComponent({
document.body.appendChild(a)
a.click()
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
@@ -419,7 +422,7 @@ export default defineComponent({
},
failedImport() {
this.$toast.error(this.$t("import.failed"), {
icon: "error",
icon: "error_outline",
})
},
parsePostmanCollection({ info, name, item }) {

8
components/collections/SaveRequest.vue
View File

@@ -119,13 +119,13 @@ export default defineComponent({
saveRequestAs() {
if (!this.requestName) {
this.$toast.error(this.$t("error.empty_req_name"), {
icon: "error",
icon: "error_outline",
})
return
}
if (this.picked == null) {
this.$toast.error(this.$t("collection.select"), {
icon: "error",
icon: "error_outline",
})
return
}
@@ -218,8 +218,8 @@ export default defineComponent({
} else if (this.picked.pickedType === "gql-my-collection") {
saveGraphqlRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
}
this.$toast.success("Requested added", {
icon: "done",
this.$toast.success(this.$t("request.added"), {
icon: "post_add",
})
this.hideModal()

4
components/collections/graphql/Add.vue
View File

@@ -47,8 +47,8 @@ export default Vue.extend({
methods: {
addNewCollection() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name").toString(), {
icon: "error_outline",
})
return
}

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

@@ -10,7 +10,7 @@
@dragend="dragging = false"
>
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -93,7 +93,7 @@
<CollectionsGraphqlFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:picked="picked"
:saving-mode="savingMode"
:folder="folder"
@@ -110,7 +110,7 @@
<CollectionsGraphqlRequest
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:picked="picked"
:saving-mode="savingMode"
:request="request"
@@ -131,7 +131,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -187,8 +187,8 @@ export default Vue.extend({
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},
@@ -218,8 +218,7 @@ export default Vue.extend({
this.$emit("select", { picked: null })
}
removeGraphqlCollection(this.collectionIndex)
this.$toast.error(this.$t("state.deleted").toString(), {
this.$toast.success(this.$t("state.deleted").toString(), {
icon: "delete",
})
},

4
components/collections/graphql/Edit.vue
View File

@@ -49,8 +49,8 @@ export default Vue.extend({
methods: {
saveCollection() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name").toString(), {
icon: "error_outline",
})
return
}

4
components/collections/graphql/EditFolder.vue
View File

@@ -50,8 +50,8 @@ export default Vue.extend({
methods: {
editFolder() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name").toString(), {
icon: "error_outline",
})
return
}

4
components/collections/graphql/EditRequest.vue
View File

@@ -49,8 +49,8 @@ export default Vue.extend({
methods: {
saveRequest() {
if (!this.requestUpdateData.name) {
this.$toast.info(this.$t("collection.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name").toString(), {
icon: "error_outline",
})
return
}

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

@@ -10,7 +10,7 @@
@dragend="dragging = false"
>
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -89,7 +89,7 @@
<CollectionsGraphqlFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:picked="picked"
:saving-mode="savingMode"
:folder="subFolder"
@@ -106,7 +106,7 @@
<CollectionsGraphqlRequest
v-for="(request, index) in folder.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:picked="picked"
:saving-mode="savingMode"
:request="request"
@@ -130,7 +130,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -185,8 +185,8 @@ export default Vue.extend({
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},
@@ -217,7 +217,7 @@ export default Vue.extend({
}
removeGraphqlFolder(this.folderPath)
this.$toast.error(this.$t("state.deleted").toString(), {
this.$toast.success(this.$t("state.deleted").toString(), {
icon: "delete",
})
},

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

@@ -23,7 +23,7 @@
$refs.options.tippy().hide()
"
/>
<SmartItem
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
@@ -32,20 +32,23 @@
? $t('export.require_github')
: null
"
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createCollectionGist
$refs.options.tippy().hide()
"
/>
>
<SmartItem
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createCollectionGist
$refs.options.tippy().hide()
"
/>
</span>
</tippy>
</span>
</template>
@@ -143,7 +146,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -249,7 +252,7 @@ export default defineComponent({
document.body.appendChild(a)
a.click()
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
@@ -257,13 +260,13 @@ export default defineComponent({
}, 1000)
},
fileImported() {
this.$toast.info(this.$t("state.file_imported"), {
this.$toast.success(this.$t("state.file_imported"), {
icon: "folder_shared",
})
},
failedImport() {
this.$toast.error(this.$t("import.failed"), {
icon: "error",
icon: "error_outline",
})
},
parsePostmanCollection({ info, name, item }) {

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

@@ -12,8 +12,8 @@
class="
cursor-pointer
flex
mx-2
w-12
px-2
w-16
justify-center
items-center
truncate
@@ -171,7 +171,7 @@ export default Vue.extend({
}
removeGraphqlRequest(this.folderPath, this.requestIndex)
this.$toast.error(this.$t("state.deleted").toString(), {
this.$toast.success(this.$t("state.deleted").toString(), {
icon: "delete",
})
},

33
components/collections/index.vue
View File

@@ -351,7 +351,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -361,8 +361,8 @@ export default defineComponent({
// Intented to be called by CollectionEdit modal submit event
updateEditingCollection(newName) {
if (!newName) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name"), {
icon: "error_outline",
})
return
}
@@ -380,14 +380,13 @@ export default defineComponent({
teamUtils
.renameCollection(this.$apollo, newName, this.editingCollection.id)
.then(() => {
// TODO: $t translations ?
this.$toast.success("Collection Renamed", {
this.$toast.success(this.$t("collection.renamed"), {
icon: "done",
})
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -411,7 +410,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -445,14 +444,14 @@ export default defineComponent({
this.editingRequestIndex
)
.then(() => {
this.$toast.success("Request Renamed", {
this.$toast.success(this.$t("request.renamed"), {
icon: "done",
})
this.$emit("update-team-collections")
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -525,7 +524,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -590,8 +589,7 @@ export default defineComponent({
}
removeRESTCollection(collectionIndex)
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
} else if (collectionsType.type === "team-collections") {
@@ -619,13 +617,13 @@ export default defineComponent({
},
})
.then(() => {
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -644,8 +642,7 @@ export default defineComponent({
this.$emit("select", { picked: null })
}
removeRESTRequest(folderPath, requestIndex)
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
} else if (this.collectionsType.type === "team-collections") {
@@ -661,13 +658,13 @@ export default defineComponent({
teamUtils
.deleteRequest(this.$apollo, requestIndex)
.then(() => {
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})

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

@@ -10,7 +10,7 @@
@dragend="dragging = false"
>
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -112,7 +112,7 @@
<CollectionsMyFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:folder="folder"
:folder-index="index"
:folder-path="`${collectionIndex}/${index}`"
@@ -131,7 +131,7 @@
<CollectionsMyRequest
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:request="request"
:collection-index="collectionIndex"
:folder-index="-1"
@@ -156,7 +156,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -212,8 +212,8 @@ export default {
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},

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

@@ -10,7 +10,7 @@
@dragend="dragging = false"
>
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -94,7 +94,7 @@
<CollectionsMyFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:folder="subFolder"
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
@@ -113,7 +113,7 @@
<CollectionsMyRequest
v-for="(request, index) in folder.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:request="request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
@@ -139,7 +139,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -199,8 +199,8 @@ export default {
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},
@@ -228,8 +228,7 @@ export default {
this.$emit("select", { picked: null })
}
removeRESTFolder(this.folderPath)
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
},

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

@@ -12,8 +12,8 @@
class="
cursor-pointer
flex
mx-2
w-12
px-2
w-16
justify-center
items-center
truncate
@@ -28,7 +28,7 @@
>
check_circle_outline
</i>
<span v-else>
<span v-else class="truncate">
{{ request.method }}
</span>
</span>

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

@@ -2,7 +2,7 @@
<div class="flex flex-col">
<div class="flex items-center group">
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -108,7 +108,7 @@
<CollectionsTeamsFolder
v-for="(folder, index) in collection.children"
:key="`folder-${folder}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:folder="folder"
:folder-index="index"
:folder-path="`${collectionIndex}/${index}`"
@@ -128,7 +128,7 @@
<CollectionsTeamsRequest
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:request="request.request"
:collection-index="collectionIndex"
:folder-index="-1"
@@ -152,7 +152,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -205,8 +205,8 @@ export default {
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},

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

@@ -2,7 +2,7 @@
<div class="flex flex-col">
<div class="flex items-center group">
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -91,7 +91,7 @@
<CollectionsTeamsFolder
v-for="(subFolder, subFolderIndex) in folder.children"
:key="`subFolder-${subFolderIndex}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:folder="subFolder"
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
@@ -111,7 +111,7 @@
<CollectionsTeamsRequest
v-for="(request, index) in folder.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:request="request.request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
@@ -134,7 +134,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -189,8 +189,8 @@ export default {
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},
@@ -221,14 +221,14 @@ export default {
teamUtils
.deleteCollection(this.$apollo, this.folder.id)
.then(() => {
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
this.$emit("update-team-collections")
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})

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

@@ -5,8 +5,8 @@
class="
cursor-pointer
flex
mx-2
w-12
px-2
w-16
justify-center
items-center
truncate