chore: rework button state

bpmn-io · Jul 21, 2023 · 53d53f4 · 53d53f4
1 parent 35e799f
commit 53d53f4
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/assets/css/bpmn-js-bpmnlint.css b/assets/css/bpmn-js-bpmnlint.css
@@ -185,9 +185,10 @@
   color: #444;
 }
 
-.bjsl-button svg {
-  margin-top: -1px;
+.bjsl-button .icon {
   margin-right: 10px;
+  width: 15px;
+  height: 15px;
 }
 
 .bjsl-button-success {

diff --git a/lib/Linting.js b/lib/Linting.js
@@ -501,12 +501,34 @@ Linting.prototype._clearIssues = function() {
   this._clearOverlays();
 };
 
-Linting.prototype._setButtonState = function(state, errors, warnings, infos) {
+Linting.prototype._setButtonState = function(issues) {
+  var {
+    errors,
+    warnings,
+    infos
+  } = issues;
+
   var button = this._button;
 
+  var state = (errors && 'error') || (warnings && 'warning') || 'success';
+
   var icon = stateToIcon[state];
+  var label = this._translate(
+    (errors || warnings)
+      ? '{errors} Errors, {warnings} Warnings'
+      : 'Toggle Linting',
+    {
+      errors: String(errors),
+      warnings: String(warnings),
+      infos: String(infos),
+    }
+  );
 
-  var html = icon + '<span>' + this._translate('{errors} Errors, {warnings} Warnings', { errors: errors.toString(), warnings: warnings.toString() }) + '</span>';
+  var html = `
+    <span class="icon">${icon}</span>
+    <span>${ label }</span>`;
+
+  state = this.isActive() ? state : 'inactive';
 
   [
     'error',
@@ -548,9 +570,11 @@ Linting.prototype._updateButton = function() {
     });
   }
 
-  var state = (errors && 'error') || (warnings && 'warning') || 'success';
-
-  this._setButtonState(state, errors, warnings, infos);
+  this._setButtonState({
+    errors,
+    warnings,
+    infos
+  });
 };
 
 Linting.prototype._createButton = function() {

diff --git a/test/spec/LintingSpec.js b/test/spec/LintingSpec.js
@@ -387,9 +387,8 @@ describe('linting', function() {
             toggleLinting(modeler, function() {
 
               // then
-              const buttonSpan = el.querySelector('button.bjsl-button.bjsl-button-error span');
-              expect(buttonSpan).to.exist;
-              expect(buttonSpan.innerText).to.equal('8 Errors, 2 Warnings');
+              const buttonText = el.querySelector('button.bjsl-button.bjsl-button-error').textContent;
+              expect(buttonText.trim()).to.equal('8 Errors, 2 Warnings');
 
               done();
             });
@@ -825,9 +824,8 @@ describe('i18n', function() {
           expect(button).to.exist;
           expect(button.title).to.equal('Перемкнути перевірку');
 
-          const buttonTextSpan = button.querySelector('span');
-          expect(buttonTextSpan).to.exist;
-          expect(buttonTextSpan.innerText).to.equal('16 помилок, 0 попередженнь');
+          const buttonText = button.textContent;
+          expect(buttonText.trim()).to.equal('16 помилок, 0 попередженнь');
 
           const endEventRequiredMessage = el.querySelector('a[data-rule="end-event-required"]');
           expect(endEventRequiredMessage).to.exist;