From 973dfc581ac4668fd7114040dbc698358db6debd Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 30 Dec 2020 12:39:33 -0500 Subject: Improve location of Anki error message (#1180) --- ext/bg/css/settings2.css | 6 ------ ext/bg/js/settings/anki-controller.js | 37 +++++++++++++++++++++++++--------- ext/bg/settings.html | 2 +- ext/bg/settings2.html | 38 ++++++++++++++++++----------------- 4 files changed, 49 insertions(+), 34 deletions(-) (limited to 'ext/bg') diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css index 303b71c4..4015ce79 100644 --- a/ext/bg/css/settings2.css +++ b/ext/bg/css/settings2.css @@ -1500,12 +1500,6 @@ button.anki-card-field-value-menu-button { box-sizing: border-box; padding: 0 0.5em; } -#anki-error-message-details-toggle { - display: inline-block; - margin-left: 0.5em; - cursor: pointer; - font-weight: bold; -} #anki-error-message-details { margin-top: 0.25em; font-family: 'Courier New', Courier, monospace; diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js index b382bf26..fe8de3b7 100644 --- a/ext/bg/js/settings/anki-controller.js +++ b/ext/bg/js/settings/anki-controller.js @@ -44,7 +44,9 @@ class AnkiController { this._ankiOptions = null; this._getAnkiDataPromise = null; this._ankiErrorContainer = null; - this._ankiErrorMessageContainer = null; + this._ankiErrorMessageNode = null; + this._ankiErrorMessageNodeDefaultContent = ''; + this._ankiErrorMessageDetailsNode = null; this._ankiErrorMessageDetailsContainer = null; this._ankiErrorMessageDetailsToggle = null; this._ankiErrorInvalidResponseInfo = null; @@ -55,8 +57,10 @@ class AnkiController { async prepare() { this._ankiErrorContainer = document.querySelector('#anki-error'); - this._ankiErrorMessageContainer = document.querySelector('#anki-error-message'); - this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details'); + this._ankiErrorMessageNode = document.querySelector('#anki-error-message'); + this._ankiErrorMessageNodeDefaultContent = this._ankiErrorMessageNode.textContent; + this._ankiErrorMessageDetailsNode = document.querySelector('#anki-error-message-details'); + this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details-container'); this._ankiErrorMessageDetailsToggle = document.querySelector('#anki-error-message-details-toggle'); this._ankiErrorInvalidResponseInfo = document.querySelector('#anki-error-invalid-response-info'); this._ankiEnableCheckbox = document.querySelector('[data-setting="anki.enable"]'); @@ -256,6 +260,7 @@ class AnkiController { } async _getAnkiData() { + this._setAnkiStatusChanging(); const [ [deckNames, error1], [modelNames, error2] @@ -295,18 +300,29 @@ class AnkiController { } } + _setAnkiStatusChanging() { + this._ankiErrorMessageNode.textContent = this._ankiErrorMessageNodeDefaultContent; + this._ankiErrorMessageNode.classList.remove('danger-text'); + } + _hideAnkiError() { - this._ankiErrorContainer.hidden = true; + if (this._ankiErrorContainer !== null) { + this._ankiErrorContainer.hidden = true; + } this._ankiErrorMessageDetailsContainer.hidden = true; + this._ankiErrorMessageDetailsToggle.hidden = true; this._ankiErrorInvalidResponseInfo.hidden = true; - this._ankiErrorMessageContainer.textContent = ''; - this._ankiErrorMessageDetailsContainer.textContent = ''; + this._ankiErrorMessageNode.textContent = (this._ankiConnect.enabled ? 'Connected' : 'Not enabled'); + this._ankiErrorMessageNode.classList.remove('danger-text'); + this._ankiErrorMessageDetailsNode.textContent = ''; } _showAnkiError(error) { let errorString = typeof error === 'object' && error !== null ? error.message : null; if (!errorString) { errorString = `${error}`; } - this._ankiErrorMessageContainer.textContent = errorString; + if (!/[.!?]$/.test(errorString)) { errorString += '.'; } + this._ankiErrorMessageNode.textContent = errorString; + this._ankiErrorMessageNode.classList.add('danger-text'); const data = error.data; let details = ''; @@ -314,11 +330,14 @@ class AnkiController { details += `${JSON.stringify(data, null, 4)}\n\n`; } details += `${error.stack}`.trimRight(); - this._ankiErrorMessageDetailsContainer.textContent = details; + this._ankiErrorMessageDetailsNode.textContent = details; - this._ankiErrorContainer.hidden = false; + if (this._ankiErrorContainer !== null) { + this._ankiErrorContainer.hidden = false; + } this._ankiErrorMessageDetailsContainer.hidden = true; this._ankiErrorInvalidResponseInfo.hidden = (errorString.indexOf('Invalid response') < 0); + this._ankiErrorMessageDetailsToggle.hidden = false; } async _requestClipboardReadPermission() { diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 6876701d..c6070baf 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -913,7 +913,7 @@
-
-
-
Enable Anki integration
+
+
+
+
Enable Anki integration
+
+ Connection status: + … +
+
+
+ +
-
- + -
+
@@ -2007,18 +2021,6 @@
Value
-
-- cgit v1.2.3