7135 Extract the blank number icon from the CSS background-image in t…

…he Svg for theming. (#7198) * #7135 Extract the blank number icon from the CSS background-image in the Svg for theming. Started for knockout Fixes #7135 * Fixes #7135 * #7135 - css variable in test * #7135 - fix scaling * #7135 - fixed tests * #7135 - fixed test * #7135 - use svg Fixes #7135 * #7135 - add wait to test * #7135 - more timeouts --------- Co-authored-by: Aleksey Novikov <novikov@abrisplatform.com>
surveyjs · Oct 24, 2023 · 93d2dfa · 93d2dfa
1 parent 78f190d
commit 93d2dfa
Show file tree

Hide file tree

Showing 20 changed files with 351 additions and 205 deletions.
diff --git a/packages/survey-angular-ui/src/questions/ranking-item.component.html b/packages/survey-angular-ui/src/questions/ranking-item.component.html
@@ -9,27 +9,20 @@
     <div [class]="question.cssClasses.itemGhostNode"></div>
     <div [class]="question.cssClasses.itemContent">
       <div [class]="question.cssClasses.itemIconContainer">
-        <svg
-          width="10"
-          height="16"
-          viewBox="0 0 10 16"
-          [class]="question.getIconHoverCss()"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" />
-        </svg>
-        <svg
-          width="10"
-          height="24"
-          viewBox="0 0 10 24"
-          [class]="question.getIconFocusCss()"
-          xmlns="http://www.w3.org/2000/svg">
-          <path d="M10 5L5 0L0 5H4V9H6V5H10Z" />
-          <path d="M6 19V15H4V19H0L5 24L10 19H6Z" />
-        </svg>
+        <svg [class]="question.getIconHoverCss()">
+          <use [attr.xlink:href]="question.dragDropSvgIcon"></use>
+        </svg> 
+        <svg [class]="question.getIconFocusCss()">
+          <use [attr.xlink:href]="question.arrowsSvgIcon"></use>
+        </svg> 
       </div>
 
-      <div [class]="question.getItemIndexClasses(model)">{{ unrankedItem ? "" : question.getNumberByIndex(index) }}</div>
+      <div *ngIf="!unrankedItem && question.getNumberByIndex(index); else elseBlock" [class]="question.getItemIndexClasses(model)">{{ question.getNumberByIndex(index) }}</div>
+      <ng-template #elseBlock><div [class]="question.getItemIndexClasses(model)">
+        <svg>
+          <use [attr.xlink:href]="question.dashSvgIcon"></use>
+        </svg> 
+      </div></ng-template>
       <div [class]="question.cssClasses.controlLabel">
         <sv-ng-string [model]="model.locText"></sv-ng-string>
       </div>

diff --git a/packages/survey-vue3-ui/src/RankingItem.vue b/packages/survey-vue3-ui/src/RankingItem.vue
@@ -23,31 +23,19 @@
       <div :class="cssClasses.itemGhostNode"></div>
       <div :class="cssClasses.itemContent">
         <div :class="cssClasses.itemIconContainer">
-          <svg
-            width="10"
-            height="16"
-            viewBox="0 0 10 16"
-            :class="question.getIconHoverCss()"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
-            />
+          <svg :class="question.getIconHoverCss()">
+            <use :xlink:href="question.dragDropSvgIcon"></use>
           </svg>
-          <svg
-            width="10"
-            height="24"
-            viewBox="0 0 10 24"
-            :class="question.getIconFocusCss()"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M10 5L5 0L0 5H4V9H6V5H10Z" />
-            <path d="M6 19V15H4V19H0L5 24L10 19H6Z" />
+          <svg :class="question.getIconFocusCss()">
+            <use :xlink:href="question.arrowsSvgIcon"></use>
           </svg>
         </div>
 
-        <div :class="question.getItemIndexClasses(item)">
-          {{ unrankedItem ? "" : indexText }}
+          <div v-if = "!unrankedItem && indexText" :class="question.getItemIndexClasses(item)">{{ indexText }}</div>
+          <div v-else :class="question.getItemIndexClasses(item)">
+            <svg>
+                <use :xlink:href="question.dashSvgIcon"></use>
+            </svg>
         </div>
         <div :class="cssClasses.controlLabel">
           <survey-string :locString="text" />

diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss
@@ -82,7 +82,7 @@
   justify-content: center;
   background-color: $primary-light;
   color: $font-questiontitle-color;
-  font-size: calcFontSize(1);
+  font-size: $font-editorfont-size;
   border-radius: 100%;
   border: calcSize(0.25) solid transparent;
   width: calcSize(5);
@@ -92,11 +92,10 @@
   font-weight: 600;
   margin-left: calcSize(0);
 
-  &:empty {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: multiply(1, $font-editorfont-size);
+  svg {
+      fill: $font-questiontitle-color;
+      width: $font-editorfont-size;
+      height: $font-editorfont-size;
   }
 }
 

diff --git a/src/images/drag-n-drop.svg b/src/images/drag-n-drop.svg
diff --git a/src/images/ranking-arrows.svg b/src/images/ranking-arrows.svg
diff --git a/src/images/ranking-dash.svg b/src/images/ranking-dash.svg
diff --git a/src/knockout/templates/question-ranking.html b/src/knockout/templates/question-ranking.html
@@ -2,7 +2,7 @@
    <!-- ko ifnot: question.selectToRankEnabled -->
   <div data-bind="css: question.rootClass">
     <!-- ko foreach: { data: question.rankingChoices, as: 'item', afterRender: question.koAfterRender } -->
-      <!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: 'survey-ranking-item', data: item } } } -->
+      <!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { number: question.getNumberByIndex($index()), componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: 'survey-ranking-item', data: item } } } -->
       <!-- /ko -->
     <!-- /ko -->
   </div>
