work for #8129 Popup submenu

surveyjs · Apr 26, 2024 · 47e3d19 · 47e3d19
1 parent 1fb0965
commit 47e3d19
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 0 deletions.
diff --git a/src/actions/action.ts b/src/actions/action.ts
@@ -154,6 +154,8 @@ export interface IAction {
   ariaRole?: string;
   elementId?: string;
   items?: Array<IAction>;
+  markerIconName?: string;
+  markerIconSize?: number;
 }
 
 export interface IActionDropdownPopupOptions extends IListModel, IPopupOptionsBase {
@@ -239,6 +241,8 @@ export abstract class BaseAction extends Base implements IAction {
   public removePriority: number;
   @property() iconName: string;
   @property() iconSize: number = 24;
+  @property() markerIconName: string;
+  @property() markerIconSize: number = 16;
   @property() css?: string
   minDimension: number;
   maxDimension: number;
@@ -378,13 +382,15 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
     return this.createLocalizableString("title", this, true);
   }
   public setItems(items: Array<IAction>, onSelectionChanged: (item: Action, ...params: any[]) => void): void {
+    this.markerIconName = "icon-next_16x16";
     this.component = "sv-list-item-group";
     const { innerPopupModel, listModel }: { innerPopupModel: PopupModel<any>, listModel: ListModel<Action> } =
       createPopupModelWithListModel(
         { items: items, onSelectionChanged: onSelectionChanged },
         { horizontalPosition: "right", showPointer: false }
       );
     innerPopupModel.cssClass = "sv-popup-inner";
+    listModel.searchEnabled = false;
     this.popupModel = innerPopupModel;
   }
 

diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss
@@ -109,6 +109,20 @@
   }
 }
 
+.sv-list-item__marker-icon {
+  float: right;
+  flex-shrink: 0;
+  padding: calcSize(0.5);
+
+  svg {
+    display: block;
+  }
+
+  use {
+    fill: $foreground-light;
+  }
+}
+
 [dir="rtl"],
 [style*="direction:rtl"],
 [style*="direction: rtl"] {

diff --git a/src/images/next_16x16.svg b/src/images/next_16x16.svg
diff --git a/src/knockout/components/list/list-item-group.html b/src/knockout/components/list/list-item-group.html
@@ -4,5 +4,8 @@
   <!-- /ko -->
   <!-- /ko -->
   <!-- ko template: { name: 'survey-string', data: $data.item.locTitle } --><!-- /ko -->
+  <!-- ko if: $data.item.markerIconName -->
+  <!-- ko component: { name: 'sv-svg-icon', params: { css: $data.item.cssClasses.itemMarkerIcon, iconName: $data.item.markerIconName, size: $data.item.markerIconSize } } --><!-- /ko -->
+  <!-- /ko -->
 </div>
 <sv-popup params="{ model: $data.item.popupModel, getTarget: $parent.getTarget }"></sv-popup>
diff --git a/src/list.ts b/src/list.ts
@@ -17,6 +17,7 @@ export let defaultListCss = {
   itemFocused: "sv-list__item--focused",
   itemTextWrap: "sv-list__item-text--wrap",
   itemIcon: "sv-list__item-icon",
+  itemMarkerIcon: "sv-list-item__marker-icon",
   itemSeparator: "sv-list__item-separator",
   itemBody: "sv-list__item-body",
   itemsContainer: "sv-list",
@@ -155,6 +156,9 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
     this.actions.forEach(action => {
       if (action === itemValue && !!itemValue.popupModel) {
         itemValue.popupModel.isVisible = true;
+        this.addScrollEventListener(() => {
+          itemValue.popupModel.isVisible = false;
+        });
         // itemValue.popupModel.isFocusedContent = !isUserAction || listModel.showFilter;
         // itemValue.popupModel.toggleVisibility();
         // listModel.scrollToSelectedItem();
@@ -325,6 +329,7 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
 
   public addScrollEventListener(handler: (e?: any) => void): void {
     if (!!handler) {
+      this.removeScrollEventListener();
       this.scrollHandler = handler;
     }
     if (!!this.scrollHandler) {