"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/hoppscotch-app/pages/settings.vue" between
hoppscotch-2.2.1.tar.gz and hoppscotch-3.0.0.tar.gz

About: Hoppscotch is a light-weight, web based API development suite.

settings.vue  (hoppscotch-2.2.1):settings.vue  (hoppscotch-3.0.0)
skipping to change at line 19 skipping to change at line 19
<p class="my-1 text-secondaryLight"> <p class="my-1 text-secondaryLight">
{{ t("settings.theme_description") }} {{ t("settings.theme_description") }}
</p> </p>
</div> </div>
<div class="p-8 space-y-8 md:col-span-2"> <div class="p-8 space-y-8 md:col-span-2">
<section> <section>
<h4 class="font-semibold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ t("settings.background") }} {{ t("settings.background") }}
</h4> </h4>
<div class="my-1 text-secondaryLight"> <div class="my-1 text-secondaryLight">
<ColorScheme placeholder="..." tag="span"> {{ t(getColorModeName(colorMode.preference)) }}
{{ t(getColorModeName(colorMode.preference)) }} <span v-if="colorMode.preference === 'system'">
<span v-if="colorMode.preference === 'system'"> ({{ t(getColorModeName(colorMode.value)) }})
({{ t(getColorModeName(colorMode.value)) }}) </span>
</span>
</ColorScheme>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<SmartColorModePicker /> <SmartColorModePicker />
</div> </div>
</section> </section>
<section> <section>
<h4 class="font-semibold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ t("settings.accent_color") }} {{ t("settings.accent_color") }}
</h4> </h4>
<div class="my-1 text-secondaryLight"> <div class="my-1 text-secondaryLight">
{{ active.charAt(0).toUpperCase() + active.slice(1) }} {{ ACCENT_COLOR.charAt(0).toUpperCase() + ACCENT_COLOR.slice(1) }}
</div> </div>
<div class="mt-4"> <div class="mt-4">
<SmartAccentModePicker /> <SmartAccentModePicker />
</div> </div>
</section> </section>
<section> <section>
<h4 class="font-semibold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ t("settings.font_size") }} {{ t("settings.font_size") }}
</h4> </h4>
<div class="mt-4"> <div class="mt-4">
skipping to change at line 63 skipping to change at line 61
<div class="mt-4"> <div class="mt-4">
<SmartChangeLanguage /> <SmartChangeLanguage />
</div> </div>
</section> </section>
<section> <section>
<h4 class="font-semibold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ t("settings.experiments") }} {{ t("settings.experiments") }}
</h4> </h4>
<div class="my-1 text-secondaryLight"> <div class="my-1 text-secondaryLight">
{{ t("settings.experiments_notice") }} {{ t("settings.experiments_notice") }}
<SmartLink <SmartAnchor
class="link" class="link"
to="https://github.com/hoppscotch/hoppscotch/issues/new/choose" to="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
blank blank
> :label="t('app.contact_us')"
{{ t("app.contact_us") }} </SmartLink />.
>.
</div> </div>
<div class="py-4 space-y-4"> <div class="py-4 space-y-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal"> <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
{{ t("settings.telemetry") }} {{ t("settings.telemetry") }}
</SmartToggle> </SmartToggle>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="EXPAND_NAVIGATION" :on="EXPAND_NAVIGATION"
skipping to change at line 135 skipping to change at line 132
<span v-else> <span v-else>
{{ t("settings.extension_version") }}: {{ t("settings.extension_version") }}:
{{ t("settings.extension_ver_not_reported") }} {{ t("settings.extension_ver_not_reported") }}
</span> </span>
</div> </div>
<div class="flex flex-col py-4 space-y-2"> <div class="flex flex-col py-4 space-y-2">
<span> <span>
<SmartItem <SmartItem
to="https://chrome.google.com/webstore/detail/hoppscotch-brows er-extens/amknoiejhlmhancpahfcfcfhllgkpbld" to="https://chrome.google.com/webstore/detail/hoppscotch-brows er-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank blank
svg="brands/chrome" :icon="IconChrome"
label="Chrome" label="Chrome"
:info-icon="hasChromeExtInstalled ? 'check_circle' : ''" :info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
:active-info-icon="hasChromeExtInstalled" :active-info-icon="hasChromeExtInstalled"
outline outline
/> />
</span> </span>
<span> <span>
<SmartItem <SmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch" to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank blank
svg="brands/firefox" :icon="IconFirefox"
label="Firefox" label="Firefox"
:info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''" :info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
:active-info-icon="hasFirefoxExtInstalled" :active-info-icon="hasFirefoxExtInstalled"
outline outline
/> />
</span> </span>
</div> </div>
<div class="py-4 space-y-4"> <div class="py-4 space-y-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="EXTENSIONS_ENABLED" :on="EXTENSIONS_ENABLED"
@change="toggleInterceptor('extension')" @change="toggleInterceptor('extension')"
skipping to change at line 175 skipping to change at line 172
<section> <section>
<h4 class="font-semibold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ t("settings.proxy") }} {{ t("settings.proxy") }}
</h4> </h4>
<div class="my-1 text-secondaryLight"> <div class="my-1 text-secondaryLight">
{{ {{
`${t("settings.official_proxy_hosting")} ${t( `${t("settings.official_proxy_hosting")} ${t(
"settings.read_the" "settings.read_the"
)}` )}`
}} }}
<SmartLink <SmartAnchor
class="link" class="link"
to="https://docs.hoppscotch.io/privacy" to="https://docs.hoppscotch.io/privacy"
blank blank
> :label="t('app.proxy_privacy_policy')"
{{ t("app.proxy_privacy_policy") }} </SmartLink />.
>.
</div> </div>
<div class="py-4 space-y-4"> <div class="py-4 space-y-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="PROXY_ENABLED" :on="PROXY_ENABLED"
@change="toggleInterceptor('proxy')" @change="toggleInterceptor('proxy')"
> >
{{ t("settings.proxy_use_toggle") }} {{ t("settings.proxy_use_toggle") }}
</SmartToggle> </SmartToggle>
</div> </div>
skipping to change at line 211 skipping to change at line 207
autocomplete="off" autocomplete="off"
:disabled="!PROXY_ENABLED" :disabled="!PROXY_ENABLED"
/> />
<label for="url"> <label for="url">
{{ t("settings.proxy_url") }} {{ t("settings.proxy_url") }}
</label> </label>
</div> </div>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="t('settings.reset_default')" :title="t('settings.reset_default')"
:svg="clearIcon" :icon="clearIcon"
outline outline
class="rounded" class="rounded"
@click.native="resetProxy" @click="resetProxy"
/> />
</div> </div>
</section> </section>
</div> </div>
</div> </div>
</div> </div>
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="`${t('confirm.remove_telemetry')} ${t( :title="`${t('confirm.remove_telemetry')} ${t(
'settings.telemetry_helps_us' 'settings.telemetry_helps_us'
skipping to change at line 238 skipping to change at line 234
() => { () => {
toggleSetting('TELEMETRY_ENABLED') toggleSetting('TELEMETRY_ENABLED')
confirmRemove = false confirmRemove = false
} }
" "
/> />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch, defineComponent } from "@nuxtjs/composition-api" import IconChrome from "~icons/brands/chrome"
import { applySetting, toggleSetting, useSetting } from "~/newstore/settings" import IconCheckCircle from "~icons/lucide/check-circle"
import { import IconFirefox from "~icons/brands/firefox"
useToast, import IconRotateCCW from "~icons/lucide/rotate-ccw"
useI18n, import IconCheck from "~icons/lucide/check"
useColorMode, import { ref, computed, watch } from "vue"
usePolled, import { refAutoReset } from "@vueuse/core"
} from "~/helpers/utils/composables" import { applySetting, toggleSetting } from "~/newstore/settings"
import { import { useSetting } from "@composables/settings"
hasExtensionInstalled, import { useToast } from "@composables/toast"
hasChromeExtensionInstalled, import { useI18n } from "@composables/i18n"
hasFirefoxExtensionInstalled, import { useColorMode } from "@composables/theming"
} from "~/helpers/strategies/ExtensionStrategy" import { useReadonlyStream } from "@composables/stream"
import { getLocalConfig } from "~/newstore/localpersistence"
import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent" import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent"
import { extensionStatus$ } from "~/newstore/HoppExtension"
import { usePageHead } from "@composables/head"
const t = useI18n() const t = useI18n()
const toast = useToast() const toast = useToast()
const colorMode = useColorMode() const colorMode = useColorMode()
usePageHead({
title: computed(() => t("navigation.settings")),
})
const ACCENT_COLOR = useSetting("THEME_COLOR")
const PROXY_ENABLED = useSetting("PROXY_ENABLED") const PROXY_ENABLED = useSetting("PROXY_ENABLED")
const PROXY_URL = useSetting("PROXY_URL") const PROXY_URL = useSetting("PROXY_URL")
const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED") const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
const TELEMETRY_ENABLED = useSetting("TELEMETRY_ENABLED") const TELEMETRY_ENABLED = useSetting("TELEMETRY_ENABLED")
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION") const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT") const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
const ZEN_MODE = useSetting("ZEN_MODE") const ZEN_MODE = useSetting("ZEN_MODE")
const extensionVersion = usePolled(5000, (stopPolling) => { const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
const result = hasExtensionInstalled()
? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
: null
// We don't need to poll anymore after we get value
if (result) stopPolling()
return result
})
const hasChromeExtInstalled = usePolled(5000, (stopPolling) => { const extensionVersion = computed(() => {
// If not Chrome, we don't need to worry about this value changing return currentExtensionStatus.value === "available"
if (!browserIsChrome()) stopPolling() ? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
: null
return hasChromeExtensionInstalled()
}) })
const hasFirefoxExtInstalled = usePolled(5000, (stopPolling) => { const hasChromeExtInstalled = computed(
// If not Chrome, we don't need to worry about this value changing () => browserIsChrome() && currentExtensionStatus.value === "available"
if (!browserIsFirefox()) stopPolling() )
return hasFirefoxExtensionInstalled()
})
const clearIcon = ref("rotate-ccw") const hasFirefoxExtInstalled = computed(
() => browserIsFirefox() && currentExtensionStatus.value === "available"
)
const active = ref(getLocalConfig("THEME_COLOR") || "blue") const clearIcon = refAutoReset<typeof IconRotateCCW | typeof IconCheck>(
IconRotateCCW,
1000
)
const confirmRemove = ref(false) const confirmRemove = ref(false)
const proxySettings = computed(() => ({ const proxySettings = computed(() => ({
url: PROXY_URL.value, url: PROXY_URL.value,
})) }))
watch(ZEN_MODE, (mode) => { watch(ZEN_MODE, (mode) => {
applySetting("EXPAND_NAVIGATION", !mode) applySetting("EXPAND_NAVIGATION", !mode)
}) })
skipping to change at line 337 skipping to change at line 332
} }
} }
const showConfirmModal = () => { const showConfirmModal = () => {
if (TELEMETRY_ENABLED.value) confirmRemove.value = true if (TELEMETRY_ENABLED.value) confirmRemove.value = true
else toggleSetting("TELEMETRY_ENABLED") else toggleSetting("TELEMETRY_ENABLED")
} }
const resetProxy = () => { const resetProxy = () => {
applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`) applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
clearIcon.value = "check" clearIcon.value = IconCheck
toast.success(`${t("state.cleared")}`) toast.success(`${t("state.cleared")}`)
setTimeout(() => (clearIcon.value = "rotate-ccw"), 1000)
} }
const getColorModeName = (colorMode: string) => { const getColorModeName = (colorMode: string) => {
switch (colorMode) { switch (colorMode) {
case "system": case "system":
return "settings.system_mode" return "settings.system_mode"
case "light": case "light":
return "settings.light_mode" return "settings.light_mode"
case "dark": case "dark":
return "settings.dark_mode" return "settings.dark_mode"
case "black": case "black":
return "settings.black_mode" return "settings.black_mode"
default: default:
return "settings.system_mode" return "settings.system_mode"
} }
} }
</script> </script>
<script lang="ts"> <route lang="yaml">
export default defineComponent({ meta:
head() { layout: default
return { </route>
title: `${this.$t("navigation.settings")} • Hoppscotch`,
}
},
})
</script>
 End of changes. 23 change blocks. 
60 lines changed or deleted 54 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)