"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

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