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

refactor: update hopp-ui to be independent (#2927)

Browse Source 
Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
Andrew Bastin
2023-02-24 13:20:12 +05:30
committed by GitHub
parent 82c6f6f6bc
commit cae1840506
165 changed files with 2134 additions and 2069 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/hoppscotch-common/src/components/app/DeveloperOptions.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="t('app.developer_option')"
@@ -10,7 +10,7 @@
{{ t("app.developer_option_description") }}
</p>
<div class="flex flex-1">
<ButtonSecondary
<HoppButtonSecondary
outline
filled
:icon="copyIcon"
@@ -19,7 +19,7 @@
/>
</div>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

42
packages/hoppscotch-common/src/components/app/Footer.vue
View File

@@ -2,7 +2,7 @@
<div>
<div class="flex justify-between bg-primary">
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
:icon="IconSidebar"
@@ -10,7 +10,7 @@
:class="{ '-rotate-180': !EXPAND_NAVIGATION }"
@click="EXPAND_NAVIGATION = !EXPAND_NAVIGATION"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
'layout.zen_mode'
@@ -23,7 +23,7 @@
@click="ZEN_MODE = !ZEN_MODE"
/>
<tippy interactive trigger="click" theme="popover">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('settings.interceptor')"
:icon="IconShieldCheck"
@@ -40,7 +40,7 @@
theme="popover"
:on-shown="() => tippyActions!.focus()"
>
<ButtonSecondary
<HoppButtonSecondary
:icon="IconHelpCircle"
class="!rounded-none"
:label="`${t('app.help')}`"
@@ -55,7 +55,7 @@
@keyup.c="chat!.$el.click()"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
ref="documentation"
:icon="IconBook"
:label="`${t('app.documentation')}`"
@@ -64,7 +64,7 @@
:shortcut="['D']"
@click="hide()"
/>
<SmartItem
<HoppSmartItem
ref="shortcuts"
:icon="IconZap"
:label="`${t('app.keyboard_shortcuts')}`"
@@ -76,7 +76,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="chat"
:icon="IconMessageCircle"
:label="`${t('app.chat_with_us')}`"
@@ -88,14 +88,14 @@
}
"
/>
<SmartItem
<HoppSmartItem
:icon="IconGift"
:label="`${t('app.whats_new')}`"
to="https://docs.hoppscotch.io/changelog"
blank
@click="hide()"
/>
<SmartItem
<HoppSmartItem
:icon="IconActivity"
:label="t('app.status')"
to="https://status.hoppscotch.io"
@@ -103,21 +103,21 @@
@click="hide()"
/>
<hr />
<SmartItem
<HoppSmartItem
:icon="IconGithub"
:label="`${t('app.github')}`"
to="https://github.com/hoppscotch/hoppscotch"
blank
@click="hide()"
/>
<SmartItem
<HoppSmartItem
:icon="IconTwitter"
:label="`${t('app.twitter')}`"
to="https://hoppscotch.io/twitter"
blank
@click="hide()"
/>
<SmartItem
<HoppSmartItem
:icon="IconUserPlus"
:label="`${t('app.invite')}`"
@click="
@@ -127,7 +127,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
:icon="IconLock"
:label="`${t('app.terms_and_privacy')}`"
to="https://docs.hoppscotch.io/privacy"
@@ -148,7 +148,7 @@
</div>
</template>
</tippy>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="`${t(
'app.shortcuts'
@@ -156,14 +156,14 @@
:icon="IconZap"
@click="invokeAction('flyouts.keybinds.toggle')"
/>
<ButtonSecondary
<HoppButtonSecondary
v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"
:icon="IconShare2"
:title="t('request.share')"
@click="nativeShare()"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
:icon="IconColumns"
@@ -177,7 +177,7 @@
'rotate-180': SIDEBAR_ON_LEFT,
}"
>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"
:icon="IconSidebarOpen"
@@ -223,7 +223,7 @@ import { platform } from "~/platform"
import { TippyComponent } from "vue-tippy"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
import { invokeAction } from "@helpers/actions"
import SmartItem from "@hoppscotch/ui/src/components/smart/Item.vue"
import { HoppSmartItem } from "@hoppscotch/ui"
const t = useI18n()
const showDeveloperOptions = ref(false)
@@ -274,7 +274,7 @@ const showDeveloperOptionModal = () => {
// Template refs
const tippyActions = ref<TippyComponent | null>(null)
const documentation = ref<typeof SmartItem>()
const shortcuts = ref<typeof SmartItem>()
const chat = ref<typeof SmartItem>()
const documentation = ref<typeof HoppSmartItem>()
const shortcuts = ref<typeof HoppSmartItem>()
const chat = ref<typeof HoppSmartItem>()
</script>

18
packages/hoppscotch-common/src/components/app/Header.vue
View File

@@ -10,7 +10,7 @@
paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
}"
>
<ButtonSecondary
<HoppButtonSecondary
class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
:label="t('app.name')"
to="/"
@@ -18,7 +18,7 @@
<AppGitHubStarButton class="mt-1.5 transition <sm:hidden" />
</div>
<div class="inline-flex items-center space-x-2">
<ButtonSecondary
<HoppButtonSecondary
v-if="showInstallButton"
v-tippy="{ theme: 'tooltip' }"
:title="t('header.install_pwa')"
@@ -26,14 +26,14 @@
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click="installPWA()"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="`${t('app.search')} <kbd>/</kbd>`"
:icon="IconSearch"
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click="invokeAction('modals.search.toggle')"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="`${
mdAndLarger ? t('support.title') : t('app.options')
@@ -42,7 +42,7 @@
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click="invokeAction('modals.support.toggle')"
/>
<ButtonSecondary
<HoppButtonSecondary
v-if="currentUser === null"
:icon="IconUploadCloud"
:label="t('header.save_workspace')"
@@ -50,13 +50,13 @@
class="hidden md:flex"
@click="invokeAction('modals.login.toggle')"
/>
<ButtonPrimary
<HoppButtonPrimary
v-if="currentUser === null"
:label="t('header.login')"
@click="invokeAction('modals.login.toggle')"
/>
<div v-else class="inline-flex items-center space-x-2">
<ButtonPrimary
<HoppButtonPrimary
v-tippy="{ theme: 'tooltip' }"
:title="t('team.invite_tooltip')"
:label="t('team.invite')"
@@ -127,7 +127,7 @@
</span>
</div>
<hr />
<SmartItem
<HoppSmartItem
ref="profile"
to="/profile"
:icon="IconUser"
@@ -135,7 +135,7 @@
:shortcut="['P']"
@click="hide()"
/>
<SmartItem
<HoppSmartItem
ref="settings"
to="/settings"
:icon="IconSettings"

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

