diff --git a/functionalTests/designer/add-new-question.ts b/functionalTests/designer/add-new-question.ts index ebc5ceba3c..252a468b3c 100644 --- a/functionalTests/designer/add-new-question.ts +++ b/functionalTests/designer/add-new-question.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON } from "../helper"; +import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON, getQuestionBarItemByTitle } from "../helper"; const title = "Add new question"; @@ -159,13 +159,13 @@ test("Add New Question with sub type", async t => { await t.expect(resultJson).eql(expectedJson); await t - .click(getBarItemByTitle("Rating Scale")) + .click(getQuestionBarItemByTitle("Rating Scale")) .hover(getListItemByText("Single-Line Input").filterVisible()) .wait(400) .click(getListItemByText("Password").nth(1)) .expect(getVisibleElement(".svc-question__content").count).eql(1) - .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Single-Line Input") - .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Password"); + .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Single-Line Input") + .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Password"); expectedJson = { "logoPosition": "right", @@ -186,13 +186,13 @@ test("Add New Question with sub type", async t => { await t.expect(resultJson).eql(expectedJson); await t - .click(getBarItemByTitle("Single-Line Input")) + .click(getQuestionBarItemByTitle("Single-Line Input")) .hover(getListItemByText("Single-Line Input").filterVisible()) .wait(400) .click(getListItemByText("Rating Scale")) .expect(getVisibleElement(".svc-question__content").count).eql(1) - .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Rating Scale") - .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Labels"); + .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Rating Scale") + .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Labels"); expectedJson = { "logoPosition": "right", diff --git a/functionalTests/designer/question-wrapper.ts b/functionalTests/designer/question-wrapper.ts index e30c01ec14..5d6237939a 100644 --- a/functionalTests/designer/question-wrapper.ts +++ b/functionalTests/designer/question-wrapper.ts @@ -377,7 +377,7 @@ test("No tab stop in dynamic panel", async (t) => { .expect(Selector(".svc-question__content--panel .svc-action-button").withText("Add Question").focused).ok() .pressKey("tab") .pressKey("tab") - .expect(Selector(".svc-question__content--panel .sv-action-bar-item").withText("Panel").focused).ok(); + .expect(Selector(".svc-question__content--panel .svc-survey-element-toolbar__item").withText("Panel").focused).ok(); }); test("Question adorner - collapse button in differen modes", async (t) => { diff --git a/functionalTests/designer/responsiveness.ts b/functionalTests/designer/responsiveness.ts index 9d8b4ea5fa..169df6fd90 100644 --- a/functionalTests/designer/responsiveness.ts +++ b/functionalTests/designer/responsiveness.ts @@ -244,14 +244,14 @@ test("test tab for mobile devices", async (t) => { .expect(creatorFooterToolbarActions.nth(0).id).eql("svd-designer") .expect(creatorFooterToolbarActions.nth(1).id).eql("svd-preview") .expect(creatorFooterToolbarActions.nth(2).id).eql("prevPage") - .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(2).hasAttribute("disabled")).eql(true) + .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(true) .expect(creatorFooterToolbarActions.nth(3).id).eql("nextPage") - .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(3).hasAttribute("disabled")).eql(false) + .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(false) .expect(creatorFooterToolbarActions.nth(4).id).eql("showInvisible") .click(creatorFooterToolbarActions.nth(3)) - .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(2).hasAttribute("disabled")).eql(false) - .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(3).hasAttribute("disabled")).eql(true) + .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(false) + .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(true) .resizeWindow(1920, 900) .expect(testTabToolbar.exists).ok() diff --git a/functionalTests/designer/surface.ts b/functionalTests/designer/surface.ts index ced35609e0..a435d972e3 100644 --- a/functionalTests/designer/surface.ts +++ b/functionalTests/designer/surface.ts @@ -390,9 +390,9 @@ test("Check page adorner state is restored after shrink and stretch", async (t) }; await setJSON(json); await t.click(".svc-page", { offsetX: 3, offsetY: 3 }); - await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok(); + await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok(); await t.resizeWindow(500, 1080); - await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).notOk(); + await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).notOk(); await t.resizeWindow(1920, 1080); - await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok(); + await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok(); }); \ No newline at end of file diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts index 215437304b..db6e760a32 100644 --- a/functionalTests/helper.ts +++ b/functionalTests/helper.ts @@ -119,6 +119,9 @@ export function getPropertyGridCategory(categoryName) { export function getBarItemByTitle(text: string) { return Selector(".sv-action-bar-item[title=\"" + text + "\"]"); } +export function getQuestionBarItemByTitle(text: string) { + return Selector(".svc-survey-element-toolbar__item[title=\"" + text + "\"]"); +} export function getListItemByText(text) { return Selector(".sv-popup__content .sv-list .sv-list__item").withText(text).filterVisible(); } diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss index 5f362949a3..fc53562886 100644 --- a/packages/survey-creator-core/src/components/page.scss +++ b/packages/survey-creator-core/src/components/page.scss @@ -69,13 +69,30 @@ svc-page { .svc-page-toolbar__item { @include defaultActionButtonSettings; - --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2); - margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5)); + --thm-survey-question-panel-toolbar-item-padding-top: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-top) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) + ); + --thm-survey-question-panel-toolbar-item-padding-right: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-right) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + --thm-survey-question-panel-toolbar-item-padding-bottom: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-bottom) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom) + ); + --thm-survey-question-panel-toolbar-item-padding-left: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-left) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left) + ); + + --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2); + margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5)); border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5)); - padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1)); + padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1)); justify-content: center; align-items: center; @@ -84,11 +101,16 @@ svc-page { } .svc-page-toolbar__item--with-text { - padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1)); - gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5)); + --thm-survey-question-panel-toolbar-item-padding-right: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + --thm-survey-question-panel-toolbar-item-gap: calc( + var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + + padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1)); + gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5)); } .svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item { @@ -127,22 +149,18 @@ svc-page { } .svc-page-toolbar-item__icon { - --ctr-survey-page-toolbar-item-icon-width: calc( + --thm-survey-page-toolbar-item-icon-width: calc( var(--ctr-survey-question-panel-toolbar-item-icon-container-width) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-left) ); - --ctr-survey-page-toolbar-item-icon-height: calc( + --thm-survey-page-toolbar-item-icon-height: calc( var(--ctr-survey-question-panel-toolbar-item-icon-container-height) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom) ); - width: var(--ctr-survey-page-toolbar-item-icon-width, calcSize(2)); - height: var(--ctr-survey-page-toolbar-item-icon-height, calcSize(2)); - padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, 0) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, 0) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, 0) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, 0); + width: var(--thm-survey-page-toolbar-item-icon-width, calcSize(2)); + height: var(--thm-survey-page-toolbar-item-icon-height, calcSize(2)); } .svc-page-toolbar-item__icon use { diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index bead07243f..7c97fd9ba1 100644 --- a/packages/survey-creator-core/src/components/question.scss +++ b/packages/survey-creator-core/src/components/question.scss @@ -54,13 +54,30 @@ svc-question { .svc-survey-element-toolbar__item { @include defaultActionButtonSettings; - --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2); - margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5)); + --thm-survey-question-panel-toolbar-item-padding-top: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-top) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) + ); + --thm-survey-question-panel-toolbar-item-padding-right: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-right) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + --thm-survey-question-panel-toolbar-item-padding-bottom: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-bottom) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom) + ); + --thm-survey-question-panel-toolbar-item-padding-left: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-left) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left) + ); + --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2); + + margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5)); border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.25)); - padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1)); + padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1)); justify-content: center; align-items: center; @@ -72,19 +89,15 @@ svc-question { } .svc-survey-element-toolbar__item--with-text { - padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5)) - var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1)) - var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5)) - var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5)); - gap: var(--ctr-survey-question-panel-toolbar-item-gap, 0); -} - -.sv-dots__item.svc-survey-element-toolbar__item, -.svc-survey-element-toolbar__item--icon { - padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5)) - var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5)) - var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5)) - var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5)); + --thm-survey-question-panel-toolbar-item-padding-right: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + --thm-survey-question-panel-toolbar-item-gap: calc( + var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1)); + gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5)); } .svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item { @@ -96,14 +109,25 @@ svc-question { } .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text { + --thm-survey-question-panel-toolbar-item-padding-left: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-left) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left-with-text) + ); + --thm-survey-question-panel-toolbar-item-gap: calc( + var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left) + ); + flex-direction: row-reverse; + padding-inline-start: var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1)); + gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5)); +} + +.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon { padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5)) var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5)) var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5)) - var(--ctr-survey-question-panel-toolbar-item-padding-left-with-text, calcSize(1)); -} + var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5)); -.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon { .svc-survey-element-toolbar-item__icon { padding: 0; width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3)); @@ -159,10 +183,6 @@ svc-question { width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2)); height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2)); - padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5)) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5)) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5)) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5)); } .svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use { diff --git a/packages/survey-creator-core/src/responsivity.scss b/packages/survey-creator-core/src/responsivity.scss index e768c7a026..7fd4e418d1 100644 --- a/packages/survey-creator-core/src/responsivity.scss +++ b/packages/survey-creator-core/src/responsivity.scss @@ -117,24 +117,24 @@ .svc-question__content-actions { width: calc(100% + 3 * #{$base-unit}); - .sv-action-bar-item { + .svc-survey-element-toolbar__item { border: 0; } } .svc-page__content-actions { - .sv-action-bar { + .svc-page-toolbar { padding-right: calcSize(1); .sv-action { .sv-action__content { padding-right: 0; - - .sv-action-bar-item__title--with-icon { - display: none; - } } } } } + + .svc-page-toolbar-item__title--with-icon { + display: none; + } } \ No newline at end of file