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

feat: share and support modals

Browse Source
This commit is contained in:
liyasthomas
2021-08-28 20:48:13 +05:30
parent 405e6c1e4e
commit 7da427c669
7 changed files with 59 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/icons/logos/twitter.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="39.2" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 209"><path d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435c0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45" fill="#55acee"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 971 B

2
assets/icons/reddit.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><circle fill="#FF4500" cx="128" cy="128" r="128"></circle><path d="M213.15 129.22c0-10.376-8.391-18.617-18.617-18.617a18.74 18.74 0 0 0-12.97 5.189c-12.818-9.157-30.368-15.107-49.9-15.87l8.544-39.981l27.773 5.95c.307 7.02 6.104 12.667 13.278 12.667c7.324 0 13.275-5.95 13.275-13.278c0-7.324-5.95-13.275-13.275-13.275c-5.188 0-9.768 3.052-11.904 7.478l-30.976-6.562c-.916-.154-1.832 0-2.443.458c-.763.458-1.22 1.22-1.371 2.136l-9.464 44.558c-19.837.612-37.692 6.562-50.662 15.872a18.74 18.74 0 0 0-12.971-5.188c-10.377 0-18.617 8.391-18.617 18.617c0 7.629 4.577 14.037 10.988 16.939a33.598 33.598 0 0 0-.458 5.646c0 28.686 33.42 52.036 74.621 52.036c41.202 0 74.622-23.196 74.622-52.036a35.29 35.29 0 0 0-.458-5.646c6.408-2.902 10.985-9.464 10.985-17.093zM85.272 142.495c0-7.324 5.95-13.275 13.278-13.275c7.324 0 13.275 5.95 13.275 13.275s-5.95 13.278-13.275 13.278c-7.327.15-13.278-5.953-13.278-13.278zm74.317 35.251c-9.156 9.157-26.553 9.768-31.588 9.768c-5.188 0-22.584-.765-31.59-9.768c-1.371-1.373-1.371-3.51 0-4.883c1.374-1.371 3.51-1.371 4.884 0c5.8 5.8 18.008 7.782 26.706 7.782c8.699 0 21.058-1.983 26.704-7.782c1.374-1.371 3.51-1.371 4.884 0c1.22 1.373 1.22 3.51 0 4.883zm-2.443-21.822c-7.325 0-13.275-5.95-13.275-13.275s5.95-13.275 13.275-13.275c7.327 0 13.277 5.95 13.277 13.275c0 7.17-5.95 13.275-13.277 13.275z" fill="#FFF"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--tabler" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g class="icon-tabler" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8c2.648 0 5.028.826 6.675 2.14a2.5 2.5 0 0 1 2.326 4.36c0 3.59-4.03 6.5-9 6.5c-4.875 0-8.845-2.8-9-6.294l-1-.206a2.5 2.5 0 0 1 2.326-4.36C5.973 8.827 8.353 8 11.001 8z"></path><path d="M12 8l1-5l6 1"></path><circle cx="19" cy="4" r="1"></circle><circle cx="9" cy="13" r=".5" fill="currentColor"></circle><circle cx="15" cy="13" r=".5" fill="currentColor"></circle><path d="M10 17c.667.333 1.333.5 2 .5s1.333-.167 2-.5"></path></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 794 B

19
components/app/Footer.vue
View File

