Survey Creator - A new theme

packages/survey-creator-angular/src/page-navigator/page-navigator.component.html

@@ -1,8 +1,8 @@
 <ng-template #template>
   <div class="svc-page-navigator" #container [visible]="model.visible">
-      <div class="svc-page-navigator__selector"
-          (click)="model.togglePageSelector($event)" [key2click] [attr.title]="model.pageSelectorCaption" [class.svc-page-navigator__selector--opened]="model.isPopupOpened">
-          <svg class="svc-page-navigator__navigator-icon" [iconName]="model.icon" [size]="'auto'" sv-ng-svg-icon></svg>
+      <div class="svc-page-navigator__selector svc-page-navigator__button"
+          (click)="model.togglePageSelector($event)" [key2click] [attr.title]="model.pageSelectorCaption" [class.svc-page-navigator__button--pressed]="model.isPopupOpened">
+          <svg class="svc-page-navigator__button-icon" [iconName]="model.icon" [size]="'auto'" sv-ng-svg-icon></svg>
           <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
       </div>
       <div>

packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html

@@ -24,7 +24,7 @@
     </svc-page-navigator>
   </div>
   <div *ngIf="model.hasToolbar" class="svc-tab-designer__toolbar">
-    <sv-action-bar [model]="model.actionContainer"></sv-action-bar>
+    <sv-action-bar [model]="model.surfaceToolbar"></sv-action-bar>
   </div>
 </ng-template>
 

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

@@ -225,6 +225,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     const actionContainer = new SurveyElementActionContainer();
     actionContainer.dotsItem.iconSize = "auto" as any;
     actionContainer.dotsItem.popupModel.horizontalPosition = "center";
+    actionContainer.dotsItem.popupModel.cssClass += " svc-creator-popup";
     return actionContainer;
   }
   private dragCollapsedTimer;

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

@@ -6,7 +6,7 @@ svc-page-navigator,
   flex-direction: column;
 }
 
-.svc-page-navigator__navigator-icon {
+.svc-page-navigator__button-icon {
   display: block;
   width: var(--ctr-page-navigator-button-icon-width, calcSize(3));
   height: var(--ctr-page-navigator-button-icon-height, calcSize(3));
@@ -26,36 +26,38 @@ svc-page-navigator,
   }
 }
 
