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

connortechnology · claude · connortechnology · commit 217c41555100 · 2026-03-12T18:04:14.000-04:00
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 &lt;noreply@anthropic.com&gt;
diff --git 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;
diff --git 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',
diff --git 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! */
diff --git 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.'>
diff --git 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
   }
 }
diff --git a/web/skins/classic/views/console.php b/web/skins/classic/views/console.php
@@ -190,31 +190,31 @@
   }
 ?>
         <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>

Original file line number	Diff line number	Diff line change
`@@ -847,8 +847,7 @@ function isJSON(str) {`
`847`	`847`	`const result = JSON.parse(str);`
`848`	`848`	`const type = Object.prototype.toString.call(result);`
`849`	`849`	`return type === '[object Object]' \|\| type === '[object Array]'; // We only pass objects and arrays`
`850`		`- } catch (e) {`
`851`		`- console.log('This is not JSON', str, e);`
	`850`	`+ } catch {`
`852`	`851`	`return false; // This is also not JSON`
`853`	`852`	`}`
`854`	`853`	`}`