forked from tsai/budibase
Keviin Åberg Kultalahti
5 years ago
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