Fix pages more button

Author: dk981234

packages/survey-creator-core/src/components/action-container-view-model.ts

@@ -64,19 +64,23 @@ export class SurveyElementActionContainer extends AdaptiveActionContainer {
       this.setModeForActions(true);
       return;
     }
+    if(this.visibleActions.length > 1) {
+      this.visibleActions.forEach((item) => {
+        if (item.id == "convertTo") {
+          item.mode = "small";
+          return;
+        }
+        if (item.id == "convertInputType") {
+          item.mode = "removed";
+          return;
+        }
+        item.mode = "popup";
+      });
+      this.dotsItem.visible = true;
+    } else {
+      this.visibleActions.forEach(i => i.mode = "small");
+    }
 
-    this.visibleActions.forEach((item) => {
-      if (item.id == "convertTo") {
-        item.mode = "small";
-        return;
-      }
-      if (item.id == "convertInputType") {
-        item.mode = "removed";
-        return;
-      }
-      item.mode = "popup";
-    });
-    this.dotsItem.visible = true;
     this.hiddenItemsListModel.setItems(items.filter(i => i.mode == "popup").map(i => i.innerItem));
   }
 }

packages/survey-creator-core/src/components/page.scss

@@ -109,6 +109,19 @@ svc-page {
   .sv-action {
     pointer-events: all;
   }
+  & > .sv-dots {
+    width: auto;
+    .sv-dots__item {
+      width: auto;
+    }
+    &.sv-action--hidden {
+      width: 0;
+    }
+    .svc-list__item-icon {
+      width: var(--ctr-list-item-icon-width-small, var(--sjs-font-size-x2));
+      height: var(--ctr-list-item-icon-height-small, var(--sjs-font-size-x2));
+    }
+  }
 }
 
 .svc-page-toolbar--collapse {
@@ -138,7 +151,7 @@ svc-page {
     var(--ctr-survey-question-panel-toolbar-gap, var(--lbr-spacing-x1)) / 2
   );
   margin: 0 var(--thm-survey-question-panel-toolbar-button-gap);
-  border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, var(--lbr-corner-radius-x05));
+  border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, var(--lbr-corner-radius-x075));
   padding: var(--thm-survey-question-panel-toolbar-item-padding-top)
     var(--thm-survey-question-panel-toolbar-item-padding-right)
     var(--thm-survey-question-panel-toolbar-item-padding-bottom)
@@ -171,7 +184,6 @@ svc-page {
     opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
     use {
       fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf));
-      opacity: 0.5;
     }
   }
 
@@ -264,8 +276,6 @@ svc-page {
   }
 
   & > .svc-question__drag-area {
-    z-index: 1;
-
     .svc-question__drag-element {
       width: var(--ctr-survey-page-drag-indicator-width, var(--lbr-size-x3));
       height: var(--ctr-survey-page-drag-indicator-height, var(--lbr-size-x2));

packages/survey-creator-core/src/components/question.scss

@@ -56,6 +56,7 @@ svc-question {
 
 .svc-survey-element-toolbar__item {
   @include defaultActionButtonSettings;
+  --thm-icon-color: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394ff));
   --thm-survey-question-panel-toolbar-button-gap: calc(
     var(--ctr-survey-question-panel-toolbar-gap, var(--lbr-spacing-x1)) / 2
   );
@@ -72,7 +73,7 @@ svc-question {
   background-color: transparent;
   transition: background $creator-transition-duration, opacity $creator-transition-duration;
   use {
-    fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394ff));
+    fill: var(--thm-icon-color);
   }
   //hovered and focused state
   &:hover,
@@ -84,10 +85,11 @@ svc-question {
   &:active,
   &.svc-survey-element-toolbar__item--pressed {
     opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, var(--sjs-layer-1-background-400, #f5f5f5ff));
+    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed,
+        var(--sjs-layer-1-background-400, #f5f5f5ff));
+
     use {
       fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf));
-      opacity: 0.45;
     }
   }
 
@@ -144,9 +146,7 @@ svc-question {
   }
 }
 
-
-.svc-survey-element-toolbar-item__icon,
-.svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
+.svc-survey-element-toolbar-item__icon {
   box-sizing: border-box;
   display: block;
   padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, var(--lbr-spacing-x05)) 
@@ -388,11 +388,8 @@ svc-question {
   }
 
   .svc-survey-element-toolbar-item__icon:last-child {
+    --thm-icon-color: var(--sjs-primary-background-500, #19b394);
     margin-inline-start: 0;
-
-    use {
-      fill: var(--sjs-primary-background-500, #19b394);
-    }
   }
 }
 
@@ -434,10 +431,12 @@ svc-question {
         var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, var(--lbr-spacing-x05))
     );
   }
