v6.4.5

GleapSDK · Dec 15, 2021 · e5cb55b · e5cb55b
1 parent bc77fd0
commit e5cb55b
Show file tree

Hide file tree

Showing 14 changed files with 152 additions and 61 deletions.
diff --git a/build/index.js b/build/index.js
diff --git a/build/index.min.css b/build/index.min.css
diff --git a/demo/bb.css b/demo/bb.css
@@ -264,6 +264,11 @@
   bottom: 20px;
 }
 
+.bb-feedback-button--classic-left .bb-feedback-dialog {
+  right: auto;
+  left: 16px;
+}
+
 .bb-feedback-form-description {
   font-size: 16px;
   line-height: 19px;

diff --git a/index.d.ts b/index.d.ts
@@ -1,39 +1,58 @@
 export namespace Gleap {
-    function initialize(sdkKey: string, gleapId?: string, gleapHash?: string): void;
-    function sendSilentBugReport(
+  function initialize(
+    sdkKey: string,
+    gleapId?: string,
+    gleapHash?: string
+  ): void;
+  function sendSilentBugReport(
     description: string,
     priority: "LOW" | "MEDIUM" | "HIGH"
-    ): void;
-    function setCustomerEmail(email: string): void;
-    function attachCustomData(customData: any): void;
-    function setCustomData(key: string, value: string): void;
-    function removeCustomData(key: string): void;
-    function clearCustomData(): void;
-    function setApiUrl(apiUrl: string): void;
-    function setWidgetUrl(widgetUrl: string): void;
-    function registerCustomAction(customAction: (action: { name: string }) => void): void;
-    function logEvent(name: string, data?: any): void;
-    function enableRageClickDetector(silent?: boolean): void;
-    function setLogoUrl(logoUrl: string): void;
-    function setButtonLogoUrl(buttonLogoUrl: string): void;
-    function setCustomTranslation(customTranslation: any): void;
-    function enableCrashDetector(enabled: boolean, silent?: boolean): void;
-    function setAppBuildNumber(buildNumber: string): void;
-    function setAppVersionCode(versionCode: string): void;
-    function setColors(primaryColor: string, headerColor: string, buttonColor: string): void;
-    function disableConsoleLogOverwrite(): void;
-    function enableNetworkLogger(): void;
-    function enableShortcuts(enabled: boolean): void;
-    function enableReplays(enabled: boolean): void;
-    function setLanguage(language: string): void;
-    function clearIdentity(): void;
-    function identify(userId: string, customerData: {
-        name?: string;
-        email?: string;
-    }): void;
-    function open(): void;
-    function hide(): void;
-    function startFeedbackFlow(feedbackFlow: string): void;
-    function on(event: string, callback: (data?: any) => void): void;
+  ): void;
+  function setCustomerEmail(email: string): void;
+  function attachCustomData(customData: any): void;
+  function setCustomData(key: string, value: string): void;
+  function removeCustomData(key: string): void;
+  function clearCustomData(): void;
+  function setApiUrl(apiUrl: string): void;
+  function setWidgetUrl(widgetUrl: string): void;
+  function registerCustomAction(
+    customAction: (action: { name: string }) => void
+  ): void;
+  function logEvent(name: string, data?: any): void;
+  function enableRageClickDetector(silent?: boolean): void;
+  function setLogoUrl(logoUrl: string): void;
+  function setButtonLogoUrl(buttonLogoUrl: string): void;
+  function setCustomTranslation(customTranslation: any): void;
+  function enableCrashDetector(enabled: boolean, silent?: boolean): void;
+  function setAppBuildNumber(buildNumber: string): void;
+  function setAppVersionCode(versionCode: string): void;
+  function setColors(
+    primaryColor: string,
+    headerColor: string,
+    buttonColor: string
+  ): void;
+  function setStyles(styles: {
+    primaryColor: string;
+    headerColor: string;
+    buttonColor: string;
+    cornerRadius: string;
+  }): void;
+  function disableConsoleLogOverwrite(): void;
+  function enableNetworkLogger(): void;
+  function enableShortcuts(enabled: boolean): void;
+  function enableReplays(enabled: boolean): void;
+  function setLanguage(language: string): void;
+  function clearIdentity(): void;
+  function identify(
+    userId: string,
+    customerData: {
+      name?: string;
+      email?: string;
+    }
+  ): void;
+  function open(): void;
+  function hide(): void;
+  function startFeedbackFlow(feedbackFlow: string): void;
+  function on(event: string, callback: (data?: any) => void): void;
 }
-export default Gleap;
+export default Gleap;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "6.4.4",
+  "version": "6.4.5",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

diff --git a/published/6.4.5/appwidget.min.css b/published/6.4.5/appwidget.min.css
diff --git a/published/6.4.5/index.js b/published/6.4.5/index.js
diff --git a/published/6.4.5/index.min.css b/published/6.4.5/index.min.css
diff --git a/published/latest/index.js b/published/latest/index.js
diff --git a/published/latest/index.min.css b/published/latest/index.min.css
diff --git a/src/AutoConfig.js b/src/AutoConfig.js
@@ -28,11 +28,12 @@ export default class AutoConfig {
               }
 
               if (flowConfig.color) {
-                Gleap.setColors(
-                  flowConfig.color,
-                  flowConfig.headerColor,
-                  flowConfig.buttonColor
-                );
+                Gleap.setStyles({
+                  primaryColor: flowConfig.color,
+                  headerColor: flowConfig.headerColor,
+                  buttonColor: flowConfig.buttonColor,
+                  borderRadius: flowConfig.borderRadius,
+                });
               }
 
               if (flowConfig.hideBranding) {

diff --git a/src/Gleap.js b/src/Gleap.js
@@ -4,7 +4,7 @@ import {
   createFeedbackTypeDialog,
   createWidgetDialog,
   loadIcon,
-  injectColorCSS,
+  injectStyledCSS,
   setLoadingIndicatorProgress,
   toggleLoading,
   validatePoweredBy,
@@ -611,27 +611,40 @@ class Gleap {
 
   /**
    * Sets a custom color scheme.
-   * @param {string} color
+   * @param {string} primaryColor
    */
   static setColors(primaryColor, headerColor, buttonColor) {
-    this.getInstance().mainColor = primaryColor;
+    this.setStyles({
+      headerColor,
+      primaryColor,
+      buttonColor,
+    });
+  }
 
-    if (!headerColor) {
-      headerColor = primaryColor;
-    }
-    if (!buttonColor) {
-      buttonColor = primaryColor;
-    }
+  /**
+   * Sets a custom color scheme.
+   * @param {any} styles
+   */
+  static setStyles(styles) {
+    this.getInstance().mainColor = styles.primaryColor;
+
+    var headerColor = styles.headerColor
+      ? styles.headerColor
+      : styles.primaryColor;
+    var buttonColor = styles.buttonColor
+      ? styles.buttonColor
+      : styles.primaryColor;
+    var borderRadius = styles.borderRadius ? styles.borderRadius : 20;
 
     if (
       document.readyState === "complete" ||
       document.readyState === "loaded" ||
       document.readyState === "interactive"
     ) {
-      injectColorCSS(primaryColor, headerColor, buttonColor);
+      injectStyledCSS(styles.primaryColor, headerColor, buttonColor, borderRadius);
     } else {
       document.addEventListener("DOMContentLoaded", function (event) {
-        injectColorCSS(primaryColor, headerColor, buttonColor);
+        injectStyledCSS(styles.primaryColor, headerColor, buttonColor, borderRadius);
       });
     }
   }

diff --git a/src/UI.js b/src/UI.js
@@ -9,13 +9,51 @@ const calculateContrast = (hex) => {
   return yiq >= 165 ? "black" : "white";
 };
 
-export const injectColorCSS = (primaryColor, headerColor, buttonColor) => {
+export const injectStyledCSS = (
+  primaryColor,
+  headerColor,
+  buttonColor,
+  borderRadius
+) => {
   const contrastColor = calculateContrast(primaryColor);
   const contrastHeaderColor = calculateContrast(headerColor);
   const contrastButtonColor = calculateContrast(buttonColor);
+
+  var borderRadius = parseInt(borderRadius, 10);
+  if (borderRadius === NaN || borderRadius === undefined) {
+    borderRadius = 20;
+  }
+
+  const containerBorderRadius = Math.round(borderRadius * 0.6);
+  const buttonBorderRadius = Math.round(borderRadius * 1.05);
+  const formItemBorderRadius = Math.round(borderRadius * 0.4);
+  const formItemSmallBorderRadius = Math.round(borderRadius * 0.25);
+
   const colorStyleSheet = `
+    .bb-feedback-onetofive-button {
+      border-radius: ${formItemSmallBorderRadius}px;
+    }
+    .bb-feedback-button-classic {
+      border-top-left-radius: ${formItemBorderRadius}px;
+      border-top-right-radius: ${formItemBorderRadius}px;
+    }
+    .bb-feedback-inputgroup textarea,
+    .bb-feedback-inputgroup > input,
+    .bb-feedback-inputgroup input {
+      border-radius: ${formItemBorderRadius}px;
+    }
+    .bb-feedback-dialog-header-back:hover {
+      border-radius: ${containerBorderRadius}px;
+    }
+    .bb-feedback-type {
+      border-radius: ${containerBorderRadius}px;
+    }
+    .bb-feedback-dialog {
+      border-radius: ${borderRadius}px;
+    }
     .bb-screenshot-editor-drag-info {
       color: ${contrastColor};
+      border-radius: ${buttonBorderRadius}px;
     }
     .bb-logo-arrowdown {
       fill: ${contrastButtonColor};
@@ -74,6 +112,8 @@ export const injectColorCSS = (primaryColor, headerColor, buttonColor) => {
     }
     .bb-feedback-dialog-header {
       background-color: ${headerColor};
+      border-top-left-radius: ${borderRadius}px;
+      border-top-right-radius: ${borderRadius}px;
     }
     .bb-form-progress-inner {
       background-color: ${headerColor}66;
@@ -90,6 +130,7 @@ export const injectColorCSS = (primaryColor, headerColor, buttonColor) => {
     .bb-feedback-send-button {
       color: ${contrastColor};
       background-color: ${primaryColor};
+      border-radius: ${buttonBorderRadius}px;
     }
     .bb-screenshot-editor-drag-info {
       background-color: ${primaryColor};
@@ -235,6 +276,10 @@ export const createWidgetDialog = function (
     elem.classList.add("bb-feedback-button--classic");
   }
 
+  if (buttonType === Gleap.FEEDBACK_BUTTON_CLASSIC_LEFT) {
+    elem.classList.add("bb-feedback-button--classic-left");
+  }
+
   const closeButton = document.querySelector(
     ".bb-feedback-dialog-header-close"
   );

diff --git a/src/css/index.css b/src/css/index.css
@@ -59,15 +59,15 @@
   justify-content: center;
   background-color: #fff;
   border-radius: 8px;
-  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 0px 14px 0px rgb(0 0 0 / 15%);
   position: relative;
   z-index: 99;
 }
 
 .bb-feedback-button-text:before {
   content: "";
   position: absolute;
-  box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.04);
+  box-shadow: rgb(0 0 0 / 4%) 6px 6px 5px;
   transform: rotate(315deg);
   bottom: 16px;
   right: -4px;
@@ -264,6 +264,11 @@
   bottom: 20px;
 }
 
+.bb-feedback-button--classic-left .bb-feedback-dialog {
+  right: auto;
+  left: 16px;
+}
+
 .bb-feedback-form-description {
   font-size: 16px;
   line-height: 19px;
@@ -1331,7 +1336,7 @@ textarea.bb-feedback-required {
   cursor: pointer;
   margin: 0px;
   padding: 25px 25px;
-  background-color: #fff;
+  background-color: rgb(255, 255, 255);
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   padding-top: 0px;
@@ -1377,7 +1382,7 @@ textarea.bb-feedback-required {
   font-family: "Inter", sans-serif;
   color: #da0e07;
   border: 1px solid #da0e07;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 4px 0 rgb(0 0 0 / 5%);
   display: none;
 }