PR: Support Ranking ghost item customization (#8214)

* work for the #8056 * work for the #8056 * work for the #8056
surveyjs · May 6, 2024 · dc2d847 · dc2d847
1 parent 648d819
commit dc2d847
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/common-styles/common-styles.scss b/src/common-styles/common-styles.scss
@@ -10,4 +10,4 @@
 @import "./sv-ranking.scss";
 @import "./sv-list.scss";
 @import "./sv-save-data.scss";
-@import "./sv-string-viewer.scss";
+@import "./sv-string-viewer.scss";
diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss
@@ -64,7 +64,7 @@
 .sv-ranking-item--preview.sv-ranking-item--preview {
   cursor: initial;
   user-select: initial;
-    -webkit-user-select: initial;
+  -webkit-user-select: initial;
 
   .sv-ranking-item__icon-container.sv-ranking-item__icon-container {
     .sv-ranking-item__icon.sv-ranking-item__icon {
@@ -248,6 +248,18 @@
   }
 }
 
+.sv-ranking-shortcut {
+  cursor: grabbing;
+  position: absolute;
+  z-index: 10000;
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: 100px;
+  max-width: 400px;
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+}
+
 .sv-ranking--select-to-rank {
   display: flex;
 }

diff --git a/src/dragdrop/ranking-choices.ts b/src/dragdrop/ranking-choices.ts
@@ -17,17 +17,6 @@ export class DragDropRankingChoices extends DragDropChoices {
     if(!draggedElementShortcut) return;
 
     draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
-    draggedElementShortcut.style.cssText = ` 
-          cursor: grabbing;
-          position: absolute;
-          z-index: 10000;
-          border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-          min-width: 100px;
-          max-width: 400px;
-          box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-          background-color: var(--sjs-general-backcolor, var(--background, #fff));
-          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-        `;
 
     const isDeepClone = true;
     const clone = <HTMLElement>draggedElementNode.cloneNode(isDeepClone);

diff --git a/src/main.scss b/src/main.scss
@@ -16,6 +16,7 @@ $font-family: var(--font-family, var(--sjs-default-font-family));
 @import "./common-styles/sv-brand-info.scss";
 @import "./common-styles/sv-drag-drop.scss";
 @import "./common-styles/sv-save-data.scss";
+@import "./common-styles/sv-ranking.scss";
 
 $header-background-color: #e7e7e7;
 $body-container-background-color: #f4f4f4;