Adjust CSS styling of rich text toolbar to Bootstrap 4 for consistency

Fixes #664 Adjust the CSS styling of the rich text toolbar buttons to match Bootstrap 4 for consistency. * Add the `btn` and `btn-light` classes to the buttons in `src/adapters/PublicLab.Woofmark.js`. * Remove the `btn-sm` class from the buttons in `src/adapters/PublicLab.Woofmark.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-insert` button in `src/modules/PublicLab.CustomInsert.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-insert` button in `src/modules/PublicLab.CustomInsert.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-autocenter` button in `src/modules/PublicLab.RichTextModule.AutoCenter.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-autocenter` button in `src/modules/PublicLab.RichTextModule.AutoCenter.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-embed` button in `src/modules/PublicLab.RichTextModule.Embed.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-embed` button in `src/modules/PublicLab.RichTextModule.Embed.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-horizontal-rule` button in `src/modules/PublicLab.RichTextModule.HorizontalRule.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-horizontal-rule` button in `src/modules/PublicLab.RichTextModule.HorizontalRule.js`. * Remove the `btn-outline-secondary` class from the `woofmark-command-table` button in `src/modules/PublicLab.RichTextModule.Table.js`. * Add the `btn` and `btn-light` classes to the `woofmark-command-table` button in `src/modules/PublicLab.RichTextModule.Table.js`.
publiclab · Feb 14, 2025 · f89ce41 · f89ce41
1 parent 12c0080
commit f89ce41
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 6 deletions.
diff --git a/src/adapters/PublicLab.Woofmark.js b/src/adapters/PublicLab.Woofmark.js
@@ -371,7 +371,8 @@ module.exports = function(textarea, _editor, _module) {
       $(".wk-commands button.woofmark-command-ol").hide();
       $(".wk-commands button.woofmark-command-ul").hide();
     } else {
-      $(".wk-switchboard button").addClass("btn-sm");
+      $(".wk-switchboard button").addClass("btn");
+      $(".wk-switchboard button").addClass("btn-light");
     }
   };
 

diff --git a/src/modules/PublicLab.CustomInsert.js b/src/modules/PublicLab.CustomInsert.js
@@ -67,7 +67,7 @@ module.exports = function CustomInsert(_module, wysiwyg) {
     }
   });
   const builder = require("./PublicLab.CustomInsert.Template.js");
-  $('.wk-commands').append('<button class="woofmark-command-insert btn btn-outline-secondary" data-toggle="insert" title="Custom Insert"><i class="fa fa-tags"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-insert btn btn btn-light" data-toggle="insert" title="Custom Insert"><i class="fa fa-tags"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="insert"]').tooltip();

diff --git a/src/modules/PublicLab.RichTextModule.AutoCenter.js b/src/modules/PublicLab.RichTextModule.AutoCenter.js
@@ -6,7 +6,7 @@ module.exports = function initAutoCenter(_module, wysiwyg) {
   // $('.woofmark-mode-markdown').removeClass('disabled')
 
   // create a menu option for auto center:
-  $('.wk-commands').append('<button class="woofmark-command-autocenter btn btn-outline-secondary" data-toggle="autocenter" title="<center> In Rich mode, insert spaces for images."><i class="fa fa-align-center"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-autocenter btn btn btn-light" data-toggle="autocenter" title="<center> In Rich mode, insert spaces for images."><i class="fa fa-align-center"></i></button>');
   // since chunk.selection returns null for images
 
   $(document).ready(function() {

diff --git a/src/modules/PublicLab.RichTextModule.Embed.js b/src/modules/PublicLab.RichTextModule.Embed.js
@@ -4,7 +4,7 @@
 
 module.exports = function initEmbed(_module, wysiwyg) {
   // create a menu option for embeds:
-  $('.wk-commands').append('<button class="woofmark-command-embed btn btn-outline-secondary" data-toggle="youtube" title="Youtube link <iframe>"><i class="fa fa-youtube"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-embed btn btn btn-light" data-toggle="youtube" title="Youtube link <iframe>"><i class="fa fa-youtube"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="youtube"]').tooltip();

diff --git a/src/modules/PublicLab.RichTextModule.HorizontalRule.js b/src/modules/PublicLab.RichTextModule.HorizontalRule.js
@@ -4,7 +4,7 @@
 
 module.exports = function initHorizontalRule(_module, wysiwyg) {
   // create a menu option for horizontal rules:
-  $('.wk-commands').append('<button class="woofmark-command-horizontal-rule btn btn-outline-secondary" data-toggle="horizontal" title="Horizontal line <hr>"><i class="fa fa-ellipsis-h"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-horizontal-rule btn btn btn-light" data-toggle="horizontal" title="Horizontal line <hr>"><i class="fa fa-ellipsis-h"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="horizontal"]').tooltip();

diff --git a/src/modules/PublicLab.RichTextModule.Table.js b/src/modules/PublicLab.RichTextModule.Table.js
@@ -41,7 +41,7 @@ module.exports = function initTables(_module, wysiwyg) {
 
 
   // create a submenu for sizing tables
-  $('.wk-commands').append('<button class="woofmark-command-table btn btn-outline-secondary" data-toggle="table" title="Table <table>"><i class="fa fa-table"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-table btn btn btn-light" data-toggle="table" title="Table <table>"><i class="fa fa-table"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="table"]').tooltip();