work for #8129 Popup submenu

surveyjs · May 23, 2024 · 7a8b280 · 7a8b280
1 parent 2dd98f8
commit 7a8b280
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 11 deletions.
diff --git a/packages/survey-angular-ui/src/components/list/list-item.component.html b/packages/survey-angular-ui/src/components/list/list-item.component.html
@@ -3,7 +3,8 @@
     <ng-container *ngIf="model.needSeparator">
     <div [class]="listModel.cssClasses.itemSeparator"></div>
     </ng-container>
-    <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft" [attr.title]="model.locTitle.calculatedText">
+    <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft" [attr.title]="model.locTitle.calculatedText"
+    (mouseover)="listModel.onItemHover(model)">
     <ng-template [component]="{ name: model.component || 'sv-list-item-content', data: { model: model, listModel: listModel } }"></ng-template>
     </div>
   </li>

diff --git a/packages/survey-vue3-ui/src/components/list/ListItem.vue b/packages/survey-vue3-ui/src/components/list/ListItem.vue
@@ -20,6 +20,7 @@
       :style="{ paddingInlineStart: model.getItemIndent(item) }"
       v-bind:class="model.cssClasses.itemBody"
       :title="item.locTitle.calculatedText"
+      @mouseover="(e) => model.onItemHover(item)"
     >
       <component :is="item.component || 'sv-list-item-content'" :item="item" :model="model">
       </component>

diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss
@@ -77,13 +77,14 @@
 
 .sv-list__item:hover,
 .sv-list__item:focus {
-  & > .sv-list__item-body {
-    background-color: $background-dark;
-  }
-
   outline: none;
 }
 
