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

9
packages/hoppscotch-common/src/pages/_.vue
View File

@@ -16,8 +16,13 @@
</h1>
<p class="mb-4 text-secondaryLight">{{ message }}</p>
<p class="mt-4 space-x-2">
<ButtonSecondary to="/" :icon="IconHome" filled :label="t('app.home')" />
<ButtonSecondary
<HoppButtonSecondary
to="/"
:icon="IconHome"
filled
:label="t('app.home')"
/>
<HoppButtonSecondary
:icon="IconRefreshCW"
:label="t('app.reload')"
filled

2
packages/hoppscotch-common/src/pages/enter.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col items-center justify-center min-h-screen">
<SmartSpinner v-if="signingInWithEmail" />
<HoppSmartSpinner v-if="signingInWithEmail" />
<AppLogo v-else class="w-16 h-16 rounded" />
<pre v-if="error" class="mt-4 text-secondaryLight">{{ error }}</pre>
</div>

12
packages/hoppscotch-common/src/pages/join-team.vue
View File

@@ -16,7 +16,7 @@
v-else-if="loadingCurrentUser"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<SmartSpinner />
<HoppSmartSpinner />
</div>
<div
v-else-if="currentUser === null"
@@ -24,7 +24,7 @@
>
<h1 class="heading">{{ t("team.login_to_continue") }}</h1>
<p class="mt-2">{{ t("team.login_to_continue_description") }}</p>
<ButtonPrimary
<HoppButtonPrimary
:label="t('auth.login_to_hoppscotch')"
class="mt-8"
@click="invokeAction('modals.login.toggle')"
@@ -35,7 +35,7 @@
v-if="inviteDetails.loading"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<SmartSpinner />
<HoppSmartSpinner />
</div>
<div v-else>
<div
@@ -86,7 +86,7 @@
}}
</p>
<div class="mt-8">
<ButtonPrimary
<HoppButtonPrimary
:label="
t('team.join_team', {
team: inviteDetails.data.right.teamInvitation.team.name,
@@ -121,7 +121,7 @@
}}
</p>
<div class="mt-8">
<ButtonSecondary
<HoppButtonSecondary
to="/"
:icon="IconHome"
filled
@@ -132,7 +132,7 @@
</div>
</div>
<div class="p-4">
<ButtonSecondary
<HoppButtonSecondary
class="tracking-wide !font-bold !text-secondaryDark"
label="HOPPSCOTCH"
to="/"

36
packages/hoppscotch-common/src/pages/profile.vue
View File

@@ -6,7 +6,7 @@
v-if="loadingCurrentUser"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<SmartSpinner class="mb-4" />
<HoppSmartSpinner class="mb-4" />
</div>
<div
v-else-if="currentUser === null"
@@ -21,7 +21,7 @@
<p class="pb-4 text-center text-secondaryLight">
{{ t("empty.profile") }}
</p>
<ButtonPrimary
<HoppButtonPrimary
:label="t('auth.login')"
class="mb-4"
@click="invokeAction('modals.login.toggle')"
@@ -66,7 +66,7 @@
:title="t('settings.verified_email')"
class="ml-2 text-green-500 svg-icons focus:outline-none cursor-help"
/>
<ButtonSecondary
<HoppButtonSecondary
v-else
:label="t('settings.verify_email')"
:icon="IconVerified"
@@ -79,7 +79,7 @@
</div>
<div class="flex items-end space-x-2">
<div>
<SmartItem
<HoppSmartItem
to="/settings"
:icon="IconSettings"
:label="t('profile.app_settings')"
@@ -89,12 +89,12 @@
<FirebaseLogout outline />
</div>
</div>
<SmartTabs
<HoppSmartTabs
v-model="selectedProfileTab"
styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-0 z-10"
render-inactive-tabs
>
<SmartTab :id="'sync'" :label="t('settings.account')">
<HoppSmartTab :id="'sync'" :label="t('settings.account')">
<div class="grid grid-cols-1">
<section class="p-4">
<h4 class="font-semibold text-secondaryDark">
@@ -120,7 +120,7 @@
autocomplete="off"
required
/>
<ButtonSecondary
<HoppButtonSecondary
filled
outline
:label="t('action.save')"
@@ -147,7 +147,7 @@
autocomplete="off"
required
/>
<ButtonSecondary
<HoppButtonSecondary
filled
outline
:label="t('action.save')"
@@ -170,39 +170,39 @@
</div>
<div class="py-4 space-y-4">
<div class="flex items-center">
<SmartToggle
<HoppSmartToggle
:on="SYNC_COLLECTIONS"
@change="toggleSetting('syncCollections')"
>
{{ t("settings.sync_collections") }}
</SmartToggle>
</HoppSmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
<HoppSmartToggle
:on="SYNC_ENVIRONMENTS"
@change="toggleSetting('syncEnvironments')"
>
{{ t("settings.sync_environments") }}
</SmartToggle>
</HoppSmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
<HoppSmartToggle
:on="SYNC_HISTORY"
@change="toggleSetting('syncHistory')"
>
{{ t("settings.sync_history") }}
</SmartToggle>
</HoppSmartToggle>
</div>
</div>
</section>
<ProfileShortcodes />
</div>
</SmartTab>
<SmartTab :id="'teams'" :label="t('team.title')">
</HoppSmartTab>
<HoppSmartTab :id="'teams'" :label="t('team.title')">
<Teams :modal="false" class="p-4" />
</SmartTab>
</SmartTabs>
</HoppSmartTab>
</HoppSmartTabs>
</div>
</div>
</div>

