Bugfix/viewer toolbar menu and tooltip fixes (#2032)

* Layout Editor: context menu shows options that shouldn't be available relates to xibosignageltd/xibo-private#452 * Layout Editor: tooltips don't work relates to xibosignageltd/xibo-private#453
xibosignage · Sep 1, 2023 · 8288096 · 8288096
1 parent 26b0499
commit 8288096
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 54 deletions.
diff --git a/ui/src/editor-core/bottombar.js b/ui/src/editor-core/bottombar.js
@@ -20,7 +20,8 @@ Bottombar.prototype.render = function(object) {
   const readOnlyModeOn = (app?.readOnlyMode === true);
 
   // Get topbar trans
-  const newBottomBarTrans = $.extend({}, toolbarTrans, topbarTrans);
+  const newBottomBarTrans =
+    $.extend({}, toolbarTrans, topbarTrans, bottombarTrans);
 
   const checkHistory = app.checkHistory();
   newBottomBarTrans.undoActiveTitle =
@@ -49,7 +50,7 @@ Bottombar.prototype.render = function(object) {
         regionName: (parentRegion) ? parentRegion.name : '',
         trans: newBottomBarTrans,
         readOnlyModeOn: readOnlyModeOn,
-        object: object,
+        object: parentRegion,
         undoActive: checkHistory.undoActive,
         trashActive: trashBinActive,
       },
@@ -151,6 +152,9 @@ Bottombar.prototype.render = function(object) {
       buttonData['propertyType'],
     );
   });
