From 99268a4b3e19ccfd061af1409f8af0fefa3adc9c Mon Sep 17 00:00:00 2001
From: Christopher Daniel Carlson <doughtnerd@gmail.com>
Date: Mon, 29 Jun 2020 14:26:57 -0600
Subject: [PATCH] Added tooltip for beatmap stats (#20)

---
 package-lock.json                            |  2 +-
 package.json                                 |  2 +-
 src/render/actions/tooltip.js                | 55 ++++++++++++++++----
 src/render/components/BeatmapKey.svelte      | 10 ++--
 src/render/components/BeatmapListItem.svelte |  4 +-
 src/render/components/Downloads.svelte       |  9 ++--
 src/render/components/Downvotes.svelte       | 11 ++--
 src/render/components/DrawerItem.svelte      |  2 +-
 src/render/components/Rating.svelte          | 10 ++--
 src/render/components/Upvotes.svelte         | 10 ++--
 10 files changed, 82 insertions(+), 33 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e233448..963b750 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "beathub",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 6014c98..f74a5c3 100755
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "email": "doughtnerd@gmail.com",
     "url": "https://github.com/Doughtnerd"
   },
-  "version": "1.5.4",
+  "version": "1.6.1",
   "main": "./src/electron.js",
   "license": "(MIT OR Apache-2.0)",
   "repository": {
diff --git a/src/render/actions/tooltip.js b/src/render/actions/tooltip.js
index 336e9b4..96e417d 100644
--- a/src/render/actions/tooltip.js
+++ b/src/render/actions/tooltip.js
@@ -1,12 +1,12 @@
 import { listen } from "svelte/internal";
 
-export function tooltip(node, tooltipText) {
+export function tooltip(node, { text, position = "right" }) {
   const tooltip = document.createElement("div");
   const style = document.createElement("style");
-  tooltip.textContent = tooltipText;
+  tooltip.textContent = text;
   tooltip.className = "tooltip";
 
-  style.textContent = `
+  const tooltipStyle = `
     .tooltip {
       position: absolute;
       color: var(--backgroundText);
@@ -18,7 +18,22 @@ export function tooltip(node, tooltipText) {
       transition: opacity .5s;
       transform: translate(5px, -50%);
     }
+  `;
+
+  const leftPointerStyle = `
+      .tooltip::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 100%;
+        margin-top: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent transparent transparent var(--tooltipBackgroundColor) ;
+      }
+  `;
 
+  const rightPointerStyle = `
     .tooltip::after {
       content: "";
       position: absolute;
@@ -31,10 +46,30 @@ export function tooltip(node, tooltipText) {
     }
   `;
 
-  function position() {
-    const { top, right, bottom } = node.getBoundingClientRect();
+  switch (position) {
+    case "right": {
+      style.textContent = tooltipStyle + rightPointerStyle;
+      break;
+    }
+    case "left": {
+      style.textContent = tooltipStyle + leftPointerStyle;
+      break;
+    }
+  }
+
+  function positionTooltip() {
+    const { top, right, bottom, left, width } = node.getBoundingClientRect();
     tooltip.style.top = `${(top + bottom) / 2}px`;
-    tooltip.style.left = `${right}px`;
+    switch (position) {
+      case "right": {
+        tooltip.style.left = `${right}px`;
+        break;
+      }
+      case "left": {
+        tooltip.style.left = `${left - width}px`; // = `${left}px`;
+        break;
+      }
+    }
   }
 
   function append() {
@@ -42,7 +77,7 @@ export function tooltip(node, tooltipText) {
     tooltip.prepend(style);
     tooltip.style.opacity = "0";
     setTimeout(() => (tooltip.style.opacity = "1"));
-    position();
+    positionTooltip();
   }
 
   function remove() {
@@ -59,8 +94,8 @@ export function tooltip(node, tooltipText) {
       cancelMouseleave();
     },
 
-    update(newText) {
-      tooltip.textContent = newText;
-    }
+    update({ text, position }) {
+      tooltip.textContent = text;
+    },
   };
 }
diff --git a/src/render/components/BeatmapKey.svelte b/src/render/components/BeatmapKey.svelte
index 80c0b69..54354d8 100755
--- a/src/render/components/BeatmapKey.svelte
+++ b/src/render/components/BeatmapKey.svelte
@@ -1,9 +1,11 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
-
+  import { tooltip } from "../actions/tooltip";
   import { key } from "svelte-awesome/icons";
 </script>
 
-<BeatmapStat icon={key} iconColor="var(--beatmapKeyIconColor)">
-  <slot />
-</BeatmapStat>
+<div use:tooltip={{ text: 'Id', position: 'left' }}>
+  <BeatmapStat icon={key} iconColor="var(--beatmapKeyIconColor)">
+    <slot />
+  </BeatmapStat>
+</div>
diff --git a/src/render/components/BeatmapListItem.svelte b/src/render/components/BeatmapListItem.svelte
index f6e46bc..af7a37e 100755
--- a/src/render/components/BeatmapListItem.svelte
+++ b/src/render/components/BeatmapListItem.svelte
@@ -119,7 +119,9 @@
       <PrimaryText>
         <span style="font-size: 24px">{beatmap.metadata.songName}</span>
       </PrimaryText>
-      <SecondaryText>{beatmap.metadata.songAuthorName}</SecondaryText>
+      <SecondaryText>
+        {beatmap.metadata.songAuthorName.toLowerCase() === beatmap.metadata.levelAuthorName.toLowerCase() ? beatmap.metadata.songSubName : beatmap.metadata.songAuthorName}
+      </SecondaryText>
       <SecondaryText>
         Uploaded by: {beatmap.metadata.levelAuthorName}
       </SecondaryText>
diff --git a/src/render/components/Downloads.svelte b/src/render/components/Downloads.svelte
index d8cf81c..d72384e 100755
--- a/src/render/components/Downloads.svelte
+++ b/src/render/components/Downloads.svelte
@@ -1,5 +1,6 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
+  import { tooltip } from "../actions/tooltip";
   import { download } from "svelte-awesome/icons";
 
   export let count;
@@ -7,6 +8,8 @@
   $: textVal = count.toLocaleString();
 </script>
 
-<BeatmapStat icon={download} iconColor="var(--beatmapDownloadsIconColor)">
-  <span>{textVal}</span>
-</BeatmapStat>
+<div use:tooltip={{ text: 'Downloads', position: 'left' }}>
+  <BeatmapStat icon={download} iconColor="var(--beatmapDownloadsIconColor)">
+    <span>{textVal}</span>
+  </BeatmapStat>
+</div>
diff --git a/src/render/components/Downvotes.svelte b/src/render/components/Downvotes.svelte
index 43e0a06..ea45e9d 100755
--- a/src/render/components/Downvotes.svelte
+++ b/src/render/components/Downvotes.svelte
@@ -1,12 +1,15 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
   import { thumbsDown } from "svelte-awesome/icons";
-
+  import { tooltip } from "../actions/tooltip";
   export let count;
 
   $: textVal = count.toLocaleString();
 </script>
 
-<BeatmapStat icon={thumbsDown} iconColor="var(--beatmapDownvotesIconColor)">
-  <span>{textVal}</span>
-</BeatmapStat>
+<div use:tooltip={{ text: 'Downvotes', position: 'left' }}>
+  <BeatmapStat icon={thumbsDown} iconColor="var(--beatmapDownvotesIconColor)">
+    <span>{textVal}</span>
+  </BeatmapStat>
+
+</div>
diff --git a/src/render/components/DrawerItem.svelte b/src/render/components/DrawerItem.svelte
index a774d8b..a9ccd12 100644
--- a/src/render/components/DrawerItem.svelte
+++ b/src/render/components/DrawerItem.svelte
@@ -37,7 +37,7 @@
 <div
   class="drawer-item"
   class:active={currentActiveView === itemName}
-  use:tooltip={itemName}
+  use:tooltip={{ text: itemName }}
   on:click>
   <Icon scale={2} data={icon} />
 
diff --git a/src/render/components/Rating.svelte b/src/render/components/Rating.svelte
index 6f4f50a..3f6832b 100755
--- a/src/render/components/Rating.svelte
+++ b/src/render/components/Rating.svelte
@@ -1,12 +1,14 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
   import { percent } from "svelte-awesome/icons";
-
+  import { tooltip } from "../actions/tooltip";
   export let percentage;
 
   $: textVal = Math.round(percentage * 100);
 </script>
 
-<BeatmapStat icon={percent} iconColor="var(--beatmapRatingIconColor)">
-  <span>{textVal}</span>
-</BeatmapStat>
+<div use:tooltip={{ text: 'Avg. Rating', position: 'left' }}>
+  <BeatmapStat icon={percent} iconColor="var(--beatmapRatingIconColor)">
+    <span>{textVal}</span>
+  </BeatmapStat>
+</div>
diff --git a/src/render/components/Upvotes.svelte b/src/render/components/Upvotes.svelte
index d5e6371..0c6a3aa 100755
--- a/src/render/components/Upvotes.svelte
+++ b/src/render/components/Upvotes.svelte
@@ -1,12 +1,14 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
   import { thumbsUp } from "svelte-awesome/icons";
-
+  import { tooltip } from "../actions/tooltip";
   export let count;
 
   $: textVal = count.toLocaleString();
 </script>
 
-<BeatmapStat icon={thumbsUp} iconColor="var(--beatmapUpvotesIconColor)">
-  <span>{textVal}</span>
-</BeatmapStat>
+<div use:tooltip={{ text: 'Upvotes', position: 'left' }}>
+  <BeatmapStat icon={thumbsUp} iconColor="var(--beatmapUpvotesIconColor)">
+    <span>{textVal}</span>
+  </BeatmapStat>
+</div>