@@ -8,12 +8,15 @@
{{ t("settings.interceptor_description") }}
</p>
</div>
<SmartRadioGroup v-model="interceptorSelection" :radios="interceptors" />
<HoppSmartRadioGroup
v-model="interceptorSelection"
:radios="interceptors"
/>
<div
v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
class="flex space-x-2"
>
<ButtonSecondary
<HoppButtonSecondary
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank
:icon="IconChrome"
@@ -21,7 +24,7 @@
outline
class="!flex-1"
/>
<ButtonSecondary
<HoppButtonSecondary
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank
:icon="IconFirefox"

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

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="t('app.options')"
@@ -11,7 +11,7 @@
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
{{ t("layout.name") }}
</h2>
<SmartItem
<HoppSmartItem
:icon="IconSidebar"
:label="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
:description="t('layout.collapse_sidebar')"
@@ -19,7 +19,7 @@
active
@click="expandNavigation"
/>
<SmartItem
<HoppSmartItem
:icon="IconSidebarOpen"
:label="SIDEBAR ? t('hide.collection') : t('show.collection')"
:description="t('layout.collapse_collection')"
@@ -30,7 +30,7 @@
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
{{ t("support.title") }}
</h2>
<SmartItem
<HoppSmartItem
:icon="IconBook"
:label="t('app.documentation')"
to="https://docs.hoppscotch.io"
@@ -40,7 +40,7 @@
blank
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconGift"
:label="t('app.whats_new')"
to="https://docs.hoppscotch.io/changelog"
@@ -50,7 +50,7 @@
blank
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconActivity"
:label="t('app.status')"
to="https://status.hoppscotch.io"
@@ -60,7 +60,7 @@
active
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconLock"
:label="`${t('app.terms_and_privacy')}`"
to="https://docs.hoppscotch.io/privacy"
@@ -73,7 +73,7 @@
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
{{ t("settings.follow") }}
</h2>
<SmartItem
<HoppSmartItem
:icon="IconDiscord"
:label="t('app.discord')"
to="https://hoppscotch.io/discord"
@@ -83,7 +83,7 @@
active
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconTwitter"
:label="t('app.twitter')"
to="https://hoppscotch.io/twitter"
@@ -93,7 +93,7 @@
active
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconGithub"
:label="`${t('app.github')}`"
to="https://github.com/hoppscotch/hoppscotch"
@@ -103,7 +103,7 @@
active
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconMessageCircle"
:label="t('app.chat_with_us')"
:description="t('support.chat')"
@@ -111,7 +111,7 @@
active
@click="chatWithUs()"
/>
<SmartItem
<HoppSmartItem
:icon="IconUserPlus"
:label="`${t('app.invite')}`"
:description="t('shortcut.miscellaneous.invite')"
@@ -119,7 +119,7 @@
active
@click="expandInvite()"
/>
<SmartItem
<HoppSmartItem
v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"
:icon="IconShare2"
@@ -132,7 +132,7 @@
</div>
<AppShare :show="showShare" @hide-modal="showShare = false" />
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

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

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
styles="sm:max-w-lg"
full-width
@@ -68,7 +68,7 @@
</div>
</div>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

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

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="t('app.invite_your_friends')"
@@ -35,7 +35,7 @@
{{ t("app.invite_description") }}
</p>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

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

