Implement styles for mobile dropdown popups + fix popup styles (#7140)

* Work for #7000: fix dropdown popup styles

* Fix toc navigation popup

* Update etalons

* Update markup snapshots

* Fix f tests

* Update vrt etalon

src/common-styles/sv-popup.scss

@@ -48,7 +48,7 @@ sv-popup {
   max-width: 100vw;
 }
 
-.sv-popup.sv-popup--modal {
+.sv-popup--modal {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -85,7 +85,8 @@ sv-popup {
     font-size: calcFontSize(1);
     font-style: normal;
     font-weight: 400;
-    line-height: calcLineHeight(1.5);/* 150% */
+    line-height: calcLineHeight(1.5);
+    /* 150% */
   }
 
   .sv-popup__scrolling-content {
@@ -101,11 +102,11 @@ sv-popup {
   }
 }
 
-.sv-popup.sv-popup--modal>.sv-popup__container {
+.sv-popup--modal>.sv-popup__container {
   position: static;
 }
 
-.sv-popup--overlay.sv-popup--overlay {
+.sv-popup--overlay {
   width: 100%;
   height: $popup-overlay-height;
 
@@ -145,14 +146,14 @@ sv-popup {
     width: 100%;
   }
 
-  .sv-popup__button {
+  .sv-popup__button.sv-popup__button {
     background-color: $primary;
     border: 2px solid $primary;
     color: $primary-foreground;
   }
 }
 
-.sv-popup--overlay.sv-popup--overlay:not(.sv-dropdown-popup) {
+.sv-popup--overlay {
   .sv-popup__body-footer .sv-action {
     flex: 1 0 0;
   }
@@ -269,8 +270,51 @@ sv-popup {
   }
 }
 
+.sv-popup--dropdown {
+  .sv-list__filter {
+    margin-bottom: calcSize(1);
+  }
+
+  .sv-popup__shadow {
+    box-shadow: $shadow-medium;
+  }
+
+  .sv-popup__body-content {
+    background-color: $background;
+    padding: calcSize(1) 0;
+    height: 100%;
+  }
+}
+
+.sv-dropdown-popup {
+  .sv-popup__body-content {
+    padding: calcSize(0.5) 0;
+  }
+
+  .sv-list__filter {
+    margin-bottom: 0;
+  }
+}
+
+.sv-popup--modal {
+  .sv-popup__body-content {
+    box-shadow: $shadow-large;
+    background-color: $background-dim-light;
+  }
+
+  .sv-popup__body-footer {
+    padding-bottom: 2px;
+  }
+}
+
+.sv-popup--overlay {
+  .sv-popup__body-content {
+    background-color: $background-dim;
+  }
+}
+
 //styles for dropdown overlay
-.sv-dropdown-popup.sv-popup--overlay {
+.sv-popup--dropdown-overlay {
   z-index: 2001;
   padding: 0;
 
@@ -281,16 +325,16 @@ sv-popup {
 
   .sv-popup__body-footer .sv-action-bar {
     .sv-action {
-      width: auto;
+      flex: 0 0 auto;
     }
   }
 
-  .sv-popup__button {
+  .sv-popup__button.sv-popup__button {
     background-color: transparent;
     color: $primary;
     border: none;
     box-shadow: none;
-    padding: calcSize(1) calcSize(2);
+    padding: calcSize(0.5) calcSize(2);
     border-radius: calcSize(12.5);
     margin: 0;
   }
@@ -306,10 +350,10 @@ sv-popup {
   }
 
   .sv-popup__body-footer {
-    background-color: $background-dim-light;
+    background-color: $background-dim;
     margin-top: 0;
-    padding-top: calcSize(0.5);
-    padding-bottom: calcSize(0.5);
+    padding-top: calcSize(1);
+    padding-bottom: calcSize(1);
     border-top: 1px solid $border-light;
   }
 
@@ -318,8 +362,8 @@ sv-popup {
   }
 
   .sv-list__filter-icon .sv-svg-icon {
-    width: calcSize(2);
-    height: calcSize(2);
+    width: calcSize(3);
+    height: calcSize(3);
   }
 
   .sv-list__container {
@@ -328,19 +372,19 @@ sv-popup {
 
   .sv-list {
     flex-grow: 1;
-    padding: calcSize(0.5);
+    padding: calcSize(1) 0;
   }
 
   .sv-list__filter {
     display: flex;
     align-items: center;
-    padding: calcSize(0.5) calcSize(1) calcSize(0.5) calcSize(2.5);
+    margin-bottom: 0;
+    padding: calcSize(1.5) calcSize(1) calcSize(1.5) calcSize(2);
   }
 
   .sv-list__filter-icon {
     position: static;
-    top: calcSize(1.5);
-    height: calcSize(2);
+    height: calcSize(3);
   }
 
   .sv-list__empty-container {
@@ -382,7 +426,7 @@ sv-popup {
     font-size: calcFontSize(1);
     line-height: calcLineHeight(1.5);
     font-family: $font-family;
-    padding: calcSize(0.5) 0 calcSize(0.5) calcSize(1);
+    padding: calcSize(0.5) 0 calcSize(0.5) calcSize(2);
   }
 
   .sv-list__item:hover,
@@ -400,9 +444,46 @@ sv-popup {
       }
     }
   }
+
+  .sv-popup__body-footer .sv-action-bar {
+    justify-content: flex-start;
+  }
+}
+
+.sv-dropdown-popup.sv-popup--dropdown-overlay {
+  .sv-list__filter {
+    padding: calcSize(0.5) calcSize(1) calcSize(0.5) calcSize(2.5);
+  }
+
+  .sv-list {
+    padding: calcSize(0.5);
+  }
+
+  .sv-popup__button.sv-popup__button {
+    padding: calcSize(1) calcSize(2.5);
+  }
+
+  .sv-popup__body-footer {
+    padding-top: calcSize(0.5);
+    padding-bottom: calcSize(0.5);
+    background-color: $background-dim-light;
+  }
+
+  .sv-list__filter-icon .sv-svg-icon {
+    width: calcSize(2);
+    height: calcSize(2);
+  }
+
+  .sv-list__filter-icon {
+    height: calcSize(2);
+  }
+
+  .sv-list__input {
+    padding: calcSize(0.5) 0 calcSize(0.5) calcSize(1);
+  }
 }
 
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list {
+.sv-popup--dropdown-overlay.sv-multi-select-list {
 
   .sv-list__item:hover,
   .sv-list__item:focus,
@@ -418,7 +499,7 @@ sv-popup {
 }
 
 
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet {
+.sv-popup--dropdown-overlay.sv-popup--tablet {
   .sv-popup__body-content {
     --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - #{$base-unit} * 8);
     --sv-popup-overlay-max-width: calc(100% - #{$base-unit} * 8);
@@ -427,7 +508,7 @@ sv-popup {
     left: 50%;
     top: 50%;
     max-height: var(--sv-popup-overlay-max-height);
-    min-height: min(var(--sv-popup-overlay-max-height), calcSize(31));
+    min-height: min(var(--sv-popup-overlay-max-height), calcSize(30));
     height: auto;
     width: auto;
     min-width: min(calcSize(40), var(--sv-popup-overlay-max-width));

src/defaultV2-theme/blocks/sd-dropdown.scss

@@ -36,6 +36,7 @@
   font-family: var(--font-family, $font-family);
   font-size: calcFontSize(1);
 }
+
 .sd-dropdown input[readonly] {
   pointer-events: none;
 }
@@ -51,7 +52,7 @@
   font-weight: $font-editorfont-weight;
   color: $font-editorfont-color;
   font-size: $font-editorfont-size;
-  
+
   position: relative;
 }
 
@@ -61,7 +62,7 @@
   align-items: center;
   padding: 0 calcSize(1);
   margin: auto 0;
-  }
+}
 
 .sd-dropdown_chevron-button {
   position: absolute;
@@ -79,7 +80,7 @@
 .sd-dropdown_clean-button-svg {
   width: multiply(1.5, $font-editorfont-size);
   height: multiply(1.5, $font-editorfont-size);
-  }
+}
 
 .sd-input.sd-dropdown:focus-within {
   box-shadow: 0 0 0 2px $primary;
@@ -131,7 +132,7 @@
 
 .sd-dropdown__hint-prefix {
   color: $font-editorfont-placeholdercolor;
-  
+
   span {
     white-space: pre;
   }
@@ -151,7 +152,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.sv-popup.sv-popup--dropdown.sv-popup--dropdown {
+
+.sv-dropdown-popup {
   .sd-list__item-body {
     line-height: multiply(1.5, $font-editorfont-size);
     font-size: $font-editorfont-size;

src/defaultV2-theme/blocks/sd-list.scss

@@ -3,15 +3,15 @@
   padding-left: calcSize(0.5);
 }
 
-.sd-list__item.sd-list__item {
+.sd-list__item {
   padding: 0;
+}
 
-  .sd-list__item-body {
-    padding-block: calcSize(1.5);
-    border-radius: calcCornerRadius(1);
-    font-size: calcFontSize(1);
-    line-height: calcLineHeight(1.5);
-  }
+.sd-list__item-body {
+  padding-block: calcSize(1.5);
+  border-radius: calcCornerRadius(1);
+  font-size: calcFontSize(1);
+  line-height: calcLineHeight(1.5);
 }
 
 .sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) {

src/defaultV2-theme/defaultV2.fontless.scss

@@ -184,33 +184,4 @@ body {
       }
     }
   }
-}
-
-.sv-popup.sv-popup--dropdown.sv-popup--dropdown {
-  .sv-popup__shadow {
-    box-shadow: $shadow-medium;
-  }
-
-  .sv-popup__body-content {
-    background-color: $background;
-    padding: calcSize(1) 0;
-    height: 100%;
-  }
-}
-
-.sv-popup.sv-popup--modal {
-  .sv-popup__body-content {
-    box-shadow: $shadow-large;
-    background-color: $background-dim-light;
-  }
-
-  .sv-popup__body-footer {
-    padding-bottom: 2px;
-  }
-}
-
-.sv-popup.sv-popup--overlay {
-  .sv-popup__body-content {
-    background-color: $background-dim;
-  }
 }

src/popup-dropdown-view-model.ts

@@ -145,10 +145,10 @@ export class PopupDropdownViewModel extends PopupBaseViewModel {
     }
     return actualHorizontalPosition;
   }
-
   protected getStyleClass(): CssClassBuilder {
     return super.getStyleClass()
       .append("sv-popup--dropdown", !this.isOverlay)
+      .append("sv-popup--dropdown-overlay", this.isOverlay && this.model.overlayDisplayMode !== "overlay")
       .append("sv-popup--tablet", this.isTablet && this.isOverlay)
       .append("sv-popup--show-pointer", !this.isOverlay && this.showHeader)
       .append(`sv-popup--${this.popupDirection}`, !this.isOverlay && this.showHeader);

src/popup.ts

@@ -45,6 +45,7 @@ export class PopupModel<T = any> extends Base {
   @property({ defaultValue: () => { } }) onShow: () => void;
   @property({ defaultValue: "" }) cssClass: string;
   @property({ defaultValue: "" }) title: string;
+  @property({ defaultValue: "auto" }) overlayDisplayMode: "auto" | "overlay" | "dropdown-overlay";
   @property({ defaultValue: "popup" }) displayMode: "popup" | "overlay";
   @property({ defaultValue: "flex" }) positionMode: PositionMode;
 

src/surveyToc.ts

@@ -76,6 +76,7 @@ export class TOCModel {
   constructor(public survey: SurveyModel) {
     this.listModel = createTOCListModel(survey, () => { this.popupModel.isVisible = false; });
     this.popupModel = new PopupModel("sv-list", { model: this.listModel });
+    this.popupModel.overlayDisplayMode = "overlay";
     this.popupModel.displayMode = <any>new ComputedUpdater(() => this.isMobile ? "overlay" : "popup");
   }