From 18aa69e17cc7703f106fbe03992456b8e59e8cdc Mon Sep 17 00:00:00 2001 From: Adrian Kunz Date: Thu, 17 Sep 2020 11:32:20 +0200 Subject: [PATCH] [lint addon] Use separate CSS classes for common lint styles This changes lint.css to be less reliant on the predefined severities (error and warning), in turn making it easier to define custom ones. Now all that needs to be done in order to define a new severity, e.g. `note`, is to add the following CSS: ```css /* underline */ .CodeMirror-lint-mark-note { background-image: ...; } /* icon */ .CodeMirror-lint-marker-note, .CodeMirror-lint-message-note { background-image: ...; } ``` Previously, it was necessary to copy many styles that were only available under the `CodeMirror-lint-*-error` and `CodeMirror-lint-*-warning` classes. --- addon/lint/lint.css | 6 +++--- addon/lint/lint.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/addon/lint/lint.css b/addon/lint/lint.css index f097cfe34..fef620a49 100644 --- a/addon/lint/lint.css +++ b/addon/lint/lint.css @@ -25,7 +25,7 @@ -ms-transition: opacity .4s; } -.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning { +.CodeMirror-lint-mark { background-position: left bottom; background-repeat: repeat-x; } @@ -40,7 +40,7 @@ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII="); } -.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning { +.CodeMirror-lint-marker { background-position: center center; background-repeat: no-repeat; cursor: pointer; @@ -51,7 +51,7 @@ position: relative; } -.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning { +.CodeMirror-lint-message { padding-left: 18px; background-position: top left; background-repeat: no-repeat; diff --git a/addon/lint/lint.js b/addon/lint/lint.js index 5bc1af18a..963f2cf22 100644 --- a/addon/lint/lint.js +++ b/addon/lint/lint.js @@ -83,10 +83,10 @@ function makeMarker(cm, labels, severity, multiple, tooltips) { var marker = document.createElement("div"), inner = marker; - marker.className = "CodeMirror-lint-marker-" + severity; + marker.className = "CodeMirror-lint-marker CodeMirror-lint-marker-" + severity; if (multiple) { inner = marker.appendChild(document.createElement("div")); - inner.className = "CodeMirror-lint-marker-multiple"; + inner.className = "CodeMirror-lint-marker CodeMirror-lint-marker-multiple"; } if (tooltips != false) CodeMirror.on(inner, "mouseover", function(e) { @@ -114,7 +114,7 @@ var severity = ann.severity; if (!severity) severity = "error"; var tip = document.createElement("div"); - tip.className = "CodeMirror-lint-message-" + severity; + tip.className = "CodeMirror-lint-message CodeMirror-lint-message-" + severity; if (typeof ann.messageHTML != 'undefined') { tip.innerHTML = ann.messageHTML; } else { @@ -183,7 +183,7 @@ if (state.hasGutter) tipLabel.appendChild(annotationTooltip(ann)); if (ann.to) state.marked.push(cm.markText(ann.from, ann.to, { - className: "CodeMirror-lint-mark-" + severity, + className: "CodeMirror-lint-mark CodeMirror-lint-mark-" + severity, __annotation: ann })); }