"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/hoppscotch-app/components/app/Footer.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.

Footer.vue  (hoppscotch-2.2.1)	:	Footer.vue  (hoppscotch-3.0.0)
<template>		<template>
<div>		<div>
<div class="flex justify-between">		<div class="flex justify-between bg-primary">
<div class="flex">		<div class="flex">
<ButtonSecondary		<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"		v-tippy="{ theme: 'tooltip' }"
:title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"		:title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
svg="sidebar"		:icon="IconSidebar"
class="transform"		class="transform"
:class="{ '-rotate-180': !EXPAND_NAVIGATION }"		:class="{ '-rotate-180': !EXPAND_NAVIGATION }"
@click.native="EXPAND_NAVIGATION = !EXPAND_NAVIGATION"		@click="EXPAND_NAVIGATION = !EXPAND_NAVIGATION"
/>		/>
<ButtonSecondary		<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"		v-tippy="{ theme: 'tooltip' }"
:title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(		:title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
'layout.zen_mode'		'layout.zen_mode'
)}`"		)}`"
:svg="ZEN_MODE ? 'minimize' : 'maximize'"		:icon="ZEN_MODE ? IconMinimize : IconMaximize"
:class="{		:class="{
'!text-accent !focus-visible:text-accentDark !hover:text-accentDark' :		'!text-accent !focus-visible:text-accentDark !hover:text-accentDark' :
ZEN_MODE,		ZEN_MODE,
}"		}"
@click.native="ZEN_MODE = !ZEN_MODE"		@click="ZEN_MODE = !ZEN_MODE"
/>		/>
<tippy		<tippy interactive trigger="click" theme="popover" arrow>
ref="interceptorOptions"		<ButtonSecondary
interactive		v-tippy="{ theme: 'tooltip' }"
trigger="click"		:title="t('settings.interceptor')"
theme="popover"		:icon="IconShieldCheck"
arrow		/>
>		<template #content>
<template #trigger>		<AppInterceptor />
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('settings.interceptor')"
svg="shield-check"
/>
</template>		</template>
<AppInterceptor />
</tippy>		</tippy>
</div>		</div>
<div class="flex">		<div class="flex">
<tippy		<tippy
ref="options"		ref="options"
interactive		interactive
trigger="click"		trigger="click"
theme="popover"		theme="popover"
arrow		arrow
:on-shown="() => tippyActions.focus()"		:on-shown="() => tippyActions.focus()"
>		>
<template #trigger>		<ButtonSecondary
<ButtonSecondary		:icon="IconHelpCircle"
svg="help-circle"		class="!rounded-none"
class="!rounded-none"		:label="`${t('app.help')}`"
:label="`${t('app.help')}`"		/>
/>		<template #content="{ hide }">
</template>		<div
<div		ref="tippyActions"
ref="tippyActions"		class="flex flex-col focus:outline-none"
class="flex flex-col focus:outline-none"		tabindex="0"
tabindex="0"		role="menu"
@keyup.d="documentation.$el.click()"		@keyup.d="documentation.$el.click()"
@keyup.s="shortcuts.$el.click()"		@keyup.s="shortcuts.$el.click()"
@keyup.c="chat.$el.click()"		@keyup.c="chat.$el.click()"
@keyup.escape="options.tippy().hide()"		@keyup.escape="hide()"
>		>
<SmartItem		<SmartItem
ref="documentation"		ref="documentation"
svg="book"		:icon="IconBook"
:label="`${t('app.documentation')}`"		:label="`${t('app.documentation')}`"
to="https://docs.hoppscotch.io"		to="https://docs.hoppscotch.io"
blank		blank
:shortcut="['D']"		:shortcut="['D']"
@click.native="options.tippy().hide()"		@click="hide()"
/>		/>
<SmartItem		<SmartItem
ref="shortcuts"		ref="shortcuts"
svg="zap"		:icon="IconZap"
:label="`${t('app.keyboard_shortcuts')}`"		:label="`${t('app.keyboard_shortcuts')}`"
:shortcut="['S']"		:shortcut="['S']"
@click.native="		@click="
() => {		() => {
showShortcuts = true		showShortcuts = true
options.tippy().hide()		hide()
}		}
"		"
/>		/>
<SmartItem		<SmartItem
ref="chat"		ref="chat"
svg="message-circle"		:icon="IconMessageCircle"
:label="`${t('app.chat_with_us')}`"		:label="`${t('app.chat_with_us')}`"
:shortcut="['C']"		:shortcut="['C']"
@click.native="		@click="
() => {		() => {
chatWithUs()		chatWithUs()
options.tippy().hide()		hide()
}		}
"		"
/>		/>
<SmartItem		<SmartItem
svg="gift"		:icon="IconGift"
:label="`${t('app.whats_new')}`"		:label="`${t('app.whats_new')}`"
to="https://docs.hoppscotch.io/changelog"		to="https://docs.hoppscotch.io/changelog"
blank		blank
@click.native="options.tippy().hide()"		@click="hide()"
/>		/>
<SmartItem		<SmartItem
svg="activity"		:icon="IconActivity"
:label="t('app.status')"		:label="t('app.status')"
to="https://status.hoppscotch.io"		to="https://status.hoppscotch.io"
blank		blank
@click.native="options.tippy().hide()"		@click="hide()"
/>		/>
<hr />		<hr />
<SmartItem		<SmartItem
svg="github"		:icon="IconGithub"
:label="`${t('app.github')}`"		:label="`${t('app.github')}`"
to="https://github.com/hoppscotch/hoppscotch"		to="https://github.com/hoppscotch/hoppscotch"
blank		blank
@click.native="options.tippy().hide()"		@click="hide()"
/>		/>
<SmartItem		<SmartItem
svg="twitter"		:icon="IconTwitter"
:label="`${t('app.twitter')}`"		:label="`${t('app.twitter')}`"
to="https://hoppscotch.io/twitter"		to="https://hoppscotch.io/twitter"
blank		blank
@click.native="options.tippy().hide()"		@click="hide()"
/>		/>
<SmartItem		<SmartItem
svg="user-plus"		:icon="IconUserPlus"
:label="`${t('app.invite')}`"		:label="`${t('app.invite')}`"
@click.native="		@click="
() => {		() => {
showShare = true		showShare = true
options.tippy().hide()		hide()
}		}
"		"
/>		/>
<SmartItem		<SmartItem
svg="lock"		:icon="IconLock"
:label="`${t('app.terms_and_privacy')}`"		:label="`${t('app.terms_and_privacy')}`"
to="https://docs.hoppscotch.io/privacy"		to="https://docs.hoppscotch.io/privacy"
blank		blank
@click.native="options.tippy().hide()"		@click="hide()"
/>		/>
<div class="flex px-4 py-2 opacity-50">		<div
{{ `${t("app.name")} v${$config.clientVersion}` }}		class="flex px-4 py-2 opacity-50"
		@dblclick="showDeveloperOptionModal()"
		>
		{{ `${t("app.name")} v${version}` }}
		</div>
