Feature/multiple fixes 4.0.8 (#2380)

* Analogue World Clock: Mini digital clock text overflow relates to xibosignageltd/xibo-private#625 * Layout Editor: Paste on code input doesn't trigger save relates to xibosignage/xibo#3338 * Monthly calendar template: Broken header on resize relates to xibosignageltd/xibo-private#632 * Grouping Element: elements shown as detached from the group relates to xibosignageltd/xibo-private#622 * Widget: PDF widget starts before its visible relates to xibosignage/xibo#3340 * Select2 UI is broken after upgrade relates to xibosignageltd/xibo-private#633
xibosignage · Feb 23, 2024 · 9f062d7 · 9f062d7
1 parent 2c6f020
commit 9f062d7
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 34 deletions.
diff --git a/cypress/e2e/Display/displays.cy.js b/cypress/e2e/Display/displays.cy.js
@@ -188,7 +188,7 @@ describe('Displays', function() {
 
     // Set the default layout
     cy.get('.modal .select2-container--bootstrap').click();
-    cy.get('.modal .select2-container--open input[type="search"]').type('disp4_default_layout');
+    cy.get('.modal .select2-container--open textarea[type="search"]').type('disp4_default_layout');
 
     cy.wait('@loadLayoutAfterSearch');
     cy.get('.select2-results__option').contains('disp4_default_layout').click();

diff --git a/cypress/e2e/Layout/Editor/layout_editor_dataset.cy.js b/cypress/e2e/Layout/Editor/layout_editor_dataset.cy.js
@@ -55,7 +55,6 @@ describe('Layout Designer', function() {
     // Wait for datasets to load
     cy.wait('@loadDatasets');
     cy.get('.select2-container--open').contains('test');
-    cy.get('.select2-container--open .select2-results > ul > li').should('have.length', 1);
     cy.get('.select2-container--open .select2-results > ul > li:first').contains('test').click();
 
     cy.get('[name="lowerLimit"]').clear().type('1');

diff --git a/cypress/e2e/Reporting/report_timeconnected.cy.js b/cypress/e2e/Reporting/report_timeconnected.cy.js
@@ -32,7 +32,7 @@ describe('Time Connected', function() {
     cy.get('.select2-search__field').click();
 
     // Type the display name
-    cy.get('.select2-container--open input[type="search"]').type('POP Display Group');
+    cy.get('.select2-container--open textarea[type="search"]').type('POP Display Group');
     cy.get('.select2-container--open .select2-results > ul').contains('POP Display Group').click();
 
     // Click on the Apply button

diff --git a/cypress/e2e/Schedule/schedule.cy.js b/cypress/e2e/Schedule/schedule.cy.js
@@ -75,7 +75,7 @@ describe('Campaigns', function() {
     cy.wait('@scheduleAddForm');
 
     // Fill in Add form
-    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection > .select2-selection > .select2-selection__rendered')
+    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection .select2-search__field')
       .type(display1);
     cy.wait('@loadDisplaygroupAfterSearch');
     cy.get('.select2-container--open').contains(display1);
@@ -108,7 +108,7 @@ describe('Campaigns', function() {
 
     cy.get('#DisplayList + span .select2-selection').click();
     // Type the display name
-    cy.get('.select2-container--open input[type="search"]').type(display1);
+    cy.get('.select2-container--open textarea[type="search"]').type(display1);
 
     // Wait for Display to load
     cy.wait('@loadDisplayAfterSearch');
@@ -145,7 +145,7 @@ describe('Campaigns', function() {
     cy.wait('@scheduleAddForm');
 
     // display
-    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection > .select2-selection > .select2-selection__rendered')
+    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection .select2-search__field')
       .type(display1);
     cy.wait('@loadDisplaygroupAfterSearch');
     cy.get('.select2-container--open').contains(display1);
@@ -200,7 +200,7 @@ describe('Campaigns', function() {
     cy.wait('@scheduleAddForm');
 
     // display
-    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection > .select2-selection > .select2-selection__rendered')
+    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection .select2-search__field')
       .type(display1);
     cy.wait('@loadDisplaygroupAfterSearch');
     cy.get('.select2-container--open').contains(display1);
@@ -235,8 +235,8 @@ describe('Campaigns', function() {
     cy.get('.select2-container--open .select2-results > ul > li:first').contains(layoutSchedule1).click();
 
     // display
-    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection > .select2-selection > .select2-selection__rendered')
-        .type(display1);
+    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection .select2-search__field')
+      .type(display1);
     cy.wait('@loadDisplaygroupAfterSearch');
     cy.get('.select2-container--open').contains(display1);
     cy.get('.select2-container--open .select2-dropdown .select2-results > ul > li').should('have.length', 2);
@@ -268,7 +268,7 @@ describe('Campaigns', function() {
     // ---------
     // Edit a schedule - add another display
     cy.get('#campaignIdFilter + span .select2-selection').click();
-    cy.get('.select2-container--open input[type="search"]').type(layoutSchedule1); // Type the layout name
+    cy.get('.select2-container--open textarea[type="search"]').type(layoutSchedule1); // Type the layout name
     cy.wait('@loadLayoutSpecificCampaign');
     cy.selectOption(layoutSchedule1);
 
@@ -278,7 +278,7 @@ describe('Campaigns', function() {
     cy.get('#schedule-grid tr:first-child .schedule_button_edit').click({force: true});
 
     // display
-    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection > .select2-selection > .select2-selection__rendered')
+    cy.get(':nth-child(3) > .col-sm-10 > .select2 > .selection .select2-search__field')
       .type(display2);
     cy.wait('@loadDisplaygroupAfterSearch');
     cy.get('.select2-container--open .select2-results > ul > li')

diff --git a/modules/pdf.xml b/modules/pdf.xml
@@ -72,6 +72,8 @@ var pdfDoc = null,
   height,
   interval;
 
+var pdfLoaded = false;
+
 var canvas = document.getElementById('the-canvas');
 var ctx = canvas.getContext('2d');
 
@@ -90,8 +92,8 @@ function renderPage(num) {
   // Using promise to fetch the page
   pdfDoc.getPage(num).then(function(page) {
     // Get new window size
-    width = $('body').width();
-    height = $('body').height();
+    width = $(window).width();
+    height = $(window).height();
     
     var unscaledViewport = page.getViewport({scale: 1});
     var scale = Math.min((height / unscaledViewport.height), (width / unscaledViewport.width));
@@ -167,6 +169,7 @@ function onFirstPage() {
 */
 pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
   pdfDoc = pdfDoc_;
+  pdfLoaded = true;
 
   var startInterval = function(interval) {
     // Set a timer
@@ -201,7 +204,9 @@ pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
 
 // Render page on window resize
 window.addEventListener('resize', function(event) {
-  onFirstPage();
+  if(pdfLoaded) {
+    onFirstPage();
+  }
 }, true);
     ]]></onInitialize>
     <assets>

diff --git a/modules/src/xibo-calendar-render.js b/modules/src/xibo-calendar-render.js
@@ -1075,6 +1075,9 @@ jQuery.fn.extend({
         const month = INITIAL_MONTH;
         const $daysOfWeek = $('#daysOfWeek');
 
+        // Clear week days container
+        $daysOfWeek.empty();
+
         weekdaysNames.forEach((weekday) => {
           const $weekDay = $('<li>');
           $daysOfWeek.append($weekDay);

diff --git a/modules/worldclock-analogue.xml b/modules/worldclock-analogue.xml
@@ -423,6 +423,7 @@ body {
         position: relative;
         left: 50%;
         width: 70px;
+        font-size: 16px;
         -webkit-transform: translateX(-50%);
         transform: translateX(-50%);
         line-height: 22px;

diff --git a/ui/src/editor-core/element-group.js b/ui/src/editor-core/element-group.js
@@ -155,15 +155,15 @@ ElementGroup.prototype.updateGroupDimensions = function(
     // First we need to find the top/left position
     // left needs to adjust to the elements more to the left of the group
     if (
-      !self.left ||
+      self.left === null ||
       elTempProperties.left < self.left
     ) {
       self.left = elTempProperties.left;
     }
 
     // top needs to adjust to the element more to the top
     if (
-      !self.top ||
+      self.top === null ||
       elTempProperties.top < self.top
     ) {
       self.top = elTempProperties.top;
@@ -185,7 +185,7 @@ ElementGroup.prototype.updateGroupDimensions = function(
     }
 
     if (
-      !self.width ||
+      self.width === null ||
       elTempProperties.left + elTempProperties.width >
       self.left + self.width
     ) {
@@ -194,7 +194,7 @@ ElementGroup.prototype.updateGroupDimensions = function(
     }
 
     if (
-      !self.height ||
+      self.height === null ||
       elTempProperties.top + elTempProperties.height >
       self.top + self.height
     ) {

diff --git a/ui/src/editor-core/properties-panel.js b/ui/src/editor-core/properties-panel.js
@@ -164,15 +164,19 @@ PropertiesPanel.prototype.save = function(
   formFieldsToSave =
     formFieldsToSave.filter('.tab-pane:not(#positionTab) [name]');
 
+  // Get form old data
+  const formOldData = this.formSerializedLoadData[target.type];
+
+  // Get form data
+  // if we're saving an element, don't include the element properties
+  const formNewData = formFieldsToSave.serialize();
+
   // If form is valid, submit it ( add change )
   if (
     formFieldsToSave.length > 0 &&
-    formFieldsToSave.valid()
+    formFieldsToSave.valid() &&
+    formOldData != formNewData // if form data is the same, don't save
   ) {
-    // Get form data
-    // if we're saving an element, don't include the element properties
-    const formNewData = formFieldsToSave.serialize();
-
     app.common.showLoadingScreen();
 
     // Save content tab
@@ -188,7 +192,7 @@ PropertiesPanel.prototype.save = function(
       'saveForm',
       target.type, // targetType
       target[target.type + 'Id'], // targetId
-      this.formSerializedLoadData[target.type], // oldValues
+      formOldData, // oldValues
       formNewData, // newValues
       {
         customRequestPath: requestPath,
@@ -1716,7 +1720,9 @@ PropertiesPanel.prototype.initFields = function(
 
     // Save for this type
     self.formSerializedLoadData[target.type] =
-      self.DOMObject.find('form [name]:not(.element-property)').serialize();
+      self.DOMObject.find('form [name]:not(.element-property)')
+        .filter('.tab-pane:not(#positionTab) [name]')
+        .serialize();
   }
 
   // If we're not in read only mode
@@ -1858,7 +1864,7 @@ PropertiesPanel.prototype.initFields = function(
       ':not([data-tag-style-input])';
     $(self.DOMObject).find('form').off()
       .on({
-        'change inputChange xiboInputChange': function(_ev, options) {
+        'change blur inputChange xiboInputChange': function(_ev, options) {
           // Check if we skip this field
           if (skipSave(_ev.currentTarget, _ev)) {
             return;

diff --git a/views/schedule-page.twig b/views/schedule-page.twig
@@ -154,10 +154,8 @@
                                 <label class="control-label mr-1" title="{{ title }}" for="directSchedule" accesskey="">{{ label }}</label>
                                 <div>
                                     <div class="input-group" style="height: 34px">
-                                        <div class="input-group-append input-group-addon">
-                                            <div class="input-group-text">
-                                                <input title="{{ title }}" type="checkbox" id="directSchedule" name="directSchedule">
-                                            </div>
+                                        <div class="input-group-text h-100">
+                                            <input title="{{ title }}" type="checkbox" id="directSchedule" name="directSchedule">
                                         </div>
                                     </div>
                                 </div>
@@ -169,10 +167,8 @@
                                 <label class="control-label mr-1" title="{{ title }}" for="sharedSchedule" accesskey="">{{ label }}</label>
                                 <div>
                                     <div class="input-group" style="height: 34px">
-                                        <div class="input-group-append input-group-addon">
-                                            <div class="input-group-text">
-                                                <input title="{{ title }}" type="checkbox" id="sharedSchedule" name="sharedSchedule">
-                                            </div>
+                                        <div class="input-group-text h-100">
+                                            <input title="{{ title }}" type="checkbox" id="sharedSchedule" name="sharedSchedule">
                                         </div>
                                     </div>
                                 </div>

diff --git a/web/theme/default/css/xibo.css b/web/theme/default/css/xibo.css
@@ -1522,4 +1522,23 @@ div.dataTables_wrapper div.dataTables_info {
 .grid-folder-tree-container {
     border: 1px solid #00000020;
     border-radius: 0.25rem;
+}
+
+/* Select2 4.1.0-rc.0 fix */
+.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
+    margin-left: 0;
+    line-height: 32px !important;
+}
+.select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
+    padding: 0;
+}
+.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    padding: 0;
+}
+.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered {
+    float: left;
+    width: auto;
 }