Feature/cv2 2057 (surveyjs#2073)

* Work for surveyjs#2057: add styles for imagepicker in new theme * Work for surveyjs#2057: fix some styles for imagepicker in designer * Work surveyjs#2057: add colCount support * Work for surveyjs#2057: fix col-3 width in imagepicker * Fix f-f tests Co-authored-by: Dmitry Kuzin (Devexpress) <dmitry.kuzin@devexpress.com>
SPSCommerce · Oct 21, 2021 · e4e3736 · e4e3736
1 parent 964a4ba
commit e4e3736
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 21 deletions.
diff --git a/packages/survey-creator-core/src/components/image-item-value.scss b/packages/survey-creator-core/src/components/image-item-value.scss
@@ -6,12 +6,13 @@
   padding-top: 10px;
 }
 
-.svc-question__content--selected .svc-image-item-value-wrapper {
-  border: 1px dashed $border;
-}
-
 .svc-image-item-value--new {
   display: none;
+  height: max-content;
+  .sd-imagepicker__image {
+    box-sizing: border-box;
+    border: 1px dashed $border;
+  }
 }
 
 .svc-question__content--selected .svc-image-item-value--new {
@@ -88,7 +89,11 @@
   height: 1px;
   overflow: hidden;
 }
-
+.svc-image-item-value__item {
+  .sd-imagepicker__item.sd-imagepicker__item {
+    width: 100%;
+  }
+}
 
 .svc-question__content--selected .svc-image-item-value-wrapper:hover {
   .svc-image-item__drag-element {
@@ -103,7 +108,8 @@
   border: 1px solid $border;
   border-radius: 10px;
   position: absolute;
-  top: 5px;
-  left: 38%;
+  top: 1px;
+  left: 50%;
+  transform: translateX(-50%);
   display: none;
-}
+}
diff --git a/packages/survey-creator-core/src/components/tabs/logic.scss b/packages/survey-creator-core/src/components/tabs/logic.scss
@@ -17,7 +17,7 @@
   display: none;
 }
 .sl-table__row:hover #remove-row,