</div>		</div>
</div>		</template>
</tippy>		</tippy>
<ButtonSecondary		<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"		v-tippy="{ theme: 'tooltip' }"
svg="zap"		:icon="IconZap"
:title="t('app.shortcuts')"		:title="t('app.shortcuts')"
@click.native="showShortcuts = true"		@click="showShortcuts = true"
/>		/>
<ButtonSecondary		<ButtonSecondary
v-if="navigatorShare"		v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"		v-tippy="{ theme: 'tooltip' }"
svg="share-2"		:icon="IconShare2"
:title="t('request.share')"		:title="t('request.share')"
@click.native="nativeShare()"		@click="nativeShare()"
/>		/>
<ButtonSecondary		<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"		v-tippy="{ theme: 'tooltip' }"
:title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"		:title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
svg="columns"		:icon="IconColumns"
class="transform"		class="transform"
:class="{ 'rotate-90': !COLUMN_LAYOUT }"		:class="{ 'rotate-90': !COLUMN_LAYOUT }"
@click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"		@click="COLUMN_LAYOUT = !COLUMN_LAYOUT"
/>		/>
<span		<span
class="transition transform"		class="transition transform"
:class="{		:class="{
'rotate-180': SIDEBAR_ON_LEFT,		'rotate-180': SIDEBAR_ON_LEFT,
}"		}"
>		>
<ButtonSecondary		<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"		v-tippy="{ theme: 'tooltip' }"
:title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"		:title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"
svg="sidebar-open"		:icon="IconSidebarOpen"
class="transform"		class="transform"
:class="{ 'rotate-180': !SIDEBAR }"		:class="{ 'rotate-180': !SIDEBAR }"
@click.native="SIDEBAR = !SIDEBAR"		@click="SIDEBAR = !SIDEBAR"
/>		/>
</span>		</span>
</div>		</div>
</div>		</div>
<AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />		<AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
<AppShare :show="showShare" @hide-modal="showShare = false" />		<AppShare :show="showShare" @hide-modal="showShare = false" />
<AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />		<AppDeveloperOptions
		:show="showDeveloperOptions"
		@hide-modal="showDeveloperOptions = false"
		/>
