Adorner actions appear at center when removing the Convert To action (#…

…5344) * Adorner actions appear at center when removing the Convert To action Fixes #5334 * №5334 - fixed style * #5275 add class and simplify rule Fixes #5275 --------- Co-authored-by: Aleksey Novikov <novikov@abrisplatform.com>
surveyjs · Mar 21, 2024 · b9be320 · b9be320
1 parent 9ef1d8c
commit b9be320
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 4 deletions.
diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -200,7 +200,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "duplicate",
         iconName: "icon-duplicate_16x16",
-        css: "sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
         title: this.creator.getLocString("survey.duplicate"),
         visibleIndex: 10,
         iconSize: 16,
@@ -214,7 +214,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "settings",
         iconName: "icon-settings_16x16",
-        css: "sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
         title: this.creator.getLocString("ed.settings"),
         locTooltipName: "ed.settingsTooltip",
         visibleIndex: 20,
@@ -232,7 +232,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "delete",
         iconName: "icon-delete_16x16",
-        css: "sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
         //needSeparator: items.length > 0,
         title: this.creator.getLocString("pe.delete"),
         visibleIndex: 30,

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -162,6 +162,11 @@ svc-question {
   .sv-action--convertTo-last {
     margin-inline-end: auto; // margin-right
   }
+
+  .svc-action-bar-item--right:first-of-type
+  {
+   margin-inline-start: auto;
+  }
 
   .sv-dots {
     width: calcSize(4);

diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
@@ -418,7 +418,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       id: "isrequired",
       ariaChecked: <any>new ComputedUpdater<boolean>(() => this.isRequired),
       ariaRole: "checkbox",
-      css: "sv-action-bar-item--secondary",
+      css: "svc-action-bar-item--right sv-action-bar-item--secondary",
       title: this.creator.getLocString("pe.isRequired"),
       visibleIndex: 20,
       iconName: "icon-required",

diff --git a/...gressionTests/tests/designer/etalons/question-adorner-with-hidden-converter.png b/...gressionTests/tests/designer/etalons/question-adorner-with-hidden-converter.png
diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts
@@ -1705,6 +1705,30 @@ test("Question adorners for different sizes", async (t) => {
   });
 });
 
+test("Question adorner - hide converter", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1767, 1900);
+    await ClientFunction(() => {
+      (<any>window).creator.onDefineElementMenuItems.add((sender, options) => {
+        const convertToAction = options.items.filter(item => item.id === "convertTo")[0];
+        options.items.splice(options.items.indexOf(convertToAction), 1);
+      });
+    })();
+    const json = {
+      elements: [
+        {
+          type: "boolean",
+          name: "question1"
+        }
+      ]
+    };
+    await setJSON(json);
+    const qContent = Selector(".svc-question__content");
+    await t.click(qContent.nth(0), { offsetX: 5, offsetY: 5 });
+    await takeElementScreenshot("question-adorner-with-hidden-converter.png", qContent.nth(0), t, comparer);
+  });
+});
+
 test("Narrow question placeholder", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await t.resizeWindow(1000, 1000);