PR: Creator: Hover Animations

packages/survey-creator-angular/src/panel.component.html

@@ -6,6 +6,10 @@
 
     <div [class]="adorner.css()" [key2click]="{ disableTabStop: true }"
       (click)="adorner.element.isInteractiveDesignElement ? adorner.select(adorner, $event) : null">
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging && adorner.element.isInteractiveDesignElement" class="svc-question__drag-area"
         (pointerdown)="adorner.onPointerDown($event)">
         <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"

packages/survey-creator-angular/src/question.component.html

@@ -5,6 +5,10 @@
     [attr.data-sv-drop-target-survey-element]="adorner.element.name || null" #container>
 
     <div [class]="adorner.css()" [key2click]="{ disableTabStop: true }" (click)="adorner.select(adorner, $event)">
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
         <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
           sv-ng-svg-icon></svg>

packages/survey-creator-angular/src/row.component.html

@@ -1,5 +1,7 @@
 <ng-template #template>
   <div [class]="model.cssClasses">
+    <div class="svc-row__drop-indicator svc-row__drop-indicator--top"></div>
+    <div class="svc-row__drop-indicator svc-row__drop-indicator--bottom"></div>
     <sv-ng-row [row]="row"></sv-ng-row>
   </div>
 </ng-template>

packages/survey-creator-angular/src/string-editor.component.html

@@ -1,10 +1,8 @@
 <ng-template #template>
   <span [class]="className">
     <span class="svc-string-editor__content">
-        <div class="svc-string-editor__border">
-          <svg [iconName]="'icon-arrow-up'" class="svc-string-editor__button svc-string-editor__button--edit" [size]="24" sv-ng-svg-icon 
-            (click)="edit($event)" [iconName]="'icon-edit'" [size]="16"></svg>
-        </div>
+      <div class="svc-string-editor__border svc-string-editor__border--hover"></div>
+        <div class="svc-string-editor__border svc-string-editor__border--focus"></div>
         <span class="svc-string-editor__input">
           <span role="textbox" *ngIf="!locString.hasHtml" class="sv-string-editor" spellcheck="false"
               (focus)="onFocus($event)" (paste)="onPaste($event)" (blur)="onBlur($event)"  (input)="baseModel.onInput($event)" (keydown)="baseModel.onKeyDown($event)" (keyup)="baseModel.onKeyUp($event)" (compositionstart)="baseModel.onCompositionStart($event)" (compositionend)="baseModel.onCompositionEnd($event)" (mouseup)="baseModel.onMouseUp($event)" (click)="edit($event)" [textContent]="locString.renderedHtml" [attr.aria-placeholder]="placeholder" [attr.contenteditable]="contentEditable" #container></span>

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