-#remove-row:focus-within {
+.sl-table__row #remove-row:focus-within {
   .sv-action-bar-item {
     padding: calcSize(0.25);
     border: none;

diff --git a/packages/survey-creator-core/src/survey-designer-theme/blocks/sd-imagepicker.scss b/packages/survey-creator-core/src/survey-designer-theme/blocks/sd-imagepicker.scss
@@ -1,7 +1,67 @@
+@import "../../variables.scss";
+
 .sd-imagepicker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
   padding: 0;
   border: none;
-  .sd-imagepicker__image {
-    display: block;
+  width: 100%;
+  margin: 0;
+}
+.sd-imagepicker__item {
+  img {
+    border-radius: calcSize(0.5);
+  }
+}
+.sd-imagepicker__control + div {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sd-imagepicker__item--checked .sd-imagepicker__control + div::before {
+  display: block;
+  position: absolute;
+  content: ' ';
+  top: 8px;
+  right: 8px;
+  width: 48px;
+  height: 48px;
+  box-sizing: border-box;
+  border-radius: 100px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='17' viewBox='0 0 23 17' fill='none'%3E%3Cpath d='M8.33331 16.1L0.333313 8L2.43331 5.9L8.33331 11.9L20.2333 0L22.3333 2.1L8.33331 16.1Z' fill='%2319B394'/%3E%3C/svg%3E");  
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 22px 16px;
+  background-color: white;
+}
+.sd-imagepicker__item--allowhover {
+  .sd-imagepicker__image:hover {
+    opacity: 0.5;
   }
 }
+.sd-imagepicker__image {
+  display: block;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.sd-imagepicker__text {
+  line-height: 24px;
+  margin-top: 8px;
+}
+.sd-imagepicker__item.sv-q-col-1 {
+  width: 100%;
+}
+.sd-imagepicker__item.sv-q-col-2 {
+  width: calc(50% - calc(1 * #{$base-unit}));
+}
+.sd-imagepicker__item.sv-q-col-3 {
+  width: calc(33% - calc(4/3 * #{$base-unit}));
+}
+.sd-imagepicker__item.sv-q-col-4 {
+  width: calc(25% - calc(6/4 * #{$base-unit}));
+}
+.sd-imagepicker__item.sv-q-col-5 {
+  width: calc(20% - calc(8/5 * #{$base-unit}));
+}
diff --git a/packages/survey-creator-core/src/survey-designer-theme/blocks/sd-question.scss b/packages/survey-creator-core/src/survey-designer-theme/blocks/sd-question.scss
@@ -66,3 +66,6 @@
 .sd-question__required-text {
   vertical-align: top;
 }
+.sd-question__form-group {
+  margin-top: calcSize(2);
+}
diff --git a/packages/survey-creator-core/src/survey-designer-theme/blocks/sd-selectbase.scss b/packages/survey-creator-core/src/survey-designer-theme/blocks/sd-selectbase.scss
@@ -47,3 +47,6 @@
   box-sizing: border-box;
   word-break: break-word;
 }
+.sd-selectbase__other {
+    margin-top: calcSize(2);
+}
diff --git a/packages/survey-creator-core/src/survey-designer-theme/survey-designer.ts b/packages/survey-creator-core/src/survey-designer-theme/survey-designer.ts
@@ -86,6 +86,7 @@ export var surveyDesignerCss = {
     description: "sd-description sd-question__description",
     descriptionUnderInput: "sd-description sd-question__description",
     comment: "sd-input sd-comment",
+    other: "sd-input sd-comment",
     required: "sd-question--required",
     titleRequired: "sd-question__title--required",
     indent: 20,
@@ -117,7 +118,7 @@ export var surveyDesignerCss = {
     itemDecorator: "sd-item__svg sd-checkbox__svg",
     controlLabel: "sd-item__control-label",
     materialDecorator: "sd-item__decorator sd-checkbox__decorator",
-    other: "sd-input sd-comment sd-question__other",
+    other: "sd-input sd-comment sd-selectbase__other",
     column: "sd-selectbase__column"
   },
   radiogroup: {
@@ -133,7 +134,7 @@ export var surveyDesignerCss = {
     itemDecorator: "sd-item__svg sd-radio__svg",
     controlLabel: "sd-item__control-label",
     materialDecorator: "sd-item__decorator sd-radio__decorator",
-    other: "sd-input sd-comment sd-question__other",
+    other: "sd-input sd-comment sd-selectbase__other",
     clearButton: "sd-btn sd-selectbase__clear-btn",
     column: "sd-selectbase__column"
   },
@@ -171,7 +172,7 @@ export var surveyDesignerCss = {
     small: "sd-row__question--small",
     control: "sd-input sd-dropdown",
     selectWrapper: "",
-    other: "sd-input sd-comment sd-question__other",
+    other: "sd-input sd-comment",
     onError: "sd-input--error",
     label: "sd-selectbase__label",
     item: "sd-item sd-radio sd-selectbase__item",
@@ -197,7 +198,7 @@ export var surveyDesignerCss = {
     image: "sd-imagepicker__image",
     itemText: "sd-imagepicker__text",
     clearButton: "sd-btn",
-    other: "sd-input sd-comment sd-question__other"
+    other: "sd-input sd-comment"
   },
   matrix: {
     mainRoot: "sd-element-with-frame sd-question sd-row__question sd-scrollable",
@@ -259,7 +260,7 @@ export var surveyDesignerCss = {
   expression: "",
   file: {
     root: "sd-file",
-    other: "sd-input sd-comment sd-question__other",
+    other: "sd-input sd-comment",
     placeholderInput: "sd-visuallyhidden",
     preview: "sd-file__preview",
     fileSign: "sd-hidden",

diff --git a/packages/survey-creator-knockout/src/components/image-item-value.html b/packages/survey-creator-knockout/src/components/image-item-value.html
@@ -24,11 +24,11 @@
 
   <!-- ko if: isNew -->
   <div class="svc-image-item-value__item">
-    <div class="sv-imagepicker__item sv-imagepicker__item--inline">
-      <label class="sv-imagepicker__label">
+    <div class="sd-imagepicker__item sd-imagepicker__item--inline">
+      <label class="sd-imagepicker__label">
         <div
           data-bind="style: { width: question.imageWidth ? question.imageWidth + 'px' : undefined, height: question.imageHeight ? question.imageHeight + 'px' : undefined }"
-          class="sv-imagepicker__image"></div>
+          class="sd-imagepicker__image"></div>
       </label>
     </div>
   </div>

diff --git a/testCafe/designer/drag-drop.ts b/testCafe/designer/drag-drop.ts
@@ -562,8 +562,8 @@ test("Drag Drop ImagePicker (choices)", async (t) => {
     .hover(PandaItem).hover(LionItem).hover(CamelItem).hover(GiraffeItem).hover(DragZoneGiraffeItem)
 
     .dragToElement(DragZoneGiraffeItem, LionItem, {
-      offsetX: 5,
-      offsetY: 5,
+      offsetX: 1,
+      offsetY: 1,
       destinationOffsetY: -40,
       speed: 0.1
     });