feedback nav icon loads iframe to public page

6 years ago · f540f17861
4 changed files with 90 additions and 0 deletions
--- a/packages/builder/src/components/common/Icons/Feedback.svelte
+++ b/packages/builder/src/components/common/Icons/Feedback.svelte
@ -0,0 +1,11 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24">
  <path fill="none" d="M0 0h24v24H0z" />
  <path
    fill="currentColor"
    d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1
    1H6.455zM11 13v2h2v-2h-2zm0-6v5h2V7h-2z" />
 </svg>
--- a/packages/builder/src/components/common/Icons/index.js
+++ b/packages/builder/src/components/common/Icons/index.js
@ -33,3 +33,4 @@ export { default as InfoIcon } from "./Info.svelte"
 export { default as CloseIcon } from "./Close.svelte"
 export { default as MoreIcon } from "./More.svelte"
 export { default as CloseCircleIcon } from "./CloseCircle.svelte"
 export { default as FeedbackIcon } from "./Feedback.svelte"
--- a/packages/builder/src/components/userInterface/Feedback.svelte
+++ b/packages/builder/src/components/userInterface/Feedback.svelte
@ -0,0 +1,76 @@
 <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)
      }
    },
    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;
  }
  iframe {
    border-style: none;
    height: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    min-width: 500px;
  }
 </style>
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@ -2,6 +2,7 @@
  import { store, automationStore, backendUiStore } from "builderStore"
  import { Button } from "@budibase/bbui"
  import SettingsLink from "components/settings/Link.svelte"
  import Feedback from "components/userInterface/Feedback.svelte"
  import { get } from "builderStore/api"
  import { isActive, goto, layout } from "@sveltech/routify"
  import { PreviewIcon } from "components/common/Icons/"
@ -65,6 +66,7 @@
      {/each}
    </div>
    <div class="toprightnav">
      <Feedback />
      <SettingsLink />
      <span
        class:active={false}