Merge pull request #14 from shreyas1434shinde/main

Issue task PS-3781 : UI implementation for ASQ in Player
tekdi · Feb 21, 2025 · 2a3320a · 2a3320a
2 parents 4ff743e + b28dd9a
commit 2a3320a
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 10 deletions.
diff --git a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html
@@ -1,18 +1,31 @@
 <ng-container *ngIf="optionsShuffled && (layout === 'VERTICAL' || layout === 'DEFAULT')">
-  <div id="dragdropSpace" cdkDropList [cdkDropListData]="shuffledOptions" class="asq-horizontal-list" (cdkDropListDropped)="onDrop($event)">
-    <div class="asq-horizontal-box" *ngFor="let option of shuffledOptions" cdkDrag cdkDragBoundary="#dragdropSpace">
-      <div [innerHTML]="option.label"></div>
-      <quml-reorder></quml-reorder>
+  <div id="dragdropSpace" cdkDropList [cdkDropListData]="shuffledOptions" class="vertical-list" (cdkDropListDropped)="onDrop($event)">
+    <div class="box vertical-box" *ngFor="let option of shuffledOptions" cdkDrag>
+      <div class="content">
+        <div class="mt-1r" [innerHTML]="option.label"></div>
+      </div>
+      <div class="drag-handle" style="display: flex; align-items: center;">
+        <quml-reorder></quml-reorder>
+      </div>
     </div>
   </div>
 </ng-container>
-<ng-container *ngIf="optionsShuffled && (layout === 'HORIZONTAL')">
+
+
+
+<ng-container *ngIf="optionsShuffled && layout === 'HORIZONTAL'">
   <div id="dragdropSpace" cdkDropList cdkDropListOrientation="horizontal" [cdkDropListData]="shuffledOptions" class="horizontal-list" (cdkDropListDropped)="onDrop($event)">
-    <div class="asq-vertical-box" *ngFor="let option of shuffledOptions" cdkDrag cdkDragBoundary="#dragdropSpace">
-      <div class="drag-handle">
+    <div class="box horizontal-box" *ngFor="let option of shuffledOptions" cdkDrag>
+      <div class="content">
+        <div class="mt-1r" [innerHTML]="option.label"></div>
+      </div>
+      <div  class="drag-handle" style="display: flex; align-items: center;">
         <quml-reorder></quml-reorder>
       </div>
-      <div [innerHTML]="option.label"></div>
     </div>
   </div>
 </ng-container>
+
+
+
+
diff --git a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss
@@ -90,7 +90,7 @@ height: 100vh;
 }
 .drag-handle{
   position: absolute;
-  top: 5px;
+  top: 15px;
   right: 5px;
   cursor: move;
 }
@@ -109,4 +109,79 @@ height: 100vh;
 .horizontal-list{
   padding:0px;
 }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* General Box Styles */
+.box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  // width: 250px;
+  width: 90%;
+  cursor: grab;
+  height: 60px;
+  padding: 12px;
+  border-left: 5px solid #99bcd8;
+    border-right: 1px solid black;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  border-radius: 8px;
+  background: white;
+  // box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+  font-weight: bold;
+  // transition: transform 0.2s ease-in-out;
+  position: relative;
+}
+
+/* Restricting drag to within the box */
+.box cdkDrag {
+  width: 100%;
+  height: 100%;
+}
+
+/* Prevent dragging outside the box */
+.cdk-drag-preview {
+  max-height: 60px;
+}
+
+/* List Styles */
+.vertical-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width:100%;
+  align-items: center;
+}
+
+.horizontal-list {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+/* Drag Handle Styling */
+.drag-handle {
+  cursor: grab;
+  font-size: 18px;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.mt-1r {
+  padding-top: 1rem !important;
 }
diff --git a/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss b/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss
@@ -164,7 +164,7 @@ p {
   align-items: center;
   gap: 20px;
   padding: 30px;
-  background: #f0f0f0;
+  // background: #f0f0f0;
   border-radius: 20px;
 }