6
packages/hoppscotch-common/src/pages/r/_id.vue
View File

@@ -17,7 +17,7 @@
v-if="shortcodeDetails.loading"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<SmartSpinner />
<HoppSmartSpinner />
</div>
<div v-else>
<div
@@ -32,13 +32,13 @@
{{ t("error.invalid_link_description") }}
</p>
<p class="mt-4">
<ButtonSecondary
<HoppButtonSecondary
to="/"
:icon="IconHome"
filled
:label="t('app.home')"
/>
<ButtonSecondary
<HoppButtonSecondary
:icon="IconRefreshCW"
:label="t('app.reload')"
filled

8
packages/hoppscotch-common/src/pages/realtime.vue
View File

@@ -1,18 +1,18 @@
<template>
<SmartTabs
<HoppSmartTabs
v-model="currentTab"
styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-0 z-10"
content-styles="h-[calc(100%-var(--sidebar-primary-sticky-fold)-1px)] !flex"
>
<SmartTab
<HoppSmartTab
v-for="{ target, title } in REALTIME_NAVIGATION"
:id="target"
:key="target"
:label="title"
>
<RouterView />
</SmartTab>
</SmartTabs>
</HoppSmartTab>
</HoppSmartTabs>
</template>
<script setup lang="ts">

18
packages/hoppscotch-common/src/pages/realtime/mqtt.vue
View File

@@ -38,7 +38,7 @@
@keyup.enter="isUrlValid ? toggleConnection() : null"
/>
</div>
<ButtonPrimary
<HoppButtonPrimary
id="connect"
:disabled="!isUrlValid"
class="w-32"
@@ -84,14 +84,14 @@
/>
</template>
<template #secondary>
<SmartWindows
<HoppSmartWindows
:id="'communication_tab'"
v-model="currentTabId"
:can-add-new-tab="false"
@remove-tab="removeTab"
@sort="sortTabs"
>
<SmartWindow
<HoppSmartWindow
v-for="tab in tabs"
:id="tab.id"
:key="'removable_tab_' + tab.id"
@@ -111,22 +111,22 @@
:log="((tab.id === 'all' ? logs : tab.logs) as LogEntryData[])"
@delete="clearLogEntries()"
/>
</SmartWindow>
</SmartWindows>
</HoppSmartWindow>
</HoppSmartWindows>
</template>
<template #sidebar>
<div
class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
>
<div class="flex justify-between flex-1">
<ButtonSecondary
<HoppButtonSecondary
:icon="IconPlus"
:label="t('mqtt.new')"
class="!rounded-none"
@click="showSubscriptionModal(true)"
/>
<span class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/mqtt"
blank
@@ -150,7 +150,7 @@
<span class="pb-4 text-center">
{{ t("empty.subscription") }}
</span>
<ButtonSecondary
<HoppButtonSecondary
:label="t('mqtt.new')"
filled
outline
@@ -181,7 +181,7 @@
{{ topic.name }}
</span>
</span>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconTrash"
color="red"

