Toolbox: Add description to module templates

lib/Entity/ModuleTemplate.php

@@ -70,6 +70,12 @@ class ModuleTemplate implements \JsonSerializable
      */
     public $title;
 
+    /**
+     * @SWG\Property(description="Description of the Module Template")
+     * @var string
+     */
+    public $description;
+
     /**
      * @SWG\Property()
      * @var string Icon

lib/Factory/ModuleTemplateFactory.php

@@ -414,6 +414,7 @@ private function createFromXml(\DOMElement $xml, string $ownership, string $file
         $template->type = $this->getFirstValueOrDefaultFromXmlNode($xml, 'type');
         $template->dataType = $this->getFirstValueOrDefaultFromXmlNode($xml, 'dataType');
         $template->title = __($this->getFirstValueOrDefaultFromXmlNode($xml, 'title'));
+        $template->description = __($this->getFirstValueOrDefaultFromXmlNode($xml, 'description'));
         $template->thumbnail = $this->getFirstValueOrDefaultFromXmlNode($xml, 'thumbnail');
         $template->icon = $this->getFirstValueOrDefaultFromXmlNode($xml, 'icon');
         $template->isVisible = $this->getFirstValueOrDefaultFromXmlNode($xml, 'isVisible') !== 'false';

ui/src/editor-core/toolbar.js

@@ -1312,6 +1312,9 @@ Toolbar.prototype.createContent = function(
     // Adapt card behaviour to current tab
     self.handleCardsBehaviour();
 
+    // Reload tooltips
+    app.common.reloadTooltips(self.DOMObject);
+
     return;
   }
 
@@ -3285,6 +3288,9 @@ Toolbar.prototype.handleCardsBehaviour = function() {
         }
       });
   }
+
+  // Reload tooltips
+  app.common.reloadTooltips(self.DOMObject);
 };
 
 /**

ui/src/layout-editor/main.js

@@ -2316,7 +2316,7 @@ lD.dropItemAdd = function(droppable, draggable, dropPosition) {
             extendsOverride: draggableData.extendsOverride,
             extendsOverrideId: draggableData.extendsOverrideId,
             mediaId: draggableData.mediaId,
-            mediaName: draggableData.title,
+            mediaName: draggableData.cardTitle,
             isVisible: draggableData.isVisible,
           };
 
@@ -2511,7 +2511,7 @@ lD.dropItemAdd = function(droppable, draggable, dropPosition) {
             const onUploadDone = function(data) {
               // Add media id to data
               draggableData.mediaId = data.response().result.files[0].mediaId;
-              draggableData.title = data.response().result.files[0].name;
+              draggableData.cardTitle = data.response().result.files[0].name;
             };
 
             lD.openUploadForm({

ui/src/style/common.scss

@@ -83,6 +83,29 @@ $fa-font-path: "~font-awesome/fonts";
     }
 }
 
+/* Tooltip colour */
+div.tooltip.bs-tooltip-auto {
+    .tooltip-inner {
+        background-color: darken($xibo-color-secondary, 10%);
+    }
+
+    &[x-placement^=right] .arrow::before {
+        border-right-color: darken($xibo-color-secondary, 10%);
+    }
+
+    &[x-placement^=left] .arrow::before {
+        border-left-color: darken($xibo-color-secondary, 10%);
+    }
+
+    &[x-placement^=top] .arrow::before {
+        border-top-color: darken($xibo-color-secondary, 10%);
+    }
+
+    &[x-placement^=bottom] .arrow::before {
+        border-bottom-color: darken($xibo-color-secondary, 10%);
+    }
+}
+
 .no-user-select {
     @include user-select-none();
 }

ui/src/templates/toolbar-card-item.hbs

@@ -1,5 +1,4 @@
 <div class="toolbar-card toolbar-card-item {{#if thumbnail}}has-thumb{{/if}} {{#if isRequired}}required-element{{/if}}" 
-    data-toggle="tooltip" 
     data-type="{{type}}" 
     data-sub-type="{{#if subType}}{{subType}}{{else}}{{dataType}}{{/if}}"
     data-data-type="{{dataType}}"
@@ -8,6 +7,8 @@
     data-template-id="{{templateId}}"
     data-template-start-width="{{startWidth}}"
     data-template-start-height="{{startHeight}}"
