#5980 Hide toolbox submenu on unhover button

Fixes #5980
surveyjs · Oct 23, 2024 · b0761cf · b0761cf
1 parent 5e49775
commit b0761cf
Show file tree

Hide file tree

Showing 14 changed files with 34 additions and 52 deletions.
diff --git a/packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html b/packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html
@@ -2,6 +2,6 @@
   <svc-toolbox-item [model]="item" [viewModel]="viewModel" [creator]="creator" [isCompact]="isCompact"></svc-toolbox-item>
   <div class="svc-toolbox__item-submenu-button" (mouseover)="viewModel.onMouseOver(item, $event)">
     <svg [iconName]="item.subitemsButtonIcon" [size]="16" sv-ng-svg-icon></svg>
+    <sv-ng-popup [popupModel]="model.popupModel" [getArea]="model.getArea"></sv-ng-popup>
   </div>
-  <sv-ng-popup [popupModel]="model.popupModel" [getArea]="model.getArea"></sv-ng-popup>
 </ng-template>
diff --git a/packages/survey-creator-angular/src/toolbox/toolbox-tool.component.html b/packages/survey-creator-angular/src/toolbox/toolbox-tool.component.html
@@ -2,9 +2,7 @@
     <div [class]="itemCssClasses">
         <div class="svc-toolbox__category-separator" *ngIf="item.needSeparator && !creator.toolbox.showCategoryTitles">
         </div>
-        <div class="svc-toolbox__tool-content sv-action__content" (pointerdown)="model.onPointerDown($event)"
-            (mouseover)="model.onMouseOverTool(item, $event)"
-        (mouseleave)="model.onMouseLeave(item, $event)">
+        <div class="svc-toolbox__tool-content sv-action__content" (pointerdown)="model.onPointerDown($event)">
             <ng-template [component]="{ name: model.itemComponent, default: 'svc-toolbox-item', 
             data: { model: item, viewModel: model, creator: creator, isCompact: isCompact } }"></ng-template>
         </div>

diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js
@@ -23,8 +23,9 @@ var themeConstants = {
     "--ctr-toolbox-scrollbar-display": "none",
     "--ctr-toolbox-scroller-align-items": "flex-start",
     "--ctr-toolbox-item-submenu-button-right": "8px",
+    "--ctr-toolbox-item-submenu-button-top": "12px",
     "--ctr-toolbox-item-align": "stretch",
-    "--ctr-toolbox-submenu-offset": "13px",
+    "--ctr-toolbox-submenu-offset": "20px",
     "--ctr-toolbox-width-compact": "72px",
     "--ctr-toolbox-separator-width": "calc(100% + 8px)",
     "--ctr-toolbox-separator-width-compact": "40px",

diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox-tool.scss b/packages/survey-creator-core/src/components/toolbox/toolbox-tool.scss
@@ -151,11 +151,11 @@
     //   padding-inline-start: calcSize(4);
     // }
   }
-  .svc-toolbox__item-submenu-button {
-    background: var(--ctr-toolbox-item-submenu-button-background-color, $background-dim);
-    &:hover {
-      background: var(--ctr-toolbox-item-submenu-button-background-color-hovered, $background);
-    }
+}
+.svc-toolbox__item-submenu-button {
+  background: var(--ctr-toolbox-item-submenu-button-background-color, $background-dim);
+  &:hover {
+    background: var(--ctr-toolbox-item-submenu-button-background-color-hovered, $background);
   }
 }
 