37
packages/hoppscotch-common/src/pages/realtime/socketio.vue
View File

@@ -34,7 +34,7 @@
tabindex="0"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
v-for="version in SIOVersions"
:key="`client-${version}`"
:label="`Client ${version}`"
@@ -76,7 +76,7 @@
@keyup.enter="isUrlValid ? toggleConnection() : null"
/>
</div>
<ButtonPrimary
<HoppButtonPrimary
id="connect"
:disabled="!isUrlValid"
name="connect"
@@ -93,12 +93,12 @@
/>
</div>
</div>
<SmartTabs
<HoppSmartTabs
v-model="selectedTab"
styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
render-inactive-tabs
>
<SmartTab
<HoppSmartTab
:id="'communication'"
:label="`${t('websocket.communication')}`"
render-inactive-tabs
@@ -110,8 +110,11 @@
sticky-header-styles="top-upperTertiaryStickyFold"
@send-message="sendMessage($event)"
/>
</SmartTab>
<SmartTab :id="'protocols'" :label="`${t('request.authorization')}`">
</HoppSmartTab>
<HoppSmartTab
:id="'protocols'"
:label="`${t('request.authorization')}`"
>
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
@@ -126,7 +129,7 @@
:on-shown="() => authTippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary
<HoppButtonSecondary
class="pr-8 ml-2 rounded-none"
:label="authType"
/>
@@ -138,7 +141,7 @@
tabindex="0"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
label="None"
:icon="authType === 'None' ? IconCircleDot : IconCircle"
:active="authType === 'None'"
@@ -149,7 +152,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
label="Bearer Token"
:icon="authType === 'Bearer' ? IconCircleDot : IconCircle"
:active="authType === 'Bearer'"
@@ -165,21 +168,21 @@
</tippy>
</span>
<div class="flex">
<SmartCheckbox
<HoppSmartCheckbox
:on="authActive"
class="px-2"
@change="authActive = !authActive"
>
{{ t("state.enabled") }}
</SmartCheckbox>
<ButtonSecondary
</HoppSmartCheckbox>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/authorization"
blank
:title="t('app.wiki')"
:icon="IconHelpCircle"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.clear')"
:icon="IconTrash2"
@@ -200,7 +203,7 @@
<span class="pb-4 text-center">
{{ t("socketio.connection_not_authorized") }}
</span>
<ButtonSecondary
<HoppButtonSecondary
outline
:label="t('app.documentation')"
to="https://docs.hoppscotch.io/features/authorization"
@@ -226,7 +229,7 @@
<div class="pb-2 text-secondaryLight">
{{ t("helpers.authorization") }}
</div>
<SmartAnchor
<HoppSmartAnchor
class="link"
:label="t('authorization.learn')"
:icon="IconExternalLink"
@@ -237,8 +240,8 @@
</div>
</div>
</div>
</SmartTab>
</SmartTabs>
</HoppSmartTab>
</HoppSmartTabs>
</template>
<template #secondary>
<RealtimeLog

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

@@ -36,7 +36,7 @@
@keyup.enter="isUrlValid ? toggleSSEConnection() : null"
/>
</div>
<ButtonPrimary
<HoppButtonPrimary
id="start"
:disabled="!isUrlValid"
name="start"

26
packages/hoppscotch-common/src/pages/realtime/websocket.vue
View File

