Toolbox Table view: Add upload option

eslint.config.mjs

@@ -0,0 +1,40 @@
+import globals from 'globals';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import js from '@eslint/js';
+import {FlatCompat} from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [...compat.extends('google'), {
+  languageOptions: {
+    globals: {
+      ...globals.browser,
+    },
+
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+
+  settings: {},
+  rules: {
+    indent: ['error', 2, {
+      SwitchCase: 1,
+    }],
+
+    'quote-props': ['warn', 'as-needed'],
+    'dot-location': ['warn', 'property'],
+    'linebreak-style': [0, 'error', 'windows'],
+    'valid-jsdoc': 'off',
+    'require-jsdoc': 'off',
+  },
+}, {
+  files: ['**/*.js'],
+  rules: {},
+}];

package.json

@@ -27,6 +27,8 @@
     "@babel/core": "^7.24.9",
     "@babel/preset-env": "^7.25.0",
     "@babel/traverse": "^7.25.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.8.0",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
     "babel-plugin-polyfill-corejs3": "^0.10.4",
@@ -39,6 +41,7 @@
     "eslint": "^9.8.0",
     "eslint-config-google": "^0.14.0",
     "file-loader": "^6.2.0",
+    "globals": "^15.9.0",
     "handlebars-loader": "^1.7.3",
     "imports-loader": "^5.0.0",
     "less": "^4.2.0",

ui/src/editor-core/toolbar.js

@@ -25,6 +25,8 @@ const ToolbarTemplate = require('../templates/toolbar.hbs');
 const ToolbarCardMediaTemplate = require('../templates/toolbar-card-media.hbs');
 const ToolbarCardMediaUploadTemplate =
   require('../templates/toolbar-card-media-upload.hbs');
+const ToolbaRowMediaUploadTemplate =
+  require('../templates/toolbar-row-media-upload.hbs');
 const ToolbarCardMediaPlaceholderTemplate =
   require('../templates/toolbar-card-media-placeholder.hbs');
 const ToolbarCardLayoutTemplateTemplate =
@@ -2116,6 +2118,9 @@ Toolbar.prototype.mediaContentPopulateTable = function(menu) {
     trans: toolbarTrans.mediaTable,
   }));
 
+  // Add upload container
+  $mediaContent.prepend('<div class="upload-container"></div>');
+
   // Media form
   const $mediaForm = $mediaContainer.find('.media-search-form');
 
@@ -2142,6 +2147,47 @@ Toolbar.prototype.mediaContentPopulateTable = function(menu) {
           filter.types = self.moduleListOtherFiltered.map((el) => el.type);
         }
 
+        // Show upload card
+        const addUploadCard = function(module, removeOthers) {
+          if (removeOthers) {
+            $mediaContent.find('.upload-container').empty();
+          }
+
+          if (
+            module &&
+            $mediaContent.find('.upload-card[data-sub-type="' +
+              module.type +
+              '"]').length == 0
+          ) {
+            module.trans = toolbarTrans;
+
+            module.trans.upload =
+              module.trans.uploadType.replace('%obj%', module.name);
+
+            const $uploadCard = $(ToolbaRowMediaUploadTemplate(
+              Object.assign(
+                {},
+                module,
+                {
+                  editingPlaylist: self.isPlaylist,
+                })),
+            );
+
+            $mediaContent.find('.upload-container').append($uploadCard);
+          }
+        };
+
+        // Add upload card
+        // If we have a specific module type
+        if (filter.type != '') {
+          addUploadCard(app.common.getModuleByType(filter.type), true);
+        } else {
+          // Show one upload card for each media type
+          self.moduleListOtherTypes.forEach((moduleType) => {
+            addUploadCard(app.common.getModuleByType(moduleType), false);
+          });
+        }
+
         $.extend(
           d,
           filter,

ui/src/helpers/transformer.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line valid-jsdoc
 /**
  * String | Number transformer
  */

ui/src/style/toolbar.scss

@@ -275,6 +275,17 @@
                             table-layout: fixed;
                         }
                     }
+
+                    .upload-container {
+                        display: flex;
+                        width: 100%;
+                        gap: 8px;
+                        margin-bottom: 8px;
+                        border: 1px solid $xibo-color-neutral-600;
+                        background-color: $xibo-color-neutral-0;
+                        padding: 12px;
+                        border-radius: 4px;
+                    }
                 }
             }
 
@@ -588,6 +599,26 @@
                         }
                     }
 
+                    &.upload-card.toolbar-row-special {
+                        min-height: 60px;
+
+                        .toolbar-card-preview {
+                            gap: 8px;
+                            padding: 12px;
+                            flex-direction: column;
+                            justify-content: center;
+
+                            .card-icon {
+                                margin: inherit;
+                            }
+
+                            .media-title {
+                                color: $xibo-color-neutral-0;
+                                text-align: center;
+                            }
+                        }
+                    }
+
                     &:hover {
                         .toolbar-card-preview {
                             border-color: $xibo-color-primary-l60;
@@ -1159,10 +1190,14 @@
             .toolbar-menu-content .toolbar-pane {
                 width: $toolbar-content-level-4-width;
 
-                .toolbar-card:not(tr), .toolbar-card-sizer {
+                .toolbar-card:not(tr):not(.toolbar-row-special), .toolbar-card-sizer {
                     width: calc(calc(100%/4) - 4.5px) !important;
                 }
 
+                .toolbar-row-special {
+                    width: calc(calc(100%/3) - 4px) !important;
+                }
+
                 /* Filter form */
                 form.toolbar-search-form {
                     display: flex;

ui/src/style/variables.scss

@@ -19,6 +19,7 @@ $xibo-color-neutral-0: #fff;
 $xibo-color-neutral-100: #FCFCFC;
 $xibo-color-neutral-300: #E9E9E9;
 $xibo-color-neutral-500: #CECECE;
+$xibo-color-neutral-600: #CCC;
 $xibo-color-neutral-700: #898989;
 $xibo-color-neutral-900: #333333;
 $xibo-color-neutral-1000: #000000;

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

@@ -0,0 +1,20 @@
+<div class="toolbar-card upload-card toolbar-row-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}}">
+
+    <div class="toolbar-card-preview">
+        <div class="select-button select-upload">
+            <i class="fa fa-check selectedShow"></i>
+        </div>
+
+        <i class="fa fa-upload card-icon"></i>
+        <span class="media-title">{{trans.upload}}</span>
+    </div>
+</div>