Merge pull request #6487 from surveyjs/bug/private-tasks-237-ranking-ux

PR: Ranking: Select To Rank: UX Issues

src/common-styles/sv-ranking.scss

@@ -109,12 +109,12 @@
   display: none;
   background-color: $background-dim;
   border-radius: calcSize(12.5);
-  padding: calcSize(0.5) 0px;
-  width: calcSize(25);
+  width: calcSize(31);
   height: calcSize(5);
   z-index: 1;
   position: absolute;
-  left: calcSize(5);
+  left: 0;
+  top: calcSize(0.5);
 }
 
 [dir="rtl"] .sv-ranking-item__ghost {
@@ -196,21 +196,32 @@
   top: calcSize(1);
 }
 
-.sv-ranking-shortcut .sv-ranking-item__icon-container {
-  margin-left: calcSize(1);
+.sv-ranking-shortcut {
+  .sv-ranking-item__content {
+    padding-left: calcSize(0.5);
+  }
+
+  .sv-ranking-item__icon-container {
+    margin-left: calcSize(1);
+  }
 }
 
 .sv-ranking--select-to-rank {
   display: flex;
 }
 
 .sv-ranking--select-to-rank-vertical {
-  flex-direction: column;
+  flex-direction: column-reverse;
 
   .sv-ranking__containers-divider {
-    margin: calcSize(5) 0;
+    margin: calcSize(3) 0;
     height: 1px;
   }
+
+  .sv-ranking__container--empty {
+    padding-top: calcSize(1);
+    padding-bottom: calcSize(1);
+  }
 }
 
 .sv-ranking--select-to-rank-horizontal {
@@ -220,7 +231,21 @@
 
   .sv-ranking__container--to {
     .sv-ranking-item {
-      left: initial;
+      left: calcSize(1);
+    }
+  }
+
+  .sv-ranking__container--empty {
+    &.sv-ranking__container--to {
+      padding-right: calcSize(3);
+
+      .sv-ranking-item {
+        left: initial;
+      }
+    }
+
+    &.sv-ranking__container--from {
+      padding-left: calcSize(3);
     }
   }
 }
@@ -247,8 +272,12 @@
   text-align: center;
 }
 
-.sv-ranking__container--to {}
-
 .sv-ranking__containers-divider {
   background: $border-inside;
+}
+
+.sv-ranking__container--from {
+  .sv-ranking-item__icon--focus {
+    display: none;
+  }
 }

src/dragdrop/core.ts

@@ -56,10 +56,10 @@ export abstract class DragDropCore<T> implements IDragDropEngine {
       draggedElementNode,
       event
     );
-    this.onStartDrag();
+    this.onStartDrag(event);
   }
 
-  protected onStartDrag(): void {
+  protected onStartDrag(event?: PointerEvent): void {
   }
 
   protected isDropTargetDoesntChanged(newIsBottom: boolean): boolean {

src/dragdrop/ranking-select-to-rank.ts

@@ -3,6 +3,14 @@ import { DragDropRankingChoices } from "./ranking-choices";
 import { QuestionRankingModel } from "../question_ranking";
 
 export class DragDropRankingSelectToRank extends DragDropRankingChoices {
+  protected onStartDrag(event: PointerEvent): void {
+    const target = <HTMLElement>event.target;
+    const fromContainerNode = <HTMLElement>target.closest(".sv-ranking__container--from");
+    if (!!fromContainerNode) {
+      fromContainerNode.style.minHeight = fromContainerNode.offsetHeight + "px";
+    }
+  }
+
   protected findDropTargetNodeByDragOverNode(
     dragOverNode: HTMLElement
   ): HTMLElement {
@@ -84,7 +92,7 @@ export class DragDropRankingSelectToRank extends DragDropRankingChoices {
     let fromIndex = fromChoicesArray.indexOf(this.draggedElement);
     let toIndex = toChoicesArray.indexOf(this.dropTarget);
 
-    if(toIndex === -1) toIndex = 0;
+    if(toIndex === -1) toIndex = toChoicesArray.length;
 
     rankFunction(questionModel, fromIndex, toIndex);
     this.doUIEffects(dropTargetNode, fromIndex, toIndex);

src/question_ranking.ts

@@ -377,15 +377,15 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     let fromIndex;
     let toIndex;
 
-    if (key === " " && isMovedElementUnRanked) {
+    if ((key === " " || key === "Enter") && isMovedElementUnRanked) {
       fromIndex = unRankingChoices.indexOf(movedElement);
       toIndex = 0;
       dnd.selectToRank(this, fromIndex, toIndex);
       this.setValueAfterKeydown(toIndex, "to-container");
       return;
     }
 
-    if (key === " " && isMovedElementRanked) {
+    if ((key === " " || key === "Enter") && isMovedElementRanked) {
       fromIndex = rankingChoices.indexOf(movedElement);
       dnd.unselectFromRank(this, fromIndex);
       toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
@@ -499,6 +499,7 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
    * @see selectToRankAreasLayout
   */
   public get selectToRankAreasLayout(): string {
+    if (IsMobile) return "vertical";
     return this.getPropertyValue("selectToRankAreasLayout", "horizontal");
   }
   public set selectToRankAreasLayout(val: string) {