diff --git a/src/api/client.ts b/src/api/client.ts
index b6c5278..061899f 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -7,4 +7,13 @@ export default class Client {
relaunch() {
DiscordNative.remoteApp.relaunch();
}
+ /**
+ * The current zoom level as a percentage.
+ */
+ get zoom() {
+ return Math.round((( window.outerWidth - 10 ) / window.innerWidth) * 100 + 0.6);
+ }
+ set zoom(value) {
+ DiscordNative.window.setZoomFactor(value);
+ }
}
diff --git a/src/api/components.ts b/src/api/components.ts
index 9cc36e7..f42d6f5 100644
--- a/src/api/components.ts
+++ b/src/api/components.ts
@@ -144,6 +144,44 @@ export default {
}, 135);
}
},
+ tooltip: (options: { element: HTMLElement, text: string }) => {
+ options.element.addEventListener("mouseenter", () => {
+ var tooltip = OpenLoader.componentBuilder.parseHTML(`
`) as HTMLElement;
+
+ document.querySelector(".notDevTools-1zkgfK > .layerContainer-2v_Sit")?.appendChild(tooltip);
+
+ tooltip.style.top = (options.element.getBoundingClientRect().top - options.element.getBoundingClientRect().height - 12) + "px";
+ tooltip.style.left = (options.element.getBoundingClientRect().left - tooltip.getBoundingClientRect().width / 2 + OpenLoader.client.zoom / 10) + "px";
+
+ setTimeout(() => {
+ tooltip.style.opacity = '1';
+ tooltip.style.transform = 'scale(1)';
+ })
+ })
+
+ options.element.addEventListener("mouseleave", () => {
+ var tooltip = document.querySelector(".ol-tooltip") as HTMLElement;
+ tooltip.style.opacity = '0';
+ tooltip.style.transform = 'scale(0.93)';
+ setTimeout(() => tooltip.remove(), 85);
+ })
+
+ options.element.addEventListener("DOMNodeRemoved", () => {
+ var tooltip = document.querySelector(".ol-tooltip") as HTMLElement;
+ tooltip.style.opacity = '0';
+ tooltip.style.transform = 'scale(0.93)';
+ setTimeout(() => tooltip.remove(), 85);
+ });
+
+ (options.element.parentNode as HTMLElement).onclick = () => {
+
+ }
+ }
},
settingsMenu: {
separator: () => {
@@ -155,7 +193,7 @@ export default {
var base = document.createElement("div");
base.classList.add("header-2Kx1US");
var headerContent = document.createElement("div");
- headerContent.classList.add("eyebrow-Ejf06y");
+ headerContent.classList.add("eyebrow-1Shfyi");
headerContent.textContent = options.text;
base.appendChild(headerContent);
return base;
diff --git a/src/utils/pluginUI.ts b/src/utils/pluginUI.ts
index 636d35d..947b73c 100644
--- a/src/utils/pluginUI.ts
+++ b/src/utils/pluginUI.ts
@@ -47,6 +47,7 @@ function addContent(content: HTMLElement) {
(svgWrapper.querySelector('svg') as SVGElement).onmouseleave = () => svgWrapper.style.color = "var(--button-danger-background)";
elem.onmouseenter = () => svgWrapper.style.right = "8px";
elem.onmouseleave = () => svgWrapper.style.right = "-32px";
+ OpenLoader.componentBuilder.createComponent(OpenLoader.components.generic.tooltip, { element: svgWrapper, text: "Remove" })
var bgImage = document.createElement("div");
bgImage.style.width = "100%";
bgImage.style.height = "40%";
diff --git a/types/index.d.ts b/types/index.d.ts
index d777d04..cdbb4b5 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -7,6 +7,11 @@ interface Client {
* Completely relaunches the client.
*/
relaunch(): void;
+ /**
+ * The current zoom level as a percentage.
+ */
+ get zoom(): number;
+ set zoom(value);
}
interface DiscordWindow {
@@ -44,7 +49,7 @@ interface ComponentBuilder {
* @param options The options to pass to the component function.
* @returns the output element of the component function.
*/
- createComponent(component: Function, options: any): HTMLElement;
+ createComponent(component: Function, options: any): HTMLElement | void;
/**
*
* @param category The category, which can be something like "hello.world" to have hello as the category and world as the subcategory.