+.sv-list__item-body:hover,
+.sv-list__item-body:focus {
+  background-color: $background-dark;
+}
+
 .sv-list__item--with-icon.sv-list__item--with-icon {
   padding: 0;
 
@@ -112,7 +113,7 @@
 
 .sv-list-item__marker-icon {
   position: absolute;
-    right: calcSize(1);
+  right: calcSize(1);
   flex-shrink: 0;
   padding: calcSize(0.5);
 

diff --git a/src/knockout/components/list/list-item.html b/src/knockout/components/list/list-item.html
@@ -1,9 +1,10 @@
 
 <li role="option"
-data-bind="css: $data.model.getItemClass($data.item), attr: { id: $data.item.elementId, 'aria-selected': $data.model.isItemSelected($data.item) ? 'true' : 'false' }, click: itemClick, key2click, visible: $data.model.isItemVisible($data.item), event: { pointerdown: function (model, event) { $data.model.onPointerDown(event, $data.item); },  mouseover: function(m, e) { $data.hover(e, $data); return true; } }">  <!-- ko if: $data.item.needSeparator -->
+data-bind="css: $data.model.getItemClass($data.item), attr: { id: $data.item.elementId, 'aria-selected': $data.model.isItemSelected($data.item) ? 'true' : 'false' }, click: itemClick, key2click, visible: $data.model.isItemVisible($data.item), event: { pointerdown: function (model, event) { $data.model.onPointerDown(event, $data.item); } }">
+  <!-- ko if: $data.item.needSeparator -->
   <div data-bind="css: $data.model.cssClasses.itemSeparator"></div>
   <!-- /ko -->
-  <div data-bind="style: { paddingInlineStart: $data.model.getItemIndent($data.item) }, css: $data.model.cssClasses.itemBody, attr: { title: $data.item.locTitle.calculatedText }">
+  <div data-bind="style: { paddingInlineStart: $data.model.getItemIndent($data.item) }, css: $data.model.cssClasses.itemBody, attr: { title: $data.item.locTitle.calculatedText }, event: { mouseover: function(m, e) { $data.hover(e, $data); return true; } }">
   <!-- ko component: { name: $data.item.component || 'sv-list-item-content', params: { item: $data.item, model: $data.model } } -->
   <!-- /ko -->
   </div>

diff --git a/src/react/components/list/list-item.tsx b/src/react/components/list/list-item.tsx
@@ -35,6 +35,7 @@ export class ListItem extends SurveyElementBase<IListItemProps, any> {
           style={contentWrapStyle}
           className={this.model.cssClasses.itemBody}
           title={this.item.locTitle.calculatedText}
+          onMouseOver={(event: any) => { this.model.onItemHover(this.item); }}
         >
           {newElement}
         </div>;

diff --git a/src/vue/components/list/list-item.vue b/src/vue/components/list/list-item.vue
@@ -6,7 +6,8 @@
     <div v-if="item.needSeparator" v-bind:class="model.cssClasses.itemSeparator" />
 
     <div :style="{ paddingInlineStart: model.getItemIndent(item) }" v-bind:class="model.cssClasses.itemBody"
-      :title="item.locTitle.calculatedText">
+      :title="item.locTitle.calculatedText"
+      @mouseover="(e) => model.onItemHover(item)">
       <sv-svg-icon v-if="item.iconName && !item.component" v-bind:class="model.cssClasses.itemIcon"
         :iconName="item.iconName" :size="item.iconSize"></sv-svg-icon>
       <survey-string v-if="!item.component" :locString="item.locTitle" />

diff --git a/tests/markup/etalon_components.ts b/tests/markup/etalon_components.ts
@@ -29,7 +29,7 @@ registerMarkupTests(
         return document.querySelector(".sv-popup.sv-dropdown-popup .sv-popup__container") as HTMLElement;
       },
       snapshot: "list-component"
-      // }, {
+    }, {
       //   name: "Test popup list with subitems",
       //   json: {
       //     questions: [
@@ -57,7 +57,34 @@ registerMarkupTests(
       //   getElement: () => {
       //     return document.querySelector(".sv-popup .sv-popup__container") as HTMLElement;
       //   },
-      //   event: "onAfterRenderSurvey",
       //   snapshot: "list-component-with-subitems"
+      // }, {
+      name: "Test popup list with separator",
+      json: {
+        questions: [
+          {
+            "type": "text",
+            "name": "q1",
+            "title": "Question title"
+          }
+        ]
+      },
+      before: () => { Question["questionCounter"] = 100; },
+      initSurvey: (survey) => {
+        survey.onGetQuestionTitleActions.add((_, opt) => {
+          const items = [new Action({ id: "1", title: "text1" }), new Action({ id: "2", title: "text2", needSeparator: true })];
+          const item = createDropdownActionModel(
+            { title: "bottom", showTitle: true },
+            {
+              verticalPosition: "bottom", horizontalPosition: "center", items: items,
+              onSelectionChanged: (item, ...params) => { }
+            });
+          opt.titleActions = [item];
+        });
+      },
+      getElement: () => {
+        return document.querySelector(".sv-popup .sv-popup__container") as HTMLElement;
+      },
+      snapshot: "list-component-with-separator"
     }
   ]);
diff --git a/tests/markup/snapshots/list-component-with-separator.snap.html b/tests/markup/snapshots/list-component-with-separator.snap.html
@@ -0,0 +1,29 @@
+<div class="sv-popup__shadow">
+	<span class="sv-popup__pointer">
+	</span>
+	<div class="sv-popup__body-content">
+		<div class="sv-popup__scrolling-content">
+			<div class="sv-popup__content">
+				<div class="sv-list__container">
+					<div class="sv-list__empty-container" style="display:none;">
+						<div aria-label="No data to display" class="sv-list__empty-text">No data to display</div>
+					</div>
+					<ul class="sv-list" role="listbox">
+						<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
+							<div class="sv-list__item-body" style="padding-inline-start:16px;" title="text1">
+								<span class="sv-string-viewer">text1</span>
+							</div>
+						</li>
+						<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
+							<div class="sv-list__item-separator">
+							</div>
+							<div class="sv-list__item-body" style="padding-inline-start:16px;" title="text2">
+								<span class="sv-string-viewer">text2</span>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>