feat: add ZM_WEB_BUTTON_STYLE config for icons+text, icons, or text buttons

Add a web config option to control toolbar button display: - icons+text (default): show both icon and label - icons: show only the icon, hide text labels - text: show only the label, hide icons on buttons that have labels Body class (btn-icons-only / btn-text-only) is set in getBodyTopHTML() and CSS rules in skin.css toggle visibility of .text spans and icon elements. Add title tooltips to console.php buttons so they remain usable in icon-only mode. Migration appended to zm_update-1.39.4.sql. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 18:04:14 -04:00 · 2026-03-12 18:04:14 -04:00 · 217c415551
parent 0de4753d49
commit 217c415551
6 changed files with 55 additions and 8 deletions
--- a/db/zm_update-1.39.4.sql
+++ b/db/zm_update-1.39.4.sql
@ -17,3 +17,17 @@ UPDATE Config SET
      No: Checkbox is shown and unchecked by default. Users may check it to persist the session.
      '
 WHERE Name = 'ZM_OPT_USE_REMEMBER_ME';
+
+--
+-- Add ZM_WEB_BUTTON_STYLE config option
+--
+
+SET @s = (SELECT IF(
+    (SELECT COUNT(*) FROM Config WHERE Name = 'ZM_WEB_BUTTON_STYLE') > 0,
+"SELECT 'ZM_WEB_BUTTON_STYLE already exists'",
+"INSERT INTO Config SET Id = 251, Name = 'ZM_WEB_BUTTON_STYLE', Value = 'icons+text', Type = 'string', DefaultValue = 'icons+text', Hint = 'icons+text|icons|text', Pattern = '(?^i:^([it]))', Format = ' $1 ', Prompt = 'How to display toolbar buttons throughout the interface', Help = 'Controls the display of toolbar buttons across the web interface. Icons + Text: Show both icon and label (default). Icons Only: Show only the icon; labels are hidden. Text Only: Show only the label; icons are hidden on buttons that have labels.', Category = 'web', Readonly = '0', Requires = ''"
+));
+
+PREPARE stmt FROM @s;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
--- a/scripts/ZoneMinder/lib/ZoneMinder/ConfigData.pm.in
+++ b/scripts/ZoneMinder/lib/ZoneMinder/ConfigData.pm.in
@ -3017,6 +3017,24 @@ our @options = (
    requires    => [ { name=>'ZM_WEB_NAVBAR_TYPE', value=>'left' } ],
    category    => 'web',
  },
+  {
+    name        => 'ZM_WEB_BUTTON_STYLE',
+    default     => 'icons+text',
+    description => 'How to display toolbar buttons throughout the interface.',
+    help        => q`
+      Controls the display of toolbar buttons across the web interface.
+      Icons + Text: Show both icon and label (default).
+      Icons Only: Show only the icon; labels are hidden.
+      Text Only: Show only the label; icons are hidden on buttons that have labels.
+      `,
+    type        => {
+      db_type     => 'string',
+      hint        => 'icons+text|icons|text',
+      pattern     => qr|^([it])|i,
+      format      => q( $1 )
+    },
+    category    => 'web',
+  },
  {
    name        => 'ZM_WEB_H_REFRESH_MAIN',
    default     => '240',
--- a/web/skins/classic/css/base/skin.css
+++ b/web/skins/classic/css/base/skin.css
@ -1633,4 +1633,18 @@ video-stream[id^='liveStream'] video{
 .invisible {
    visibility: hidden;
 }
+
+/* Button style: icons only — hide text labels */
+.btn-icons-only button .text,
+.btn-icons-only .btn .text {
+  display: none;
+}
+
+/* Button style: text only — hide icons on buttons that have a text label */
+.btn-text-only button:has(.text) > i.material-icons,
+.btn-text-only button:has(.text) > i.fa,
+.btn-text-only .btn:has(.text) > i.material-icons,
+.btn-text-only .btn:has(.text) > i.fa {
+  display: none;
+}
 /* --- This block should always be located at the end! */
--- a/web/skins/classic/includes/functions.php
+++ b/web/skins/classic/includes/functions.php
@ -159,6 +159,8 @@ function getBodyTopHTML() {
  $classes = $view.'-page';
  if (defined('ZM_WEB_NAVBAR_STICKY') and ZM_WEB_NAVBAR_STICKY) $classes .= ' sticky';
  if (defined('ZM_WEB_FILTER_SETTINGS_POSITION') and ZM_WEB_FILTER_SETTINGS_POSITION == 'inline') $classes .= ' filter-inline';
+  if (defined('ZM_WEB_BUTTON_STYLE') and ZM_WEB_BUTTON_STYLE == 'icons') $classes .= ' btn-icons-only';
+  else if (defined('ZM_WEB_BUTTON_STYLE') and ZM_WEB_BUTTON_STYLE == 'text') $classes .= ' btn-text-only';
  $classHTML = ' class="'.$classes.'"';
  echo '
 <body data-swipe-threshold="10" data-swipe-unit="vw" data-swipe-timeout="300"'.$classHTML.'>
--- a/web/skins/classic/js/skin.js
+++ b/web/skins/classic/js/skin.js
@ -847,8 +847,7 @@ function isJSON(str) {
    const result = JSON.parse(str);
    const type = Object.prototype.toString.call(result);
    return type === '[object Object]' || type === '[object Array]'; // We only pass objects and arrays
-  } catch (e) {
-    console.log('This is not JSON', str, e);
+  } catch {
    return false; // This is also not JSON
  }
 }
--- a/web/skins/classic/views/console.php
+++ b/web/skins/classic/views/console.php
@ -190,31 +190,31 @@ echo $navbar ?>
  }
 ?>
        <button type="button" name="addBtn" data-on-click="addMonitor"
-        <?php echo $canCreateMonitors ? '' : ' disabled="disabled" title="'.translate('AddMonitorDisabled').'"' ?>
+        <?php echo $canCreateMonitors ? 'title="'.translate('Add Monitor').'"' : ' disabled="disabled" title="'.translate('AddMonitorDisabled').'"' ?>
        >
          <i class="material-icons">add_circle</i>
          <span class="text">&nbsp;<?php echo translate('AddNewMonitor') ?></span>
        </button>
-        <button type="button" name="cloneBtn" data-on-click-this="cloneMonitor" disabled="disabled">
+        <button type="button" name="cloneBtn" data-on-click-this="cloneMonitor" disabled="disabled" title="<?php echo translate('Clone')?>">
          <i class="material-icons">content_copy</i>
  <!--content_copy used instead of file_copy as there is a bug in material-icons -->
          <span class="text">&nbsp;<?php echo translate('CloneMonitor') ?></span>
        </button>
-        <button type="button" name="editBtn" data-on-click-this="editMonitor" disabled="disabled">
+        <button type="button" name="editBtn" data-on-click-this="editMonitor" disabled="disabled" title="<?php echo translate('Edit')?>">
          <i class="material-icons">edit</i>
          <span class="text">&nbsp;<?php echo translate('Edit') ?></span>
        </button>
-        <button type="button" name="deleteBtn" data-on-click-this="deleteMonitor" disabled="disabled">
+        <button type="button" name="deleteBtn" data-on-click-this="deleteMonitor" disabled="disabled" title="<?php echo translate('Delete')?>">
          <i class="material-icons">delete</i>
          <span class="text">&nbsp;<?php echo translate('Delete') ?></span>
        </button>
-        <button type="button" name="selectBtn" data-on-click-this="selectMonitor" disabled="disabled">
+        <button type="button" name="selectBtn" data-on-click-this="selectMonitor" disabled="disabled" title="<?php echo translate('Select')?>">
          <i class="material-icons">view_list</i>
          <span class="text">&nbsp;<?php echo translate('Select') ?></span>
        </button>
      </div>
      <div class="rightButtons">
-        <button type="button" id="sortBtn" data-on-click-this="sortMonitors">
+        <button type="button" id="sortBtn" data-on-click-this="sortMonitors" title="<?php echo translate('Sort')?>">
        <i class="material-icons sort" title="Click and drag rows to change order">swap_vert</i>
        <span class="text"><?php echo translate('Sort') ?></span>
        </button>