#8129 - hover styles

surveyjs · May 23, 2024 · 15cc176 · 15cc176
1 parent 0d8bfef
commit 15cc176
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 5 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
@@ -4,7 +4,8 @@
     <div [class]="listModel.cssClasses.itemSeparator"></div>
     </ng-container>
     <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft" [attr.title]="model.locTitle.calculatedText"
-    (mouseover)="listModel.onItemHover(model)">
+    (mouseover)="listModel.onItemHover(model)"
+    (mouseleave)="listModel.onItemLeave(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
@@ -21,6 +21,7 @@
       v-bind:class="model.cssClasses.itemBody"
       :title="item.locTitle.calculatedText"
       @mouseover="(e) => model.onItemHover(item)"
+      @mouseover="(e) => model.onItemLeave(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
@@ -56,7 +56,9 @@
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
-  transition: background-color $transition-duration, color $transition-duration;
+  transition:
+    background-color $transition-duration,
+    color $transition-duration;
 }
 
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
@@ -80,6 +82,7 @@
   outline: none;
 }
 
+.sv-list__item--hovered > .sv-list__item-body,
 .sv-list__item-body:hover,
 .sv-list__item-body:focus {
   background-color: $background-dark;
@@ -251,4 +254,4 @@ li:focus .sv-list__item.sv-list__item--selected {
 
 .sv-list__loading-indicator .sv-list__item-body {
   background-color: transparent;
-}
+}
diff --git a/src/knockout/components/list/list-item.html b/src/knockout/components/list/list-item.html
@@ -4,7 +4,7 @@
   <!-- 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 }, event: { mouseover: function(m, e) { $data.hover(e, $data); return true; } }">
+  <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; }, mouseleave: function(m, e) { $data.leave(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/knockout/components/list/list-item.ts b/src/knockout/components/list/list-item.ts
@@ -21,6 +21,9 @@ ko.components.register("sv-list-item", {
           if (event.type === "mouseover") {
             data.model.onItemHover(data.item);
           }
+        },
+        leave: (event: MouseEvent, data: any) => {
+          data.model.onItemLeave(data.item);
         }
       };
     },

diff --git a/src/list.ts b/src/list.ts
@@ -16,6 +16,7 @@ export let defaultListCss = {
   itemWithIcon: "sv-list__item--with-icon",
   itemDisabled: "sv-list__item--disabled",
   itemFocused: "sv-list__item--focused",
+  itemHovered: "sv-list__item--hovered",
   itemTextWrap: "sv-list__item-text--wrap",
   itemIcon: "sv-list__item-icon",
   itemMarkerIcon: "sv-list-item__marker-icon",
@@ -199,6 +200,9 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
   public onItemHover = (itemValue: T): void => {
     this.mouseOverHandler(itemValue);
   }
+  public onItemLeave(itemValue: T) {
+    itemValue.hidePopupDelayed(this.subItemsHideDelay);
+  }
 
   public isItemDisabled: (itemValue: T) => boolean = (itemValue: T) => {
     return itemValue.enabled !== undefined && !itemValue.enabled;
@@ -229,6 +233,7 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
       .append(this.cssClasses.itemDisabled, this.isItemDisabled(itemValue))
       .append(this.cssClasses.itemFocused, this.isItemFocused(itemValue))
       .append(this.cssClasses.itemSelected, this.isItemSelected(itemValue))
+      .append(this.cssClasses.itemHovered, itemValue.isHovered)
       .append(this.cssClasses.itemTextWrap, this.textWrapEnabled)
       .append(itemValue.css)
       .toString();

diff --git a/src/vue/components/list/list-item.vue b/src/vue/components/list/list-item.vue
@@ -7,7 +7,8 @@
 
     <div :style="{ paddingInlineStart: model.getItemIndent(item) }" v-bind:class="model.cssClasses.itemBody"
       :title="item.locTitle.calculatedText"
-      @mouseover="(e) => model.onItemHover(item)">
+      @mouseover="(e) => model.onItemHover(item)"
+      @mouseleave="(e) => model.onItemLeave(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" />