PR: Popup Survey - Introduce a "full screen" mode

packages/survey-angular-ui/example/src/app/components/test/test.component.html

@@ -1,4 +1,4 @@
 <div id="surveyElement">
-  <popup-survey *ngIf="!!model && isPopup" [model]="$any(model)" [isExpanded]="isExpanded" [allowClose]="true"></popup-survey>
+  <popup-survey *ngIf="!!model && isPopup" [model]="$any(model)" [isExpanded]="isExpanded" [allowClose]="true" [allowFullScreen]="true"></popup-survey>
   <survey *ngIf="!!model && !isPopup" [model]="$any(model)"></survey></div>
 <div id="surveyResultElement"></div>

packages/survey-angular-ui/src/popup.survey.component.html

@@ -5,6 +5,11 @@
         {{popup.locTitle.renderedHtml}}
       </div>
       <div [class]="popup.cssHeaderButtonsContainer">
+        <div *ngIf="popup.allowFullScreen" [class]="popup.cssHeaderFullScreenButton" (click)="popup.toggleFullScreen()">
+          <svg *ngIf="popup.isFullScreen" [iconName]="'icon-back-to-panel_16x16'" [size]="16" sv-ng-svg-icon></svg>
+          <svg *ngIf="!popup.isFullScreen" [iconName]="'icon-full-screen_16x16'" [size]="16" sv-ng-svg-icon></svg>
+        </div>
+
         <div [class]="popup.cssHeaderCollapseButton" (click)="popup.changeExpandCollapse()">
             <svg *ngIf="popup.isExpanded" [iconName]="'icon-minimize_16x16'" [size]="16" sv-ng-svg-icon></svg>
             <svg *ngIf="popup.isCollapsed" [iconName]="'icon-restore_16x16'" [size]="16" sv-ng-svg-icon></svg>

packages/survey-angular-ui/src/popup.survey.component.ts

@@ -11,6 +11,7 @@ export class PopupSurveyComponent extends BaseAngular<PopupSurveyModel> implemen
   @Input() isExpanded?: boolean;
   @Input() allowClose?: boolean;
   @Input() closeOnCompleteTimeout?: number;
