Playlists: media add to queue doesn't always put it in the right place

relates to xibosignageltd/xibo-private#2905 - Hide image and date from global elements
xibosignage · Jul 24, 2023 · 504453b · 504453b
1 parent ab0bf10
commit 504453b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 25 deletions.
diff --git a/modules/templates/global-elements.xml b/modules/templates/global-elements.xml
@@ -189,6 +189,7 @@
         <title>Date</title>
         <type>element</type>
         <dataType>global</dataType>
+        <showIn>none</showIn>
         <canRotate>true</canRotate>
         <thumbnail>date-thumb</thumbnail>
         <startWidth>300</startWidth>
@@ -347,6 +348,7 @@ $(target).find('.date').each(function(_idx, dateEl){
         <dataType>global</dataType>
         <title>Image</title>
         <thumbnail>image</thumbnail>
+        <showIn>none</showIn>
         <startWidth>100</startWidth>
         <startHeight>100</startHeight>
         <properties>

diff --git a/ui/src/playlist-editor/playlist-timeline.js b/ui/src/playlist-editor/playlist-timeline.js
@@ -62,7 +62,10 @@ PlaylistTimeline.prototype.render = function() {
   this.DOMObject.find('.timeline-overlay-step').droppable({
     greedy: true,
     tolerance: 'pointer',
-    accept: '[drop-to="region"]',
+    accept: (draggable) => {
+      // Check target
+      return pE.common.hasTarget(draggable, 'playlist');
+    },
     drop: function(event, ui) {
       const position = parseInt($(event.target).data('position')) + 1;
 
@@ -81,7 +84,7 @@ PlaylistTimeline.prototype.render = function() {
       pE.selectObject({
         target: $(e.target).parents('#playlist-timeline'),
         reloadViewer: true,
-        clickPosition: {positionToAdd: position},
+        positionToAdd: position,
       });
     }
   });
@@ -300,13 +303,22 @@ PlaylistTimeline.prototype.calculateWidgetHeights = function() {
 
       // Set height
       $widget.css('height', height + 'px');
+
+      // Give same height to the dropdown step
+      self.DOMObject.find(`.timeline-overlay-dummy[data-position=${_idx}]`)
+        .css('height', height + 'px');
+
       self.totalTimelineHeight += height;
     });
   } else {
     // All widgets have default height
     this.DOMObject.find('.playlist-widget')
       .css('height', widgetDefaultHeight + 'px');
 
+    // Give same height to the dropdown step
+    this.DOMObject.find(`.timeline-overlay-dummy`)
+      .css('height', widgetDefaultHeight + 'px');
+
     // Calculate timeline height
     self.totalTimelineHeight =
       this.DOMObject.find('.playlist-widget').length *

diff --git a/ui/src/style/playlist-editor.scss b/ui/src/style/playlist-editor.scss
@@ -28,6 +28,7 @@ $playlist-editor-unsuccess-message-bg-color: $xibo-color-semantic-error;
 $left-bar-width: 140px;
 $bottom-bar-height: 38px;
 $timeline-left-margin-width: 140px;
+$timeline-step-height: 22px;
 
 // CSS
 .editor-modal {
@@ -260,38 +261,33 @@ $timeline-left-margin-width: 140px;
 
     #timeline-overlay-container {
         display: none;
-        padding: 0;
+        padding: 5px 0;
         position: absolute !important;
         width: 100%;
         min-height: 100%;
         top: 0;
         left: 0;
         opacity: 0.6;
+        z-index: 2;
 
         .timeline-overlay-step {
-            height: 14px;
-            background: darken($xibo-color-primary-l5, 10%);
-            margin-top: -5px;
-            margin-bottom: 5px;
-
-            &:hover,
-            &.ui-droppable-hover {
-                background: lighten($xibo-color-primary-l5, 10%);
+            position: relative;
+            z-index: 2;
+            height: $timeline-step-height;
+            background: darken($xibo-color-primary-l30, 10%);
+            margin-top: calc($timeline-step-height / -2);
+            margin-bottom: calc($timeline-step-height / 2);
+            cursor: pointer;
+
+            &:hover, &.ui-droppable-hover, &.ui-droppable-active:hover {
+                background: $xibo-color-primary-l30;
                 @include box-shadow(0px 0px 3px 1px $xibo-color-primary-l5);
             }
         }
 
         .timeline-overlay-dummy {
             height: 32px;
-        }
-
-        :nth-child(1) {
-            height: 12px;
-            margin: 0;
-        }
-
-        :nth-child(2) {
-            height: 35px;
+            margin-top: -$timeline-step-height;
         }
     }
 
@@ -514,16 +510,22 @@ $timeline-left-margin-width: 140px;
 
             &.ui-droppable-active {
                 @include z-index-set($playlist-editor-z-index-select);
-                background: $xibo-color-primary-l30  !important;
                 min-height: 100%;
 
                 #timeline-container {
-                    display: none;
+                    #timeline-overlay-container {
+                        display: block;
+                        background: darken($xibo-color-primary-l60, 15%)  !important;
+                    }
                 }
             }
 
-            &.ui-droppable-hover {
-                background: darken($xibo-color-primary-l30, 10%) !important;
+            &.ui-droppable-hover, &.ui-droppable-active:hover {
+                #timeline-container {
+                    #timeline-overlay-container {
+                        background: darken($xibo-color-primary-l60, 10%) !important;
+                    }
+                }
             }
         }
     }

diff --git a/ui/src/templates/playlist-timeline.hbs b/ui/src/templates/playlist-timeline.hbs
@@ -7,7 +7,8 @@
         {{#each widgets}}
             <div class="timeline-overlay-step"
                 data-position="{{@index}}"></div>
-            <div class="timeline-overlay-dummy"></div>
+            <div class="timeline-overlay-dummy"
+                data-position="{{@index}}"></div>
         {{/each}}
     </div>
 </div>