Add improved styling for error messages
This commit is contained in:
parent
ceaa0e2fed
commit
9789496f8c
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "interlanguage-checker",
|
||||
"version": "1.11.4",
|
||||
"version": "1.11.6",
|
||||
"description": "Check the consistency of MediaWiki interlanguage links in a simple overview.",
|
||||
"author": "Felix W. Dekker",
|
||||
"browser": "dist/bundle.js",
|
||||
|
|
|
@ -1,8 +1,12 @@
|
|||
:root {
|
||||
--error-color: red;
|
||||
--error-bg-color: #ffdddd;
|
||||
--success-color: green;
|
||||
--success-bg-color: #ddffdd;
|
||||
--warning-color: orange;
|
||||
--warning-bg-color: #ffffcc;
|
||||
--info-color: blue;
|
||||
--info-bg-color: #ddffff;
|
||||
--table-border-color: #e1e1e1;
|
||||
--table-row-color: #f2f2f2;
|
||||
--fandom-redlink: #ba0000;
|
||||
|
@ -79,22 +83,42 @@ summary {
|
|||
color: var(--fandom-redlink);
|
||||
}
|
||||
|
||||
.success {
|
||||
span.success, i.success {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.error {
|
||||
div.success {
|
||||
border-color: var(--success-color);
|
||||
background-color: var(--success-bg-color);
|
||||
}
|
||||
|
||||
span.error, i.error {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
.warning {
|
||||
div.error {
|
||||
border-color: var(--error-color);
|
||||
background-color: var(--error-bg-color);
|
||||
}
|
||||
|
||||
span.warning, i.warning {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.info {
|
||||
div.warning {
|
||||
border-color: var(--warning-color);
|
||||
background-color: var(--warning-bg-color);
|
||||
}
|
||||
|
||||
span.info, i.info {
|
||||
color: var(--info-color);
|
||||
}
|
||||
|
||||
div.info {
|
||||
border-color: var(--info-color);
|
||||
background-color: var(--info-bg-color);
|
||||
}
|
||||
|
||||
|
||||
/***
|
||||
* Messages, errors, etc.
|
||||
|
@ -104,10 +128,21 @@ summary {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.errorInner, .messageInner {
|
||||
.errorOuter, .messageOuter {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.errorInner {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.errorInner, .messageInner {
|
||||
padding: 1em;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
input[data-entered=true]:invalid {
|
||||
border-color: var(--error-color);
|
||||
color: var(--error-color);
|
||||
|
|
|
@ -91,10 +91,9 @@ export class ErrorHandler {
|
|||
* @param [id] {string} the id of the div containing the errors
|
||||
*/
|
||||
constructor(parent, id) {
|
||||
this._mainDiv = document.createElement("div");
|
||||
this._mainDiv.classList.add("hidden");
|
||||
this._mainDiv.classList.add("errorInner");
|
||||
parent.appendChild(this._mainDiv);
|
||||
this._outerDiv = document.createElement("div");
|
||||
this._outerDiv.classList.add("errorOuter", "hidden");
|
||||
parent.appendChild(this._outerDiv);
|
||||
}
|
||||
|
||||
|
||||
|
@ -106,12 +105,13 @@ export class ErrorHandler {
|
|||
* @returns {ErrorHandler} this `ErrorHandler`
|
||||
*/
|
||||
handle(level, message) {
|
||||
this._mainDiv.classList.remove("hidden");
|
||||
this._outerDiv.classList.remove("hidden");
|
||||
|
||||
const errorSpan = document.createElement("p");
|
||||
errorSpan.innerText = message;
|
||||
if (level !== null) errorSpan.classList.add(level);
|
||||
this._mainDiv.appendChild(errorSpan);
|
||||
const errorInner = document.createElement("div");
|
||||
errorInner.classList.add("errorInner");
|
||||
if (level !== null) errorInner.classList.add(level);
|
||||
errorInner.innerText = message;
|
||||
this._outerDiv.appendChild(errorInner);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
@ -122,8 +122,8 @@ export class ErrorHandler {
|
|||
* @returns {ErrorHandler} this `ErrorHandler`
|
||||
*/
|
||||
clear() {
|
||||
this._mainDiv.classList.add("hidden");
|
||||
this._mainDiv.innerHTML = "";
|
||||
this._outerDiv.classList.add("hidden");
|
||||
this._outerDiv.innerHTML = "";
|
||||
|
||||
return this;
|
||||
}
|
||||
|
@ -137,24 +137,26 @@ export class MessageHandler {
|
|||
* Constructs a new `MessageHandler`, inserting relevant new elements into the DOM to interact with.
|
||||
*
|
||||
* @param parent {HTMLElement} the element to insert elements into
|
||||
* @param [id] {string} the id of the div containing the message
|
||||
*/
|
||||
constructor(parent) {
|
||||
this._mainDiv = document.createElement("div");
|
||||
this._mainDiv.classList.add("hidden");
|
||||
this._mainDiv.classList.add("messageInner");
|
||||
parent.appendChild(this._mainDiv);
|
||||
this._outerDiv = document.createElement("div");
|
||||
this._outerDiv.classList.add("messageOuter", "hidden");
|
||||
parent.appendChild(this._outerDiv);
|
||||
|
||||
this._innerDiv = document.createElement("div");
|
||||
this._innerDiv.classList.add("messageInner");
|
||||
this._outerDiv.appendChild(this._innerDiv);
|
||||
|
||||
this._loadingIcon = document.createElement("i");
|
||||
this._loadingIcon.classList.add("fa", "fa-spinner", "fa-spin");
|
||||
this._mainDiv.appendChild(this._loadingIcon);
|
||||
this._innerDiv.appendChild(this._loadingIcon);
|
||||
|
||||
this._spacing = document.createElement("span");
|
||||
this._spacing.innerHTML = " ";
|
||||
this._mainDiv.appendChild(this._spacing);
|
||||
this._innerDiv.appendChild(this._spacing);
|
||||
|
||||
this._textSpan = document.createElement("span");
|
||||
this._mainDiv.appendChild(this._textSpan);
|
||||
this._innerDiv.appendChild(this._textSpan);
|
||||
|
||||
this._currentLevel = undefined;
|
||||
this._callback = undefined;
|
||||
|
@ -167,14 +169,14 @@ export class MessageHandler {
|
|||
* If no message is given, the current message and the loading icon are hidden. To display an empty message next to
|
||||
* the loading icon, give an empty string.
|
||||
*
|
||||
* @param [level] {"complete"|"progress"|"warning"|"error"|"neutral"} the level of message to display, or
|
||||
* @param [level] {"complete"|"progress"|"warning"|"error"|"neutral"|undefined} the level of message to display, or
|
||||
* `undefined` if the entire message handler should be hidden
|
||||
* @param [message] {*} the message to display
|
||||
* @returns {MessageHandler} this `MessageHandler`
|
||||
*/
|
||||
handle(level, message) {
|
||||
this._displayLevel(level);
|
||||
if (level === undefined) return this; // No need to handle the rest
|
||||
if (level === undefined) return this; // No need to handle the rest
|
||||
|
||||
if (this._callback !== undefined) this._callback(level, message);
|
||||
this._textSpan.innerHTML = message;
|
||||
|
@ -213,30 +215,31 @@ export class MessageHandler {
|
|||
if (level === this._currentLevel) return;
|
||||
this._currentLevel = level;
|
||||
|
||||
this._mainDiv.classList.remove("hidden", "success", "warning", "error");
|
||||
this._outerDiv.classList.remove("hidden");
|
||||
this._innerDiv.classList.remove("success", "warning", "error");
|
||||
|
||||
switch (level) {
|
||||
case "complete":
|
||||
this._mainDiv.classList.add("success");
|
||||
this._innerDiv.classList.add("success");
|
||||
this._toggleLoadingIcon(false);
|
||||
break;
|
||||
case "progress":
|
||||
this._toggleLoadingIcon(true);
|
||||
break;
|
||||
case "warning":
|
||||
this._mainDiv.classList.add("warning");
|
||||
this._innerDiv.classList.add("warning");
|
||||
this._toggleLoadingIcon(false);
|
||||
break;
|
||||
case "error":
|
||||
this._mainDiv.classList.add("error");
|
||||
this._innerDiv.classList.add("error");
|
||||
this._toggleLoadingIcon(false);
|
||||
break;
|
||||
case "neutral":
|
||||
this._toggleLoadingIcon(false);
|
||||
break;
|
||||
default:
|
||||
this._mainDiv.classList.remove("hidden");
|
||||
return this; // No further handling necessary
|
||||
this._outerDiv.classList.add("hidden");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -590,7 +590,7 @@ export const discoverNetwork = async function(mwm, title, errorCb, progressCb) {
|
|||
if (history.length === 1)
|
||||
throw new Error(couldNotConnectMessage);
|
||||
else {
|
||||
errorCb("warning", `Could not connect to the wiki for '${next.lang}'. Maybe the wiki no longer exists?`);
|
||||
errorCb("warning", `Could not connect to the wiki for language '${next.lang}'. Maybe the wiki no longer exists?`);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue