PR: PopupSurveyModel: Redesign

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)"></popup-survey>
+  <popup-survey *ngIf="!!model && isPopup" [model]="$any(model)" [isExpanded]="isExpanded" [allowClose]="true"></popup-survey>
   <survey *ngIf="!!model && !isPopup" [model]="$any(model)"></survey></div>
 <div id="surveyResultElement"></div>

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

@@ -11,13 +11,15 @@ import "survey-core/survey.i18n";
 export class TestComponent {
   public model?: SurveyModel | Survey.PopupSurveyModel;
   public isPopup: boolean = true;
+  public isExpanded: boolean = true;
   constructor(private changeDetectorRef: ChangeDetectorRef) {
     (window as any).Survey = Survey;
     Survey.defaultStandardCss.variables.mobileWidth = <any>undefined;
     Survey.modernCss.variables.mobileWidth = <any>undefined;
-    (<any>window).setSurvey = (survey: SurveyModel | Survey.PopupSurveyModel, isPopup: boolean) => {
+    (<any>window).setSurvey = (survey: SurveyModel | Survey.PopupSurveyModel, isPopup: boolean, isExpanded: boolean = true) => {
       this.model = survey;
       this.isPopup = isPopup;
+      this.isExpanded = isExpanded;
       this.changeDetectorRef.detectChanges();
     };
     (window as any).Survey.defaultBootstrapCss = defaultCss;

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

@@ -1,17 +1,22 @@
-<div *ngIf="!!popup && popup.isShowing" [class]="popup.cssRoot" style="position: fixed; bottom: 3px; right: 10px;" [style.width]="popup.renderedWidth" [style.maxWidth]="popup.renderedWidth">
-  <div [class]="popup.cssHeaderRoot">
-      <span (click)="popup.changeExpandCollapse()" style="width: 100%; cursor: pointer;">
-          <span style="padding-right:10px" [class]="popup.cssHeaderTitle">{{popup.locTitle.renderedHtml}}</span>
-          <span aria-hidden="true" [class]="popup.cssButton"></span>
-      </span>
-      <span *ngIf="popup.allowClose" (click)="popup.hide()" [class]="popup.cssHeaderButton" style="float: right; cursor: pointer; width: 24px; height: 24px; transform: rotate(45deg);">
-        <svg [iconName]="'icon-expanddetail'" [size]="16" sv-ng-svg-icon></svg>
-    </span>
-      <span *ngIf="popup.isExpanded" (click)="popup.changeExpandCollapse()" [class]="popup.cssHeaderButton" style="float: right; cursor: pointer; width: 24px; height: 24px;">
-          <svg [iconName]="'icon-collapsedetail'" [size]="16" sv-ng-svg-icon></svg>
-      </span>
+<div *ngIf="!!popup && popup.isShowing" [class]="popup.cssRoot" [style.width]="popup.renderedWidth" [style.maxWidth]="popup.renderedWidth" (scroll)="popup.onScroll()">
+  <div [class]="popup.cssRootContent">
+    <div [class]="getHeaderCss()">
+      <div *ngIf="popup.isCollapsed && !!popup.locTitle" [class]="popup.cssHeaderTitleCollapsed">
+        {{popup.locTitle.renderedHtml}}
+      </div>
+      <div [class]="popup.cssHeaderButtonsContainer">
+        <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>
+        </div>
+
+        <div *ngIf="popup.allowClose" [class]="popup.cssHeaderCloseButton" (click)="popup.hide()">
+          <svg [iconName]="'icon-close_16x16'" [size]="16" sv-ng-svg-icon></svg>
+        </div>
+      </div>
   </div>
-  <div *ngIf="popup.isExpanded" [class]="popup.cssBody" (scroll)="popup.onScroll()">
+  <div [class]="popup.cssBody">
     <survey [model]="popup.survey"></survey>
   </div>
+  </div>
 </div>

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

@@ -23,6 +23,14 @@ export class PopupSurveyComponent extends BaseAngular<PopupSurveyModel> implemen
   protected override getShouldReattachChangeDetector(): boolean {
     return false;
   }
+  public getHeaderCss(): string {
+    let headerCss = this.popup.cssHeaderRoot;
+    if (this.popup.isCollapsed) {
+      headerCss += " " + this.popup.cssRootCollapsedMod;
+    }
+    return headerCss;
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes["model"]?.currentValue !== changes["model"]?.previousValue) {
       this.popup = new PopupSurveyModel(null, this.model);

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

@@ -5,15 +5,18 @@ import "survey-core/survey.i18n";
 import { shallowRef } from "vue";
 const survey = shallowRef();
 const isPopup = shallowRef();
-(window as any).setSurvey = (model: SurveyModel | Survey.PopupSurveyModel, isPopupValue: boolean) => {
+const isExpanded = shallowRef();
+(window as any).setSurvey = (model: SurveyModel | Survey.PopupSurveyModel, isPopupValue: boolean, isExpandedValue = true) => {
     survey.value = model;
     isPopup.value = isPopupValue;
+    isExpanded.value = isExpandedValue;
 }
 </script>
 <template>
-<div id="surveyElement">
-    <SurveyComponent v-if="survey && !isPopup" :survey="survey"></SurveyComponent>
-    <PopupSurveyComponent v-if="survey && isPopup" :survey="survey"></PopupSurveyComponent>
-</div>
-<div id="surveyResultElement"></div>
+    <div id="surveyElement">
+        <SurveyComponent v-if="survey && !isPopup" :survey="survey"></SurveyComponent>
+        <PopupSurveyComponent v-if="survey && isPopup" :survey="survey" :isExpanded="isExpanded" :allowClose='true'>
+        </PopupSurveyComponent>
+    </div>
+    <div id="surveyResultElement"></div>
 </template>

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

@@ -1,60 +1,26 @@
 <template>
-  <div
-    v-if="surveyWindow.isShowing"
-    style="position: fixed; bottom: 3px; right: 10px"
-    :style="{
-      maxWidth: surveyWindow.renderedWidth,
-      width: surveyWindow.renderedWidth,
-    }"
-    :class="surveyWindow.cssRoot"
-  >
-    <div :class="surveyWindow.cssHeaderRoot">
-      <span
-        @click="doExpand"
-        style="width: 100%; cursor: pointer; user-select: none"
-      >
-        <span style="padding-right: 10px" :class="surveyWindow.cssHeaderTitle">
-          <survey-string :locString="survey.locTitle" />
-        </span>
-        <span aria-hidden="true" :class="expandedCss"></span>
-      </span>
-      <span
-        v-if="surveyWindow.allowClose"
-        :class="surveyWindow.cssHeaderButton"
-        @click="doHide"
-        style="
-          transform: rotate(45deg);
-          float: right;
-          cursor: pointer;
-          user-select: none;
-          width: 24px;
-          height: 24px;
-        "
-      >
-        <sv-svg-icon :iconName="'icon-expanddetail'" :size="16"> </sv-svg-icon>
-      </span>
-      <span
-        v-if="isExpandedSurvey"
-        :class="surveyWindow.cssHeaderButton"
-        @click="doExpand"
-        style="
-          float: right;
-          cursor: pointer;
-          user-select: none;
-          width: 24px;
-          height: 24px;
-        "
-      >
-        <sv-svg-icon :iconName="'icon-collapsedetail'" :size="16">
-        </sv-svg-icon>
-      </span>
-    </div>
-    <div
-      v-if="isExpandedSurvey"
-      :class="surveyWindow.cssBody"
-      @scroll="doScroll"
-    >
-      <component :is="getSurveyComponentName()" :survey="survey"> </component>
+  <div v-if="surveyWindow.isShowing" :style="{ maxWidth: surveyWindow.renderedWidth, width: surveyWindow.renderedWidth }"
+    :class="surveyWindow.cssRoot" @scroll="doScroll">
+    <div :class="surveyWindow.cssRootContent">
+      <div :class="cssHeaderRoot()">
+        <div v-if="surveyWindow.isCollapsed && !!surveyWindow.locTitle" :class="surveyWindow.cssHeaderTitleCollapsed">
+          {{ surveyWindow.locTitle.renderedHtml }}
+        </div>
+
+        <div :class="surveyWindow.cssHeaderButtonsContainer">
+          <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>
+          </div>
+
+          <div v-if="surveyWindow.allowClose" :class="surveyWindow.cssHeaderCloseButton" @click="doHide">
+            <sv-svg-icon :iconName="'icon-close_16x16'" :size="16"> </sv-svg-icon>
+          </div>
+        </div>
+      </div>
+      <div :class="surveyWindow.cssBody">
+        <component :is="getSurveyComponentName()" :survey="survey"> </component>
+      </div>
     </div>
   </div>
 </template>
@@ -67,6 +33,7 @@ import { useBase } from "./base";
 const props = defineProps<{
   survey: SurveyModel;
   isExpanded: boolean;
+  allowClose: boolean;
   closeOnCompleteTimeout: number;
 }>();
 const surveyWindow =
@@ -96,6 +63,14 @@ const doScroll = () => {
   surveyWindow.value.onScroll();
 };
 
+const cssHeaderRoot = () => {
+  let headerCss = surveyWindow.value.cssHeaderRoot;
+  if (surveyWindow.value.isCollapsed) {
+    headerCss += " " + surveyWindow.value.cssRootCollapsedMod;
+  }
+  return headerCss;
+}
+
 useBase(() => surveyWindow.value);
 
 const stopWatch = watch(
@@ -108,6 +83,9 @@ const stopWatch = watch(
     if (props.closeOnCompleteTimeout !== undefined) {
       model.closeOnCompleteTimeout = props.closeOnCompleteTimeout;
     }
+    if (props.allowClose !== undefined) {
+      model.allowClose = props.allowClose;
+    }
     model.isShowing = true;
     surveyWindow.value = model;
   },

src/common-styles/window.scss

@@ -1,62 +1,90 @@
+@import "../defaultV2-theme/variables.scss";
+@import "../defaultV2-theme/mixins.scss";
+
 .sv_window {
   position: fixed;
-  bottom: 3px;
-  right: 10px;
-  background-color: cadetblue;
-  padding: 1px;
-  font-family: $font-family;
-  font-size: calcFontSize(0.875);
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: left;
-  text-align: start;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-  white-space: normal;
-  background-color: #fff;
-  -webkit-background-clip: padding-box;
+  bottom: calcSize(2);
+  right: calcSize(2);
+  border-radius: calcSize(1);
+  border: 1px solid $border-inside;
+  box-shadow: $shadow-large, $shadow-medium;
   background-clip: padding-box;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: calcCornerRadius(1.5);
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  line-break: auto;
   z-index: 100;
+  max-height: 90vh;
+  overflow: auto;
+  box-sizing: border-box;
 }
 
-.sv_window_title {
-  padding: 8px 14px;
-  margin: 0;
-  font-size: calcFontSize(0.875);
-  background-color: #f7f7f7;
-  border-bottom: 1px solid #ebebeb;
-  border-radius: calcCornerRadius(1) calcCornerRadius(1) 0 0;
-  display: flex;
+.sv_window_content {
+    border-radius: calcSize(1);
+    overflow: hidden;
 }
 
-.sv_window_content {
-  padding: 0;
-  margin: 0;
-  max-height: 80vh;
-  overflow-y: auto;
+.sv_window--collapsed {
+    .sv_window_header {
+        height: calcSize(4);
+        padding: calcSize(1) calcSize(1) calcSize(1) calcSize(2);
+        border-radius: calcSize(1);
+        display: flex;
+        background-color: $background-dim;
+    }
+
+    .sv_window_content {
+        display: none;
+    }
+}
+
+.sv_window_header_title_collapsed {
+    color: $foreground-dim;
+    @include defaultBold;
+    flex: 1;
+    display: flex;
+    justify-content: start;
+    align-items: center;
 }
 
-.sv_window_title a,
-.sv_window_title a:link,
-.sv_window_title a:visited {
-  text-decoration: none;
-  font-size: calcFontSize(0.875);
-  font-style: normal;
-  color: black;
+.sv_window_header_description{
+    color: $font-questiondescription-color;
+    font-feature-settings: 'salt' on;
+    @include defaultFont;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
-.sv_window_button .sv-svg-icon {
-  margin: 4px;
+.sv_window_buttons_container {
+    position: absolute;
+    top: calcSize(1);
+    right: calcSize(1);
+    display: flex;
+    gap: calcSize(1);
+    z-index: 1;
 }
+
+.sv_window_button {
+    display: flex;
+    padding: calcSize(1);
+    justify-content: center;
+    align-items: center;
+    border-radius: calcSize(0.5);
+    cursor: pointer;
+
+    &:hover, &:active {
+        background-color: $primary-light;
+        svg {
+            use, path {
+                fill: $primary;
+            }
+        }
+    }
+
+    &:active {
+        opacity: 0.5;
+    }
+
+    svg {
+        use, path {
+            fill: $foreground-dim-light;
+        }
+    }
+}

src/defaultCss/cssmodern.ts

@@ -430,14 +430,19 @@ export var modernCss = {
   },
   window: {
     root: "sv_window",
+    rootCollapsedMod: "sv_window--collapsed",
+    rootContent: "sv_window_root-content",
     body: "sv_window_content",
     header: {
-      root: "sv_window_title",
-      title: "",
-      button: "",
+      root: "sv_window_header",
+      titleCollapsed: "sv_window_header_title_collapsed",
+      buttonsContainer: "sv_window_buttons_container",
+      button: "sv_window_button",
       buttonExpanded: "",
       buttonCollapsed: "",
-    },
+      collapseButton: "sv_window_button sv_window_button_collapse",
+      closeButton: "sv_window_button sv_window_button_close"
+    }
   },
   variables: {
     mobileWidth: "--sv-mobile-width",