forked from tsai/budibase
2 changed files with 0 additions and 111 deletions
@ -1,59 +0,0 @@ |
|||
<script> |
|||
import analytics from "analytics" |
|||
import { createEventDispatcher } from "svelte" |
|||
import { store } from "builderStore" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
const feedbackUrl = "https://feedback.budibase.com" |
|||
|
|||
let iframe |
|||
|
|||
// the app @ feedback.budibase.com expects to be loaded |
|||
// in an iframe, and posts messages back. |
|||
// this means that we can submit using the Builder's posthog setup |
|||
window.addEventListener( |
|||
"message", |
|||
function (ev) { |
|||
if (ev.origin !== feedbackUrl) return |
|||
|
|||
if (ev.data.type === "loaded") { |
|||
iframe.setAttribute( |
|||
"style", |
|||
`height:${ev.data.height}px; width:${ev.data.width}px` |
|||
) |
|||
} else if (ev.data.type === "submitted") { |
|||
analytics.submitFeedback(ev.data.data) |
|||
$store.highlightFeedbackIcon = false |
|||
dispatch("finished") |
|||
} |
|||
}, |
|||
false |
|||
) |
|||
</script> |
|||
|
|||
<iframe src={feedbackUrl} title="feedback" bind:this={iframe}> |
|||
<html lang="html"> |
|||
<style> |
|||
body { |
|||
display: flex; |
|||
height: 100%; |
|||
width: 100%; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
<body> |
|||
<div>Loading...</div> |
|||
</body> |
|||
</html> |
|||
</iframe> |
|||
|
|||
<style> |
|||
iframe { |
|||
border-style: none; |
|||
height: auto; |
|||
overflow-y: hidden; |
|||
overflow-x: hidden; |
|||
min-width: 500px; |
|||
} |
|||
</style> |
|||
@ -1,52 +0,0 @@ |
|||
<script> |
|||
import { Icon, Popover } from "@budibase/bbui" |
|||
import { store } from "builderStore" |
|||
import { onMount } from "svelte" |
|||
|
|||
import FeedbackIframe from "./FeedbackIframe.svelte" |
|||
import analytics from "analytics" |
|||
|
|||
const FIVE_MINUTES = 300000 |
|||
|
|||
let iconContainer |
|||
let popover |
|||
|
|||
onMount(() => { |
|||
const interval = setInterval(() => { |
|||
store.update(state => { |
|||
state.highlightFeedbackIcon = analytics.highlightFeedbackIcon() |
|||
return state |
|||
}) |
|||
}, FIVE_MINUTES) |
|||
return () => clearInterval(interval) |
|||
}) |
|||
</script> |
|||
|
|||
<div class="container" bind:this={iconContainer} on:click={popover.show}> |
|||
<Icon hoverable name="Feedback" /> |
|||
</div> |
|||
<div class="iframe"> |
|||
<Popover bind:this={popover} anchor={iconContainer} align="right"> |
|||
<FeedbackIframe on:finished={popover.hide} /> |
|||
</Popover> |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
cursor: pointer; |
|||
color: var(--grey-7); |
|||
margin: 0 12px 0 0; |
|||
font-weight: 600; |
|||
font-size: 1rem; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 24px; |
|||
width: 24px; |
|||
} |
|||
|
|||
.iframe :global(.menu-container) { |
|||
background-color: white; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue