Styling

Author: kishikawakatsumi

Public/css/balloon.css

@@ -2,7 +2,7 @@
   font-size: 70%;
   white-space: nowrap;
   border-radius: 5px;
-  background-color: #555;
+  background-color: rgba(85, 85, 85, 0.9);
   color: #fff;
   padding: 2px 8px;
   position: absolute;
@@ -13,9 +13,9 @@
   content: "";
   position: absolute;
   top: 34px;
-  left: calc(50% - 9px);
+  left: calc(24% - 9px);
   border: 9px solid transparent;
-  border-top: 9px solid #555;
+  border-top: 9px solid rgba(85, 85, 85, 0.9);
 }
 
 .balloon-content .title {

Public/css/tree_view.css

@@ -5,24 +5,28 @@
 
 .tree-view ul {
   margin: 0;
-  padding-left: 20px;
+  padding-left: 0;
 }
 
 .tree-view li.entry {
   position: relative;
   list-style: none;
   margin: 0;
-  padding: 5px 5px 0 5px;
+  padding: 5px 5px 0 25px;
   cursor: pointer;
 }
 
+.tree-view li.entry div {
+  display: inline-block;
+}
+
 .tree-view li.entry.hover {
   background-color: rgb(100, 149, 237, 0.25);
 }
 
 .tree-view li .caret {
   position: absolute;
-  left: -20px;
+  left: 0;
   color: #a9a9a9;
 }
 

Public/js/lookup_view.js

@@ -84,7 +84,7 @@ export class LoopupView {
           popover.content = dl;
 
           popover.show(element, {
-            lowerLimit: tabContainerRect.top + tabContainerRect.height,
+            containerRect: tabContainerRect,
             offsetX: 40,
           });
         });

Public/js/popover.js

@@ -47,17 +47,18 @@ export class Popover {
   }
 
   show(target, options = {}) {
-    const lowerLimit = options.lowerLimit;
+    const containerRect = options.containerRect;
     const offsetX = options.offsetX || 0;
 
     this.popover.classList.remove("d-none");
 
     const targetRect = target.getBoundingClientRect();
     const popoverRect = this.popover.getBoundingClientRect();
 
+    const bottom = containerRect.top + containerRect.height;
     const top = targetRect.top - 6;
-    if (top + popoverRect.height > lowerLimit) {
-      this.popover.style.top = `${lowerLimit - popoverRect.height}px`;
+    if (top + popoverRect.height > bottom) {
+      this.popover.style.top = `${bottom - popoverRect.height}px`;
     } else {
       this.popover.style.top = `${top}px`;
     }

Public/js/structure_view.js

@@ -43,11 +43,9 @@ export class StructureView {
         .querySelector(".tab-content")
         .getBoundingClientRect();
 
-      const parent = target.parentElement;
-      const caret = parent.querySelector(":scope > div > .caret");
-      this.popover.show(caret || target, {
-        lowerLimit: tabContainerRect.top + tabContainerRect.height,
-        offsetX: caret ? 0 : 24,
+      this.popover.show(target, {
+        containerRect: tabContainerRect,
+        offsetX: 24,
       });
     };
 

Public/js/tree_view.js

@@ -45,41 +45,41 @@ export class TreeView {
     const li = document.createElement("li");
     li.classList.add("entry");
 
-    const element = document.createElement("div");
+    const content = document.createElement("div");
 
     if (this.hasChildren(node.id)) {
       const caret = downCaret.cloneNode(true);
-      element.appendChild(caret);
+      content.appendChild(caret);
 
       const div = document.createElement("div");
-      div.classList = `${node.type}-syntax`;
+      div.classList.add(`${node.type}-syntax`);
       div.innerHTML = node.text;
-      element.appendChild(div);
-      li.appendChild(element);
+      content.appendChild(div);
+      li.appendChild(content);
 
       const children = this.getChildren(node.id);
       for (const child of children) {
         li.appendChild(this.renderNode(child));
       }
 
-      element.addEventListener("click", (event) => {
+      content.addEventListener("click", (event) => {
         event.preventDefault();
         event.stopPropagation();
 
-        if (element.classList.contains("collapsed")) {
-          this.expand(node, element, li);
+        if (content.classList.contains("collapsed")) {
+          this.expand(node, content, li);
         } else {
-          this.collapse(node, element, li);
+          this.collapse(node, content, li);
         }
       });
     } else {
-      element.classList.add("token");
+      content.classList.add("token");
       if (node.text.length === 0) {
-        element.innerHTML = `<span class="badge">Empty</span>`;
+        content.innerHTML = `<span class="badge">Empty</span>`;
       } else {
-        element.innerHTML = node.text;
+        content.innerHTML = node.text;
       }
-      li.appendChild(element);
+      li.appendChild(content);
     }
 
     li.addEventListener(
@@ -88,7 +88,7 @@ export class TreeView {
         event.stopPropagation();
 
         li.classList.add("hover");
-        this.onmouseover(event, element, node);
+        this.onmouseover(event, content, node);
       },
       { capture: false, once: false, passive: false }
     );
@@ -98,7 +98,7 @@ export class TreeView {
         event.stopPropagation();
 
         li.classList.remove("hover");
-        this.onmouseout(event, element, node);
+        this.onmouseout(event, content, node);
       },
       { capture: false, once: false, passive: false }
     );