+    data-card-title="{{title}}"
+    data-toggle="tooltip" data-title="{{description}}"
     {{#with extends as | extend |}}
         data-extends-template="{{extend.template}}"
         data-extends-override="{{extend.override}}"
@@ -28,7 +29,7 @@
         data-toggle="tooltip" data-title="{{trans.isRequired}}"></i>
 {{/if}}
 
-    <div class="toolbar-content tooltip-always-on" data-toggle="tooltip" data-title="{{title}}">
+    <div class="toolbar-content" title="{{title}}">
         <span class="card-title">{{title}}</span>
     </div>
 </div>

ui/src/templates/toolbar-card-layout-template.hbs

@@ -3,9 +3,10 @@
     data-target="layout"
     data-template-id="{{id}}"
     data-data-type="{{dataType}}"
-    data-title="{{title}}"
     data-source="{{#if provider}}remote{{else}}local{{/if}}"
-    data-download="{{download}}">
+    data-download="{{download}}"
+    data-card-title="{{title}}"
+    data-toggle="tooltip" data-title="{{description}}">
 
     <div class="toolbar-card-preview">
         <img class="thumb" src="{{thumbnail}}" alt="{{title}}">
@@ -28,7 +29,7 @@
             </div>
         {{/if}}
     </div>
-    <span class="media-title tooltip-always-on" data-toggle="tooltip" data-title="{{title}}" data-placement="right">{{title}}</span>
+    <span class="media-title" title="{{title}}">{{title}}</span>
 
     <div class="badges">
         {{#if orientation}}

ui/src/templates/toolbar-card-media-placeholder.hbs

@@ -1,5 +1,4 @@
 <div class="toolbar-card toolbar-card-item placeholder-card"
-    data-toggle="tooltip" 
     data-type="element"
     data-data-type="global"
     data-sub-type="global"
@@ -13,7 +12,8 @@
         data-extends-override="{{extend.override}}"
         data-extends-with="{{extend.with}}"
     {{/with}}
-    data-title="{{description}}">
+    data-card-title="{{title}}"
+    data-toggle="tooltip" data-title="{{description}}">
 
     <div class="toolbar-card-preview">
         <i class="fa fa-picture-o card-icon"></i>

ui/src/templates/toolbar-card-media-upload.hbs

@@ -1,13 +1,13 @@
 <div class="toolbar-card upload-card toolbar-card-special"
-    data-toggle="tooltip" 
     data-type="widget" 
     data-sub-type="{{type}}"
     data-target="{{#if target}}{{target}}{{else}}layout playlist zone{{/if}}"
     data-region-specific="{{regionSpecific}}"
     data-valid-ext="{{ validExtensions }}"
     data-max-size="{{ maxSize }}" 
     data-max-size-message="{{ maxSizeMessage }}"
-    data-title="{{description}}">
+    data-card-title="{{title}}"
+    data-toggle="tooltip" data-title="{{description}}">
 
     <div class="toolbar-card-preview">
         <div class="select-button select-upload">

ui/src/templates/toolbar-card-media.hbs

@@ -4,8 +4,9 @@
     data-sub-type="{{type}}"
     data-target="{{#if target}}{{target}}{{else}}layout playlist drawer zone{{/if}}"
     data-data-type="{{dataType}}"
-    data-title="{{title}}"
-    data-download="{{download}}">
+    data-download="{{download}}"
+    data-card-title="{{title}}"
+    data-toggle="tooltip" data-title="{{description}}">
 
     <div class="toolbar-card-preview">
         {{#neq thumbnail null}}
@@ -50,5 +51,5 @@
         {{/if}}
     </div>
 
-    <span class="media-title tooltip-always-on" data-toggle="tooltip" data-title="{{title}}" data-placement="right">{{title}}</span>
+    <span class="media-title" title="{{title}}" data-placement="right">{{title}}</span>
 </div>

ui/src/templates/toolbar-card-playlist-new-template.hbs

@@ -1,10 +1,10 @@
 <div class="toolbar-card new-playlist-card toolbar-card-special"
-    data-toggle="tooltip" 
     data-type="widgets" 
     data-sub-type="{{#if editingPlaylist}}subplaylist{{else}}playlist{{/if}}"
     data-target="{{#if target}}{{target}}{{else}}layout zone {{#if editingPlaylist}}playlist{{/if}}{{/if}}"
     data-region-specific="1"
-    data-title="{{description}}">
+    data-card-title="{{title}}"
+    data-toggle="tooltip"  data-title="{{description}}">
 
     <div class="toolbar-card-preview">
         <i class="fa fa-list-ol card-icon"></i>

ui/src/templates/toolbar-card-playlist-template.hbs

@@ -3,10 +3,12 @@
     data-target="layout zone {{#if editingPlaylist}}playlist{{/if}}"
     data-sub-type="{{#if editingPlaylist}}subplaylist{{else}}playlist{{/if}}"
     data-sub-playlist-id="{{playlistId}}"
-    data-name="{{name}}">
+    data-name="{{name}}"
+    data-card-title="{{title}}"
+    data-toggle="tooltip" data-title="{{description}}">
 
     <div class="toolbar-card-preview">
-        <span class="media-title tooltip-always-on" data-toggle="tooltip" data-title="{{name}}" data-placement="right">{{name}}</span>
+        <span class="media-title" title="{{name}}">{{name}}</span>
 
         {{#if playlistDuration}}
             <div class="media-duration" data-title="{{trans.duration}}" data-toggle="tooltip" data-placement="top">
@@ -15,7 +17,7 @@
         {{/if}}
 
         {{#if isDynamic}}
-            <div class="dynamic-logo tooltip-always-on" data-title="{{trans.dynamicPlaylist}}" data-toggle="tooltip" data-placement="top">
+            <div class="dynamic-logo" data-title="{{trans.dynamicPlaylist}}" data-toggle="tooltip" data-placement="top">
                 <i class="fa fa-magic"></i>
             </div>
         {{/if}}

ui/src/templates/toolbar-card-stencil.hbs

@@ -1,5 +1,4 @@
 <div class="toolbar-card toolbar-card-stencil {{#if thumbnail}}has-thumb{{/if}}" 
-    data-toggle="tooltip" 
     data-type="{{type}}" 
     data-sub-type="{{#if subType}}{{subType}}{{else}}{{dataType}}{{/if}}"
     data-data-type="{{dataType}}"
@@ -12,6 +11,8 @@
         data-extends-override="{{extend.override}}"
         data-extends-with="{{extend.with}}"
     {{/with}}
+    data-card-title="{{title}}"
+    data-toggle="tooltip" data-title="{{description}}"
     >
 
 {{#if thumbnail}}
@@ -20,7 +21,7 @@
     </div>
 {{/if}}
 
-    <div class="toolbar-content tooltip-always-on" data-toggle="tooltip" data-title="{{title}}">
+    <div class="toolbar-content" title="{{title}}">
         <span class="card-title">{{title}}</span>
     </div>
 </div>

ui/src/templates/toolbar-card-template.hbs

@@ -6,6 +6,8 @@
     data-template-id="{{templateId}}"
     data-start-width="{{startWidth}}"
     data-start-height="{{startHeight}}"
+    data-card-title="{{title}}"
+    data-toggle="tooltip" data-title="{{description}}"
 >
 
 {{#if thumbnail}}
@@ -18,7 +20,7 @@
     {{/if}}
 {{/if}}
 
-    <div class="toolbar-content tooltip-always-on" data-toggle="tooltip" data-title="{{title}}">
+    <div class="toolbar-content" title="{{title}}">
         <span class="card-title">{{title}}</span>
     </div>
 </div>

ui/src/templates/toolbar-card.hbs

@@ -1,5 +1,4 @@
-<div class="toolbar-card tooltip-always-on {{#eq cardType "moduleGroup"}}toolbar-card-group{{/eq}} {{#neq dataType ""}}toolbar-card-menu{{/neq}} {{#if favourited}}favourited{{/if}} {{#if thumbnail}}has-thumb{{/if}}" 
-    data-toggle="tooltip" 
+<div class="toolbar-card  {{#eq cardType "moduleGroup"}}toolbar-card-group{{/eq}} {{#neq dataType ""}}toolbar-card-menu{{/neq}} {{#if favourited}}favourited{{/if}} {{#if thumbnail}}has-thumb{{/if}}" 
     data-type="{{contentType}}" 
     data-sub-type="{{type}}"
     data-data-type="{{dataType}}"
@@ -8,10 +7,11 @@
     data-valid-ext="{{ validExtensions }}"
     data-max-size="{{ maxSize }}" 
     data-max-size-message="{{ maxSizeMessage }}"
-    data-title="{{name}}"
     data-description="{{description}}"
     data-start-width="{{startWidth}}"
     data-start-height="{{startHeight}}"
+    data-card-title="{{name}}"
+    data-toggle="tooltip" data-title="{{description}}"
 >
 
     {{#eq contentType "widgets"}}
@@ -38,7 +38,7 @@
         <i class="{{iconType}}-icon {{icon}} card-icon"></i>
     {{/if}}
 
-    <div class="toolbar-content tooltip-always-on" data-toggle="tooltip" data-title="{{title}}">
+    <div class="toolbar-content">
         <span class="card-title">{{name}}</span>
     </div>
 </div>

ui/src/templates/toolbar-content-group.hbs

@@ -4,7 +4,7 @@
     </div>
     <div class="content-title">
         <i class="{{data.icon}} card-icon"></i>
-        <span>{{data.title}}</span>
+        <span>{{data.cardTitle}}</span>
     </div>
 </div>
 

ui/src/templates/toolbar-content-submenu.hbs

@@ -4,7 +4,7 @@
     </div>
     <div class="content-title">
         <i class="{{data.icon}} card-icon"></i>
-        <span>{{data.title}}</span>
+        <span>{{data.cardTitle}}</span>
     </div>
 </div>
 

ui/src/templates/toolbar-media-preview-info.hbs

@@ -1,5 +1,5 @@
 <div class="mediaInfo">
-    <span>{{data.title}}</span>
+    <span>{{data.cardTitle}}</span>
 
     {{#if data.width}}
         <span>