-.svc-page-navigator__selector {
-  width: calcSize(5.5);
-  height: calcSize(5.5);
-  min-height: calcSize(5.5);
-}
+.svc-page-navigator__button {
+  --ctr-page-navigator-button-double-padding: calc(2 * var(--ctr-page-navigator-button-padding));
+  --ctr-page-navigator-button-width: calc(
+    var(--ctr-page-navigator-button-icon-width) + var(--ctr-page-navigator-button-double-padding)
+  );
+  --ctr-page-navigator-button-height: calc(
+    var(--ctr-page-navigator-button-icon-height) + var(--ctr-page-navigator-button-double-padding)
+  );
+  width: var(--ctr-page-navigator-button-width, calcSize(5.5));
+  height: var(--ctr-page-navigator-button-height, calcSize(5.5));
+
+  padding: 0;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  &:hover,
+  &:focus {
+    outline: none;
+
+    .svc-page-navigator__button-icon {
+      background-color: var(--ctr-page-navigator-button-background-color-hovered, $primary-light);
 
-survey-creator,
-.svc-creator {
-  .svc-page-navigator__selector {
-    padding: 0;
-    border: none;
-    background-color: transparent;
-    &:hover,
-    &:focus {
-      outline: none;
-
-      .svc-page-navigator__navigator-icon {
-        background-color: var(--ctr-page-navigator-button-background-color-hovered, $primary-light);
-
-        use {
-          fill: var(--ctr-page-navigator-button-icon-color-hovered, $primary);
-        }
+      use {
+        fill: var(--ctr-page-navigator-button-icon-color-hovered, $primary);
       }
     }
   }
 }
 
-.svc-page-navigator__selector--opened {
-  .svc-page-navigator__navigator-icon {
-    background-color: $primary-light;
+.svc-page-navigator__button--pressed {
+  .svc-page-navigator__button-icon {
+    background: var(--ctr-page-navigator-button-background-color-pressed, $primary-light);
     opacity: var(--ctr-page-navigator-button-opacity-pressed, 0.5);
 
     use {
@@ -80,13 +82,12 @@ survey-creator,
   padding: calcSize(16.5) 0;
   top: 0;
   bottom: 0;
-  right: calcSize(1.5);
+  right: var(--ctr-page-navigator-padding-right, calcSize(1.5));
 }
 
 .svc-page-navigator {
-  padding: calcSize(1.5);
-  padding-right: 0;
-  width: calcSize(5.5);
+  padding: var(--ctr-page-navigator-padding-top, calcSize(1.5)) 0
+    var(--ctr-page-navigator-padding-bottom, calcSize(1.5)) var(--ctr-page-navigator-padding-left, calcSize(1.5));
 }
 
 .svc-creator__toolbox--right,
@@ -102,12 +103,12 @@ survey-creator,
 
   .svc-tab-designer__page-navigator {
     right: unset;
-    left: calcSize(1.5);
+    left: var(--ctr-page-navigator-padding-left, calcSize(1.5));
   }
 
   .svc-page-navigator {
-    padding: calcSize(1.5);
-    padding-left: 0;
+    padding: var(--ctr-page-navigator-padding-top, calcSize(1.5)) var(--ctr-page-navigator-padding-right, calcSize(1.5))
+      var(--ctr-page-navigator-padding-bottom, calcSize(1.5)) 0;
   }
 }
 

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

@@ -32,11 +32,10 @@
     }
   }
 
+  &.sv-popup--overlay .sv-popup__container {
+    background-color: var(--ctr-popup-haze-background-color, $background-semitransparent);
+  }
   &.sv-popup--overlay:not(.sv-popup--dropdown-overlay) {
-    .sv-popup__container {
-      background: var(--ctr-popup-haze-background-color, $background-semitransparent);
-    }
-
     .sv-popup__body-content {
       background-color: var(--ctr-popup-background-color, $background-dim);
     }
@@ -51,10 +50,14 @@
   .sv-popup__pointer {
     &:after {
       content: " ";
-      border-bottom: calcSize(1) solid var(--ctr-contextual-menu-pointer-color, $background);
+      border-bottom: calcSize(1) solid var(--ctr-popup-menu-pointer-color, $background);
     }
   }
 
+  .sv-popup__container {
+    background-color: transparent;
+  }
+
   .sv-popup__body-header {
     @include ctrMediumBoldFont;
     color: var(--ctr-popup-title-color, $foreground);
@@ -73,7 +76,7 @@
 
   &.sv-popup--dropdown {
     .sv-popup__body-content {
-      background-color: var(--ctr-contextual-menu-background-color, $background);
+      background-color: var(--ctr-popup-menu-background-color, $background);
     }
   }
 
@@ -89,7 +92,6 @@
   }
 
   .sv-list__filter {
-    background-color: var(--ctr-contextual-menu-background-color, $background);
     border-bottom: 1px solid var(--ctr-list-search-border-color, $border-inside);
 
     .sv-list__input {
@@ -118,6 +120,8 @@
     fill: var(--ctr-list-item-icon-color, $foreground-light);
   }
 
+  .sv-list__item:focus > .sv-list__item-body,
+  .sv-list__item:hover > .sv-list__item-body,
   .sv-list__item--hovered > .sv-list__item-body {
     color: var(--ctr-list-item-text-color-hovered, $foreground);
     background: var(--ctr-list-item-background-color-hovered, $background-dark);
@@ -128,6 +132,8 @@
   }
 
   .sv-list__item--selected,
+  .sv-list__item--selected:hover,
+  .sv-list__item--selected:focus,
   .sv-list__item.sv-list__item--selected:hover {
     & > .sv-list__item-body {
       @include ctrDefaultBoldFont;
@@ -149,12 +155,21 @@
       .sv-list__item-icon use {
         fill: var(--ctr-list-item-icon-color-selected-submenu, $foreground-light);
       }
+
       .sv-list-item__marker-icon use {
         fill: var(--ctr-list-item-submenu-arrow-color-selected-item-submenu, $foreground-light);
       }
     }
   }
 
+  .sv-list__item.sv-action-bar-item--secondary:focus,
+  .sv-list__item.sv-action-bar-item--secondary:hover,
+  .sv-list__item.sv-action-bar-item--secondary {
+    .sv-list__item-icon use {
+      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
+    }
+  }
+
   //styles for dropdown overlay
   &.sv-popup--dropdown-overlay {
     .sv-popup__button.sv-popup__button {
@@ -173,9 +188,6 @@
         var(--ctr-popup-menu-footer-padding-bottom, calcSize(1)) var(--ctr-popup-menu-footer-padding-left, 0);
     }
 
-    .sv-list__empty-container {
-      background-color: var(--ctr-contextual-menu-background-color, $background);
-    }
 
     .sv-popup__button:disabled {
       color: var(--ctr-actionbar-button-text-color-disabled, $foreground);

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

@@ -469,7 +469,8 @@ svc-question {
     height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
   }
 
-  use {
+  .sv-list__item:hover > .sv-list__item-body .sv-svg-icon use,
+  .sv-svg-icon use {
     fill: $secondary;
   }
 }
@@ -1281,7 +1282,6 @@ svc-question,
   }
 }
 
-
 .sd-panel {
   .svc-row {
     margin-top: calcSize(1);

packages/survey-creator-core/src/components/side-bar/tab-control.scss

@@ -110,6 +110,15 @@
   width: 100%;
 }
 
+.svc-sidebar__header--tabbed,
+.svc-sidebar__header-container {
+  min-height: calc(
+    var(--ctr-menu-toolbar-button-icon-height) + var(--ctr-menu-toolbar-button-padding-top) +
+      var(--ctr-menu-toolbar-button-padding-bottom) + var(--ctr-menu-toolbar-padding-vertical) +
+      var(--ctr-menu-toolbar-padding-vertical)
+  );
+}
+
 .svc-sidebar__header-container.svc-sidebar__header-container--with-subtitle {
   padding: var(--ctr-property-grid-header-padding-top-with-subtitle, 6px)
     var(--ctr-property-grid-header-padding-right, 16px)

packages/survey-creator-core/src/components/tabbed-menu/tabbed-menu-item.scss

@@ -1,6 +1,9 @@
 @import "../../variables.scss";
 
 .svc-tabbed-menu-item {
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--ctr-menu-toolbar-button-icon-height) + var(--ctr-menu-item-padding-top) + var(--ctr-menu-item-padding-bottom));
   padding: var(--ctr-menu-item-padding-top, 20px) var(--ctr-menu-item-padding-right, 24px) var(--ctr-menu-item-padding-bottom, 20px) var(--ctr-menu-item-padding-left, 24px) ;
   box-sizing: border-box;
   cursor: pointer;
@@ -9,7 +12,7 @@
   &:hover,
   &:focus {
     background-color: var(--ctr-menu-item-background-color-hovered, $background-dim);
-    box-shadow: inset 0px -1px 0px $border;
+    box-shadow: inset 0px -1px 0px var(--ctr-menu-border-color, $border);
     outline: none;
   }
 }

packages/survey-creator-core/src/components/tabs/designer-plugin.ts

@@ -161,8 +161,8 @@ export class TabDesignerPlugin implements ICreatorPlugin {
 
     const settingsAction = new MenuButton({
       id: "theme-settings",
-      locTooltipName: "pe.tabs.creatorSettingTitle",
-      iconName: "icon-config",
+      locTooltipName: "ed.creatorSettingTitle",
+      iconName: "gear-24x24",
       iconSize: "auto",
       pressed: false,
       action: () => {

packages/survey-creator-core/src/components/tabs/designer.scss

@@ -127,10 +127,12 @@ svc-tab-designer {
   position: absolute;
   bottom: calcSize(0);
   right: 0;
+}
 
-  .sv-action-bar {
-    padding: calcSize(1.5);
-    gap: calcSize(1);
-    flex-direction: column;
-  }
+.svc-tab-designer__surface-toolbar {
+  padding: var(--ctr-surface-toolbar-padding-top, calcSize(1.5))
+    var(--ctr-surface-toolbar-padding-right, calcSize(1.5)) var(--ctr-surface-toolbar-padding-bottom, calcSize(1.5))
+    var(--ctr-surface-toolbar-padding-left, calcSize(1.5));
+  gap: var(--ctr-surface-toolbar-gap, calcSize(1));
+  flex-direction: column;
 }

packages/survey-creator-core/src/components/tabs/designer.ts

@@ -20,7 +20,7 @@ export class TabDesignerViewModel extends Base {
   @property() showPlaceholder: boolean;
   public creator: SurveyCreatorModel;
 
-  public actionContainer: ActionContainer;
+  public surfaceToolbar: ActionContainer;
 
   public get displayPageDropTarget() {
     return this.pagesController.page2Display === this.newPage ? "newGhostPage" : this.pagesController.page2Display.name;
@@ -75,24 +75,24 @@ export class TabDesignerViewModel extends Base {
     this.initSurvey();
   }
   private initToolbar() {
-    this.actionContainer = new ActionContainer();
+    this.surfaceToolbar = new ActionContainer();
     const action = (action) => { this.creator.onSurfaceToolbarActionExecuted.fire(this.creator, { action: action }); };
 
     let defaultActionBarCss = {
-      root: "sv-action-bar",
+      root: "sv-action-bar svc-tab-designer__surface-toolbar",
       defaultSizeMode: "",
       smallSizeMode: "",
-      item: "svc-page-navigator__selector",
+      item: "svc-page-navigator__button",
       itemWithTitle: "",
       itemAsIcon: "",
       itemActive: "",
       itemPressed: "",
-      itemIcon: "svc-page-navigator__navigator-icon",
+      itemIcon: "svc-page-navigator__button-icon",
       itemTitleWithIcon: "",
     };
-    this.actionContainer.cssClasses = defaultActionBarCss;
+    this.surfaceToolbar.cssClasses = defaultActionBarCss;
 
-    this.actionContainer.setItems([{
+    this.surfaceToolbar.setItems([{
       id: "collapseAll",
       locTooltipName: "ed.collapseAllTooltip",
       iconName: "icon-collapseall-24x24",

packages/survey-creator-core/src/tabbed-menu.ts

@@ -51,6 +51,7 @@ export class TabbedMenuContainer extends AdaptiveActionContainer<TabbedMenuItem>
   constructor(private creator: CreatorBase) {
     super();
     this.dotsItem.popupModel.horizontalPosition = "center";
+    this.dotsItem.popupModel.cssClass += " svc-tabbed-menu-item__popup svc-creator-popup";
     this.minVisibleItemsCount = 1;
   }
   public addTab(name: string,