Merge branch 'master' of https://github.com/surveyjs/survey-library

surveyjs · Apr 20, 2021 · eebd0c7 · eebd0c7
2 parents 19587ca + 3ce682e
commit eebd0c7
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 69 deletions.
diff --git a/src/knockout/components/popup/popup.html b/src/knockout/components/popup/popup.html
@@ -12,29 +12,29 @@
       class="sv-popup__pointer"
     ></span>
     <!-- /ko -->
+    <div class="sv-popup__scrolling-content ">
+      <div class="sv-popup__header"></div>
+      <div
+        class="sv-popup__content"
+        data-bind="component: { name: contentComponentName, params: contentComponentData }"
+      ></div>
 
-    <div class="sv-popup__header"></div>
-
-    <div
-      class="sv-popup__content"
-      data-bind="component: { name: contentComponentName, params: contentComponentData }"
-    ></div>
-
-    <!-- ko if: isModal  -->
-    <div class="sv-popup__footer">
-      <button
-        class="sv-popup__footer-item sv-popup__button sv-popup__button--cancel"
-        data-bind="click: cancel, text: cancelButtonText"
-      >
-        Cancel
-      </button>
-      <button
-        class="sv-popup__footer-item sv-popup__button sv-popup__button--apply"
-        data-bind="click: apply, text: applyButtonText"
-      >
-        Apply
-      </button>
+      <!-- ko if: isModal  -->
+      <div class="sv-popup__footer">
+        <button
+          class="sv-popup__footer-item sv-popup__button sv-popup__button--cancel"
+          data-bind="click: cancel, text: cancelButtonText"
+        >
+          Cancel
+        </button>
+        <button
+          class="sv-popup__footer-item sv-popup__button sv-popup__button--apply"
+          data-bind="click: apply, text: applyButtonText"
+        >
+          Apply
+        </button>
+      </div>
+      <!-- /ko -->
     </div>
-    <!-- /ko -->
   </div>
 </div>