@@ -12,7 +12,7 @@
   <div data-bind="css: question.rootClass">
     <div data-bind="css: question.getContainerClasses('from')" data-ranking="from-container">
       <!-- ko foreach: { data: question.unRankingChoices, as: 'item', afterRender: question.koAfterRender } -->
-        <!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { unrankedItem: true, componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: 'survey-ranking-item', data: item } } } -->
+        <!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { number: '', componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: 'survey-ranking-item', data: item } } } -->
         <!-- /ko -->
       <!-- /ko -->
       <!-- ko if: question.unRankingChoices.length === 0 -->
@@ -22,7 +22,7 @@
     <div data-bind="css: cssClasses.containersDivider"></div>
     <div data-bind="css: question.getContainerClasses('to')" data-ranking="to-container">
       <!-- ko foreach: { data: question.rankingChoices, as: 'item', afterRender: question.koAfterRender } -->
-        <!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: 'survey-ranking-item', data: item } } } -->
+        <!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { number: question.getNumberByIndex($index()), componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: 'survey-ranking-item', data: item } } } -->
         <!-- /ko -->
       <!-- /ko -->
       <!-- ko if: question.rankingChoices.length === 0 -->
@@ -42,31 +42,27 @@
       <div data-bind="css: question.cssClasses.itemGhostNode"></div>
       <div data-bind="css: question.cssClasses.itemContent">
         <div data-bind="css: question.cssClasses.itemIconContainer">
-          <svg
-            width="10"
-            height="16"
-            viewBox="0 0 10 16"
-            data-bind="css: question.getIconHoverCss()"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
-            />
+          <svg data-bind="css:question.getIconHoverCss()">
+            <use data-bind="attr:{'xlink:href':question.dragDropSvgIcon}" xlink:href=''></use>
           </svg>
-          <svg
-            width="10"
-            height="24"
-            viewBox="0 0 10 24"
-            data-bind="css: question.getIconFocusCss()"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M10 5L5 0L0 5H4V9H6V5H10Z" />
-            <path d="M6 19V15H4V19H0L5 24L10 19H6Z" />
+          <svg data-bind="css:question.getIconFocusCss()">
+            <use data-bind="attr:{'xlink:href':question.arrowsSvgIcon}" xlink:href=''></use>
           </svg>
         </div>
+        <!-- ko if: $parent.number -->
         <div
-          data-bind="css: question.getItemIndexClasses(item), text: $parent.unrankedItem ? '' : question.getNumberByIndex($index())"
+          data-bind="css: question.getItemIndexClasses(item), text: $parent.number"
         ></div>
+        <!-- /ko -->
+        <!-- ko ifnot: $parent.number -->
+        <div
+          data-bind="css: question.getItemIndexClasses(item)"
+        >
+        <svg>
+          <use data-bind="attr:{'xlink:href':question.dashSvgIcon}" xlink:href=''></use>
+        </svg>
+      </div>
+        <!-- /ko -->
         <div data-bind="css: question.cssClasses.controlLabel">
           <!-- ko template: { name: 'survey-string', data: $data.locText } -->
           <!-- /ko -->

diff --git a/src/question_ranking.ts b/src/question_ranking.ts
@@ -517,6 +517,16 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     this.setPropertyValue("useFullItemSizeForShortcut", val);
   }
 