@@ -20,7 +20,7 @@
"
@keyup.enter="isUrlValid ? toggleConnection() : null"
/>
<ButtonPrimary
<HoppButtonPrimary
id="connect"
:disabled="!isUrlValid"
class="w-32"
@@ -37,12 +37,12 @@
/>
</div>
</div>
<SmartTabs
<HoppSmartTabs
v-model="selectedTab"
styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
render-inactive-tabs
>
<SmartTab
<HoppSmartTab
:id="'communication'"
:label="`${t('websocket.communication')}`"
>
@@ -51,8 +51,8 @@
sticky-header-styles="top-upperSecondaryStickyFold"
@send-message="sendMessage($event)"
/>
</SmartTab>
<SmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
</HoppSmartTab>
<HoppSmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
<div
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
@@ -60,13 +60,13 @@
{{ t("websocket.protocols") }}
</label>
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.clear_all')"
:icon="IconTrash2"
@click="clearContent"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('add.new')"
:icon="IconPlus"
@@ -89,7 +89,7 @@
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
>
<span>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{
theme: 'tooltip',
delay: [500, 20],
@@ -122,7 +122,7 @@
"
/>
<span>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="
protocol.hasOwnProperty('active')
@@ -148,7 +148,7 @@
/>
</span>
<span>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.remove')"
:icon="IconTrash"
@@ -173,8 +173,8 @@
{{ t("empty.protocols") }}
</span>
</div>
</SmartTab>
</SmartTabs>
</HoppSmartTab>
</HoppSmartTabs>
</template>
<template #secondary>
<RealtimeLog
@@ -194,7 +194,7 @@ import IconCheckCircle from "~icons/lucide/check-circle"
import IconCircle from "~icons/lucide/circle"
import IconGripVertical from "~icons/lucide/grip-vertical"
import IconTrash from "~icons/lucide/trash"
import draggable from "vuedraggable"
import draggable from "vuedraggable-es"
import {
setWSEndpoint,
WSEndpoint$,

42
packages/hoppscotch-common/src/pages/settings.vue
View File

@@ -58,7 +58,7 @@
</h4>
<div class="my-1 text-secondaryLight">
{{ t("settings.experiments_notice") }}
<SmartAnchor
<HoppSmartAnchor
class="link"
to="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
blank
@@ -67,30 +67,36 @@
</div>
<div class="py-4 space-y-4">
<div class="flex items-center">
<SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
<HoppSmartToggle
:on="TELEMETRY_ENABLED"
@change="showConfirmModal"
>
{{ t("settings.telemetry") }}
</SmartToggle>
</HoppSmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
<HoppSmartToggle
:on="EXPAND_NAVIGATION"
@change="toggleSetting('EXPAND_NAVIGATION')"
>
{{ t("settings.expand_navigation") }}
</SmartToggle>
</HoppSmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
<HoppSmartToggle
:on="SIDEBAR_ON_LEFT"
@change="toggleSetting('SIDEBAR_ON_LEFT')"
>
{{ t("settings.sidebar_on_left") }}
</SmartToggle>
</HoppSmartToggle>
</div>
<div class="flex items-center">
<SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
<HoppSmartToggle
:on="ZEN_MODE"
@change="toggleSetting('ZEN_MODE')"
>
{{ t("layout.zen_mode") }}
</SmartToggle>
</HoppSmartToggle>
</div>
</div>
</section>
@@ -126,7 +132,7 @@
</div>
<div class="flex flex-col py-4 space-y-2">
<span>
<SmartItem
<HoppSmartItem
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank
:icon="IconChrome"
@@ -137,7 +143,7 @@
/>
</span>
<span>
<SmartItem
<HoppSmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank
:icon="IconFirefox"
@@ -150,12 +156,12 @@
</div>
<div class="py-4 space-y-4">
<div class="flex items-center">
<SmartToggle
<HoppSmartToggle
:on="EXTENSIONS_ENABLED"
@change="toggleInterceptor('extension')"
>
{{ t("settings.extensions_use_toggle") }}
</SmartToggle>
</HoppSmartToggle>
</div>
</div>
</section>
@@ -169,7 +175,7 @@
"settings.read_the"
)}`
}}
<SmartAnchor
<HoppSmartAnchor
class="link"
to="https://docs.hoppscotch.io/privacy"
blank
@@ -178,12 +184,12 @@
</div>
<div class="py-4 space-y-4">
<div class="flex items-center">
<SmartToggle
<HoppSmartToggle
:on="PROXY_ENABLED"
@change="toggleInterceptor('proxy')"
>
{{ t("settings.proxy_use_toggle") }}
</SmartToggle>
</HoppSmartToggle>
</div>
</div>
<div class="flex items-center py-4 space-x-2">
@@ -201,7 +207,7 @@
{{ t("settings.proxy_url") }}
</label>
</div>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('settings.reset_default')"
:icon="clearIcon"
@@ -214,7 +220,7 @@
</div>
</div>
</div>
<SmartConfirmModal
<HoppSmartConfirmModal
:show="confirmRemove"
:title="`${t('confirm.remove_telemetry')} ${t(
'settings.telemetry_helps_us'