Fixes bug which prevented errors to be displayed. (#389)

* Fixes bug which prevented errors to be displayed.
thsmi · Sep 12, 2020 · 45d140a · 45d140a
1 parent 3112fed
commit 45d140a
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 55 deletions.
diff --git a/src/common/managesieve.ui/editor.html b/src/common/managesieve.ui/editor.html
@@ -45,6 +45,19 @@
     .activeline {
       background: #e8f2ff !important;
     }
+
+    #sieve-editor-toolbar {
+      border-bottom: 1px solid #eee;
+    }
+
+    #sieve-editor-errors {
+      border-bottom: 1px solid #eee;
+    }
+
+    #sieve-editor-errors:empty {
+      display:none;
+    }
+
   </style>
 </head>
 

diff --git a/src/common/managesieve.ui/editor/SieveEditor.js b/src/common/managesieve.ui/editor/SieveEditor.js
@@ -148,7 +148,8 @@
      */
     hideErrorMessage() {
       const elm = document.querySelector("#sieve-editor-error");
-      elm.parentNode.removeChild(elm);
+      if (elm !== null)
+        elm.parentNode.removeChild(elm);
     }
 
     /**
@@ -159,13 +160,13 @@
      */
     async showErrorMessage(message) {
 
-      const content = await (new SieveTemplate()).load("./editor/editor.error.save.tpl");
+      const content = await (new SieveTemplate()).load("./editor/editor.error.save.html");
 
       content.querySelector(".sieve-editor-error-msg").textContent = message;
 
       this.hideErrorMessage();
 
-      document.querySelector("#sieve-editor-toolbar").appendChild(content);
+      document.querySelector("#sieve-editor-errors").appendChild(content);
 
       // eslint-disable-next-line no-new
       new bootstrap.Alert(content);
@@ -287,6 +288,7 @@
     async switchToTextEditor() {
 
       document.querySelector("#sieve-editor-save").classList.remove("d-none");
+      document.querySelector("#sieve-editor-toolbar").classList.remove("d-none");
       document.querySelector("#sieve-plaintext-editor-toolbar").classList.remove("d-none");
 
       if (this.isTextEditor()) {
@@ -318,6 +320,7 @@
     async switchToGraphicalEditor() {
 
       document.querySelector("#sieve-editor-save").classList.remove("d-none");
+      document.querySelector("#sieve-editor-toolbar").classList.add("d-none");
       document.querySelector("#sieve-plaintext-editor-toolbar").classList.add("d-none");
 
       if (!this.isTextEditor())
@@ -327,7 +330,7 @@
         await this.getGraphicalEditor().setScript(
           await this.getTextEditor().getScript());
       } catch (ex) {
-        console.log(ex);
+        await this.switchToTextEditor();
         this.showErrorMessage(`Switching to Graphical editor failed ${ex}`);
         return false;
       }
@@ -340,7 +343,7 @@
      * Switches to the settings tab.
      */
     switchToSettings() {
-      document.querySelector("#sieve-plaintext-editor-toolbar").classList.add("d-none");
+      document.querySelector("#sieve-editor-toolbar").classList.add("d-none");
       document.querySelector("#sieve-editor-save").classList.add("d-none");
     }
 

diff --git a/...nagesieve.ui/editor/editor.error.save.tpl → ...agesieve.ui/editor/editor.error.save.html b/...nagesieve.ui/editor/editor.error.save.tpl → ...agesieve.ui/editor/editor.error.save.html
@@ -1,4 +1,4 @@
-<div id="sieve-editor-error" class="alert alert-danger alert-dismissible fade show mt-2 mb-0" role="alert">
+<div id="sieve-editor-error" class="alert alert-danger alert-dismissible fade show my-0" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">×</span>
   </button>

diff --git a/src/common/managesieve.ui/editor/editor.tpl b/src/common/managesieve.ui/editor/editor.tpl
@@ -41,9 +41,10 @@
             </div>
           </div>
         </div>
-        <div id="sieve-plaintext-editor-toolbar" class="p-2" style="border-bottom: 1px solid #eee;">
+        <div id="sieve-editor-toolbar" class="p-2" style="border-bottom: 1px solid #eee;">
           <!-- insert toolbars here -->
         </div>
+        <div id="sieve-editor-errors" class="p-2"></div>
       </div>
 
       <div id="sieve-tab-content"

diff --git a/src/common/managesieve.ui/editor/text/SieveTextEditor.js b/src/common/managesieve.ui/editor/text/SieveTextEditor.js
@@ -172,7 +172,7 @@
         }
       });
 
-      const toolbar = document.querySelector("#sieve-plaintext-editor-toolbar");
+      const toolbar = document.querySelector("#sieve-editor-toolbar");
       toolbar.appendChild(
         await loader.load("./editor/text/editor.plaintext.toolbar.html"));
 

diff --git a/src/common/managesieve.ui/editor/text/editor.plaintext.toolbar.html b/src/common/managesieve.ui/editor/text/editor.plaintext.toolbar.html
@@ -1,59 +1,67 @@
 <div>