@@ -218,7 +218,7 @@
 .svc-toolbox__item-submenu-button {
   position: absolute;
   inset-inline-end: var(--ctr-toolbox-item-submenu-button-right, calcSize(1.5));
-  top: calcSize(1.5);
+  top: var(--ctr-toolbox-item-submenu-button-top, calcSize(1.5));
   display: inline-flex;
   padding: var(--ctr-toolbox-item-submenu-button-padding-top, 4px)
     var(--ctr-toolbox-item-submenu-button-padding-right, 4px) var(--ctr-toolbox-item-submenu-button-padding-bottom, 4px)
@@ -228,7 +228,7 @@
   box-sizing: border-box;
   align-items: center;
   border-radius: var(--ctr-toolbox-item-submenu-button-corner-radius, 1024px);
-  z-index: 20;
+  z-index: 40;
   svg {
     fill: var(--ctr-toolbox-item-submenu-button-icon-color, $layer-1-foreground-50);
   }
@@ -276,8 +276,9 @@
 
 .svc-toolbox-subtypes {
   .sv-popup__container {
+    margin-top: calc(0px - var(--ctr-toolbox-submenu-group-margin-top, 0px) - var(--ctr-toolbox-item-padding-top, calcSize(1)));
     padding: 0;
-    padding-inline-start: var(--ctr-toolbox-submenu-offset, calcSize(0.5));
+    padding-inline-start: var(--ctr-toolbox-submenu-offset, calcSize(3.5));
     box-shadow: unset;
     background: unset;
   }
@@ -301,10 +302,10 @@
   }
 
   .sv-popup__scrolling-content {
-    padding-top: calc(var(--ctr-toolbox-submenu-group-margin-top, 12px));
-    padding-inline-end: var(--ctr-toolbox-submenu-group-margin-right, 12px);
-    padding-bottom: var(--ctr-toolbox-submenu-group-margin-bottom-last, 12px);
-    padding-inline-start: var(--ctr-toolbox-submenu-group-margin-left, 12px);
+    padding-top: calc(var(--ctr-toolbox-submenu-group-margin-top, 0px));
+    padding-inline-end: var(--ctr-toolbox-submenu-group-margin-right, 0px);
+    padding-bottom: var(--ctr-toolbox-submenu-group-margin-bottom-last, 0px);
+    padding-inline-start: var(--ctr-toolbox-submenu-group-margin-left, 0px);
     overflow: visible;
   }
 

diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox-tool.ts b/packages/survey-creator-core/src/components/toolbox/toolbox-tool.ts
@@ -53,9 +53,6 @@ export class ToolboxToolViewModel extends Base {
   public onMouseOver(itemValue, mouseoverEvent) {
     this.model.mouseOverHandler(itemValue);
   }
-  public onMouseOverTool(itemValue, mouseoverEvent) {
-    if (itemValue.popupModel?.isVisible) this.onMouseOver(itemValue, mouseoverEvent);
-  }
 
   public onMouseLeave(itemValue, mouseoverEvent) {
     itemValue.hidePopupDelayed(this.creator.toolbox.subItemsHideDelay);

diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox.scss b/packages/survey-creator-core/src/components/toolbox/toolbox.scss
@@ -207,7 +207,6 @@ svc-toolbox {
 .svc-toolbox__search-container {
   position: sticky;
   top: 0;
-  z-index: 30;
   display: none;
   flex-direction: column;
   box-sizing: border-box;

diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
@@ -6,8 +6,9 @@ const Theme = {
     "--ctr-toolbox-scrollbar-display": "none",
     "--ctr-toolbox-scroller-align-items": "flex-start",
     "--ctr-toolbox-item-submenu-button-right": "8px",
+    "--ctr-toolbox-item-submenu-button-top": "12px",
     "--ctr-toolbox-item-align": "stretch",
-    "--ctr-toolbox-submenu-offset": "13px",
+    "--ctr-toolbox-submenu-offset": "20px",
     "--ctr-toolbox-width-compact": "72px",
     "--ctr-toolbox-separator-width": "calc(100% + 8px)",
     "--ctr-toolbox-separator-width-compact": "40px",
@@ -436,16 +437,12 @@ const Theme = {
     "--ctr-toolbox-group-header-margin-bottom": "var(--sjs-spacing-x1)",
     "--ctr-toolbox-separator-padding-left-compact": "var(--sjs-spacing-x2)",
     "--ctr-toolbox-separator-padding-right-compact": "var(--sjs-spacing-x2)",
-    "--ctr-font-large-size": "var(--sjs-font-size-x4)",
-    "--ctr-font-large-line-height": "var(--sjs-line-height-x5)",
     "--ctr-font-medium-size": "var(--sjs-font-size-x3)",
     "--ctr-font-medium-line-height": "var(--sjs-line-height-x4)",
     "--ctr-font-default-size": "var(--sjs-font-size-x2)",
     "--ctr-font-default-line-height": "var(--sjs-line-height-x3)",
     "--ctr-font-small-size": "var(--sjs-font-size-x150)",
     "--ctr-font-small-line-height": "var(--sjs-line-height-x2)",
-    "--ctr-font-code-size": "var(--sjs-font-size-x2)",
-    "--ctr-font-code-line-height": "var(--sjs-line-height-x3)",
     "--ctr-survey-checkboxes-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
     "--ctr-survey-radio-button-group-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
     "--ctr-survey-radio-button-group-item-background-color-floating": "var(--sjs-layer-1-background-500)",
@@ -505,7 +502,6 @@ const Theme = {
     "--ctr-toolbox-item-background-color-submenu": "var(--sjs-layer-1-background-500)",
     "--ctr-toolbox-item-text-color-submenu": "var(--sjs-layer-2-foreground-100)",
     "--ctr-toolbox-min-width": "var(--sjs-size-x32)",
-    "--ctr-font-default-line-height-all-caps": "var(--sjs-line-height-x2)",
     "--ctr-page-banner-background-color": "var(--sjs-secondary-background-500)",
     "--ctr-page-banner-text-color": "var(--sjs-secondary-foreground-100)",
     "--ctr-toolbox-group-padding-left-compact": "var(--sjs-spacing-x150)",

diff --git a/packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html b/packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html
@@ -3,5 +3,5 @@
 <div class="svc-toolbox__item-submenu-button"
   data-bind="event: { mouseover: onMouseOver }">
   <!-- ko component: { name: 'sv-svg-icon', params: { iconName: item.subitemsButtonIcon, size: 16 } } --><!-- /ko -->
-</div>
-<sv-popup params="{ model: $data.item.popupModel, getArea: $data.item.getArea }"></sv-popup>
+  <sv-popup params="{ model: $data.item.popupModel, getArea: $data.item.getArea }"></sv-popup>
+</div>
diff --git a/packages/survey-creator-knockout/src/toolbox/toolbox-tool.html b/packages/survey-creator-knockout/src/toolbox/toolbox-tool.html
@@ -4,7 +4,7 @@
     <div class="svc-toolbox__category-separator"></div>
     <!-- /ko -->
     <div class="svc-toolbox__tool-content sv-action__content"
-        data-bind="event: { pointerdown: (model, event)=>{onPointerDown(event); return true;}, mouseover: function(model, event) { onMouseOverTool(model.item, event); return true; }, mouseleave: function(model, event) { onMouseLeave(model.item, event); return true; } }">
+        data-bind="event: { pointerdown: (model, event)=>{onPointerDown(event); return true;} }">
         <!-- ko component: { name: $data.itemComponent, params: { model: $data, item: $data.item, creator: $data.creator, isCompact: $data.isCompact } } -->
         <!-- /ko -->
     </div>

diff --git a/packages/survey-creator-react/src/toolbox/ToolboxItem.tsx b/packages/survey-creator-react/src/toolbox/ToolboxItem.tsx
@@ -85,12 +85,6 @@ export class SurveyCreatorToolboxTool extends CreatorModelElement<
             event.persist();
             this.model.onPointerDown(event);
           }}
-          onMouseOver={(event: any) => {
-            this.model.onMouseOverTool(item, event);
-          }}
-          onMouseLeave={(event: any) => {
-            this.model.onMouseLeave(item, event);
-          }}
         >
           {itemComponent}
         </div>

diff --git a/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx b/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx
@@ -38,8 +38,8 @@ export class SurveyCreatorToolboxItemGroup extends CreatorModelElement<ISurveyCr
         onMouseLeave={(event: any) => this.model.onMouseLeave(this.item, event)}
       >
         <SvgIcon size={24} iconName={this.item.subitemsButtonIcon} ></SvgIcon>
+        <Popup model={this.item.popupModel} getArea={this.item.getArea} />
       </div>
-      <Popup model={this.item.popupModel} getArea={this.item.getArea} />
     </>;
   }
 }

diff --git a/packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue b/packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue
@@ -8,12 +8,12 @@
   ></SvComponent>
   <div class="svc-toolbox__item-submenu-button" @mouseover="hover">
     <SvComponent :is="'sv-svg-icon'" :iconName="item.subitemsButtonIcon" :size="item.iconSize"></SvComponent>
+    <SvComponent
+      :is="'sv-popup'"
+      :model="item.popupModel"
+      :getArea="item.getArea"
+    ></SvComponent>
   </div>
-  <SvComponent
-    :is="'sv-popup'"
-    :model="item.popupModel"
-    :getArea="item.getArea"
-  ></SvComponent>
 </template>
 <script lang="ts" setup>
 import { SvComponent } from "survey-vue3-ui";

diff --git a/packages/survey-creator-vue/src/toolbox/ToolboxTool.vue b/packages/survey-creator-vue/src/toolbox/ToolboxTool.vue
@@ -7,16 +7,6 @@
     <div
       class="svc-toolbox__tool-content sv-action__content"
       @pointerdown="model?.onPointerDown"
-      @mousemove="
-        (e) => {
-          model?.onMouseOverTool(item, e);
-        }
-      "
-      @mouseleave="
-        (e) => {
-          model?.onMouseLeave(item, e);
-        }
-      "
     >
       <SvComponent
         :viewModel="model"

diff --git a/testCafe/designer/toolbox.ts b/testCafe/designer/toolbox.ts
@@ -355,6 +355,12 @@ test("toolbox subTypes: add items by drag-n-drop", async (t) => {
     .hover(getToolboxItemByText("Rating Scale").parent(".svc-toolbox__tool").find(".svc-toolbox__item-submenu-button"))
     .wait(400)
     .expect(toolboxSubTypesPopup.visible).ok()
+    .hover(getToolboxItemByText("Rating Scale").parent(".svc-toolbox__tool"))
+    .wait(400)
+    .expect(toolboxSubTypesPopup.visible).notOk()
+    .hover(getToolboxItemByText("Rating Scale").parent(".svc-toolbox__tool").find(".svc-toolbox__item-submenu-button"))
+    .wait(400)
+    .expect(toolboxSubTypesPopup.visible).ok()
 
     .hover(getSubToolboxItemByText("Smileys"), { speed: 0.1 })
     .wait(400)