@@ -1,5 +1,5 @@
<template>
<SmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
<HoppSmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
<template #content>
<div
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
@@ -76,7 +76,7 @@
</details>
</div>
</template>
</SmartSlideOver>
</HoppSmartSlideOver>
</template>
<script setup lang="ts">

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

@@ -32,7 +32,7 @@
</div>
</div>
</div>
<ButtonSecondary
<HoppButtonSecondary
:label="`${t('app.documentation')}`"
to="https://docs.hoppscotch.io/features/response"
:icon="IconExternalLink"

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

@@ -1,7 +1,7 @@
<template>
<aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
<SmartLink
<HoppSmartLink
v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`"
v-tippy="{
@@ -20,7 +20,7 @@
<span v-if="EXPAND_NAVIGATION" class="nav-title">
{{ t(navigation.title) }}
</span>
</SmartLink>
</HoppSmartLink>
</nav>
</aside>
</template>

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

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="t('support.title')"
@@ -8,7 +8,7 @@
>
<template #body>
<div class="flex flex-col space-y-2">
<SmartItem
<HoppSmartItem
:icon="IconBook"
:label="t('app.documentation')"
to="https://docs.hoppscotch.io"
@@ -18,7 +18,7 @@
blank
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconZap"
:label="t('app.keyboard_shortcuts')"
:description="t('support.shortcuts')"
@@ -26,7 +26,7 @@
active
@click="showShortcuts()"
/>
<SmartItem
<HoppSmartItem
:icon="IconGift"
:label="t('app.whats_new')"
to="https://docs.hoppscotch.io/changelog"
@@ -36,7 +36,7 @@
blank
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconMessageCircle"
:label="t('app.chat_with_us')"
:description="t('support.chat')"
@@ -44,7 +44,7 @@
active
@click="chatWithUs()"
/>
<SmartItem
<HoppSmartItem
:icon="IconGitHub"
:label="t('app.github')"
to="https://hoppscotch.io/github"
@@ -54,7 +54,7 @@
active
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconDiscord"
:label="t('app.join_discord_community')"
to="https://hoppscotch.io/discord"
@@ -64,7 +64,7 @@
active
@click="hideModal()"
/>
<SmartItem
<HoppSmartItem
:icon="IconTwitter"
:label="t('app.twitter')"
to="https://hoppscotch.io/twitter"
@@ -76,7 +76,7 @@
/>
</div>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">