-  <div>
-    <div class="btn-group mr-2" role="group">
-      <button id="sieve-editor-cut" type="button" class="btn btn-sm btn-outline-secondary" data-i18n="texteditor.cut"></button>
-      <button id="sieve-editor-copy" type="button" class="btn btn-sm btn-outline-secondary" data-i18n="texteditor.copy"></button>
-      <button id="sieve-editor-paste" type="button" class="btn btn-sm btn-outline-secondary" data-i18n="texteditor.paste"></button>
-    </div>
+  <div id="sieve-plaintext-editor-toolbar">
+    <div>
+      <div class="btn-group mr-2" role="group">
+        <button id="sieve-editor-cut" type="button" class="btn btn-sm btn-outline-secondary"
+          data-i18n="texteditor.cut"></button>
+        <button id="sieve-editor-copy" type="button" class="btn btn-sm btn-outline-secondary"
+          data-i18n="texteditor.copy"></button>
+        <button id="sieve-editor-paste" type="button" class="btn btn-sm btn-outline-secondary"
+          data-i18n="texteditor.paste"></button>
+      </div>
 
-    <div class="btn-group mr-2 " role="group">
-      <button id="sieve-editor-undo" type="button" class="btn btn-sm btn-outline-secondary" data-i18n="texteditor.undo"></button>
-      <button id="sieve-editor-redo" type="button" class="btn btn-sm btn-outline-secondary" data-i18n="texteditor.redo"></button>
-    </div>
+      <div class="btn-group mr-2 " role="group">
+        <button id="sieve-editor-undo" type="button" class="btn btn-sm btn-outline-secondary"
+          data-i18n="texteditor.undo"></button>
+        <button id="sieve-editor-redo" type="button" class="btn btn-sm btn-outline-secondary"
+          data-i18n="texteditor.redo"></button>
+      </div>
 
-    <div class="btn-group mr-2 " role="group">
-      <button id="sieve-editor-replace-replace" type="button" class="btn btn-sm btn-outline-secondary"
-      data-i18n="texteditor.findAndReplace"></button>
-    </div>
+      <div class="btn-group mr-2 " role="group">
+        <button id="sieve-editor-replace-replace" type="button" class="btn btn-sm btn-outline-secondary"
+          data-i18n="texteditor.findAndReplace"></button>
+      </div>
 
-    <a class="btn-group mr-2 btn btn-sm btn-outline-secondary"
-       href="https://thsmi.github.io/sieve-reference/en/index.html"
-       data-i18n="texteditor.reference"
-       target="_blank" role="button"></a>
+      <a class="btn-group mr-2 btn btn-sm btn-outline-secondary"
+        href="https://thsmi.github.io/sieve-reference/en/index.html" data-i18n="texteditor.reference" target="_blank"
+        role="button"></a>
 
-  </div>
-  <div id="sieve-editor-find-toolbar" class="d-none mt-2">
-    <div class="row">
-      <div class="col-md-6">
-        <div class="input-group mb-2">
-          <input type="text" class="form-control form-control-sm" data-i18n="texteditor.find.text"
-            id="sieve-editor-txt-find"></input>
-          <span class="input-group-btn">
-            <button id="sieve-editor-find" class="btn btn-sm btn-outline-secondary" type="button" data-i18n="texteditor.find"></button>
-          </span>
+    </div>
+    <div id="sieve-editor-find-toolbar" class="d-none mt-2">
+      <div class="row">
+        <div class="col-md-6">
+          <div class="input-group mb-2">
+            <input type="text" class="form-control form-control-sm" data-i18n="texteditor.find.text"
+              id="sieve-editor-txt-find"></input>
+            <span class="input-group-btn">
+              <button id="sieve-editor-find" class="btn btn-sm btn-outline-secondary" type="button"
+                data-i18n="texteditor.find"></button>
+            </span>
+          </div>
         </div>
-      </div>
-      <div class="col-md-6">
-        <div class="input-group mb-2">
-          <input type="text" class="form-control form-control-sm" data-i18n="texteditor.replace.text"
-            id="sieve-editor-txt-replace"></input>
-          <span class="input-group-btn">
-            <button id="sieve-editor-replace" class="btn btn-sm btn-outline-secondary" type="button" data-i18n="texteditor.replace"></button>
-          </span>
+        <div class="col-md-6">
+          <div class="input-group mb-2">
+            <input type="text" class="form-control form-control-sm" data-i18n="texteditor.replace.text"
+              id="sieve-editor-txt-replace"></input>
+            <span class="input-group-btn">
+              <button id="sieve-editor-replace" class="btn btn-sm btn-outline-secondary" type="button"
+                data-i18n="texteditor.replace"></button>
+            </span>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col-md-6">
-        <div class="form-check">
-          <input id="sieve-editor-casesensitive" type="checkbox" class="form-check-input"></input>
-          <label class="form-check-label" for="sieve-editor-casesensitive" data-i18n="texteditor.matchCase"></label>
+      <div class="row">
+        <div class="col-md-6">
+          <div class="form-check">
+            <input id="sieve-editor-casesensitive" type="checkbox" class="form-check-input"></input>
+            <label class="form-check-label" for="sieve-editor-casesensitive" data-i18n="texteditor.matchCase"></label>
+          </div>
         </div>
-      </div>
-      <div class="col-md-6">
-        <div class="form-check">
-          <input id="sieve-editor-backward" type="checkbox" class="form-check-input"></input>
-          <label class="form-check-label" for="sieve-editor-backward" data-i18n="texteditor.backwards"></label>
+        <div class="col-md-6">
+          <div class="form-check">
+            <input id="sieve-editor-backward" type="checkbox" class="form-check-input"></input>
+            <label class="form-check-label" for="sieve-editor-backward" data-i18n="texteditor.backwards"></label>
+          </div>
         </div>
       </div>
     </div>