update list model (#9136)

* update list model * update list model --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Dec 5, 2024 · dbce751 · dbce751
1 parent 564765d
commit dbce751
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 20 deletions.
diff --git a/packages/survey-angular-ui/src/components/list/list-item-content.component.html b/packages/survey-angular-ui/src/components/list/list-item-content.component.html
@@ -2,6 +2,6 @@
 <svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="model.iconSize"
   sv-ng-svg-icon></svg>
 <sv-ng-string [model]="model.locTitle"></sv-ng-string>
-<svg *ngIf="model.markerIconName" [class]="model.cssClasses.itemMarkerIcon" [iconName]="model.markerIconName" [size]="model.markerIconSize"
+<svg *ngIf="model.markerIconName" [class]="model.cssClasses.itemMarkerIcon" [iconName]="model.markerIconName" [size]="'auto'"
   sv-ng-svg-icon></svg>
 </ng-template>
diff --git a/packages/survey-core/src/actions/action.ts b/packages/survey-core/src/actions/action.ts
@@ -156,7 +156,6 @@ export interface IAction {
   elementId?: string;
   items?: Array<IAction>;
   markerIconName?: string;
-  markerIconSize?: number;
   showPopup?: () => void;
   hidePopup?: () => void;
 }
@@ -247,7 +246,6 @@ export abstract class BaseAction extends Base implements IAction {
   @property() iconName: string;
   @property({ defaultValue: 24 }) iconSize: number | string;
   @property() markerIconName: string;
-  @property() markerIconSize: number = 16;
   @property() css?: string
   minDimension: number;
   maxDimension: number;

diff --git a/packages/survey-core/src/common-styles/sv-list.scss b/packages/survey-core/src/common-styles/sv-list.scss
@@ -116,6 +116,8 @@
 .sv-list-item__marker-icon {
   position: absolute;
   right: calcSize(1);
+  width: calcSize(2);
+  height: calcSize(2);
   flex-shrink: 0;
   padding: calcSize(0.5);
   box-sizing: content-box;
@@ -178,15 +180,13 @@ li:focus .sv-list__item.sv-list__item--selected {
   }
 }
 
-.sv-list__item.sv-list__item--selected.sv-list__item--group {
-  & > .sv-list__item-body {
-    background-color: $primary-light;
-    color: $font-questiontitle-color;
-    font-weight: 400;
+.sv-list__item--group-selected > .sv-list__item-body {
+  background-color: $primary-light;
+  color: $font-questiontitle-color;
+  font-weight: 400;
 
-    use {
-      fill: $foreground-light;
-    }
+  use {
+    fill: $foreground-light;
   }
 }
 

diff --git a/packages/survey-core/src/list.ts b/packages/survey-core/src/list.ts
@@ -14,6 +14,7 @@ export let defaultListCss = {
   loadingIndicator: "sv-list__loading-indicator",
   itemSelected: "sv-list__item--selected",
   itemGroup: "sv-list__item--group",
+  itemGroupSelected: "sv-list__item--group-selected",
   itemWithIcon: "sv-list__item--with-icon",
   itemDisabled: "sv-list__item--disabled",
   itemFocused: "sv-list__item--focused",
@@ -39,6 +40,7 @@ export interface IListModel {
   selectedItem?: IAction;
   elementId?: string;
   locOwner?: ILocalizableOwner;
+  cssClasses?: any;
   onFilterStringChangedCallback?: (text: string) => void;
   onTextSearchCallback?: (item: IAction, textToSearch: string) => boolean;
 }
@@ -243,13 +245,16 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
       .toString();
   }
   public getItemClass: (itemValue: T) => string = (itemValue: T) => {
+    const isSelected = this.isItemSelected(itemValue);
     return new CssClassBuilder()
       .append(this.cssClasses.item)
       .append(this.cssClasses.itemWithIcon, !!itemValue.iconName)
       .append(this.cssClasses.itemDisabled, this.isItemDisabled(itemValue))
       .append(this.cssClasses.itemFocused, this.isItemFocused(itemValue))
-      .append(this.cssClasses.itemSelected, this.isItemSelected(itemValue))
+      .append(this.cssClasses.itemSelected, !itemValue.hasSubItems && isSelected)
       .append(this.cssClasses.itemGroup, itemValue.hasSubItems)
+      .append(this.cssClasses.itemGroupSelected, itemValue.hasSubItems && isSelected)
+
       .append(this.cssClasses.itemHovered, itemValue.isHovered)
       .append(this.cssClasses.itemTextWrap, this.textWrapEnabled)
       .append(itemValue.css)
@@ -268,7 +273,7 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
     return this.isAllDataLoaded ? this.getLocalizationString("emptyMessage") : this.loadingText;
   }
   public get scrollableContainer(): HTMLElement {
-    return this.listContainerHtmlElement.querySelector("." + this.getDefaultCssClasses().itemsContainer);
+    return this.listContainerHtmlElement.querySelector("." + this.cssClasses.itemsContainer);
   }
   public get loadingText(): string {
     return this.getLocalizationString("loadingFile");
@@ -375,10 +380,10 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
     }
   }
   public scrollToFocusedItem(): void {
-    this.scrollToItem(this.getDefaultCssClasses().itemFocused);
+    this.scrollToItem(this.cssClasses.itemFocused);
   }
   public scrollToSelectedItem(): void {
-    this.scrollToItem(this.getDefaultCssClasses().itemSelected, 110);
+    this.scrollToItem(this.cssClasses.itemSelected, 110);
   }
 
   public addScrollEventListener(handler: (e?: any) => void): void {

diff --git a/packages/survey-react-ui/src/components/list/list-item-content.tsx b/packages/survey-react-ui/src/components/list/list-item-content.tsx
@@ -43,7 +43,7 @@ export class ListItemContent extends SurveyElementBase<IListItemProps, any> {
         key={"marker"}
         className={this.item.cssClasses.itemMarkerIcon}
         iconName={this.item.markerIconName}
-        size={this.item.markerIconSize}
+        size={"auto"}
       ></SvgIcon>;
       content.push(icon);
     }

diff --git a/packages/survey-vue3-ui/src/components/list/ListItemContent.vue b/packages/survey-vue3-ui/src/components/list/ListItemContent.vue
@@ -12,7 +12,7 @@
     v-if="item.markerIconName"
     v-bind:class="item.cssClasses.itemMarkerIcon"
     :iconName="item.markerIconName"
-    :size="item.markerIconSize"
+    :size="'auto'"
   ></SvComponent>
 </template>
 

diff --git a/src/knockout/components/list/list-item-content.html b/src/knockout/components/list/list-item-content.html
@@ -5,6 +5,6 @@
 <!-- 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 component: { name: 'sv-svg-icon', params: { css: $data.item.cssClasses.itemMarkerIcon, iconName: $data.item.markerIconName, size: 'auto' } } -->
 <!-- /ko -->
 <!-- /ko -->
diff --git a/src/vue/components/list/list-item.vue b/src/vue/components/list/list-item.vue
@@ -13,7 +13,7 @@
         :iconName="item.iconName" :size="item.iconSize"></sv-svg-icon>
       <survey-string v-if="isDefaultItem" :locString="item.locTitle" />
       <sv-svg-icon v-if="item.markerIconName" v-bind:class="item.cssClasses.itemMarkerIcon"
-        :iconName="item.markerIconName" :size="item.markerIconSize"></sv-svg-icon>
+        :iconName="item.markerIconName" :size="'auto'"></sv-svg-icon>
       <sv-popup v-if="item.popupModel && isDefaultItem" :model="item.popupModel"></sv-popup>
       <component v-if="item.component" :is="item.component" :item="item"> </component>
     </div>

diff --git a/tests/markup/snapshots/list-component-with-subitems.snap.html b/tests/markup/snapshots/list-component-with-subitems.snap.html
@@ -16,7 +16,7 @@
 					<li aria-selected="false" class="sv-list__item sv-list__item--group" role="option" tabindex="0">
 						<div class="sv-list__item-body" style="padding-inline-start:16px;" title="text2">
 							<span class="sv-string-viewer">text2</span>
-							<svg class="sv-list-item__marker-icon sv-svg-icon" role="img" style="height:16px; width:16px;">
+							<svg class="sv-list-item__marker-icon sv-svg-icon" role="img">
 								<use xlink:href="#icon-chevronright-16x16" class="">
 								</use>
 							</svg>