mirror of https://github.com/Budibase/budibase.git
mike12345567
5 years ago
9 changed files with 189 additions and 279 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> |
|
||||
@ -0,0 +1,168 @@ |
|||||
|
<script> |
||||
|
import analytics from "analytics" |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
import { fade, fly } from "svelte/transition" |
||||
|
import { |
||||
|
ActionButton, |
||||
|
ClearButton, |
||||
|
RadioGroup, |
||||
|
TextArea, |
||||
|
ButtonGroup, |
||||
|
Button, |
||||
|
Heading, |
||||
|
Detail, |
||||
|
Divider, |
||||
|
Layout, |
||||
|
} from "@budibase/bbui" |
||||
|
import { auth } from "stores/portal" |
||||
|
|
||||
|
let step = 0 |
||||
|
let ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
||||
|
let options = [ |
||||
|
"Importing / managing data", |
||||
|
"Designing", |
||||
|
"Automations", |
||||
|
"Managing users / groups", |
||||
|
"Deployment / hosting", |
||||
|
"Documentation", |
||||
|
] |
||||
|
|
||||
|
const dispatch = createEventDispatcher() |
||||
|
|
||||
|
// Data to send off |
||||
|
let rating |
||||
|
let improvements |
||||
|
let comment |
||||
|
|
||||
|
function selectNumber(n) { |
||||
|
rating = n |
||||
|
step = 1 |
||||
|
} |
||||
|
|
||||
|
function submitFeedback() { |
||||
|
analytics.submitFeedback({ |
||||
|
rating, |
||||
|
improvements, |
||||
|
comment, |
||||
|
}) |
||||
|
auth.updateSelf({ |
||||
|
flags: { |
||||
|
feedbackSubmitted: true, |
||||
|
}, |
||||
|
}) |
||||
|
dispatch("complete") |
||||
|
} |
||||
|
|
||||
|
function cancelFeedback() { |
||||
|
auth.updateSelf({ |
||||
|
flags: { |
||||
|
feedbackSubmitted: true, |
||||
|
}, |
||||
|
}) |
||||
|
dispatch("complete") |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div |
||||
|
class="position" |
||||
|
in:fade={{ duration: 200 }} |
||||
|
out:fade|local={{ duration: 200 }} |
||||
|
> |
||||
|
<div |
||||
|
class="feedback-frame" |
||||
|
in:fly={{ y: 30, duration: 200 }} |
||||
|
out:fly|local={{ y: 30, duration: 200 }} |
||||
|
> |
||||
|
<div class="close"> |
||||
|
<ClearButton on:click={cancelFeedback} /> |
||||
|
</div> |
||||
|
<Layout gap="XS"> |
||||
|
{#if step === 0} |
||||
|
<Heading size="XS" |
||||
|
>How likely are you to recommend Budibase to a colleague?</Heading |
||||
|
> |
||||
|
<Divider /> |
||||
|
<div class="ratings"> |
||||
|
{#each ratings as number} |
||||
|
<ActionButton |
||||
|
size="L" |
||||
|
emphasized |
||||
|
selected={number === rating} |
||||
|
on:click={() => selectNumber(number)} |
||||
|
> |
||||
|
{number} |
||||
|
</ActionButton> |
||||
|
{/each} |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<Detail size="S">NOT LIKELY</Detail> |
||||
|
<Detail size="S">EXTREMELY LIKELY</Detail> |
||||
|
</div> |
||||
|
{:else if step === 1} |
||||
|
<Heading size="XS">What could be improved most in Budibase?</Heading> |
||||
|
<Divider /> |
||||
|
<RadioGroup bind:value={improvements} {options} /> |
||||
|
<div class="footer"> |
||||
|
<Detail size="S">STEP 2 OF 3</Detail> |
||||
|
<ButtonGroup> |
||||
|
<Button secondary on:click={() => (step -= 1)}>Previous</Button> |
||||
|
<Button |
||||
|
disabled={!improvements} |
||||
|
primary |
||||
|
on:click={() => (step += 1)}>Next</Button |
||||
|
> |
||||
|
</ButtonGroup> |
||||
|
</div> |
||||
|
{:else} |
||||
|
<Heading size="XS">How can we improve your experience?</Heading> |
||||
|
<Divider /> |
||||
|
<TextArea bind:value={comment} placeholder="Add comments" /> |
||||
|
<div class="footer"> |
||||
|
<Detail size="S">STEP 3 OF 3</Detail> |
||||
|
<ButtonGroup> |
||||
|
<Button secondary on:click={() => (step -= 1)}>Previous</Button> |
||||
|
<Button disabled={!comment} cta on:click={submitFeedback} |
||||
|
>Complete</Button |
||||
|
> |
||||
|
</ButtonGroup> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</Layout> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.feedback-frame :global(textarea) { |
||||
|
min-height: 180px !important; |
||||
|
} |
||||
|
|
||||
|
.position { |
||||
|
position: absolute; |
||||
|
right: var(--spacing-l); |
||||
|
bottom: calc(5 * var(--spacing-xl)); |
||||
|
} |
||||
|
.feedback-frame { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
min-width: 510px; |
||||
|
background: var(--background); |
||||
|
border-radius: var(--spectrum-global-dimension-size-50); |
||||
|
border: 2px solid var(--spectrum-global-color-blue-400); |
||||
|
padding: var(--spacing-xl); |
||||
|
} |
||||
|
.ratings { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.close { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
.footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue