avoid assigning styles and move all these styles into CSS. Replace al…

…l innerHTML with createEl.

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "tabs",
   "name": "Tabs",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "minAppVersion": "0.11.0",
   "description": "Create tabs in your notes.",
   "author": "Huajin",

src/components/tabeditor.ts

@@ -118,11 +118,13 @@ export class TabEditor {
     if (!selection.empty) {
       const p = view.coordsAtPos(0);
       const pos = view.coordsAtPos(selection.from);
-      this.floatingEditor.style.display = "block";
-      this.floatingEditor.style.left = `${pos.left - p.left + 71}px`;
-      this.floatingEditor.style.top = `${pos.top - p.top + 76}px`;
+      this.floatingEditor.setCssStyles({
+        "top": `${pos.top - p.top + 76}px`,
+        "left": `${pos.left - p.left + 71}px`,
+      });
+      this.floatingEditor.classList.add("floating-editor-active");
     } else {
-      this.floatingEditor.style.display = "none";
+      this.floatingEditor.classList.remove("floating-editor-active");
     }
   }
 }

src/components/tabnavitem.ts

@@ -11,13 +11,7 @@ export class TabNavItem {
     this.index = index;
     this.title = title.trim();
     this.tabnav = tabnav;
-    this.tabitemEl = this.createTabNavItemEl();
-  }
-
-  createTabNavItemEl(): HTMLElement {
-    const element = document.createElement('div');
-    element.className = "tab-nav-item";
-    element.innerHTML = this.title;
-    return element;
+    this.tabitemEl = createEl("div", { text: this.title });
+    this.tabitemEl.className = "tab-nav-item";
   }
 }

src/components/tabs.ts

@@ -99,9 +99,6 @@ export class Tabs {
       if (!this.activeView || this.isPreviewMode()) { return; }
 
       if (this.tabnav.tabbutton.type == "add-new-tab") {
-        const tabItemTag = document.createElement("div");
-        tabItemTag.className = "tab-item";
-        tabItemTag.innerHTML = "New Tab";
         const newTabItem = new TabNavItem(this.tabnav, this.tabnav.tabnavitems.length, "New Tab");
         this.tabnav.append(newTabItem);
 
@@ -251,15 +248,15 @@ export class Tabs {
   enterEditingMode() {
     this.editorWrapper.isEditing = true;
     this.editorWrapper.tabEditorWrapperEl.classList.remove('tab-editor-wrapper-hidden');
-    this.tabContents.tabcontentsEl.style.display = "none";
+    this.tabContents.tabcontentsEl.addClass('tab-contents-hidden');
     this.tabnav.tabbutton.type = "save";
     setIcon(this.tabnav.tabbutton.buttonEl, "save");
   }
 
   exitEditingMode() {
     this.editorWrapper.isEditing = false;
     this.editorWrapper.tabEditorWrapperEl.classList.add('tab-editor-wrapper-hidden');
-    this.tabContents.tabcontentsEl.style.display = "block";
+    this.tabContents.tabcontentsEl.removeClass('tab-contents-hidden');
     this.tabnav.tabbutton.type = "add-new-tab";
     setIcon(this.tabnav.tabbutton.buttonEl, "circle-plus");
   }

src/styles.css

@@ -63,6 +63,10 @@
   padding: 8px 15px;
 }
 
+.tab-container .tab-contents.tab-contents-hidden {
+  display: none;
+}
+
 /* editor */
 
 .tab-editor-wrapper {
@@ -80,6 +84,20 @@
 
 .tab-editor-wrapper .toolbar {
   display: none;
+}
+
+.tab-editor-wrapper .toolbar .toolbar-button {
+  display: inline-block;
+  padding: 7px;
+  cursor: pointer;
+}
+
+.tab-editor-wrapper .toolbar .toolbar-button:hover {
+  background-color: var(--interactive-accent);
+}
+
+.tab-editor-wrapper .toolbar.floating-editor-active {
+  display: block;
   position: absolute;
   width: fit-content;
   height: 30px;
@@ -89,12 +107,6 @@
   transition: opacity 0.3s;
 }
 
-.tab-editor-wrapper .toolbar:hover {
+.tab-editor-wrapper .toolbar.floating-editor-active:hover {
   opacity: 1;
-}
-
-.tab-editor-wrapper .toolbar .toolbar-button {
-  display: inline-block;
-  padding: 7px;
-  cursor: pointer;
 }