tsai
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Feedback - added Modal after deploy

pull/4023/head
Michael Shanks 6 years ago
parent
0b2872a1b6
commit
cecf00a09e
5 changed files with 101 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      packages/builder/src/components/userInterface/Feedback.svelte
  2. 57
      packages/builder/src/components/userInterface/Feedback/FeedbackIframe.svelte
  3. 35
      packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
  4. 4
      packages/builder/src/pages/[application]/_reset.svelte
  5. 8
      packages/builder/src/pages/[application]/deploy/index.svelte

82
packages/builder/src/components/userInterface/Feedback.svelte
View File

@ -1,82 +0,0 @@
<script>
import { FeedbackIcon } from "components/common/Icons/"
import { Popover } from "@budibase/bbui"
import analytics from "analytics"
const feedbackUrl = "https://feedback.budibase.com"
let iconContainer
let popover
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.captureEvent("Feedback Submitted", ev.data.data)
popover.hide()
}
},
false
)
</script>
<span class="container" bind:this={iconContainer} on:click={popover.show}>
<FeedbackIcon />
</span>
<Popover bind:this={popover} anchor={iconContainer} align="right">
<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>
</Popover>
<style>
.container {
cursor: pointer;
color: var(--grey-7);
margin: 0 20px 0 0;
font-weight: 500;
font-size: 1rem;
height: 100%;
display: flex;
flex: 1;
align-items: center;
box-sizing: border-box;
}
.container:hover {
color: var(--ink);
font-weight: 500;
}
iframe {
border-style: none;
height: auto;
overflow-y: hidden;
overflow-x: hidden;
min-width: 500px;
}
</style>

57
packages/builder/src/components/userInterface/Feedback/FeedbackIframe.svelte
View File

@ -0,0 +1,57 @@
<script>
import analytics from "analytics"
import { createEventDispatcher } from "svelte"
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.captureEvent("Feedback Submitted", ev.data.data)
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>

35
packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
View File

@ -0,0 +1,35 @@
<script>
import { FeedbackIcon } from "components/common/Icons/"
import { Popover } from "@budibase/bbui"
import FeedbackIframe from "./FeedbackIframe.svelte"
let iconContainer
let popover
</script>
<span class="container" bind:this={iconContainer} on:click={popover.show}>
<FeedbackIcon />
</span>
<Popover bind:this={popover} anchor={iconContainer} align="right">
<FeedbackIframe on:finished={popover.hide} />
</Popover>
<style>
.container {
cursor: pointer;
color: var(--grey-7);
margin: 0 20px 0 0;
font-weight: 500;
font-size: 1rem;
height: 100%;
display: flex;
flex: 1;
align-items: center;
box-sizing: border-box;
}
.container:hover {
color: var(--ink);
font-weight: 500;
}
</style>

4
packages/builder/src/pages/[application]/_reset.svelte
View File

@ -2,7 +2,7 @@
import { store, automationStore, backendUiStore } from "builderStore" import { store, automationStore, backendUiStore } from "builderStore"
import { Button } from "@budibase/bbui" import { Button } from "@budibase/bbui"
import SettingsLink from "components/settings/Link.svelte" import SettingsLink from "components/settings/Link.svelte"
import Feedback from "components/userInterface/Feedback.svelte" import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte"
import { get } from "builderStore/api" import { get } from "builderStore/api"
import { isActive, goto, layout } from "@sveltech/routify" import { isActive, goto, layout } from "@sveltech/routify"
import { PreviewIcon } from "components/common/Icons/" import { PreviewIcon } from "components/common/Icons/"
@ -66,7 +66,7 @@
{/each} {/each}
</div> </div>
<div class="toprightnav"> <div class="toprightnav">
<Feedback /> <FeedbackNavLink />
<SettingsLink /> <SettingsLink />
<span <span
class:active={false} class:active={false}

8
packages/builder/src/pages/[application]/deploy/index.svelte
View File

@ -1,16 +1,18 @@
<script> <script>
import { onMount } from "svelte" import { onMount } from "svelte"
import { Button, Spacer } from "@budibase/bbui" import { Button, Spacer, Modal } from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import api from "builderStore/api" import api from "builderStore/api"
import Spinner from "components/common/Spinner.svelte" import Spinner from "components/common/Spinner.svelte"
import DeploymentHistory from "components/deploy/DeploymentHistory.svelte" import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
import analytics from "analytics" import analytics from "analytics"
import FeedbackIframe from "components/userInterface/Feedback/FeedbackIframe.svelte"
let loading = false let loading = false
let deployments = [] let deployments = []
let poll let poll
let feedbackModal
$: appId = $store.appId $: appId = $store.appId
@ -31,6 +33,7 @@
analytics.captureEvent("Deployed App", { analytics.captureEvent("Deployed App", {
appId, appId,
}) })
feedbackModal.show()
} catch (err) { } catch (err) {
analytics.captureEvent("Deploy App Failed", { analytics.captureEvent("Deploy App Failed", {
appId, appId,
@ -57,6 +60,9 @@
src="/_builder/assets/deploy-rocket.jpg" src="/_builder/assets/deploy-rocket.jpg"
alt="Rocket flying through sky" /> alt="Rocket flying through sky" />
</section> </section>
<Modal bind:this={feedbackModal}>
<FeedbackIframe on:finished={feedbackModal.hide} />
</Modal>
<DeploymentHistory {appId} /> <DeploymentHistory {appId} />
<style> <style>

Write Preview
Loading…
Cancel
Save