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

chore: minor ui improvements

Browse Source
This commit is contained in:
Liyas Thomas
2022-10-20 19:47:17 +05:30
parent a950e08ef1
commit 02d66ee9fd
18 changed files with 49 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/hoppscotch-app/assets/scss/styles.scss
View File

@@ -91,6 +91,17 @@ body {
@apply translate-x-full;
}
.bounce-enter-active,
.bounce-leave-active {
@apply transition;
}
.bounce-enter-from,
.bounce-leave-to {
@apply transform;
@apply scale-95;
}
.svg-icons {
@apply flex-shrink-0;
@apply overflow-hidden;

2
packages/hoppscotch-app/locales/en.json
View File

@@ -423,7 +423,7 @@
"extension_version": "Extension Version",
"extensions": "Browser extension",
"extensions_use_toggle": "Use the browser extension to send requests (if present)",
"follow": "Follow Us",
"follow": "Follow us",
"font_size": "Font size",
"font_size_large": "Large",
"font_size_medium": "Medium",

13
packages/hoppscotch-app/src/components.d.ts vendored
View File

@@ -23,7 +23,6 @@ declare module '@vue/runtime-core' {
AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
AppSlideOver: typeof import('./components/app/SlideOver.vue')['default']
AppSupport: typeof import('./components/app/Support.vue')['default']
ButtonPrimary: typeof import('./components/button/Primary.vue')['default']
ButtonSecondary: typeof import('./components/button/Secondary.vue')['default']
@@ -98,6 +97,17 @@ declare module '@vue/runtime-core' {
HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
HttpTests: typeof import('./components/http/Tests.vue')['default']
HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
IconLucideInfo: typeof import('~icons/lucide/info')['default']
IconLucideLayers: typeof import('~icons/lucide/layers')['default']
IconLucideLoader: typeof import('~icons/lucide/loader')['default']
IconLucideMinus: typeof import('~icons/lucide/minus')['default']
IconLucideSearch: typeof import('~icons/lucide/search')['default']
IconLucideUser: typeof import('~icons/lucide/user')['default']
IconLucideUsers: typeof import('~icons/lucide/users')['default']
LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
@@ -130,6 +140,7 @@ declare module '@vue/runtime-core' {
SmartProgressRing: typeof import('./components/smart/ProgressRing.vue')['default']
SmartRadio: typeof import('./components/smart/Radio.vue')['default']
SmartRadioGroup: typeof import('./components/smart/RadioGroup.vue')['default']
SmartSlideOver: typeof import('./components/smart/SlideOver.vue')['default']
SmartSpinner: typeof import('./components/smart/Spinner.vue')['default']
SmartTab: typeof import('./components/smart/Tab.vue')['default']
SmartTabs: typeof import('./components/smart/Tabs.vue')['default']

9
packages/hoppscotch-app/src/components/app/Options.vue
View File

@@ -3,13 +3,12 @@
v-if="show"
dialog
:title="t('app.options')"
max-width="sm:max-w-md"
class="text-sm"
styles="sm:max-w-md"
@close="emit('hide-modal')"
>
<template #body>
<div class="flex flex-col space-y-2">
<h2 class="p-2 font-semibold font-bold text-secondaryDark">
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
{{ t("layout.name") }}
</h2>
<SmartItem
@@ -28,7 +27,7 @@
active
@click="expandCollection"
/>
<h2 class="p-2 font-semibold font-bold text-secondaryDark">
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
{{ t("support.title") }}
</h2>
<SmartItem
@@ -71,7 +70,7 @@
active
@click="hideModal()"
/>
<h2 class="p-2 font-semibold font-bold text-secondaryDark">
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
{{ t("settings.follow") }}
</h2>
<SmartItem

2
packages/hoppscotch-app/src/components/app/PowerSearch.vue
View File

@@ -1,7 +1,7 @@
<template>
<SmartModal
v-if="show"
max-width="sm:max-w-lg"
styles="sm:max-w-lg"
full-width
@close="emit('hide-modal')"
>

4
packages/hoppscotch-app/src/components/app/Shortcuts.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
<SmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
<template #content>
<div class="sticky top-0 z-10 flex flex-col bg-primary">
<div class="flex flex-col px-6 py-4 border-b border-dividerLight">
@@ -74,7 +74,7 @@
</details>
</div>
</template>
</AppSlideOver>
</SmartSlideOver>
</template>
<script setup lang="ts">

2
packages/hoppscotch-app/src/components/app/Support.vue
View File

@@ -3,7 +3,7 @@
v-if="show"
dialog
:title="t('support.title')"
max-width="sm:max-w-md"
styles="sm:max-w-md"
@close="emit('hide-modal')"
>
<template #body>

2
packages/hoppscotch-app/src/components/collections/ImportExport.vue
View File

@@ -3,7 +3,7 @@
v-if="show"
dialog
:title="`${t('modal.collections')}`"
max-width="sm:max-w-md"
styles="sm:max-w-md"
@close="hideModal"
>
<template #actions>

2
packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue
View File

@@ -3,7 +3,7 @@
v-if="show"
dialog
:title="`${t('modal.collections')}`"
max-width="sm:max-w-md"
styles="sm:max-w-md"
@close="hideModal"
>
<template #actions>

2
packages/hoppscotch-app/src/components/environments/ImportExport.vue
View File

@@ -3,7 +3,7 @@
v-if="show"
dialog
:title="`${t('environment.title')}`"
max-width="sm:max-w-md"
styles="sm:max-w-md"
@close="hideModal"
>
<template #actions>

2
packages/hoppscotch-app/src/components/firebase/Login.vue
View File

@@ -3,7 +3,7 @@
v-if="show"
dialog
:title="`${t('auth.login_to_hoppscotch')}`"
max-width="sm:max-w-md"
styles="sm:max-w-md"
@close="hideModal"
>
<template #body>

10
packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
View File

@@ -315,7 +315,7 @@ import IconCircle from "~icons/lucide/circle"
import IconCopy from "~icons/lucide/copy"
import IconCheck from "~icons/lucide/check"
import IconInfo from "~icons/lucide/info"
import IconWand from "~icons/lucide/wand"
import IconWand2 from "~icons/lucide/wand-2"
import { Ref, computed, reactive, ref, watch } from "vue"
import * as gql from "graphql"
import * as E from "fp-ts/Either"
@@ -641,11 +641,11 @@ const copyVariablesIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
1000
)
const prettifyQueryIcon = refAutoReset<
typeof IconWand | typeof IconCheck | typeof IconInfo
>(IconWand, 1000)
typeof IconWand2 | typeof IconCheck | typeof IconInfo
>(IconWand2, 1000)
const prettifyVariablesIcon = refAutoReset<
typeof IconWand | typeof IconCheck | typeof IconInfo
>(IconWand, 1000)
typeof IconWand2 | typeof IconCheck | typeof IconInfo
>(IconWand2, 1000)
const showSaveRequestModal = ref(false)

6
packages/hoppscotch-app/src/components/http/RawBody.vue
View File

@@ -60,7 +60,7 @@ import IconHelpCircle from "~icons/lucide/help-circle"
import IconWrapText from "~icons/lucide/wrap-text"
import IconTrash2 from "~icons/lucide/trash-2"
import IconFilePlus from "~icons/lucide/file-plus"
import IconWand from "~icons/lucide/wand"
import IconWand2 from "~icons/lucide/wand-2"
import IconCheck from "~icons/lucide/check"
import IconInfo from "~icons/lucide/info"
import { computed, reactive, Ref, ref } from "vue"
@@ -102,8 +102,8 @@ const rawParamsBody = pluckRef(
)
const prettifyIcon = refAutoReset<
typeof IconWand | typeof IconCheck | typeof IconInfo
>(IconWand, 1000)
typeof IconWand2 | typeof IconCheck | typeof IconInfo
>(IconWand2, 1000)
const rawInputEditorLang = computed(() =>
getEditorLangForMimeType(props.contentType)

4
packages/hoppscotch-app/src/components/http/TestResultEnv.vue
View File

@@ -38,7 +38,7 @@
import { useI18n } from "@composables/i18n"
import IconPlusCircle from "~icons/lucide/plus-circle"
import IconCheckCircle from "~icons/lucide/check-circle-2"
import IconCheckCircle2 from "~icons/lucide/check-circle-2"
import IconMinusCircle from "~icons/lucide/minus-circle"
type Status = "updations" | "additions" | "deletions"
@@ -63,7 +63,7 @@ const getIcon = (status: Status) => {
case "additions":
return IconPlusCircle
case "updations":
return IconCheckCircle
return IconCheckCircle2
case "deletions":
return IconMinusCircle
}

4
packages/hoppscotch-app/src/components/realtime/Communication.vue
View File

@@ -117,7 +117,7 @@ import IconSend from "~icons/lucide/send"
import IconHelpCircle from "~icons/lucide/help-circle"
import IconWrapText from "~icons/lucide/wrap-text"
import IconTrash2 from "~icons/lucide/trash-2"
import IconWand from "~icons/lucide/wand"
import IconWand2 from "~icons/lucide/wand-2"
import IconCheck from "~icons/lucide/check"
import IconInfo from "~icons/lucide/info"
import IconDone from "~icons/lucide/check"
@@ -163,7 +163,7 @@ const linewrapEnabled = ref(true)
const wsCommunicationBody = ref<HTMLElement>()
const payload = ref<HTMLInputElement>()
const prettifyIcon = refAutoReset<Component>(IconWand, 1000)
const prettifyIcon = refAutoReset<Component>(IconWand2, 1000)
const knownContentTypes = {
JSON: "application/ld+json",

1
packages/hoppscotch-app/src/components/smart/Modal.vue
View File

@@ -4,7 +4,6 @@
ref="modal"
class="fixed inset-0 z-50 overflow-y-auto transition"
role="dialog"
aria-modal="true"
>
<div
class="flex items-end justify-center min-h-screen text-center sm:block"

0
packages/hoppscotch-app/src/components/app/SlideOver.vue → packages/hoppscotch-app/src/components/smart/SlideOver.vue
View File

2
packages/hoppscotch-app/src/pages/realtime/sse.vue
View File

@@ -2,7 +2,7 @@
<AppPaneLayout layout-id="sse">
<template #primary>
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
>
<div class="inline-flex flex-1 space-x-2">
<div class="flex flex-1">