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

refactor: move actions from app header to app footer

Browse Source
This commit is contained in:
Liyas Thomas
2021-07-23 18:28:07 +00:00
committed by GitHub
parent f694f1ad36
commit 233214cb30
35 changed files with 222 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/scss/styles.scss
View File

@@ -89,7 +89,6 @@ a {
@apply text-current;
@apply no-underline;
@apply outline-none;
@apply rounded-lg;
@apply focus-visible:(ring ring-inset ring-accent);
@apply transition;
@@ -149,7 +148,7 @@ a {
.tippy-content > div {
@apply flex flex-col;
@apply max-h-64;
@apply max-h-48;
@apply items-stretch;
@apply overflow-y-auto;
}
@@ -170,7 +169,7 @@ hr {
@apply px-4 py-2;
@apply bg-primary;
@apply truncate;
@apply rounded-lg;
@apply rounded;
@apply font-semibold font-mono;
@apply text-xs;
@apply border border-divider;
@@ -226,7 +225,7 @@ input[type="checkbox"] {
&::before {
@apply border border-secondary;
@apply rounded-lg;
@apply rounded;
@apply inline-flex;
@apply items-center;
@apply justify-center;

63
components/app/Extensions.vue
View File

@@ -1,63 +0,0 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("extensions") }}</h3>
<div>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
<div class="flex flex-col space-y-2 px-2">
<SmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank
svg="firefox"
label="Firefox"
:info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
/>
<SmartItem
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank
svg="chrome"
label="Chrome"
:info-icon="hasChromeExtInstalled ? 'check_circle' : ''"
/>
</div>
</template>
<template #footer>
<div class="text-secondaryLight text-xs px-2">
{{ $t("extensions_info1") }}
</div>
</template>
</SmartModal>
</template>
<script>
import {
hasChromeExtensionInstalled,
hasFirefoxExtensionInstalled,
} from "~/helpers/strategies/ExtensionStrategy"
export default {
props: {
show: Boolean,
},
data() {
return {
hasChromeExtInstalled: hasChromeExtensionInstalled(),
hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
}
},
watch: {
show() {
this.hasChromeExtInstalled = hasChromeExtensionInstalled()
this.hasFirefoxExtInstalled = hasFirefoxExtensionInstalled()
},
},
methods: {
hideModal() {
this.$emit("hide-modal")
},
},
}
</script>

110
components/app/Footer.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div class="flex justify-between">
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="LEFT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
icon="menu_open"
:class="{ 'transform rotate-180': !LEFT_SIDEBAR }"
@click.native="toggleSetting('LEFT_SIDEBAR')"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${ZEN_MODE ? $t('turn_off') : $t('turn_on')} ${$t(
'zen_mode'
)}`"
:icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
:class="{
'text-accent focus:text-accent hover:text-accent': ZEN_MODE,
}"
@click.native="toggleSetting('ZEN_MODE')"
/>
</div>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="keyboard"
:title="$t('shortcuts')"
:shortcut="[getSpecialKey(), '/']"
@click.native="showShortcuts = true"
/>
<ButtonSecondary
v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"
icon="share"
:title="$t('share')"
@click.native="nativeShare()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="RIGHT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
icon="menu_open"
:class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
@click.native="toggleSetting('RIGHT_SIDEBAR')"
/>
</div>
<AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
</div>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
import {
defaultSettings,
getSettingSubject,
applySetting,
toggleSetting,
} from "~/newstore/settings"
import type { KeysMatching } from "~/types/ts-utils"
import { getPlatformSpecialKey } from "~/helpers/platformutils"
type SettingsType = typeof defaultSettings
export default defineComponent({
data() {
return {
LEFT_SIDEBAR: null,
RIGHT_SIDEBAR: null,
ZEN_MODE: null,
showShortcuts: false,
navigatorShare: navigator.share,
}
},
subscriptions() {
return {
LEFT_SIDEBAR: getSettingSubject("LEFT_SIDEBAR"),
RIGHT_SIDEBAR: getSettingSubject("RIGHT_SIDEBAR"),
ZEN_MODE: getSettingSubject("ZEN_MODE"),
}
},
watch: {
ZEN_MODE(ZEN_MODE) {
this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
},
},
methods: {
toggleSetting<K extends KeysMatching<SettingsType, boolean>>(key: K) {
toggleSetting(key)
},
applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
applySetting(key, value)
},
nativeShare() {
if (navigator.share) {
navigator
.share({
title: "Hoppscotch",
text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
url: "https://hoppscotch.io",
})
.then(() => {})
.catch(console.error)
} else {
// fallback
}
},
getSpecialKey: getPlatformSpecialKey,
},
})
</script>

73
components/app/Header.vue
View File

@@ -1,7 +1,7 @@
<template>
<header class="flex flex-1 p-2 items-center justify-between">
<header class="flex flex-1 py-2 px-4 items-center justify-between">
<div class="font-bold space-x-2 flex-shrink-0 inline-flex items-center">
<AppLogo class="h-6 mx-4" /> Hoppscotch
<AppLogo class="h-6 mr-4" /> Hoppscotch
</div>
<div class="space-x-2 flex-shrink-0 inline-flex items-center">
<AppGitHubStarButton class="mt-1 mr-2" />
@@ -62,56 +62,8 @@
<FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
</tippy>
</span>
<span tabindex="-1">
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<TabPrimary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
icon="drag_indicator"
/>
</template>
<SmartItem
icon="extension"
:label="$t('extensions')"
@click.native="
showExtensions = true
$refs.options.tippy().hide()
"
/>
<SmartItem
icon="keyboard"
:label="$t('shortcuts')"
@click.native="
showShortcuts = true
$refs.options.tippy().hide()
"
/>
<SmartItem
v-if="navigatorShare"
icon="share"
:label="$t('share')"
@click.native="
nativeShare()
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
<AppExtensions
:show="showExtensions"
@hide-modal="showExtensions = false"
/>
<AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
</header>
</template>
@@ -119,7 +71,6 @@
import intializePwa from "~/helpers/pwa"
import { currentUser$ } from "~/helpers/fb/auth"
import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
import { getPlatformSpecialKey } from "~/helpers/platformutils"
export default {
data() {
@@ -129,9 +80,6 @@ export default {
// prompt.
showInstallPrompt: null,
showLogin: false,
showExtensions: false,
showShortcuts: false,
navigatorShare: navigator.share,
}
},
subscriptions() {
@@ -161,22 +109,5 @@ export default {
})
}
},
methods: {
nativeShare() {
if (navigator.share) {
navigator
.share({
title: "Hoppscotch",
text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
url: "https://hoppscotch.io",
})
.then(() => {})
.catch(console.error)
} else {
// fallback
}
},
getSpecialKey: getPlatformSpecialKey,
},
}
</script>

2
components/app/Shortcuts.vue
View File

@@ -18,7 +18,7 @@
:key="`shortcut-${index}-key-${keyIndex}`"
class="
border border-divider
rounded-lg
rounded
font-bold
m-1
text-xs

14
components/button/Primary.vue
View File

@@ -17,7 +17,7 @@
? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
: `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
label ? 'px-4' : 'px-2',
rounded ? 'rounded-full' : 'rounded-lg',
rounded ? 'rounded-full' : 'rounded',
{ 'opacity-50 cursor-not-allowed': disabled },
{ 'pointer-events-none': loading },
{ 'px-6 py-4 text-lg': large },
@@ -53,9 +53,9 @@
class="svg-icons"
/>
{{ label }}
<div v-if="shortcuts.length && SHORTCUTS_INDICATOR_ENABLED" class="ml-2">
<div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
<kbd
v-for="(key, index) in shortcuts"
v-for="(key, index) in shortcut"
:key="`key-${index}`"
class="bg-accentLight rounded ml-1 px-1 inline-flex"
>
@@ -132,21 +132,19 @@ export default {
type: Boolean,
default: false,
},
shortcuts: {
shortcut: {
type: Array,
default: () => [],
},
},
data() {
return {
SHORTCUTS_INDICATOR_ENABLED: null,
SHORTCUT_INDICATOR: null,
}
},
subscriptions() {
return {
SHORTCUTS_INDICATOR_ENABLED: getSettingSubject(
"SHORTCUTS_INDICATOR_ENABLED"
),
SHORTCUT_INDICATOR: getSettingSubject("SHORTCUT_INDICATOR"),
}
},
}

16
components/button/Secondary.vue
View File

@@ -15,9 +15,9 @@
:class="[
color
? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
: 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
: 'text-secondary hover:text-secondaryDark hover:bg-primaryDark focus:text-secondaryDark',
label ? 'px-3' : 'px-2',
rounded ? 'rounded-full' : 'rounded-lg',
rounded ? 'rounded-full' : 'rounded',
{ 'opacity-50 cursor-not-allowed': disabled },
{ 'flex-row-reverse': reverse },
{
@@ -41,9 +41,9 @@
class="svg-icons"
/>
{{ label }}
<div v-if="shortcuts.length && SHORTCUTS_INDICATOR_ENABLED" class="ml-2">
<div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
<kbd
v-for="(key, index) in shortcuts"
v-for="(key, index) in shortcut"
:key="`key-${index}`"
class="
bg-dividerLight
@@ -109,21 +109,19 @@ export default {
type: Boolean,
default: false,
},
shortcuts: {
shortcut: {
type: Array,
default: () => [],
},
},
data() {
return {
SHORTCUTS_INDICATOR_ENABLED: null,
SHORTCUT_INDICATOR: null,
}
},
subscriptions() {
return {
SHORTCUTS_INDICATOR_ENABLED: getSettingSubject(
"SHORTCUTS_INDICATOR_ENABLED"
),
SHORTCUT_INDICATOR: getSettingSubject("SHORTCUT_INDICATOR"),
}
},
}

2
components/collections/graphql/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<AppSection
label="collections"
:class="{ 'rounded-lg border-2 border-divider': savingMode }"
:class="{ 'rounded border-2 border-divider': savingMode }"
>
<div
class="flex flex-col top-10 z-10 sticky"

2
components/collections/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<AppSection
label="collections"
:class="{ 'rounded-lg border-2 border-divider': saveRequest }"
:class="{ 'rounded border-2 border-divider': saveRequest }"
>
<div
class="bg-primary flex flex-col top-0 z-10 sticky"

2
components/docs/Request.vue
View File

@@ -120,7 +120,7 @@ export default {
@apply p-4;
@apply mt-4;
@apply border border-divider;
@apply rounded-lg;
@apply rounded;
h4 {
@apply mt-4;

2
components/http/Body.vue
View File

@@ -17,7 +17,7 @@
v-model="contentType"
class="
bg-primary
rounded-lg
rounded
flex
font-semibold font-mono
text-xs

4
components/http/CodegenModal.vue
View File

@@ -24,7 +24,7 @@
class="
bg-primaryLight
border-b border-dividerLight
rounded-lg
rounded
cursor-pointer
flex
font-semibold
@@ -79,7 +79,7 @@
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-lg"
styles="rounded"
/>
</div>
</template>

6
components/http/Request.vue
View File

@@ -16,7 +16,7 @@
class="
bg-primaryLight
border border-divider
rounded-l-lg
rounded-l
cursor-pointer
flex
font-mono
@@ -75,7 +75,7 @@
id="send"
class="rounded-none"
:label="!loading ? $t('send') : $t('cancel')"
:shortcuts="[getSpecialKey(), 'G']"
:shortcut="[getSpecialKey(), 'G']"
outline
@click.native="!loading ? newSendRequest() : cancelRequest()"
/>
@@ -125,7 +125,7 @@
<ButtonSecondary
class="rounded-r-none ml-2"
:label="$t('save')"
:shortcuts="[getSpecialKey(), 'S']"
:shortcut="[getSpecialKey(), 'S']"
outline
@click.native="newSendRequest"
/>

28
components/http/TestResult.vue
View File

@@ -1,8 +1,22 @@
<template>
<div>
<div v-if="results">
<div v-if="results.tests">
<span
v-if="results.tests.description"
class="font-semibold text-secondaryDark text-xs"
>
{{ results.tests.description }}
</span>
<HttpTestResult
v-for="(result, index) in results.tests"
:key="`result-${index}`"
class="divide-y divide-dividerLight"
:results="result"
/>
</div>
<div v-if="results.expectResults">
<div
v-for="(result, index) in results"
v-for="(result, index) in results.expectResults"
:key="`result-${index}`"
class="flex py-2 px-4 items-center"
>
@@ -27,14 +41,6 @@
</span>
</div>
</div>
<div v-if="results.tests">
<HttpTestResult
v-for="(result, index) in results.expectResults"
:key="`result-${index}`"
class="divide-y divide-dividerLight"
:results="results.expectResults"
/>
</div>
</div>
</template>
@@ -45,7 +51,7 @@ import { HoppTestResult } from "~/helpers/types/HoppTestResult"
export default defineComponent({
props: {
results: {
type: Array as PropType<HoppTestResult>,
type: Object as PropType<HoppTestResult>,
default: null,
},
},

20
components/http/Tests.vue
View File

@@ -36,9 +36,6 @@
}"
complete-mode="test"
/>
<pre>
{{ testResults }}
</pre>
<div v-if="testResults">
<div class="flex flex-1 pl-4 items-center justify-between">
<div>
@@ -60,22 +57,7 @@
@click.native="clearContent()"
/>
</div>
<div v-if="testResults.expectResults">
<HttpTestResult
v-for="(result, index) in testResults.expectResults"
:key="`result-${index}`"
class="divide-y divide-dividerLight"
:results="testResults.expectResults"
/>
</div>
<div v-if="testResults.tests">
<HttpTestResult
v-for="(result, index) in testResults.tests"
:key="`result-${index}`"
class="divide-y divide-dividerLight"
:results="testResults.tests"
/>
</div>
<HttpTestResult v-if="testResults" :results="testResults" />
</div>
</AppSection>
</template>

2
components/landing/Hero.vue
View File

@@ -38,7 +38,7 @@
svg="github"
large
rounded
:shortcuts="['30k Stars']"
:shortcut="['30k Stars']"
/>
</div>
<LandingStats />

2
components/profile/Picture.vue
View File

@@ -14,7 +14,7 @@
:alt="alt"
loading="lazy"
/>
<div class="rounded-lg shadow-inner inset-0 absolute"></div>
<div class="rounded shadow-inner inset-0 absolute"></div>
</div>
</template>

2
components/realtime/Mqtt.vue
View File

@@ -14,7 +14,7 @@
class="
bg-primaryLight
border border-divider
rounded-l-lg
rounded-l
font-mono
text-secondaryDark
w-full

2
components/realtime/Socketio.vue
View File

@@ -15,7 +15,7 @@
class="
bg-primaryLight
border border-divider
rounded-l-lg
rounded-l
font-mono
text-secondaryDark
w-full

2
components/realtime/Sse.vue
View File

@@ -12,7 +12,7 @@
class="
bg-primaryLight
border border-divider
rounded-l-lg
rounded-l
font-mono
text-secondaryDark
w-full

2
components/realtime/Websocket.vue
View File

@@ -11,7 +11,7 @@
class="
bg-primaryLight
border border-divider
rounded-l-lg
rounded-l
font-mono
text-secondaryDark
w-full

2
components/smart/DeletableChip.vue
View File

@@ -14,7 +14,7 @@
@apply inline-flex;
@apply items-center;
@apply justify-center;
@apply rounded-lg;
@apply rounded;
@apply m-1;
@apply pl-4;
@apply bg-primaryDark;

2
components/smart/Item.vue
View File

@@ -4,7 +4,7 @@
:exact="exact"
:blank="blank"
class="
rounded-lg
rounded
font-semibold
text-xs
py-2

2
components/smart/Modal.vue
View File

@@ -22,7 +22,7 @@
<div
class="
bg-primary
rounded-lg
rounded
flex flex-col
max-w-md max-h-lg
flex-1

2
components/tab/Primary.vue
View File

@@ -4,7 +4,7 @@
:exact="exact"
:blank="blank"
class="
rounded-lg
rounded
font-semibold
py-2
px-4

2
helpers/preRequest.ts
View File

@@ -36,7 +36,7 @@ export default function getEnvironmentVariablesFromScript(script: string) {
// run pre-request script within this function so that it has access to the pw object.
// eslint-disable-next-line no-new-func
new Function("pw", script)(pw)
} catch (_e) { }
} catch (_e) {}
return _variables
}

4
helpers/utils/contenttypes.ts
View File

@@ -11,3 +11,7 @@ export const knownContentTypes = {
}
export type ValidContentTypes = keyof typeof knownContentTypes
export function isJSONContentType(contentType: string) {
return /\bjson\b/i.test(contentType)
}

2
lang/en-US.json
View File

@@ -59,7 +59,7 @@
"status": "Status",
"headers": "Headers",
"websocket": "WebSocket",
"waiting_for_connection": "(waiting for connection)",
"waiting_for_connection": "waiting for connection",
"message": "Message",
"sse": "SSE",
"server": "Server",

58
layouts/default.vue
View File

@@ -17,44 +17,14 @@
<AppHeader />
</Pane>
<Pane class="flex flex-1 overflow-auto">
<nuxt class="flex flex-1" :hide-right-pane="RIGHT_SIDEBAR" />
<nuxt class="flex flex-1" />
</Pane>
</Splitpanes>
</Pane>
</Splitpanes>
</Pane>
<Pane style="height: auto">
<div class="flex justify-between">
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="LEFT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
icon="menu_open"
:class="{ 'transform rotate-180': !LEFT_SIDEBAR }"
@click.native="toggleSetting('LEFT_SIDEBAR')"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${ZEN_MODE ? $t('turn_off') : $t('turn_on')} ${$t(
'zen_mode'
)}`"
:icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
:class="{
'text-accent focus:text-accent hover:text-accent': ZEN_MODE,
}"
@click.native="toggleSetting('ZEN_MODE')"
/>
</div>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="RIGHT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
icon="menu_open"
:class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
@click.native="toggleSetting('RIGHT_SIDEBAR')"
/>
</div>
</div>
<AppFooter />
</Pane>
</Splitpanes>
</div>
@@ -69,38 +39,24 @@ import { performMigrations } from "~/helpers/migrations"
import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
import { registerApolloAuthUpdate } from "~/helpers/apollo"
import { initializeFirebase } from "~/helpers/fb"
import {
defaultSettings,
getSettingSubject,
applySetting,
toggleSetting,
} from "~/newstore/settings"
import { getSettingSubject } from "~/newstore/settings"
import { logPageView } from "~/helpers/fb/analytics"
import type { KeysMatching } from "~/types/ts-utils"
type SettingsType = typeof defaultSettings
export default defineComponent({
components: { Splitpanes, Pane },
data() {
return {
LEFT_SIDEBAR: null,
RIGHT_SIDEBAR: null,
ZEN_MODE: null,
}
},
subscriptions() {
return {
LEFT_SIDEBAR: getSettingSubject("LEFT_SIDEBAR"),
RIGHT_SIDEBAR: getSettingSubject("RIGHT_SIDEBAR"),
ZEN_MODE: getSettingSubject("ZEN_MODE"),
}
},
watch: {
ZEN_MODE(ZEN_MODE) {
this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
},
$route(to) {
logPageView(to.fullPath)
},
@@ -159,13 +115,5 @@ export default defineComponent({
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
toggleSetting<K extends KeysMatching<SettingsType, boolean>>(key: K) {
toggleSetting(key)
},
applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
applySetting(key, value)
},
},
})
</script>

3
layouts/empty.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<Nuxt />
</template>

2
middleware/README.md
View File

@@ -1,7 +1,5 @@
# MIDDLEWARE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.

4
newstore/settings.ts
View File

@@ -44,7 +44,7 @@ export type SettingsType = {
THEME_COLOR: HoppAccentColor
BG_COLOR: HoppBgColor
TELEMETRY_ENABLED: boolean
SHORTCUTS_INDICATOR_ENABLED: boolean
SHORTCUT_INDICATOR: boolean
LEFT_SIDEBAR: boolean
RIGHT_SIDEBAR: boolean
ZEN_MODE: boolean
@@ -70,7 +70,7 @@ export const defaultSettings: SettingsType = {
THEME_COLOR: "green",
BG_COLOR: "system",
TELEMETRY_ENABLED: true,
SHORTCUTS_INDICATOR_ENABLED: false,
SHORTCUT_INDICATOR: false,
LEFT_SIDEBAR: true,
RIGHT_SIDEBAR: true,
ZEN_MODE: false,

13
pages/enter.vue
View File

@@ -1,8 +1,12 @@
<template>
<div class="flex flex-col min-h-screen">
<span v-if="signingInWithEmail">{{ $t("loading") }}</span>
<span v-else>{{ $t("waiting_for_connection") }}</span>
<pre v-if="error">{{ error }}</pre>
<div class="flex flex-col min-h-screen items-center justify-center">
<span v-if="signingInWithEmail">
<SmartSpinner />
</span>
<span v-else class="text-secondaryLight text-xs">
{{ $t("waiting_for_connection") }}
</span>
<pre v-if="error" class="font-mono text-xs">{{ error }}</pre>
</div>
</template>
@@ -13,6 +17,7 @@ import { isSignInWithEmailLink, signInWithEmailLink } from "~/helpers/fb/auth"
import { getLocalConfig, removeLocalConfig } from "~/newstore/localpersistence"
export default Vue.extend({
layout: "empty",
data() {
return {
signingInWithEmail: false,

2
pages/graphql.vue
View File

@@ -15,7 +15,7 @@
class="
bg-primaryLight
border border-divider
rounded-l-lg
rounded-l
font-mono
text-secondaryDark
w-full

39
pages/settings.vue
View File

@@ -173,13 +173,11 @@
</div>
<div class="flex items-center">
<SmartToggle
:on="SHORTCUTS_INDICATOR_ENABLED"
@change="toggleSetting('SHORTCUTS_INDICATOR_ENABLED')"
:on="SHORTCUT_INDICATOR"
@change="toggleSetting('SHORTCUT_INDICATOR')"
>
{{ $t("shortcuts_indicator") }}
{{
SHORTCUTS_INDICATOR_ENABLED ? $t("enabled") : $t("disabled")
}}
{{ SHORTCUT_INDICATOR ? $t("enabled") : $t("disabled") }}
</SmartToggle>
</div>
<div class="flex items-center">
@@ -229,6 +227,26 @@
{{ $t("extension_ver_not_reported") }}
</span>
</div>
<div class="flex flex-col space-y-2 py-4">
<span>
<SmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank
svg="firefox"
label="Firefox"
:info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
/>
</span>
<span>
<SmartItem
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank
svg="chrome"
label="Chrome"
:info-icon="hasChromeExtInstalled ? 'check_circle' : ''"
/>
</span>
</div>
<div class="space-y-4 mt-4">
<div class="flex items-center">
<SmartToggle
@@ -318,7 +336,11 @@
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
import {
hasExtensionInstalled,
hasChromeExtensionInstalled,
hasFirefoxExtensionInstalled,
} from "~/helpers/strategies/ExtensionStrategy"
import {
applySetting,
toggleSetting,
@@ -345,7 +367,7 @@ export default defineComponent({
SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
SYNC_HISTORY: useSetting("syncHistory"),
TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
SHORTCUTS_INDICATOR_ENABLED: useSetting("SHORTCUTS_INDICATOR_ENABLED"),
SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
ZEN_MODE: useSetting("ZEN_MODE"),
currentUser: useReadonlyStream(currentUser$, currentUser$.value),
@@ -357,6 +379,9 @@ export default defineComponent({
? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
: null,
hasChromeExtInstalled: hasChromeExtensionInstalled(),
hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
clearIcon: "clear_all",
showLogin: false,