-
-  .svc-list__item:hover > .svc-list__item-body .sv-svg-icon use,
-  .sv-svg-icon use {
-    fill: var(--sjs-secondary-background-500, #19b394ff);
+  .svc-list__item {
+    &, &:hover {
+      & > .svc-list__item-body .sv-svg-icon use {
+        fill: var(--sjs-secondary-background-500, #19b394ff);
+      }
+    }
   }
 }
 

packages/survey-creator-core/src/themes/predefined-themes/v2-24.css

@@ -431,7 +431,7 @@
   --ctr-list-item-icon-color-disabled: var(--sjs-layer-1-foreground-75);
   --ctr-editor-button-background-color-hovered: var(--sjs-layer-3-background-400);
   --ctr-survey-page-toolbar-item-background-color-hovered: var(--sjs-primary-background-10);
-  --ctr-survey-page-toolbar-item-corner-radius: var(--lbr-corner-radius-x05);
+  --ctr-survey-page-toolbar-item-corner-radius: var(--lbr-corner-radius-x075);
   --ctr-list-search-icon-color: var(--sjs-layer-1-foreground-75);
   --ctr-caption-with-actions-text-color: var(--sjs-layer-1-foreground-50);
   --ctr-label-text-color: var(--sjs-layer-1-foreground-50);
@@ -755,7 +755,7 @@
   --ctr-expression-item-background-color-button-hovered: var(--sjs-primary-background-500);
   --ctr-expression-item-border-color-editing: var(--sjs-semantic-blue-background-500);
   --ctr-expression-item-text-color-function: var(--sjs-layer-3-foreground-100);
-  --ctr-data-table-background-color: var(--sjs-layer-1-background-400);
+  --ctr-data-table-background-color: var(--sjs-layer-1-background-500);
   --ctr-data-table-border-color: var(--sjs-border-25);
   --ctr-data-table-border-width: var(--sjs-stroke-x1);
   --ctr-separator-width: var(--sjs-stroke-x1);
@@ -2778,8 +2778,8 @@
   --lbr-step-progress-bar-padding-right-fit-to-survey-with-number: var(--lbr-spacing-x1n);
   --lbr-step-progress-bar-width: var(--lbr-size-x80);
   --ctr-toolbox-min-width: var(--sjs-size-x20);
-  --ctr-popup-menu-margin-top-tablet: var(--sjs-spacing-x8);
-  --ctr-popup-menu-margin-bottom-tablet: var(--sjs-spacing-x8);
+  --ctr-popup-menu-margin-top-tablet: var(--sjs-spacing-x3);
+  --ctr-popup-menu-margin-bottom-tablet: var(--sjs-spacing-x3);
   --ctr-popup-menu-margin-left-tablet: var(--sjs-spacing-x3);
   --ctr-popup-menu-margin-right-tablet: var(--sjs-spacing-x3);
   --ctr-popup-menu-max-width-tablet: var(--sjs-size-x40);
@@ -2864,7 +2864,7 @@
   --lbr-page-loading-padding-bottom: var(--lbr-spacing-x8);
   --lbr-page-loading-loading-icon-width: var(--lbr-size-x12);
   --lbr-page-loading-loading-icon-height: var(--lbr-size-x12);
-  --lbr-page-loading-loading-icon-circle-color: var(--sjs-layer-1-foreground-100);
+  --lbr-page-loading-loading-icon-circle-color: var(--sjs-layer-3-foreground-100);
   --lbr-page-loading-loading-icon-circle-color-spin: var(--sjs-primary-background-500);
   --lbr-page-loading-title-color: var(--sjs-layer-3-foreground-100);
   --lbr-page-loading-padding-top: var(--lbr-spacing-x3);
@@ -3447,5 +3447,10 @@
   --ctr-info-panel-padding-bottom: var(--sjs-spacing-x3);
   --ctr-info-panel-corner-radius: var(--sjs-corner-radius-x1);
   --ctr-info-panel-text-color-primary: var(--sjs-layer-3-foreground-100);
+  --ctr-surface-placeholder-image-max-width: var(--sjs-size-x43);
+  --lbr-popup-menu-background-color-global: var(--sjs-layer-3-background-500);
+  --lbr-list-item-text-color-action: var(--sjs-primary-background-500);
+  --ctr-list-item-icon-width-small: var(--sjs-font-size-x2);
+  --ctr-list-item-icon-height-small: var(--sjs-font-size-x2);
 }