+  @Input() allowFullScreen?: boolean;
   public popup!: PopupSurveyModel;
 
   constructor(changeDetectorRef: ChangeDetectorRef) {
@@ -41,6 +42,9 @@ export class PopupSurveyComponent extends BaseAngular<PopupSurveyModel> implemen
     if (this.allowClose !== undefined) {
       this.popup.allowClose = this.allowClose;
     }
+    if (this.allowFullScreen !== undefined) {
+      this.popup.allowFullScreen = this.allowFullScreen;
+    }
     if (this.closeOnCompleteTimeout !== undefined) {
       this.popup.closeOnCompleteTimeout = this.closeOnCompleteTimeout;
     }

packages/survey-vue3-ui/example/src/components/test/TestCommon.vue

@@ -15,7 +15,7 @@ const isExpanded = shallowRef();
 <template>
     <div id="surveyElement">
         <SurveyComponent v-if="survey && !isPopup" :survey="survey"></SurveyComponent>
-        <PopupSurveyComponent v-if="survey && isPopup" :survey="survey" :isExpanded="isExpanded" :allowClose='true'>
+        <PopupSurveyComponent v-if="survey && isPopup" :survey="survey" :isExpanded="isExpanded" :allowClose='true' :allowFullScreen='true'>
         </PopupSurveyComponent>
     </div>
     <div id="surveyResultElement"></div>

packages/survey-vue3-ui/src/PopupSurvey.vue

@@ -8,6 +8,11 @@
         </div>
 
         <div :class="surveyWindow.cssHeaderButtonsContainer">
+          <div v-if="surveyWindow.allowFullScreen" :class="surveyWindow.cssHeaderFullScreenButton" @click="doToggleFullScreen">
+            <sv-svg-icon v-if="surveyWindow.isFullScreen" :iconName="'icon-back-to-panel_16x16'" :size="16"> </sv-svg-icon>
+            <sv-svg-icon v-if="!surveyWindow.isFullScreen" :iconName="'icon-full-screen_16x16'" :size="16"> </sv-svg-icon>
+          </div>
+
           <div :class="surveyWindow.cssHeaderCollapseButton" @click="doExpand">
             <sv-svg-icon v-if="surveyWindow.isExpanded" :iconName="'icon-minimize_16x16'" :size="16"> </sv-svg-icon>
             <sv-svg-icon v-if="surveyWindow.isCollapsed" :iconName="'icon-restore_16x16'" :size="16"> </sv-svg-icon>
@@ -34,6 +39,7 @@ const props = defineProps<{
   survey: SurveyModel;
   isExpanded: boolean;
   allowClose: boolean;
+  allowFullScreen: boolean;
   closeOnCompleteTimeout: number;
 }>();
 const surveyWindow =
@@ -56,6 +62,9 @@ const doExpand = () => {
 const doHide = () => {
   surveyWindow.value.hide();
 };
+const doToggleFullScreen = () => {
+  surveyWindow.value.toggleFullScreen();
+};
 const getSurveyComponentName = () => {
   return "SurveyComponent";
 };
@@ -86,6 +95,9 @@ const stopWatch = watch(
     if (props.allowClose !== undefined) {
       model.allowClose = props.allowClose;
     }
+    if (props.allowFullScreen !== undefined) {
+      model.allowFullScreen = props.allowFullScreen;
+    }
     model.isShowing = true;
     surveyWindow.value = model;
   },

src/common-styles/window.scss

@@ -1,5 +1,6 @@
 @import "../defaultV2-theme/variables.scss";
 @import "../defaultV2-theme/mixins.scss";
+@import "../defaultV2-theme/blocks/mixins.scss";
 
 .sv_window {
     position: fixed;
@@ -10,17 +11,39 @@
     box-shadow: $shadow-large, $shadow-medium;
     background-clip: padding-box;
     z-index: 100;
-    max-height: 90vh;
+    max-height: 50vh;
     overflow: auto;
+    @include scrollRules;
     box-sizing: border-box;
+    background: $background-dim;
+}
+
+.sv_window_root-content {
+    height: 100%;
+}
+
+.sv_window--full-screen {
+    top: calcSize(2);
+    left: calcSize(2);
+    right: calcSize(2);
+    bottom: calcSize(2);
+    max-height: 100%;
+    width: initial !important;
+    max-width: initial!important;
+}
+
+.sv_window_header {
+    display: flex;
+    justify-content: flex-end;
 }
 
 .sv_window_content {
-    border-radius: calcSize(1);
     overflow: hidden;
 }
 
 .sv_window--collapsed {
+    height: initial;
+
     .sv_window_header {
         height: calcSize(4);
         padding: calcSize(1) calcSize(1) calcSize(1) calcSize(2);
@@ -32,6 +55,11 @@
     .sv_window_content {
         display: none;
     }
+
+    .sv_window_buttons_container {
+        margin-top: 0;
+        margin-right: 0;
+    }
 }
 
 .sv_window_header_title_collapsed {
@@ -53,9 +81,9 @@
 }
 
 .sv_window_buttons_container {
-    position: absolute;
-    top: calcSize(1);
-    right: calcSize(1);
+    position: fixed;
+    margin-top: calcSize(1);;
+    margin-right: calcSize(1);;
     display: flex;
     gap: calcSize(1);
     z-index: 1;

src/defaultCss/cssmodern.ts

@@ -431,6 +431,7 @@ export var modernCss = {
   window: {
     root: "sv_window",
     rootCollapsedMod: "sv_window--collapsed",
+    rootFullScreenMode: "sv_window--full-screen",
     rootContent: "sv_window_root-content",
     body: "sv_window_content",
     header: {
@@ -441,7 +442,8 @@ export var modernCss = {
       buttonExpanded: "",
       buttonCollapsed: "",
       collapseButton: "sv_window_button sv_window_button_collapse",
-      closeButton: "sv_window_button sv_window_button_close"
+      closeButton: "sv_window_button sv_window_button_close",
+      fullScreenButton: "sv_window_button sv_window_button_full_screen"
     }
   },
   variables: {

src/defaultCss/cssstandard.ts

@@ -366,6 +366,7 @@ export var defaultStandardCss = {
   window: {
     root: "sv_window",
     rootCollapsedMod: "sv_window--collapsed",
+    rootFullScreenMode: "sv_window--full-screen",
     rootContent: "sv_window_root-content",
     body: "sv_window_content",
     header: {
@@ -376,7 +377,8 @@ export var defaultStandardCss = {
       buttonExpanded: "",
       buttonCollapsed: "",
       collapseButton: "sv_window_button sv_window_button_collapse",
-      closeButton: "sv_window_button sv_window_button_close"
+      closeButton: "sv_window_button sv_window_button_close",
+      fullScreenButton: "sv_window_button sv_window_button_full_screen"
     }
   },
   variables: {

src/defaultCss/defaultV2Css.ts

@@ -659,6 +659,7 @@ export var defaultV2Css = {
   window: {
     root: "sv_window",
     rootCollapsedMod: "sv_window--collapsed",
+    rootFullScreenMode: "sv_window--full-screen",
     rootContent: "sv_window_root-content",
     body: "sv_window_content",
     header: {
@@ -669,7 +670,8 @@ export var defaultV2Css = {
       buttonExpanded: "",
       buttonCollapsed: "",
       collapseButton: "sv_window_button sv_window_button_collapse",
-      closeButton: "sv_window_button sv_window_button_close"
+      closeButton: "sv_window_button sv_window_button_close",
+      fullScreenButton: "sv_window_button sv_window_button_full_screen"
     }
   },
   ranking: {

src/defaultV2-theme/blocks/mixins.scss

@@ -86,4 +86,4 @@
       background-color: $foreground-light;
     }
   }
-}
+}

src/entries/angular.ts

@@ -59,6 +59,9 @@ export class PopupSurveyNG {
     if (props.closeOnCompleteTimeout !== undefined) {
       survey.closeOnCompleteTimeout = props.closeOnCompleteTimeout;
     }
+    if (props.allowFullScreen !== undefined) {
+      survey.allowFullScreen = props.allowFullScreen;
+    }
     survey.show();
   }
 }

src/entries/jquery.ts

@@ -32,20 +32,25 @@ function doPopupSurvey(props: any): void {
   return this.each(function () {
     var model: Survey = props.model;
     model.updateSurvey(props);
-    var survey = new PopupSurvey(null, model);
+
+    var popupSurvey = props.popupModel || new PopupSurvey(null, model);
+
     if (props.expanded !== undefined) {
-      survey.isExpanded = props.expanded;
+      popupSurvey.isExpanded = props.expanded;
     }
     if (props.isExpanded !== undefined) {
-      survey.isExpanded = props.isExpanded;
+      popupSurvey.isExpanded = props.isExpanded;
     }
     if (props.allowClose !== undefined) {
-      survey.allowClose = props.allowClose;
+      popupSurvey.allowClose = props.allowClose;
+    }
+    if (props.allowFullScreen !== undefined) {
+      popupSurvey.allowFullScreen = props.allowFullScreen;
     }
     if (props.closeOnCompleteTimeout !== undefined) {
-      survey.closeOnCompleteTimeout = props.closeOnCompleteTimeout;
+      popupSurvey.closeOnCompleteTimeout = props.closeOnCompleteTimeout;
     }
-    survey.show();
+    popupSurvey.show();
   });
 }
 

src/knockout/koPopupSurvey.ts

@@ -15,6 +15,9 @@ export class PopupSurveyImplementor extends ImplementorBase {
     (<any>this.window)["doHide"] = () => {
       this.window.hide();
     };
+    (<any>this.window)["doToggleFullScreen"] = () => {
+      this.window.toggleFullScreen();
+    };
   }
   private doShowingChanged() {
     const windowElement = this.window.windowElement;

src/knockout/templates/window.html

@@ -7,6 +7,17 @@
             <!-- /ko -->
 
             <div data-bind="css: cssHeaderButtonsContainer">
+                <!-- ko if: allowFullScreen -->      
+                <div data-bind="click:doToggleFullScreen, css: cssHeaderFullScreenButton">
+                    <!-- ko if: isFullScreen-->  
+                    <!-- ko component: { name: 'sv-svg-icon', params: { iconName: 'icon-back-to-panel_16x16', size: '16' } } --><!-- /ko -->
+                    <!-- /ko -->
+
+                    <!-- ko if: !isFullScreen-->  
+                    <!-- ko component: { name: 'sv-svg-icon', params: { iconName: 'icon-full-screen_16x16', size: '16' } } --><!-- /ko -->
+                    <!-- /ko -->
+                </div>
+                <!-- /ko -->
                 <div data-bind="click:doExpand, css: cssHeaderCollapseButton">
                     <!-- ko if: isExpanded-->  
                     <!-- ko component: { name: 'sv-svg-icon', params: { iconName: 'icon-minimize_16x16', size: '16' } } --><!-- /ko -->