+  public get dragDropSvgIcon(): string {
+    return this.cssClasses.dragDropSvgIconId || "#icon-drag-n-drop";
+  }
+  public get arrowsSvgIcon(): string {
+    return this.cssClasses.arrowsSvgIconId || "#icon-ranking-arrows";
+  }
+  public get dashSvgIcon(): string {
+    return this.cssClasses.dashSvgIconId || "#icon-ranking-dash";
+  }
+
   //a11y
   public get isNewA11yStructure(): boolean {
     return false;

diff --git a/src/react/reactquestion_ranking.tsx b/src/react/reactquestion_ranking.tsx
@@ -152,6 +152,14 @@ export class SurveyQuestionRankingItem extends ReactSurveyElement {
     return this.props.item;
   }
 
+  protected renderEmptyIcon(): JSX.Element {
+    return (
+      <svg>
+        <use xlinkHref={this.question.dashSvgIcon}></use>
+      </svg>
+    );
+  }
+
   protected renderElement(): JSX.Element {
     return (
       <div
@@ -166,27 +174,20 @@ export class SurveyQuestionRankingItem extends ReactSurveyElement {
           <div className={this.cssClasses.itemContent}>
             <div className={this.cssClasses.itemIconContainer}>
               <svg
-                width="10"
-                height="16"
-                viewBox="0 0 10 16"
                 className={this.question.getIconHoverCss()}
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path d="M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" />
+                <use xlinkHref={this.question.dragDropSvgIcon}></use>
               </svg>
               <svg
-                width="10"
-                height="24"
-                viewBox="0 0 10 24"
                 className={this.question.getIconFocusCss()}
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path d="M10 5L5 0L0 5H4V9H6V5H10Z" />
-                <path d="M6 19V15H4V19H0L5 24L10 19H6Z" />
+                <use xlinkHref={this.question.arrowsSvgIcon}></use>
               </svg>
             </div>
 
-            <div className={this.question.getItemIndexClasses(this.item)}>{this.unrankedItem ? "" : this.indexText}</div>
+            <div className={this.question.getItemIndexClasses(this.item)}>
+              {(!this.unrankedItem && this.indexText) ? this.indexText : this.renderEmptyIcon()}
+            </div>
             <div className={this.cssClasses.controlLabel}>{this.text}</div>
           </div>
         </div>

diff --git a/src/vue/ranking/ranking-item.vue b/src/vue/ranking/ranking-item.vue
@@ -4,27 +4,20 @@
       <div :class="cssClasses.itemGhostNode" />
       <div :class="cssClasses.itemContent">
         <div :class="cssClasses.itemIconContainer">
-          <svg
-            width="10"
-            height="16"
-            viewBox="0 0 10 16"
-            :class="question.getIconHoverCss()"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" />
+          <svg :class="question.getIconHoverCss()">
+            <use :xlink:href="question.dragDropSvgIcon"></use>
           </svg>
-          <svg
-            width="10"
-            height="24"
-            viewBox="0 0 10 24"
-            :class="question.getIconFocusCss()"
-            xmlns="http://www.w3.org/2000/svg">
-            <path d="M10 5L5 0L0 5H4V9H6V5H10Z" />
-            <path d="M6 19V15H4V19H0L5 24L10 19H6Z" />
+          <svg :class="question.getIconFocusCss()">
+            <use :xlink:href="question.arrowsSvgIcon"></use>
           </svg>
         </div>
 
-        <div :class="question.getItemIndexClasses(item)">{{unrankedItem ? "" : indexText}}</div>
+          <div v-if = "!unrankedItem && indexText" :class="question.getItemIndexClasses(item)">{{ indexText }}</div>
+          <div v-else :class="question.getItemIndexClasses(item)">
+            <svg>
+                <use :xlink:href="question.dashSvgIcon"></use>
+            </svg>
+          </div>
         <div :class="cssClasses.controlLabel">
           <survey-string :locString="text" />
         </div>

diff --git a/testCafe/questions/ranking.js b/testCafe/questions/ranking.js
@@ -94,7 +94,7 @@ frameworks.forEach((framework) => {
 
   test("ranking: simple using", async (t) => {
     await t.dragToElement(PriceItem, BatteryItem);
-
+    await t.wait(300);
     let data = await getData();
     await t.expect(data["smartphone-features"]).eql([
       "Price",
@@ -121,7 +121,7 @@ frameworks.forEach((framework) => {
     });
 
     await t.dragToElement(PriceItem, BatteryItem);
-
+    await t.wait(300);
     let data = await getData();
     await t.expect(data["smartphone-features"]).eql([
       "Battery life",
@@ -136,7 +136,7 @@ frameworks.forEach((framework) => {
     await setData(null);
 
     await t.dragToElement(PriceItem, BatteryItem);
-
+    await t.wait(300);
     data = await getData();
     await t.expect(data["smartphone-features"]).eql([
       "Price",
@@ -294,8 +294,8 @@ frameworks.forEach((framework) => {
 
     await addFlexboxLayout();
 
-    await t.dragToElement(PriceItem, BatteryItem);
-
+    await t.dragToElement(PriceItem, BatteryItem, { destinationOffsetY: 0 });
+    await t.wait(300);
     let data = await getData();
     await t.expect(data["smartphone-features"]).eql([
       "Price",

diff --git a/tests/markup/etalon_ranking.ts b/tests/markup/etalon_ranking.ts
@@ -21,6 +21,30 @@ registerMarkupTests(
       },
       snapshot: "ranking",
     },
+    {
+      name: "Test ranking with values markup",
+      json: {
+        questions: [
+          {
+            "type": "ranking",
+            "name": "name",
+            "title": "Question title",
+            "choices": [
+              "item1",
+              "item2",
+              "item3"
+            ],
+            "defaultValue": [
+              "item1",
+              "item2",
+              "item3"
+            ],
+            titleLocation: "hidden"
+          }
+        ]
+      },
+      snapshot: "ranking-values",
+    },
     {
       name: "Test ranking markup design mode",
       json: {