</div>		</div>
</template>		</template>
<script setup lang="ts">		<script setup lang="ts">
import { ref, watch } from "@nuxtjs/composition-api"		import { ref, watch } from "vue"
		import { version } from "~/../package.json"
		import IconSidebar from "~icons/lucide/sidebar"
		import IconMinimize from "~icons/lucide/minimize"
		import IconMaximize from "~icons/lucide/maximize"
		import IconZap from "~icons/lucide/zap"
		import IconShare2 from "~icons/lucide/share-2"
		import IconColumns from "~icons/lucide/columns"
		import IconSidebarOpen from "~icons/lucide/sidebar-open"
		import IconShieldCheck from "~icons/lucide/shield-check"
		import IconHelpCircle from "~icons/lucide/help-circle"
		import IconBook from "~icons/lucide/book"
		import IconMessageCircle from "~icons/lucide/message-circle"
		import IconGift from "~icons/lucide/gift"
		import IconActivity from "~icons/lucide/activity"
		import IconGithub from "~icons/lucide/github"
		import IconTwitter from "~icons/lucide/twitter"
		import IconUserPlus from "~icons/lucide/user-plus"
		import IconLock from "~icons/lucide/lock"
import { defineActionHandler } from "~/helpers/actions"		import { defineActionHandler } from "~/helpers/actions"
import { showChat } from "~/helpers/support"		import { showChat } from "@modules/crisp"
import { useSetting } from "~/newstore/settings"		import { useSetting } from "@composables/settings"
import { useI18n } from "~/helpers/utils/composables"		import { useI18n } from "@composables/i18n"
		import { useReadonlyStream } from "@composables/stream"
		import { currentUser$ } from "~/helpers/fb/auth"
const t = useI18n()		const t = useI18n()
const showShortcuts = ref(false)		const showShortcuts = ref(false)
const showShare = ref(false)		const showShare = ref(false)
const showSearch = ref(false)		const showDeveloperOptions = ref(false)
defineActionHandler("flyouts.keybinds.toggle", () => {		defineActionHandler("flyouts.keybinds.toggle", () => {
showShortcuts.value = !showShortcuts.value		showShortcuts.value = !showShortcuts.value
})		})
defineActionHandler("modals.share.toggle", () => {		defineActionHandler("modals.share.toggle", () => {
showShare.value = !showShare.value		showShare.value = !showShare.value
})		})
defineActionHandler("modals.search.toggle", () => {
showSearch.value = !showSearch.value
})
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")		const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
const SIDEBAR = useSetting("SIDEBAR")		const SIDEBAR = useSetting("SIDEBAR")
const ZEN_MODE = useSetting("ZEN_MODE")		const ZEN_MODE = useSetting("ZEN_MODE")
const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")		const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")		const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
const navigatorShare = !!navigator.share		const navigatorShare = !!navigator.share
		const currentUser = useReadonlyStream(currentUser$, null)
watch(		watch(
() => ZEN_MODE.value,		() => ZEN_MODE.value,
() => {		() => {
EXPAND_NAVIGATION.value = !ZEN_MODE.value		EXPAND_NAVIGATION.value = !ZEN_MODE.value
}		}
)		)
const nativeShare = () => {		const nativeShare = () => {
if (navigator.share) {		if (navigator.share) {
navigator		navigator
.share({		.share({
title: "Hoppscotch",		title: "Hoppscotch",
text: "Hoppscotch • Open source API development ecosystem - Helps you cr eate requests faster, saving precious time on development.",		text: "Hoppscotch • Open source API development ecosystem - Helps you cr eate requests faster, saving precious time on development.",
url: "https://hoppscotch.io",		url: "https://hoppscotch.io",
})		})
.then(() => {})
.catch(console.error)		.catch(console.error)
} else {		} else {
// fallback		// fallback
}		}
}		}
const chatWithUs = () => {		const chatWithUs = () => {
showChat()		showChat()
}		}
		const showDeveloperOptionModal = () => {
		if (currentUser.value) {
		showDeveloperOptions.value = true
		options.value.tippy().hide()
		}
		}
// Template refs		// Template refs
const tippyActions = ref<any | null>(null)		const tippyActions = ref<any | null>(null)
const documentation = ref<any | null>(null)		const documentation = ref<any | null>(null)
const shortcuts = ref<any | null>(null)		const shortcuts = ref<any | null>(null)
const chat = ref<any | null>(null)		const chat = ref<any | null>(null)
const options = ref<any | null>(null)		const options = ref<any | null>(null)
</script>		</script>
End of changes. 25 change blocks.
136 lines changed or deleted		161 lines changed or added

---