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

refactor: remove footer on narrow screens (#2202)

Browse Source 
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2022-03-29 12:25:54 +05:30
committed by GitHub
parent 414469e5e9
commit 89c7127b17
5 changed files with 274 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -192,7 +192,6 @@
</div>
<AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
<AppShare :show="showShare" @hide-modal="showShare = false" />
<AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
<AppDeveloperOptions
:show="showDeveloperOptions"
@hide-modal="showDeveloperOptions = false"
@@ -212,7 +211,6 @@ const t = useI18n()
const showShortcuts = ref(false)
const showShare = ref(false)
const showDeveloperOptions = ref(false)
const showSearch = ref(false)
defineActionHandler("flyouts.keybinds.toggle", () => {
showShortcuts.value = !showShortcuts.value
@@ -222,10 +220,6 @@ defineActionHandler("modals.share.toggle", () => {
showShare.value = !showShare.value
})
defineActionHandler("modals.search.toggle", () => {
showSearch.value = !showSearch.value
})
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
const SIDEBAR = useSetting("SIDEBAR")
const ZEN_MODE = useSetting("ZEN_MODE")

26
packages/hoppscotch-app/components/app/Header.vue
View File

@@ -25,11 +25,13 @@
:title="`${t('app.search')} <xmp>/</xmp>`"
svg="search"
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click.native="invokeAction('modals.search.toggle')"
@click.native="showSearch = true"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="`${t('support.title')} <xmp>?</xmp>`"
:title="`${
mdAndLarger ? t('support.title') : t('app.options')
} <xmp>?</xmp>`"
svg="life-buoy"
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@click.native="showSupport = true"
@@ -137,14 +139,20 @@
</header>
<AppAnnouncement v-if="!network.isOnline" />
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
<AppSupport :show="showSupport" @hide-modal="showSupport = false" />
<AppSupport
v-if="mdAndLarger"
:show="showSupport"
@hide-modal="showSupport = false"
/>
<AppOptions v-else :show="showSupport" @hide-modal="showSupport = false" />
<TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
<AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "@nuxtjs/composition-api"
import { useNetwork } from "@vueuse/core"
import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
import initializePwa from "~/helpers/pwa"
import { probableUser$ } from "~/helpers/fb/auth"
import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
@@ -153,7 +161,7 @@ import {
useI18n,
useToast,
} from "~/helpers/utils/composables"
import { defineActionHandler, invokeAction } from "~/helpers/actions"
import { defineActionHandler } from "~/helpers/actions"
const t = useI18n()
@@ -169,6 +177,10 @@ const showInstallPrompt = ref(() => Promise.resolve()) // Async no-op till it is
const showSupport = ref(false)
const showLogin = ref(false)
const showTeamsModal = ref(false)
const showSearch = ref(false)
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
const network = reactive(useNetwork())
@@ -178,6 +190,10 @@ defineActionHandler("modals.support.toggle", () => {
showSupport.value = !showSupport.value
})
defineActionHandler("modals.search.toggle", () => {
showSearch.value = !showSearch.value
})
onMounted(() => {
// Initializes the PWA code - checks if the app is installed,
// etc.

210
packages/hoppscotch-app/components/app/Options.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<SmartModal
v-if="show"
dialog
:title="t('app.options')"
max-width="sm:max-w-md"
class="text-sm"
@close="$emit('hide-modal')"
>
<template #body>
<div class="flex flex-col space-y-2">
<h2 class="p-2 font-semibold font-bold text-secondaryDark">
{{ t("layout.name") }}
</h2>
<SmartItem
svg="sidebar"
:label="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
:description="t('layout.collapse_sidebar')"
info-icon="chevron_right"
active
@click.native="expandNavigation"
/>
<SmartItem
svg="sidebar-open"
:label="SIDEBAR ? t('hide.collection') : t('show.collection')"
:description="t('layout.collapse_collection')"
info-icon="chevron_right"
active
@click.native="expandCollection"
/>
<h2 class="p-2 font-semibold font-bold text-secondaryDark">
{{ t("support.title") }}
</h2>
<SmartItem
svg="book"
:label="t('app.documentation')"
to="https://docs.hoppscotch.io"
:description="t('support.documentation')"
info-icon="chevron_right"
active
blank
@click.native="hideModal()"
/>
<SmartItem
svg="gift"
:label="t('app.whats_new')"
to="https://docs.hoppscotch.io/changelog"
:description="t('support.changelog')"
info-icon="chevron_right"
active
blank
@click.native="hideModal()"
/>
<SmartItem
svg="activity"
:label="t('app.status')"
to="https://status.hoppscotch.io"
blank
:description="t('app.status_description')"
info-icon="chevron_right"
active
@click.native="hideModal()"
/>
<SmartItem
svg="lock"
:label="`${t('app.terms_and_privacy')}`"
to="https://docs.hoppscotch.io/privacy"
blank
:description="t('app.terms_and_privacy')"
info-icon="chevron_right"
active
@click.native="hideModal()"
/>
<h2 class="p-2 font-semibold font-bold text-secondaryDark">
{{ t("settings.follow") }}
</h2>
<SmartItem
svg="brands/discord"
:label="t('app.discord')"
to="https://hoppscotch.io/discord"
blank
:description="t('app.join_discord_community')"
info-icon="chevron_right"
active
@click.native="hideModal()"
/>
<SmartItem
svg="brands/twitter"
:label="t('app.twitter')"
to="https://hoppscotch.io/twitter"
blank
:description="t('support.twitter')"
info-icon="chevron_right"
active
@click.native="hideModal()"
/>
<SmartItem
svg="github"
:label="`${t('app.github')}`"
to="https://github.com/hoppscotch/hoppscotch"
blank
:description="t('support.github')"
info-icon="chevron_right"
active
@click.native="hideModal()"
/>
<SmartItem
svg="message-circle"
:label="t('app.chat_with_us')"
:description="t('support.chat')"
info-icon="chevron_right"
active
@click.native="chatWithUs()"
/>
<SmartItem
svg="user-plus"
:label="`${t('app.invite')}`"
:description="t('shortcut.miscellaneous.invite')"
info-icon="chevron_right"
active
@click.native="expandInvite()"
/>
<SmartItem
v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"
svg="share-2"
:label="`${t('request.share')}`"
:description="t('request.share_description')"
info-icon="chevron_right"
active
@click.native="nativeShare()"
/>
</div>
<AppShare :show="showShare" @hide-modal="showShare = false" />
</template>
</SmartModal>
</template>
<script setup lang="ts">
import { ref, watch } from "@nuxtjs/composition-api"
import { useSetting } from "~/newstore/settings"
import { defineActionHandler } from "~/helpers/actions"
import { showChat } from "~/helpers/support"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
const navigatorShare = !!navigator.share
const showShare = ref(false)
const ZEN_MODE = useSetting("ZEN_MODE")
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
const SIDEBAR = useSetting("SIDEBAR")
watch(
() => ZEN_MODE.value,
() => {
EXPAND_NAVIGATION.value = !ZEN_MODE.value
}
)
defineProps<{
show: Boolean
}>()
defineActionHandler("modals.share.toggle", () => {
showShare.value = !showShare.value
})
const emit = defineEmits<{
(e: "hide-modal"): void
}>()
const chatWithUs = () => {
showChat()
hideModal()
}
const expandNavigation = () => {
EXPAND_NAVIGATION.value = !EXPAND_NAVIGATION.value
hideModal()
}
const expandCollection = () => {
SIDEBAR.value = !SIDEBAR.value
hideModal()
}
const expandInvite = () => {
showShare.value = true
}
const 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
}
}
const hideModal = () => {
emit("hide-modal")
}
</script>

38
packages/hoppscotch-app/layouts/default.vue
View File

@@ -43,7 +43,6 @@
class="hide-scrollbar !overflow-auto flex flex-col fixed inset-x-0 bottom-0 z-10"
>
<AppSidenav />
<AppFooter />
</Pane>
</Splitpanes>
</div>
@@ -119,11 +118,22 @@ function updateThemes() {
const themeColor = useSetting("THEME_COLOR")
const bgColor = useSetting("BG_COLOR")
const fontSize = useSetting("FONT_SIZE")
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
const spacerClass = computed(() => {
if (fontSize.value === "small") return "spacer-small"
if (fontSize.value === "large") return "spacer-large"
return "spacer-medium"
if (fontSize.value === "small" && EXPAND_NAVIGATION.value)
return "spacer-small"
if (fontSize.value === "medium" && EXPAND_NAVIGATION.value)
return "spacer-medium"
if (fontSize.value === "large" && EXPAND_NAVIGATION.value)
return "spacer-large"
if (
(fontSize.value === "small" ||
fontSize.value === "medium" ||
fontSize.value === "large") &&
!EXPAND_NAVIGATION.value
)
return "spacer-expand"
})
// Initially apply
@@ -262,28 +272,36 @@ export default defineComponent({
<style scoped>
.spacer-small {
margin-bottom: 6.1rem;
margin-bottom: 4.2rem;
}
.spacer-medium {
margin-bottom: 6.9rem;
margin-bottom: 4.8rem;
}
.spacer-large {
margin-bottom: 7.8rem;
margin-bottom: 5.5rem;
}
.spacer-expand {
margin-bottom: 2.9rem;
}
@media screen and (min-width: 768px) {
.spacer-small {
margin-bottom: 0rem;
margin-bottom: 0;
}
.spacer-medium {
margin-bottom: 0rem;
margin-bottom: 0;
}
.spacer-large {
margin-bottom: 0rem;
margin-bottom: 0;
}
.spacer-expand {
margin-bottom: 0;
}
}
</style>

19
packages/hoppscotch-app/locales/en.json
View File

@@ -45,6 +45,7 @@
"contact_us": "Contact us",
"copy": "Copy",
"copy_user_id": "Copy User Auth Token",
"discord": "Discord",
"documentation": "Documentation",
"developer_option": "Developer options",
"developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
@@ -58,6 +59,7 @@
"keyboard_shortcuts": "Keyboard shortcuts",
"name": "Hoppscotch",
"new_version_found": "New version found. Refresh to update.",
"options": "Options",
"proxy_privacy_policy": "Proxy privacy policy",
"reload": "Reload",
"search": "Search",
@@ -65,6 +67,7 @@
"shortcuts": "Shortcuts",
"spotlight": "Spotlight",
"status": "Status",
"status_description": "Check the status of the website",
"terms_and_privacy": "Terms and privacy",
"twitter": "Twitter",
"type_a_command_search": "Type a command or search…",
@@ -238,7 +241,8 @@
"hide": {
"more": "Hide more",
"preview": "Hide Preview",
"sidebar": "Collapse sidebar"
"sidebar": "Collapse sidebar",
"collection": "Collapse Collection Panel"
},
"import": {
"collections": "Import collections",
@@ -264,7 +268,10 @@
"layout": {
"column": "Vertical layout",
"row": "Horizontal layout",
"zen_mode": "Zen mode"
"zen_mode": "Zen mode",
"collapse_sidebar": "Collapse or Expand the sidebar",
"collapse_collection": "Collapse or Expand Collections",
"name": "Layout"
},
"modal": {
"collections": "Collections",
@@ -342,6 +349,7 @@
"save_as": "Save as",
"saved": "Request saved",
"share": "Share",
"share_description": "Share Hoppscotch with your friends",
"title": "Request",
"type": "Request type",
"url": "URL",
@@ -388,6 +396,7 @@
"font_size_large": "Large",
"font_size_medium": "Medium",
"font_size_small": "Small",
"follow": "Follow Us",
"interceptor": "Interceptor",
"interceptor_description": "Middleware between application and APIs.",
"language": "Language",
@@ -466,7 +475,8 @@
"show": {
"code": "Show code",
"more": "Show more",
"sidebar": "Expand sidebar"
"sidebar": "Expand sidebar",
"collection": "Expand Collection Panel"
},
"socketio": {
"communication": "Communication",
@@ -514,7 +524,8 @@
"shortcuts": "Browse app faster",
"team": "Get in touch with the team",
"title": "Support",
"twitter": "Follow us on Twitter"
"twitter": "Follow us on Twitter",
"github": "Follow us on Github"
},
"tab": {
"authorization": "Authorization",