@@ -162,4 +162,8 @@ survey-creator {
 .sv-drag-drop-ghost--item-value-bottom {
   top: initial;
   bottom: calcSize(-0.5);
+}
+
+.svc-creator--disable-animations {
+  --sjs-creator-transition-duration: 0ms;
 }

packages/survey-creator-core/src/components/header/logo-image.scss

@@ -47,6 +47,7 @@
   align-items: center;
   margin-right: calcSize(-2);
   border-radius: calcSize(4);
+  transition: background-color $creator-transition-duration, opacity $creator-transition-duration;
 
   &:hover {
     background-color: var(--ctr-survey-header-logo-placeholder-background-color-hovered, $primary-light);
@@ -64,6 +65,7 @@
 }
 
 .svc-logo-image-placeholder use {
+  transition: fill $creator-transition-duration;
   fill: var(--ctr-survey-header-logo-placeholder-icon-color, $foreground-light);
 }
 

packages/survey-creator-core/src/components/image-item-value.scss

@@ -45,13 +45,16 @@
 
 .svc-image-item-value--new .svc-image-item-value-controls__button {
   background-color: transparent;
+  transition: background-color $creator-transition-duration;
 }
 
 .svc-image-item-value-controls__add {
   background-color: transparent;
+  transition: background-color $creator-transition-duration;
 
   use {
     fill: $primary;
+    transition: fill $creator-transition-duration;
   }
 
   &:hover,

packages/survey-creator-core/src/components/item-value.scss

@@ -63,6 +63,7 @@
   outline: none;
   height: calcSize(2);
   box-sizing: content-box;
+  transition: background $creator-transition-duration, background-color $creator-transition-duration;
 
   .sv-svg-icon {
     display: block;
@@ -75,12 +76,13 @@
 
 .svc-item-value-controls__drag-icon {
   display: block;
+  transition: opacity $creator-transition-duration;
 }
 
 .svc-item-value-wrapper:hover:not(.svc-item-value--ghost),
 .svc-item-value-controls__drag:hover:not(.svc-item-value--ghost) {
   .svc-item-value-controls__drag-icon {
-    visibility: visible;
+    opacity: 1;
   }
 }
 
@@ -90,7 +92,7 @@
   opacity: 0.25;
 
   .svc-item-value-controls__drag-icon {
-    visibility: hidden;
+    opacity: 0;
   }
 
   use {
@@ -266,7 +268,7 @@
     }
 
     .svc-item-value-controls__drag-icon {
-      visibility: visible;
+      opacity: 1;
     }
 
     .svc-item-value-wrapper {
@@ -280,7 +282,7 @@
   .sd-selectbase,
   .svc-question__dropdown-choices {
     .svc-item-value-controls__drag-icon {
-      visibility: visible;
+      opacity: 1;
     }
 
     .svc-item-value-wrapper {

packages/survey-creator-core/src/components/matrix-cell.scss

@@ -14,7 +14,8 @@
 
 .svc-question__adorner {
   .sd-table .sd-table__cell--column-title {
-    padding: 0  calcSize(1);
+    padding: 0 calcSize(1);
+
     .svc-matrix-cell {
       padding: calcSize(1.5) calcSize(1);
     }
@@ -30,23 +31,25 @@
   right: calcSize(0);
   bottom: calcSize(0);
   display: none;
+
   &.svc-visible {
     display: block;
   }
 }
 
-.svc-hovered > .svc-matrix-cell--selected:not(.svc-visible) {
+.svc-hovered>.svc-matrix-cell--selected:not(.svc-visible) {
   border: calcSize(0.25) solid $secondary-light;
   border-radius: calcSize(0.5);
   display: block;
 }
 
 .svc-matrix-cell__question-controls {
-  display: none;
+  opacity: 0;
   position: absolute;
   top: calc(50% - 3 * #{$base-unit});
   left: calc(50% - 3 * #{$base-unit});
   z-index: 2;
+  transition: opacity $creator-transition-duration;
 }
 
 .svc-matrix-cell__question-controls-button {
@@ -66,7 +69,7 @@
 }
 
 .svc-matrix-cell:hover .svc-matrix-cell__question-controls {
-  display: block;
+  opacity: 1;
 }
 
 .svc-question__content--in-popup {

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

@@ -82,9 +82,7 @@ svc-page-navigator-item,
   background-color: var(--ctr-page-navigator-item-background-color-hovered, $background);
   border-radius: calcSize(12.5);
   box-shadow: $shadow-medium;
-  transition:
-    max-width 0.1s ease-in-out,
-    padding 0.2s ease-in-out;
+  transition: opacity $creator-transition-duration;
 
   .svc-page-navigator-item__dot {
     position: absolute;

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

@@ -13,9 +13,11 @@ svc-page-navigator,
   padding: calcSize(1.25);
   border-radius: 50%;
   cursor: pointer;
+  transition: background-color $creator-transition-duration;
 
   use {
     fill: var(--ctr-page-navigator-button-icon-color, $foreground-light);
+    transition: fill $creator-transition-duration;
   }
 }
 

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

@@ -24,6 +24,7 @@ svc-page {
   box-sizing: border-box;
   width: 100%;
   outline: none;
+  transition: background $creator-transition-duration, box-shadow $creator-transition-duration;
 
   .sd-page {
     margin: 0;
@@ -33,15 +34,17 @@ svc-page {
 
 .svc-page__content-actions {
   position: absolute;
-  visibility: hidden;
+  opacity: 0;
   top: calcSize(1);
   inset-inline-end: 0; // right
   padding: 0 calcSize(1.5) 0 calcSize(1);
   z-index: 1;
+  transition: opacity $creator-transition-duration;
 
   .sv-action-bar-separator {
     margin: 0 calcSize(1);
   }
+
   h4.sd-title {
     .sv-string-editor {
       &[aria-placeholder]:empty:before {
@@ -56,6 +59,7 @@ svc-page {
     border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, 4px);
     background-color: transparent;
     color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
+    transition: background-color $creator-transition-duration;
   }
 
   .sv-action-bar-item__icon {
@@ -131,12 +135,14 @@ svc-page {
   &::after {
     display: none;
   }
+
   &.svc-page__content--selected {
     box-shadow: 0 0 0 2px $secondary;
     background: $secondary-backcolor-semi-light;
   }
+
   .svc-page__content-actions {
-    visibility: visible;
+    opacity: 1;
   }
 }
 
@@ -154,10 +160,12 @@ svc-page {
     box-sizing: content-box;
     pointer-events: none;
   }
+
   &.svc-page__content--collapsed-drag-over-inside {
     box-shadow: 0 0 0 2px $primary;
     background: $primary-light;
     animation: collapsed-drag-over-inside-blinking 1s infinite;
+
     &::after {
       border: 2px $primary solid;
       background: $primary-light;
@@ -178,6 +186,8 @@ svc-page {
   &.svc-creator .svc-page .svc-page__content--selected:focus,
   .svc-hovered.svc-page__content {
     &.svc-page__content--selected {
+      box-shadow: 0 0 0 2px inset $secondary;
+
       box-shadow: 0 0 0 2px inset var(--ctr-survey-page-border-color-selected, $secondary);
       background: var(--ctr-survey-page-background-color-selected, $secondary-backcolor-semi-light);
 
@@ -186,6 +196,7 @@ svc-page {
       }
     }
   }
+
   .svc-page__content:not(.svc-page__content--new):focus,
   .svc-hovered.svc-page__content:not(.svc-page__content--new) {
     box-shadow: 0 0 0 2px inset $secondary-light;
@@ -230,6 +241,7 @@ svc-page {
   cursor: pointer;
   margin-inline-end: calcSize(1); // margin-right
   outline: none;
+  transition: background-color $creator-transition-duration;
 
   use {
     fill: var(--ctr-library-contextual-button-icon-color, $foreground-light);
@@ -285,63 +297,75 @@ svc-page {
       pointer-events: none;
     }
 
-    .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body {
+    .sv-list__item.sv-list__item--selected.sv-list__item--group>.sv-list__item-body {
       background-color: $primary;
       color: $primary-foreground;
       font-weight: 600;
     }
 
-    .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use {
+    .sv-list__item.sv-list__item--selected.sv-list__item--group>.sv-list__item-body use {
       fill: $background;
     }
   }
 }
+
 .svc-page__content--collapsed {
-  & > * {
+  &>* {
     display: none;
   }
+
   .svc-page__content-actions {
     display: block;
   }
+
   .sd-page {
     display: flex;
-    & > * {
+
+    &>* {
       display: none;
     }
+
     .sd-title {
       display: block;
     }
   }
 }
+
 .svc-page__content.svc-page__content--collapsed {
   .sd-page {
     padding-bottom: 0;
   }
 }
+
 .svc-creator .svc-page {
   .svc-page__content--collapse-always {
     .svc-page__content-actions {
-      visibility: visible;
+      opacity: 1;
+
       .sv-action {
         visibility: hidden;
       }
+
       .sv-action.sv-action-bar-item--collapse {
         visibility: visible;
+
         .sv-action-bar-separator {
           visibility: hidden;
         }
       }
     }
+
     &.svc-page__content--selected,
     &.svc-hovered {
       .svc-page__content-actions {
         .sv-action {
           visibility: visible;
+
           .sv-action-bar-separator {
             visibility: visible;
           }
         }
       }
     }
   }
-}
+}

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

@@ -90,6 +90,7 @@
 
   .sv-list__item-body {
     color: var(--ctr-list-item-text-color, $foreground-dim);
+    transition: background-color $creator-transition-duration, color $creator-transition-duration;
   }
 
   .sv-list__item-icon use {