summaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-30 12:39:33 -0500
committerGitHub <noreply@github.com>2020-12-30 12:39:33 -0500
commit973dfc581ac4668fd7114040dbc698358db6debd (patch)
tree89cf6a0cc2147040b85a41584ef17f975a6ef834 /ext
parent4d76356c2b865a942fb3fe2a406224df5c439ae3 (diff)
Improve location of Anki error message (#1180)
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/css/settings2.css6
-rw-r--r--ext/bg/js/settings/anki-controller.js37
-rw-r--r--ext/bg/settings.html2
-rw-r--r--ext/bg/settings2.html38
4 files changed, 49 insertions, 34 deletions
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 @@
<div class="alert alert-danger" id="anki-error" hidden>
<span id="anki-error-message"></span><a id="anki-error-message-details-toggle">&hellip;</a>
- <div id="anki-error-message-details" hidden></div>
+ <div id="anki-error-message-details-container" hidden><div id="anki-error-message-details"></div></div>
</div>
<div class="alert alert-danger" id="anki-error-invalid-response-info" hidden>
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 5ea092af..65b5de5a 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -1202,14 +1202,28 @@
</div>
</div>
<div class="settings-group">
- <div class="settings-item"><div class="settings-item-inner">
- <div class="settings-item-left">
- <div class="settings-item-label">Enable Anki integration</div>
+ <div class="settings-item">
+ <div class="settings-item-inner">
+ <div class="settings-item-left">
+ <div class="settings-item-label">Enable Anki integration</div>
+ <div class="settings-item-description">
+ <span>Connection status:</span>
+ <span id="anki-error-message">&hellip;</span> <a id="anki-error-message-details-toggle" hidden>Details&hellip;</a>
+ </div>
+ </div>
+ <div class="settings-item-right">
+ <label class="toggle"><input type="checkbox" data-setting="anki.enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+ </div>
</div>
- <div class="settings-item-right">
- <label class="toggle"><input type="checkbox" data-setting="anki.enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+ <div class="settings-item-children" id="anki-error-message-details-container" hidden>
+ <p class="danger-text" id="anki-error-invalid-response-info" hidden>
+ Attempting to connect to Anki can sometimes return an error message which includes "Invalid response",
+ which may indicate that the value of the <em>AnkiConnect server address</em> option is incorrect.
+ Resetting it to the default value may fix issues that are occurring.
+ </p>
+ <div class="danger-text" id="anki-error-message-details"></div>
</div>
- </div></div>
+ </div>
<div class="settings-item">
<div class="settings-item-inner settings-item-inner-wrappable">
<div class="settings-item-left">
@@ -2007,18 +2021,6 @@
<div class="anki-card-field-input-header" data-persistent="true">Value</div>
</div>
</div>
- <div class="modal-body-addon" id="anki-error" hidden>
- <p class="danger-text">
- <strong>Anki connection error:</strong>
- <span id="anki-error-message"></span><a id="anki-error-message-details-toggle">&hellip;</a>
- </p>
- <p class="danger-text" id="anki-error-invalid-response-info" hidden>
- Attempting to connect to Anki can sometimes return an error message which includes "Invalid response",
- which may indicate that the value of the <em>AnkiConnect server address</em> option is incorrect.
- Resetting it to the default value may fix issues that are occurring.
- </p>
- <div class="danger-text" id="anki-error-message-details" hidden></div>
- </div>
<div class="modal-footer">
<button class="low-emphasis" data-modal-action="show,anki-cards-info">Help</button>
<button data-modal-action="hide">Close</button>