@@ -33,7 +33,7 @@
>
<template #trigger>
<ButtonSecondary
svg="life-buoy"
svg="help-circle"
class="!rounded-none"
:label="$t('app.help')"
/>
@@ -73,10 +73,18 @@
<SmartItem
svg="twitter"
:label="$t('app.twitter')"
to="https://twitter.com/hoppscotch_io"
to="https://hoppscotch.io/twitter"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
svg="user-plus"
:label="$t('app.invite')"
@click.native="
showShare = true
$refs.options.tippy().hide()
"
/>
<SmartItem
svg="lock"
:label="$t('app.terms_and_privacy')"
@@ -115,6 +123,7 @@
</div>
</div>
<AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
<AppShare :show="showShare" @hide-modal="showShare = false" />
</div>
</template>
@@ -127,11 +136,16 @@ import { useSetting } from "~/newstore/settings"
export default defineComponent({
setup() {
const showShortcuts = ref(false)
const showShare = ref(false)
defineActionHandler("flyouts.keybinds.toggle", () => {
showShortcuts.value = !showShortcuts.value
})
defineActionHandler("modals.share.toggle", () => {
showShare.value = !showShare.value
})
return {
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
@@ -140,6 +154,7 @@ export default defineComponent({
navigatorShare: !!navigator.share,
showShortcuts,
showShare,
}
},
watch: {

33
components/app/Header.vue
View File

@@ -20,6 +20,20 @@
class="rounded"
@click.native="showInstallPrompt()"
/>
<!-- <ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('app.search')} <kbd>/</kbd>`"
svg="search"
class="rounded"
@click.native="showSearch = true"
/> -->
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('support.title')} <kbd>?</kbd>`"
svg="life-buoy"
class="rounded"
@click.native="showSupport = true"
/>
<ButtonSecondary
v-if="currentUser === null"
svg="upload-cloud"
@@ -33,7 +47,7 @@
:label="$t('header.login')"
@click.native="showLogin = true"
/>
<span v-else class="pr-2">
<span v-else class="px-2">
<tippy ref="user" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<ProfilePicture
@@ -68,20 +82,35 @@
</header>
<AppAnnouncement v-if="!isOnLine" />
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
<AppSupport :show="showSupport" @hide-modal="showSupport = false" />
<!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" /> -->
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
import { defineComponent, ref } from "@nuxtjs/composition-api"
import intializePwa from "~/helpers/pwa"
import { currentUser$ } from "~/helpers/fb/auth"
import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
import { useReadonlyStream } from "~/helpers/utils/composables"
import { defineActionHandler } from "~/helpers/actions"
export default defineComponent({
setup() {
const showSupport = ref(false)
// const showSearch = ref(false)
defineActionHandler("modals.support.toggle", () => {
showSupport.value = !showSupport.value
})
// defineActionHandler("modals.search.toggle", () => {
// showSearch.value = !showSearch.value
// })
return {
currentUser: useReadonlyStream(currentUser$, null),
showSupport,
// showSearch,
}
},
data() {

57
components/app/Sidenav.vue
View File

@@ -17,71 +17,16 @@
<span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
</NuxtLink>
</nav>
<!-- <nav
class="
flex flex-nowrap
p-2
items-center
justify-center
md:(flex-col
space-x-0 space-y-2)
"
>
<ButtonSecondary
v-tippy="{ theme: 'tooltip', placement: 'top' }"
:title="`${$t('app.search')} <kbd>/</kbd>`"
svg="search"
class="rounded"
@click.native="showSearch = true"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip', placement: 'top' }"
:title="$t('app.invite')"
svg="user-plus"
class="rounded"
@click.native="showShare = true"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip', placement: 'top' }"
:title="`${$t('support.title')} <kbd>?</kbd>`"
svg="life-buoy"
class="rounded"
@click.native="showSupport = true"
/>
</nav> -->
<!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
<AppSupport :show="showSupport" @hide-modal="showSupport = false" />
<AppShare :show="showShare" @hide-modal="showShare = false" /> -->
</aside>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
import { useSetting } from "~/newstore/settings"
// import { defineActionHandler } from "~/helpers/actions"
export default defineComponent({
setup() {
// const showSearch = ref(false)
// const showSupport = ref(false)
// const showShare = ref(false)
// defineActionHandler("modals.search.toggle", () => {
// showSearch.value = !showSearch.value
// })
// defineActionHandler("modals.support.toggle", () => {
// showSupport.value = !showSupport.value
// })
// defineActionHandler("modals.share.toggle", () => {
// showShare.value = !showShare.value
// })
return {
// showSearch,
// showSupport,
// showShare,
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
}
},
@@ -159,7 +104,7 @@ export default defineComponent({
@apply mt-2;
@apply font-font-medium;
font-size: 90%;
font-size: calc(var(--body-font-size) - 0.062rem);
}
&.exact-active-link {

4
components/app/Support.vue
View File

@@ -59,9 +59,9 @@
@click.native="hideModal()"
/>
<SmartItem
svg="twitter"
svg="logos/twitter"
:label="$t('app.twitter')"
to="https://twitter.com/hoppscotch_io"
to="https://hoppscotch.io/twitter"
blank
:description="$t('support.twitter')"
info-icon="chevron_right"

6
netlify.toml
View File

@@ -31,3 +31,9 @@
to = "http://eepurl.com/hy0eWH"
status = 301
force = true
[[redirects]]
from = "/twitter"
to = "https://twitter.com/hoppscotch_io"
status = 301
force = true