Enhancement: Add icon for regions that have an action configured.

resolves xibosignage/xibo#2492
xibosignage · Nov 3, 2021 · dff322e · dff322e
1 parent bfc2fae
commit dff322e
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 8 deletions.
diff --git a/ui/src/editor-core/topbar.js b/ui/src/editor-core/topbar.js
@@ -119,7 +119,12 @@ Topbar.prototype.render = function() {
             app.undoLastAction();
         }
     });
-
+
+    // Jump to actions
+    this.DOMObject.find('.layout-info-actions').off().click(function() {
+        lD.propertiesPanel.openTabOnRender = 'a[href="#actionTab"]';
+        lD.selectObject();
+    });
 
     // Set layout jumpList if exists
     if(!$.isEmptyObject(this.jumpList) && $('#layoutJumpList').length == 0) {

diff --git a/ui/src/layout-editor/layout.js b/ui/src/layout-editor/layout.js
@@ -44,6 +44,9 @@ let Layout = function(id, data) {
     this.code = data.code;
     this.folderId = data.folderId;
 
+    // Interactive actions
+    this.actions = data.actions;
+
     // Get background image if exists, if not, get the background color
     this.backgroundCss = function(width = this.width, height = this.height) {       
         if(this.backgroundImage === null) {

diff --git a/ui/src/layout-editor/main.js b/ui/src/layout-editor/main.js
@@ -461,7 +461,7 @@ lD.selectObject = function(obj = null, forceSelect = false, {positionToAdd = nul
             } else if(newSelectedType === 'widget') {
                 // Close navigator mode when selecting a widget
                 if(lD.navigatorMode) {
-                    lD.toggleNavigatorEditing(false);
+                    lD.toggleNavigatorEditing(false, false);
                 }
 
                 if(newSelectedParentType == 'drawer') {
@@ -803,8 +803,9 @@ lD.renderContainer = function(container, element = {}) {
 /**
  * Toggle editing functionality on Navigator
  * @param {boolean} enable - flag to toggle the editing
+ * @param {boolean} reload - flag to force reload data
  */
-lD.toggleNavigatorEditing = function(enable) {
+lD.toggleNavigatorEditing = function(enable, reload = true) {
 
     // Unselect objects ( select layout )
     this.selectObject();
@@ -834,8 +835,10 @@ lD.toggleNavigatorEditing = function(enable) {
     } else {
         lD.navigatorMode = false;
 
-        // Refresh designer
-        this.reloadData(lD.layout);
+        // Reload designer
+        if(reload) {
+            this.reloadData(lD.layout);
+        }
 
         // Clean variable
         this.navigator = {};

diff --git a/ui/src/layout-editor/region.js b/ui/src/layout-editor/region.js
@@ -31,6 +31,9 @@ let Region = function(id, data, {backgroundColor = '#aaa'} = {}) {
     this.isDeletable = data.isDeletable;
     this.isPermissionsModifiable = data.isPermissionsModifiable;
 
+    // Interactive actions
+    this.actions = data.actions;
+
     // set real dimentions
     this.dimensions = {
         width: data.width,

diff --git a/ui/src/layout-editor/timeline.js b/ui/src/layout-editor/timeline.js
@@ -589,6 +589,13 @@ Timeline.prototype.render = function(layout) {
         lD.openPlaylistEditor(playlistId, region);
     });
 
+    this.DOMObject.find('.open-region-actions').click(function() {
+        const regionId = $(this).parents('.designer-region-info').data('region');
+        lD.toggleNavigatorEditing(true);
+        lD.propertiesPanel.openTabOnRender = 'a[href="#actionTab"]';
+        lD.selectObject(self.DOMObject.find('#' + regionId), true);
+    });
+
     // Select region to edit
     this.DOMObject.find('.edit-region, .region-preview').click(function() {
         const regionId = $(this).parents('.designer-region-info').data('region');

diff --git a/ui/src/style/topbar.scss b/ui/src/style/topbar.scss
@@ -51,6 +51,10 @@
             float: left;
         }
 
+        .layout-info-actions {
+            cursor: pointer;
+        }
+
         #layout-info-status {
             float: left;
             padding: 0 5px;

diff --git a/ui/src/templates/timeline-region-info.hbs b/ui/src/templates/timeline-region-info.hbs
@@ -26,11 +26,16 @@
         {{#unless readOnlyModeOn}}
             <div class="region-actions">
                 <a class="edit-region">
-                    <i class="fa fa-edit"></i>
+                    <i class="fa fa-edit" data-content="tooltip" data-toggle="tooltip" data-placement="right" data-title="{{trans.editRegion}}"></i>
                 </a>
                 <a class="open-playlist-editor">
-                    <i class="fa fa-list"></i>
+                    <i class="fa fa-list" data-content="tooltip" data-toggle="tooltip" data-placement="right" data-title="{{trans.openRegionAsPlaylist}}"></i>
                 </a>
+                {{#if actions }}
+                    <a class="open-region-actions">
+                        <i class="fa fa-paper-plane tooltip-always-on" data-content="tooltip" data-toggle="tooltip" data-placement="right" data-title="{{trans.regionActions}} {{ actions.length}}" ></i>
+                    </a>
+                {{/if}}
             </div>
         {{/unless}}
     </div>

diff --git a/ui/src/templates/topbar.hbs b/ui/src/templates/topbar.hbs
@@ -34,6 +34,16 @@
                 data-title="{{trans.dimensionsDetail}}">
                 <i class="fa fa-arrows layout-info-icon"></i><span class="layout-info-label">{{trans.dimensions}}:</span>{{mainObject.width}}x{{mainObject.height}}
             </span>
+
+            {{#if mainObject.actions }}
+                <span class="layout-info-actions"
+                    data-toggle="tooltip" 
+                    data-placement="bottom"
+                    data-container=".editor-top-bar" 
+                    data-title="{{trans.layoutActions}} {{ mainObject.actions.length}}">
+                    <i class="fa fa-paper-plane layout-info-icon"></i><span class="layout-info-label">{{trans.layoutActions}} {{ mainObject.actions.length}}
+                </span>
+            {{/if}}
         </div>
 
         {{!-- Right menu --}}

diff --git a/views/common.twig b/views/common.twig
@@ -447,6 +447,7 @@
                 durationDetail: "{{ "Layout duration" |trans }}",
                 dimensions: "{{ "Dimensions" |trans }}",
                 dimensionsDetail: "{{ "Layout dimensions"|trans }}",
+                layoutActions: "{{ "Layout Actions:"|trans }}",
                 onlyMyLayouts: "{{ "My Layouts?"|trans }}"
             };
 

diff --git a/views/layout-designer-page.twig b/views/layout-designer-page.twig
@@ -93,7 +93,10 @@
                     emptyRegion: "{% trans "Empty Region" %}",
                     addToThisPosition: "{% trans "Add to this position" %}",
                     hiddenContentInWidget: "{% trans "Zoom in to see more details!" %}",
-                    widgetActions: "{% trans "Widget Actions:" %}"
+                    editRegion: "{% trans "Edit region" %}",
+                    openRegionAsPlaylist: "{% trans "Open as playlist" %}",
+                    widgetActions: "{% trans "Widget Actions:" %}",
+                    regionActions: "{% trans "Region Actions:" %}"
                 };
 
                 var bottombarTrans = {