PR: Ranking new view — swap left and right sides. (#8841)

surveyjs · Sep 24, 2024 · 43dd069 · 43dd069
1 parent 954c307
commit 43dd069
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 0 deletions.
diff --git a/packages/survey-core/src/common-styles/sv-ranking.scss b/packages/survey-core/src/common-styles/sv-ranking.scss
@@ -450,4 +450,46 @@
   .sv-ranking-item__ghost {
     left: initial;
   }
+}
+
+.sv-ranking--select-to-rank-swap-areas {
+  flex-direction: row-reverse;
+
+  .sv-ranking__container--to {
+    .sv-ranking-item {
+      padding-left: 0;
+      left: -24px !important;
+    }
+  }
+
+  .sv-ranking__container--from {
+    .sv-ranking-item {
+      padding-left: calcSize(2);
+      left: 0;
+    }
+
+    .sv-ranking-item__ghost.sv-ranking-item__ghost {
+      left: calcSize(2);
+    }
+  }
+
+  .sv-ranking__container--empty {
+    &.sv-ranking__container--to {
+      .sv-ranking__container-placeholder {
+        padding-right: calcSize(5);
+        padding-left: 0;
+      }
+
+      .sv-ranking-item__ghost.sv-ranking-item__ghost {
+        right: calcSize(2);
+      }
+    }
+
+    &.sv-ranking__container--from {
+      .sv-ranking__container-placeholder {
+        padding-left: calcSize(5);
+        padding-right: 0;
+      }
+    }
+  }
 }
diff --git a/packages/survey-core/src/defaultCss/defaultV2Css.ts b/packages/survey-core/src/defaultCss/defaultV2Css.ts
@@ -782,6 +782,7 @@ export var defaultV2Css = {
     rootSelectToRankEmptyValueMod: "sv-ranking--select-to-rank-empty-value",
     rootSelectToRankAlignVertical: "sv-ranking--select-to-rank-vertical",
     rootSelectToRankAlignHorizontal: "sv-ranking--select-to-rank-horizontal",
+    rootSelectToRankSwapAreas: "sv-ranking--select-to-rank-swap-areas",
     item: "sv-ranking-item",
     itemContent: "sv-ranking-item__content sd-ranking-item__content",
     itemIndex: "sv-ranking-item__index sd-ranking-item__index",

diff --git a/packages/survey-core/src/question_ranking.ts b/packages/survey-core/src/question_ranking.ts
@@ -57,6 +57,7 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
       .append(this.cssClasses.rootSelectToRankEmptyValueMod, this.isEmpty())
       .append(this.cssClasses.rootSelectToRankAlignHorizontal, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "horizontal")
       .append(this.cssClasses.rootSelectToRankAlignVertical, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "vertical")
+      .append(this.cssClasses.rootSelectToRankSwapAreas, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "horizontal" && this.selectToRankSwapAreas)
       .toString();
   }
   protected isItemSelectedCore(item: ItemValue): boolean {
@@ -614,6 +615,13 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     this.setPropertyValue("selectToRankEnabled", val);
   }
 
