"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.

[ To the main hoppscotch source changes report ]

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
To the Text Files section of the hoppscotch source changes report or the top of this page
Mainly generated by pkgdiff using rfcdiff
Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)