From 7a8b2809f58379fa96a113bb2c40095178f0e583 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Thu, 23 May 2024 15:57:46 +0300 Subject: [PATCH] work for #8129 Popup submenu --- .../components/list/list-item.component.html | 3 +- .../src/components/list/ListItem.vue | 1 + src/common-styles/sv-list.scss | 11 ++++--- src/knockout/components/list/list-item.html | 5 +-- src/react/components/list/list-item.tsx | 1 + src/vue/components/list/list-item.vue | 3 +- tests/markup/etalon_components.ts | 31 +++++++++++++++++-- .../list-component-with-separator.snap.html | 29 +++++++++++++++++ 8 files changed, 73 insertions(+), 11 deletions(-) create mode 100644 tests/markup/snapshots/list-component-with-separator.snap.html 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 index b147f8f5b9..2543f38e93 100644 --- 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 @@
-
+
diff --git a/packages/survey-vue3-ui/src/components/list/ListItem.vue b/packages/survey-vue3-ui/src/components/list/ListItem.vue index 2eb4b5a9ee..ed32710780 100644 --- 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)" > diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss index 5d3e51585d..064f26df8d 100644 --- 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 index 5bf28c78f4..898d1ae994 100644 --- a/src/knockout/components/list/list-item.html +++ b/src/knockout/components/list/list-item.html @@ -1,9 +1,10 @@
  • +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); } }"> +
    -
    +
    diff --git a/src/react/components/list/list-item.tsx b/src/react/components/list/list-item.tsx index 0fc457afc1..e9e7324d72 100644 --- 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 { style={contentWrapStyle} className={this.model.cssClasses.itemBody} title={this.item.locTitle.calculatedText} + onMouseOver={(event: any) => { this.model.onItemHover(this.item); }} > {newElement}
    ; diff --git a/src/vue/components/list/list-item.vue b/src/vue/components/list/list-item.vue index 51001a832a..8ba454de94 100644 --- a/src/vue/components/list/list-item.vue +++ b/src/vue/components/list/list-item.vue @@ -6,7 +6,8 @@
    + :title="item.locTitle.calculatedText" + @mouseover="(e) => model.onItemHover(item)"> diff --git a/tests/markup/etalon_components.ts b/tests/markup/etalon_components.ts index 83fb985a77..02d1a3c9c3 100644 --- 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 new file mode 100644 index 0000000000..b1765b73f7 --- /dev/null +++ b/tests/markup/snapshots/list-component-with-separator.snap.html @@ -0,0 +1,29 @@ +
    + + +
    +
    +
    +
    + +
      +
    • +
      + text1 +
      +
      • +
    • +
      +
      +
      + text2 +
      +
      • +
    +
    +
    +
    +
    +
    \ No newline at end of file