+
+  // Reload tooltips
+  app.common.reloadTooltips(this.DOMObject);
 };
 
 /**

diff --git a/ui/src/editor-core/layer-manager.js b/ui/src/editor-core/layer-manager.js
@@ -212,7 +212,7 @@ LayerManager.prototype.render = function(reset) {
 
         // Select items
         this.DOMObject.find('.layer-manager-layer-item.selectable')
-          .off().on('click', function(ev) {
+          .off('click').on('click', function(ev) {
             const elementId = $(ev.currentTarget).data('item-id');
             const $viewerObject = self.viewerContainer.find('#' + elementId);
 
@@ -239,7 +239,7 @@ LayerManager.prototype.render = function(reset) {
 
         // Handle close button
         this.DOMObject.find('.close-layer-manager')
-          .off().on('click', function(ev) {
+          .off('click').on('click', function(ev) {
             self.setVisible(false);
           });
 

diff --git a/ui/src/editor-core/toolbar.js b/ui/src/editor-core/toolbar.js
@@ -668,7 +668,7 @@ Toolbar.prototype.loadPrefs = function() {
           loadedData.displayTooltips == undefined);
 
       // Reload tooltips
-      app.common.reloadTooltips(app.editorContainer);
+      app.common.reloadTooltips(self.DOMObject);
 
       // Render toolbar and topbar if exists
       self.render({
@@ -714,6 +714,12 @@ Toolbar.prototype.savePrefs = function(clearPrefs = false) {
   let openedSubMenu =
   (this.openedSubMenu != -1) ?
     Object.assign({}, this.openedSubMenu) : -1;
+
+  // Remove tooltip data from submenu if exists
+  if (openedSubMenu.data && openedSubMenu.data['bs.tooltip'] != undefined) {
+    delete openedSubMenu.data['bs.tooltip'];
+  }
+
   let displayTooltips = (app.common.displayTooltips) ? 1 : 0;
   let favouriteModules = [];
   const filters = {};
@@ -1090,6 +1096,9 @@ Toolbar.prototype.createContent = function(
   this.DOMObject.find('.close-content').on('click', function() {
     self.openMenu(self.openedMenu);
   });
+
+  // Reload tooltips
+  app.common.reloadTooltips(self.DOMObject);
 };
 
 /**
@@ -1196,7 +1205,7 @@ Toolbar.prototype.selectCard = function(card) {
     this.selectedCard = card;
 
     // Show designer overlay
-    $('.custom-overlay').show().off().on('click', () => {
+    $('.custom-overlay').show().off('click').on('click', () => {
       this.deselectCardsAndDropZones();
     });
 
@@ -2138,7 +2147,7 @@ Toolbar.prototype.handleCardsBehaviour = function() {
             $(this).parents('nav.navbar').addClass('card-selected');
 
             // Reload tooltips to avoid floating detached elements
-            app.common.reloadTooltips(app.editorContainer);
+            app.common.reloadTooltips(self.DOMObject);
           },
           stop: function() {
           // Hide overlay
@@ -2152,7 +2161,7 @@ Toolbar.prototype.handleCardsBehaviour = function() {
             $(this).parents('nav.navbar').removeClass('card-selected');
 
             // Reload tooltips to avoid floating detached elements
-            app.common.reloadTooltips(app.editorContainer);
+            app.common.reloadTooltips(self.DOMObject);
           },
         });
       });
@@ -2317,14 +2326,14 @@ Toolbar.prototype.createMediaPreview = function(media) {
     trans: toolbarTrans,
   }));
 
-  $mediaPreview.find('#closeBtn').off().on('click', function() {
+  $mediaPreview.find('#closeBtn').off('click').on('click', function() {
     // Close preview and empty content
     $mediaPreview.find('#content').html('');
     $mediaPreview.removeClass('show');
     $mediaPreview.remove();
   });
 
-  $mediaPreview.find('#sizeBtn').off().on('click', function(e) {
+  $mediaPreview.find('#sizeBtn').off('click').on('click', function(e) {
     // Toggle size class
     $mediaPreview.toggleClass('large');
 
@@ -2339,7 +2348,7 @@ Toolbar.prototype.createMediaPreview = function(media) {
     );
   });
 
-  $mediaPreview.find('#selectBtn').off().on('click', function() {
+  $mediaPreview.find('#selectBtn').off('click').on('click', function() {
     // Select Media on toolbar
     const $card = self.DOMObject.find(
       '.toolbar-menu-content #content-' +
@@ -2434,7 +2443,7 @@ Toolbar.prototype.openSubMenu = function(
   );
 
   // Handle back button
-  $submenuContainer.find('.close-submenu').off().on('click', function() {
+  $submenuContainer.find('.close-submenu').off('click').on('click', function() {
     $submenuContainer.removeClass('toolbar-cards-pane');
 
     // Clear submenu
@@ -2507,7 +2516,7 @@ Toolbar.prototype.openGroupMenu = function(
   );
 
   // Handle back button
-  $submenuContainer.find('.close-submenu').off().on('click', function() {
+  $submenuContainer.find('.close-submenu').off('click').on('click', function() {
     $submenuContainer.removeClass('toolbar-group-pane');
 
     // Clear submenu
@@ -2640,9 +2649,7 @@ Toolbar.prototype.loadTemplates = function(
         );
 
         // Initialise tooltips
-        self.parent.common.reloadTooltips(
-          $container,
-        );
+        app.common.reloadTooltips(self.DOMObject);
 
         // Handle cards behaviour
         self.handleCardsBehaviour();

diff --git a/ui/src/editor-core/topbar.js b/ui/src/editor-core/topbar.js
@@ -114,7 +114,7 @@ Topbar.prototype.render = function() {
   };
 
   // Setup layout edit form.
-  this.DOMObject.find('#layoutInfo').off().on('click', function() {
+  this.DOMObject.find('#layoutInfo').off('click').on('click', function() {
     // Pop open the layout edit form.
     // eslint-disable-next-line new-cap
     XiboFormRender(urlsForApi.layout.editForm.url.replace(
@@ -178,6 +178,9 @@ Topbar.prototype.render = function() {
 
   // Update layout status
   this.updateLayoutStatus();
+
+  // Reload tooltips
+  app.common.reloadTooltips(self.DOMObject);
 };
 
 /**

diff --git a/ui/src/layout-editor/main.js b/ui/src/layout-editor/main.js
@@ -332,6 +332,9 @@ $(() => {
         reloadPropertiesPanel: true,
       });
 
+      // Initialise tooltips on main container
+      lD.common.reloadTooltips(lD.editorContainer);
+
       // Load preferences
       lD.loadPrefs();
     } else {
@@ -2499,7 +2502,7 @@ lD.openPlaylistEditor = function(playlistId, region) {
 
   // On close, remove container and refresh designer
   lD.editorContainer.find('.back-button #backToLayoutEditorBtn')
-    .off().on('click', function() {
+    .off('click').on('click', function() {
       // Close playlist editor
       pE.close();
 

diff --git a/ui/src/layout-editor/viewer.js b/ui/src/layout-editor/viewer.js
@@ -320,9 +320,7 @@ Viewer.prototype.render = function(forceReload = false) {
   this.updateMoveableUI();
 
   // Initialise tooltips
-  this.parent.common.reloadTooltips(
-    this.DOMObject.parent(),
-  );
+  this.parent.common.reloadTooltips(this.DOMObject);
 };
 
 /**
@@ -786,18 +784,19 @@ Viewer.prototype.handleInteractions = function() {
     });
 
   // Handle fullscreen button
-  $viewerContainer.siblings('#fullscreenBtn').off().click(function() {
+  $viewerContainer.siblings('#fullscreenBtn').off('click').click(function() {
     this.reload = true;
     this.toggleFullscreen();
   }.bind(this));
 
   // Handle layer manager button
-  $viewerContainer.siblings('#layerManagerBtn').off().click(function(ev) {
-    this.layerManager.setVisible();
-  }.bind(this));
+  $viewerContainer.siblings('#layerManagerBtn')
+    .off('click').click(function() {
+      this.layerManager.setVisible();
+    }.bind(this));
 
   // Handle snap buttons
-  $viewerContainer.siblings('#snapToGrid').off().click(function(ev) {
+  $viewerContainer.siblings('#snapToGrid').off('click').click(function() {
     this.moveableOptions.snapToGrid = !this.moveableOptions.snapToGrid;
 
     // Turn off snap to element if grid is on
@@ -812,30 +811,33 @@ Viewer.prototype.handleInteractions = function() {
     this.updateMoveableUI();
   }.bind(this));
 
-  $viewerContainer.parent().find('#snapToBorders').off().click(function() {
-    this.moveableOptions.snapToBorders = !this.moveableOptions.snapToBorders;
+  $viewerContainer.parent().find('#snapToBorders')
+    .off('click').click(function() {
+      this.moveableOptions.snapToBorders = !this.moveableOptions.snapToBorders;
 
-    // Update moveable options
-    this.updateMoveableOptions();
+      // Update moveable options
+      this.updateMoveableOptions();
 
-    // Update moveable UI
-    this.updateMoveableUI();
-  }.bind(this));
+      // Update moveable UI
+      this.updateMoveableUI();
+    }.bind(this));
 
-  $viewerContainer.parent().find('#snapToElements').off().click(function() {
-    this.moveableOptions.snapToElements = !this.moveableOptions.snapToElements;
+  $viewerContainer.parent().find('#snapToElements')
+    .off('click').click(function() {
+      this.moveableOptions.snapToElements =
+        !this.moveableOptions.snapToElements;
 
-    // Turn off snap to grid if element is on
-    if (this.moveableOptions.snapToElements) {
-      this.moveableOptions.snapToGrid = false;
-    }
+      // Turn off snap to grid if element is on
+      if (this.moveableOptions.snapToElements) {
+        this.moveableOptions.snapToGrid = false;
+      }
 
-    // Update moveable options
-    this.updateMoveableOptions();
+      // Update moveable options
+      this.updateMoveableOptions();
 
-    // Update moveable UI
-    this.updateMoveableUI();
-  }.bind(this));
+      // Update moveable UI
+      this.updateMoveableUI();
+    }.bind(this));
 
   const updateMoveableWithDebounce = _.debounce(function() {
     self.updateMoveableOptions();
@@ -2505,9 +2507,7 @@ Viewer.prototype.updateMoveable = function(
         this.DOMObject.parent().find('.snap-controls').show();
 
         // Initialise tooltips
-        this.parent.common.reloadTooltips(
-          this.DOMObject.parent().find('.snap-controls'),
-        );
+        this.parent.common.reloadTooltips(this.DOMObject);
       }
     }
 
@@ -3089,7 +3089,7 @@ Viewer.prototype.editGroup = function(
 
     // Add overlay and click to close
     self.DOMObject.find('.viewer-overlay').show()
-      .off().on('click', () => {
+      .off('click').on('click', () => {
         self.editGroup(groupDOMObject);
       });
 

diff --git a/ui/src/playlist-editor/main.js b/ui/src/playlist-editor/main.js
@@ -1137,10 +1137,11 @@ pE.toggleMultiselectMode = function(forceSelect = null) {
 
   if (multiSelectFlag) {
     // Show overlay
-    $editorContainer.find('.custom-overlay').show().off().on('click', () => {
-      // Close multi select mode
-      closeMultiselectMode();
-    });
+    $editorContainer.find('.custom-overlay').show().off('click')
+      .on('click', () => {
+        // Close multi select mode
+        closeMultiselectMode();
+      });
 
     // Disable timeline sort
     timeline.DOMObject.find('#timeline-container').sortable('disable');
@@ -1150,7 +1151,7 @@ pE.toggleMultiselectMode = function(forceSelect = null) {
 
     // Enable select for each widget
     timeline.DOMObject.find('.playlist-widget.deletable')
-      .removeClass('selected').off().on('click', function(e) {
+      .removeClass('selected').off('click').on('click', function(e) {
         e.stopPropagation();
         $(e.currentTarget).toggleClass('multi-selected');
 

diff --git a/views/layout-designer-page.twig b/views/layout-designer-page.twig
@@ -155,7 +155,7 @@
                         },
                         permissions: {
                             name: "{{ "Sharing" |trans }}",
-                            description: "{{ "Set View, Edit and Delete Sharing for Widgets and Regions"|trans }}"
+                            description: "{{ "Set View, Edit and Delete Sharing for Widgets and Playlists"|trans }}"
                         }
                     }
                 };

diff --git a/views/user-form-permissions.twig b/views/user-form-permissions.twig
@@ -33,6 +33,10 @@
         {% set objectName = "Layout"|trans %}
     {% elseif object.isDisplaySpecific == 1 %}
         {% set objectName = "Display"|trans %}
+    {% elseif (object.type == "playlist") or (object.type == "subplaylist") %}
+        {% set objectName = "Playlist"|trans %}
+    {% elseif object.type == "frame" %}
+        {% set objectName = "Widget"|trans %}
     {% else %}
         {% set objectName = entity|trans %}
     {% endif %}
@@ -51,6 +55,7 @@
     <div class="permissions-form">
         <div class="row">
             <div class="col-md-12">
+            <p>{{object.type}}</p>
                 <div class="XiboGrid permissionsGrid" id="{{ randomId }}"
                      data-url="{{ url_for("user.permissions", {entity: entity, id: objectId}) }}"
                      data-permissions="{{ permissions|json_encode }}">