Improve announcement rendering and theme assets

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.8.8 - 2026-08-26
+
+### Changed
+
+- Refreshed the vendored AdminLTE assets to 4.8.5.
+- Added AdminLTE extended palette colours to announcement colour choices and player rendering.
+- Remove Digital Signage Subheading and top padding.
+
 ## 2.8.7 - 2026-08-22
 
 ### Added

build/package.player.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-player",
-  "version": "2.8.7",
+  "version": "2.8.8",
   "private": false,
   "description": "Pulse Signage player application bundle",
   "engines": {

build/package.web.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-web",
-  "version": "2.8.7",
+  "version": "2.8.8",
   "private": false,
   "description": "Pulse Signage web and bridge application bundle",
   "engines": {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pulse-signage",
-  "version": "2.8.7",
+  "version": "2.8.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.8.7",
+      "version": "2.8.8",
       "dependencies": {
         "@sparticuz/chromium": "^149.0.0",
         "animate.css": "^4.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage",
-  "version": "2.8.7",
+  "version": "2.8.8",
   "private": false,
   "description": "Pulse Signage application with MySQL and media storage",
   "engines": {

src/data/announcements.js

@@ -11,7 +11,11 @@ const { validateMaxLength } = require('./utils');
 const SHORT_LABEL_MAX_LENGTH = 255;
 
 const ANNOUNCEMENT_TYPES = ['lower-third', 'fullscreen', 'top-banner'];
-const ANNOUNCEMENT_COLORS = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light'];
+const ANNOUNCEMENT_COLORS = [
+  'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light',
+  'orange', 'amber', 'olive', 'teal', 'sky', 'indigo', 'violet', 'fuchsia', 'pink',
+  'navy', 'steel', 'slate', 'graphite', 'midnight'
+];
 
 function normalizeAnnouncementType(value) {
   const normalized = String(value || '').trim().toLowerCase();

src/player/public/js/player-announcement-templates.js

@@ -22,7 +22,11 @@
 
   function normalizeAnnouncementColor(value) {
     var normalized = String(value || '').trim().toLowerCase();
-    if (['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light'].indexOf(normalized) !== -1) {
+    if ([
+      'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light',
+      'orange', 'amber', 'olive', 'teal', 'sky', 'indigo', 'violet', 'fuchsia', 'pink',
+      'navy', 'steel', 'slate', 'graphite', 'midnight'
+    ].indexOf(normalized) !== -1) {
       return normalized;
     }
     return 'primary';
@@ -42,7 +46,21 @@
       warning: { accent: '#ffc107', foreground: '#201400', glow: 'rgba(255, 193, 7, 0.30)' },
       danger: { accent: '#dc3545', foreground: '#ffffff', glow: 'rgba(220, 53, 69, 0.34)' },
       dark: { accent: '#212529', foreground: '#ffffff', glow: 'rgba(33, 37, 41, 0.34)' },
-      light: { accent: '#f8f9fa', foreground: '#1f2937', glow: 'rgba(248, 249, 250, 0.34)' }
+      light: { accent: '#f8f9fa', foreground: '#1f2937', glow: 'rgba(248, 249, 250, 0.34)' },
+      orange: { accent: '#c84e10', foreground: '#ffffff', glow: 'rgba(200, 78, 16, 0.34)' },
+      amber: { accent: '#a56710', foreground: '#ffffff', glow: 'rgba(165, 103, 16, 0.34)' },
+      olive: { accent: '#5f7f0f', foreground: '#ffffff', glow: 'rgba(95, 127, 15, 0.34)' },
+      teal: { accent: '#12827d', foreground: '#ffffff', glow: 'rgba(18, 130, 125, 0.34)' },
+      sky: { accent: '#127caf', foreground: '#ffffff', glow: 'rgba(18, 124, 175, 0.34)' },
+      indigo: { accent: '#6f60ea', foreground: '#ffffff', glow: 'rgba(111, 96, 234, 0.34)' },
+      violet: { accent: '#9553db', foreground: '#ffffff', glow: 'rgba(149, 83, 219, 0.34)' },
+      fuchsia: { accent: '#b347be', foreground: '#ffffff', glow: 'rgba(179, 71, 190, 0.34)' },
+      pink: { accent: '#cd388d', foreground: '#ffffff', glow: 'rgba(205, 56, 141, 0.34)' },
+      navy: { accent: '#1d2d4c', foreground: '#ffffff', glow: 'rgba(29, 45, 76, 0.34)' },
+      steel: { accent: '#3a4860', foreground: '#ffffff', glow: 'rgba(58, 72, 96, 0.34)' },
+      slate: { accent: '#566577', foreground: '#ffffff', glow: 'rgba(86, 101, 119, 0.34)' },
+      graphite: { accent: '#32363c', foreground: '#ffffff', glow: 'rgba(50, 54, 60, 0.34)' },
+      midnight: { accent: '#1e1d2d', foreground: '#ffffff', glow: 'rgba(30, 29, 45, 0.34)' }
     };
 
     return tokens[colorKey] || tokens.primary;

src/web/public/css/theme-custom.css

@@ -2429,7 +2429,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
 .announcement-color-picker__grid {
   display: grid;
-  grid-template-columns: repeat(8, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
   gap: 0.375rem;
 }
 

src/web/public/js/theme-init.js

@@ -2,25 +2,26 @@
 
 (function () {
   var storageKey = 'lte-theme';
-  var theme = 'dark';
-
-  function getPreferredTheme() {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-
-    return 'light';
-  }
+  var root = document.documentElement;
+  var authoredTheme = root.getAttribute('data-bs-theme');
+  var theme = authoredTheme === 'light' || authoredTheme === 'dark' ? authoredTheme : 'dark';
+  var storedTheme = null;
 
   try {
-    var storedTheme = window.localStorage.getItem(storageKey);
-    if (storedTheme === 'dark' || storedTheme === 'light' || storedTheme === 'auto') {
-      theme = storedTheme === 'auto' ? getPreferredTheme() : storedTheme;
-    }
+    storedTheme = window.localStorage.getItem(storageKey);
   } catch (error) {
-    theme = 'dark';
+    storedTheme = null;
   }
 
-  document.documentElement.dataset.bsTheme = theme;
-  document.documentElement.style.colorScheme = theme;
+  if (storedTheme === 'light' || storedTheme === 'dark') {
+    theme = storedTheme;
+  } else if (storedTheme === 'auto' || (authoredTheme !== 'light' && authoredTheme !== 'dark')) {
+    theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  root.setAttribute('data-bs-theme', theme);
+  root.style.colorScheme = theme;
+  if (theme !== authoredTheme) {
+    root.setAttribute('data-lte-theme-resolved', '');
+  }
 }());

src/web/routes/signage/announcements/routes.js

@@ -28,7 +28,21 @@ module.exports = function registerAnnouncementRoutes(app, deps) {
     { value: 'warning', label: 'Warning' },
     { value: 'danger', label: 'Danger' },
     { value: 'dark', label: 'Dark' },
-    { value: 'light', label: 'Light' }
+    { value: 'light', label: 'Light' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'amber', label: 'Amber' },
+    { value: 'olive', label: 'Olive' },
+    { value: 'teal', label: 'Teal' },
+    { value: 'sky', label: 'Sky' },
+    { value: 'indigo', label: 'Indigo' },
+    { value: 'violet', label: 'Violet' },
+    { value: 'fuchsia', label: 'Fuchsia' },
+    { value: 'pink', label: 'Pink' },
+    { value: 'navy', label: 'Navy' },
+    { value: 'steel', label: 'Steel' },
+    { value: 'slate', label: 'Slate' },
+    { value: 'graphite', label: 'Graphite' },
+    { value: 'midnight', label: 'Midnight' }
   ];
   const ANNOUNCEMENT_ICONS = announcementIcons.ANNOUNCEMENT_ICON_OPTIONS || [];
    const ANNOUNCEMENT_ICON_CATALOG = announcementIcons.ANNOUNCEMENT_ICON_CATALOG || ANNOUNCEMENT_ICONS;

src/web/views/shared/frame-layout.hbs

@@ -8,6 +8,7 @@
     <script src="/assets/js/theme-init.js"></script>
     <link rel="stylesheet" href="/assets/adminlte/bootstrap-icons/css/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/assets/adminlte/css/adminlte.min.css" />
+    <link rel="stylesheet" href="/assets/adminlte/css/adminlte-colors.min.css" />
     <link rel="stylesheet" href="/assets/css/theme-custom.css?v={{appVersion}}" />
     {{#if stylesheets.length}}
       {{#each stylesheets}}

src/web/views/shared/layout.hbs

@@ -10,6 +10,7 @@
     <link rel="preload" href="/assets/adminlte/bootstrap-icons/fonts/bootstrap-icons.woff" as="font" type="font/woff" crossorigin="anonymous" />
     <link rel="stylesheet" href="/assets/adminlte/bootstrap-icons/css/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/assets/adminlte/css/adminlte.min.css" />
+    <link rel="stylesheet" href="/assets/adminlte/css/adminlte-colors.min.css" />
     <link rel="stylesheet" href="/assets/css/theme-custom.css?v={{appVersion}}" />
     <link rel="stylesheet" href="/assets/vendor/animate.css/animate.min.css?v={{appVersion}}" />
     {{#if stylesheets.length}}
@@ -171,11 +172,11 @@
             </a>
           </div>
           <div class="sidebar-wrapper d-flex flex-column flex-grow-1 min-h-0">
-            <nav class="mt-2 flex-grow-1" aria-label="Main navigation">
+            <nav class="flex-grow-1" aria-label="Main navigation">
               <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" data-accordion="false" role="menu" id="navigation">
-                {{#if (anyPermission currentUser 'dashboard.read' 'clients.read' 'screens.read' 'announcements.read' 'playlists.read' 'slides.read' 'templates.read' 'canvas-sizes.read')}}
+                {{!-- {{#if (anyPermission currentUser 'dashboard.read' 'clients.read' 'screens.read' 'announcements.read' 'playlists.read' 'slides.read' 'templates.read' 'canvas-sizes.read')}}
                   <li class="nav-header">DIGITAL SIGNAGE</li>
-                {{/if}}
+                {{/if}} --}}
                 {{#if (hasPermission currentUser 'dashboard.read')}}
                   <li class="nav-item">
                     <a class="nav-link {{#if (eq active 'dashboard')}}active{{/if}}" href="/dashboard">