+  public get selectToRankSwapAreas(): boolean {
+    return this.getPropertyValue("selectToRankSwapAreas", false);
+  }
+  public set selectToRankSwapAreas(val: boolean) {
+    this.setPropertyValue("selectToRankSwapAreas", val);
+  }
+
   @property({ defaultValue: true }) carryForwardStartUnranked: boolean;
 
   /**
@@ -701,6 +709,13 @@ Serializer.addClass(
       visible: true,
       isSerializable: true,
     },
+    {
+      name: "selectToRankSwapAreas:switch",
+      default: false,
+      visible: false,
+      isSerializable: true,
+      dependsOn: "selectToRankEnabled",
+    },
     {
       name: "selectToRankAreasLayout",
       default: "horizontal",

diff --git a/src/defaultCss/cssmodern.ts b/src/defaultCss/cssmodern.ts
@@ -162,6 +162,7 @@ export var modernCss = {
     rootSelectToRankMod: "sv-ranking--select-to-rank",
     rootSelectToRankAlignVertical: "sv-ranking--select-to-rank-vertical",
     rootSelectToRankAlignHorizontal: "sv-ranking--select-to-rank-horizontal",
+    rootSelectToRankSwapAreas: "sv-ranking--select-to-rank-swap-areas",
     item: "sv-ranking-item",
     itemContent: "sv-ranking-item__content",
     itemIndex: "sv-ranking-item__index",

diff --git a/src/defaultCss/cssstandard.ts b/src/defaultCss/cssstandard.ts
@@ -147,6 +147,7 @@ export var defaultStandardCss = {
     rootSelectToRankMod: "sv-ranking--select-to-rank",
     rootSelectToRankAlignVertical: "sv-ranking--select-to-rank-vertical",
     rootSelectToRankAlignHorizontal: "sv-ranking--select-to-rank-horizontal",
+    rootSelectToRankSwapAreas: "sv-ranking--select-to-rank-swap-areas",
     item: "sv-ranking-item",
     itemContent: "sv-ranking-item__content",
     itemIndex: "sv-ranking-item__index",

diff --git a/src/plugins/themes/bootstrap-material-integration/cssbootstrapmaterial.ts b/src/plugins/themes/bootstrap-material-integration/cssbootstrapmaterial.ts
@@ -137,6 +137,7 @@ export var defaultCss = {
     rootSelectToRankMod: "sv-ranking--select-to-rank",
     rootSelectToRankAlignVertical: "sv-ranking--select-to-rank-vertical",
     rootSelectToRankAlignHorizontal: "sv-ranking--select-to-rank-horizontal",
+    rootSelectToRankSwapAreas: "sv-ranking--select-to-rank-swap-areas",
     item: "sv-ranking-item",
     itemContent: "sv-ranking-item__content",
     itemIndex: "sv-ranking-item__index",

diff --git a/tests/markup/etalon_ranking.ts b/tests/markup/etalon_ranking.ts
@@ -106,5 +106,26 @@ registerMarkupTests(
       },
       snapshot: "ranking-selectToRankEnabled-vertical",
     },
+    {
+      name: "Ranking selectToRankEnabled selectToRankSwapAreas",
+      json: {
+        questions: [
+          {
+            "type": "ranking",
+            "name": "name",
+            "selectToRankEnabled": true,
+            "selectToRankSwapAreas": true,
+            "title": "Question title",
+            "choices": [
+              "item1",
+              "item2",
+              "item3"
+            ],
+            titleLocation: "hidden"
+          }
+        ]
+      },
+      snapshot: "ranking-selectToRankEnabled-SwapAreas",
+    },
   ]
 );
diff --git a/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html b/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html
@@ -0,0 +1,92 @@
+<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-horizontal sv-ranking--select-to-rank-swap-areas">
+	<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
+		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" tabindex="0">
+			<div style="outline:none;" tabindex="-1">
+				<div class="sv-ranking-item__ghost">
+				</div>
+				<div class="sv-ranking-item__content">
+					<div class="sv-ranking-item__icon-container">
+						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+							<use xlink:href="#icon-drag-n-drop" class="">
+							</use>
+						</svg>
+						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+							<use xlink:href="#icon-ranking-arrows" class="">
+							</use>
+						</svg>
+					</div>
+					<div class="sv-ranking-item__index sv-ranking-item__index--empty">
+						<svg class="">
+							<use xlink:href="#icon-ranking-dash" class="">
+							</use>
+						</svg>
+					</div>
+					<div class="sv-ranking-item__text">
+						<span class="sv-string-viewer">item1</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" tabindex="0">
+			<div style="outline:none;" tabindex="-1">
+				<div class="sv-ranking-item__ghost">
+				</div>
+				<div class="sv-ranking-item__content">
+					<div class="sv-ranking-item__icon-container">
+						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+							<use xlink:href="#icon-drag-n-drop" class="">
+							</use>
+						</svg>
+						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+							<use xlink:href="#icon-ranking-arrows" class="">
+							</use>
+						</svg>
+					</div>
+					<div class="sv-ranking-item__index sv-ranking-item__index--empty">
+						<svg class="">
+							<use xlink:href="#icon-ranking-dash" class="">
+							</use>
+						</svg>
+					</div>
+					<div class="sv-ranking-item__text">
+						<span class="sv-string-viewer">item2</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" tabindex="0">
+			<div style="outline:none;" tabindex="-1">
+				<div class="sv-ranking-item__ghost">
+				</div>
+				<div class="sv-ranking-item__content">
+					<div class="sv-ranking-item__icon-container">
+						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+							<use xlink:href="#icon-drag-n-drop" class="">
+							</use>
+						</svg>
+						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+							<use xlink:href="#icon-ranking-arrows" class="">
+							</use>
+						</svg>
+					</div>
+					<div class="sv-ranking-item__index sv-ranking-item__index--empty">
+						<svg class="">
+							<use xlink:href="#icon-ranking-dash" class="">
+							</use>
+						</svg>
+					</div>
+					<div class="sv-ranking-item__text">
+						<span class="sv-string-viewer">item3</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="sv-ranking__containers-divider">
+	</div>
+	<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
+		<div class="sv-ranking__container-placeholder">
+			<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
+		</div>
+	</div>
+</div>