diff --git a/src/modern/blocks/sv-popup.scss b/src/modern/blocks/sv-popup.scss
@@ -1,5 +1,6 @@
 $primary: var(--primary, #19b394);
 $primary-foreground: var(--primary-foreground, #fff);
+$primary-light: var(--primary-light, rgba(25, 179, 148, 0.1));
 
 $background: var(--background, #fff);
 $background-dim: var(--background-dim, #f3f3f3);
@@ -30,13 +31,25 @@ sv-popup {
   position: absolute;
   z-index: 1000;
   filter: drop-shadow(0px calcSize(1) calcSize(2) rgba(0, 0, 0, 0.1));
-  max-width: 100%;
-  max-height: 100%;
   padding: calcSize(1) 0;
   background: $body-background-color;
   border-radius: 4px;
 }
 
+.sv-popup__scrolling-content {
+  max-width: 90vh;
+  max-height: 90vh;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+    background-color: $background-dim;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: $primary-light;
+  }
+}
+
 .sv-popup__content {
   min-width: 100%;
 }

diff --git a/src/popup.ts b/src/popup.ts
@@ -1,19 +1,18 @@
 import { Base } from "./base";
 import { property } from "./jsonobject";
 import { surveyLocalization } from "./surveyStrings";
-import { PopupUtils } from "./utils/popup";
+import {
+  PopupUtils,
+  VerticalPosition,
+  HorizontalPosition,
+  IPosition,
+} from "./utils/popup";
 
 export class PopupModel extends Base {
   @property() contentComponentName: string;
   @property() contentComponentData: any;
-  @property({ defaultValue: "bottom" }) verticalPosition:
-    | "top"
-    | "bottom"
-    | "middle";
-  @property({ defaultValue: "left" }) horizontalPosition:
-    | "left"
-    | "right"
-    | "center";
+  @property({ defaultValue: "bottom" }) verticalPosition: VerticalPosition;
+  @property({ defaultValue: "left" }) horizontalPosition: HorizontalPosition;
   @property({ defaultValue: false }) showPointer: boolean;
   @property({ defaultValue: false }) isModal: boolean;
   @property({ defaultValue: () => {} }) onCancel: () => void;
@@ -25,8 +24,8 @@ export class PopupModel extends Base {
   constructor(
     contentComponentName: string,
     contentComponentData: any,
-    verticalPosition: "top" | "bottom" | "middle" = "bottom",
-    horizontalPosition: "left" | "right" | "center" = "left",
+    verticalPosition: VerticalPosition = "bottom",
+    horizontalPosition: HorizontalPosition = "left",
     showPointer: boolean = true,
     isModal: boolean = false,
     onCancel = () => {},
@@ -81,10 +80,8 @@ export class PopupViewModel extends Base {
   @property({ defaultValue: 0 }) top: string | number;
   @property({ defaultValue: 0 }) left: string | number;
   @property({ defaultValue: "left" }) popupDirection: string;
-  @property({ defaultValue: { left: "0px", top: "0px" } }) pointerTarget: {
-    top: string | number;
-    left: string | number;
-  };
+  @property({ defaultValue: { left: "0px", top: "0px" } })
+  pointerTarget: IPosition;
   public container: HTMLElement;
 
   constructor(public model: PopupModel, public targetElement?: HTMLElement) {

diff --git a/src/react/components/popup/popup.tsx b/src/react/components/popup/popup.tsx
@@ -47,7 +47,7 @@ export class Popup extends SurveyElementBase<IPopupProps, any> {
   }
 }
 
-ReactElementFactory.Instance.registerElement("sv-popup", (props) => {
+ReactElementFactory.Instance.registerElement("sv-popup", props => {
   return React.createElement(Popup, (props as any) as IPopupProps);
 });
 
@@ -87,9 +87,11 @@ export class PopupContainer extends SurveyElementBase<any, any> {
         }}
       >
         {pointer}
-        {header}
-        {content}
-        {footer}
+        <div className="sv-popup__scrolling-content">
+          {header}
+          {content}
+          {footer}
+        </div>
       </div>
     );
   }

diff --git a/src/utils/popup.ts b/src/utils/popup.ts
@@ -1,12 +1,24 @@
+export type VerticalPosition = "top" | "bottom" | "middle";
+export type HorizontalPosition = "left" | "right" | "center";
+export interface IPosition {
+  left?: number | string;
+  top?: number | string;
+}
+
+export interface INumberPosition extends IPosition {
+  left?: number;
+  top?: number;
+}
+
 export class PopupUtils {
   public static calculatePosition(
     targetRect: ClientRect,
     height: number,
     width: number,
-    verticalPosition: string,
-    horizontalPosition: string,
+    verticalPosition: VerticalPosition,
+    horizontalPosition: HorizontalPosition,
     showPointer: boolean
-  ) {
+  ): INumberPosition {
     if (horizontalPosition == "center")
       var left = (targetRect.left + targetRect.right - width) / 2;
     else if (horizontalPosition == "left") left = targetRect.left - width;
@@ -31,8 +43,8 @@ export class PopupUtils {
   }
 
   public static calculatePopupDirection(
-    verticalPosition: string,
-    horizontalPosition: string
+    verticalPosition: VerticalPosition,
+    horizontalPosition: HorizontalPosition
   ) {
     var popupDirection: string;
     if (horizontalPosition == "center" && verticalPosition != "middle") {
@@ -48,15 +60,15 @@ export class PopupUtils {
     targetRect: ClientRect,
     top: number,
     left: number,
-    verticalPosition: string,
-    horizontalPosition: string
+    verticalPosition: VerticalPosition,
+    horizontalPosition: HorizontalPosition
   ) {
-    var targetPos: any = {};
+    var targetPos: INumberPosition = {};
     if (horizontalPosition != "center") {
       targetPos.top = targetRect.top + targetRect.height / 2;
-      targetPos.left = (<any>targetRect)[horizontalPosition];
+      targetPos.left = targetRect[horizontalPosition];
     } else if (verticalPosition != "middle") {
-      targetPos.top = (<any>targetRect)[verticalPosition];
+      targetPos.top = targetRect[verticalPosition];
       targetPos.left = targetRect.left + targetRect.width / 2;
     }
     targetPos.left = Math.round(targetPos.left - left);

diff --git a/src/vue/components/popup/popup-container.vue b/src/vue/components/popup/popup-container.vue
@@ -23,24 +23,27 @@
           }"
           class="sv-popup__pointer"
         ></span>
+        <div class="sv-popup__scrolling-content ">
+          <div class="sv-popup__header"></div>
 
-        <div class="sv-popup__header"></div>
+          <div
+            class="sv-popup__content"
+            data-bind="component: { name: contentComponentName, params: contentComponentData }"
+          >
+            <component
+              :is="model.contentComponentName"
+              v-bind="model.contentComponentData"
+            ></component>
+          </div>
 
-        <div
-          class="sv-popup__content"
-          data-bind="component: { name: contentComponentName, params: contentComponentData }"
-        >
-          <component
-            :is="model.contentComponentName"
-            v-bind="model.contentComponentData"
-          ></component>
-        </div>
-
-        <div v-show="model.isModal" class="sv-popup__footer">
-          <button v-on:click="model.cancel">
-            {{ model.cancelButtonText }}
-          </button>
-          <button v-on:click="model.apply">{{ model.applyButtonText }}</button>
+          <div v-show="model.isModal" class="sv-popup__footer">
+            <button v-on:click="model.cancel">
+              {{ model.cancelButtonText }}
+            </button>
+            <button v-on:click="model.apply">
+              {{ model.applyButtonText }}
+            </button>
+          </div>
         </div>
       </div>
     </div>