lightcordwarez
/
BetterDiscordApp-rauenzi
mirror of https://github.com/rauenzi/BetterDiscordApp.git
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Fix modals, add components, fix tooltip

This commit is contained in:
Zerebos 2024-12-05 22:01:19 -05:00
parent 34fce013d9
commit e2d3049a97
No known key found for this signature in database
3 changed files with 173 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
renderer/src/modules/api/index.js
View File

@ -27,6 +27,7 @@ import SliderInput from "@ui/settings/components/slider";
import SwitchInput from "@ui/settings/components/switch"; import SwitchInput from "@ui/settings/components/switch";
import TextInput from "@ui/settings/components/textbox"; import TextInput from "@ui/settings/components/textbox";
import SettingGroup from "@ui/settings/group"; import SettingGroup from "@ui/settings/group";
import ErrorBoundary from "@ui/errorboundary";
const bounded = new Map(); const bounded = new Map();
const PluginAPI = new AddonAPI(PluginManager); const PluginAPI = new AddonAPI(PluginManager);
@ -80,7 +81,8 @@ export default class BdApi {
get SliderInput() {return SliderInput;}, get SliderInput() {return SliderInput;},
get SwitchInput() {return SwitchInput;}, get SwitchInput() {return SwitchInput;},
get TextInput() {return TextInput;}, get TextInput() {return TextInput;},
get SettingGroup() {return SettingGroup;} get SettingGroup() {return SettingGroup;},
get ErrorBoundary() {return ErrorBoundary;},
}; };
Net = {fetch}; Net = {fetch};
} }

10
renderer/src/styles/ui/modal.css
View File

@ -112,21 +112,25 @@
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
width: 490px; width: 490px;
max-height: 800px; max-height: min(800px, 60vh);
} }
.bd-modal-medium { .bd-modal-medium {
width: 600px; width: 600px;
max-height: 800px; max-height: min(800px, 60vh);
min-height: 400px; min-height: 400px;
} }
.bd-modal-large { .bd-modal-large {
width: 800px; width: 800px;
max-height: 960px; max-height: min(960px, 70vh);
min-height: 400px; min-height: 400px;
} }
.bd-addon-modal {
min-height: 0;
}
.bd-modal-header, .bd-modal-header,
.bd-modal-footer { .bd-modal-footer {
position: relative; position: relative;

326
renderer/src/ui/tooltip.js
View File

@ -1,164 +1,164 @@
import Logger from "@common/logger"; import Logger from "@common/logger";
import DOMManager from "@modules/dommanager"; import DOMManager from "@modules/dommanager";
const toPx = function(value) { const toPx = function(value) {
return `${value}px`; return `${value}px`;
}; };
const styles = ["primary", "info", "success", "warn", "danger"]; const styles = ["primary", "info", "success", "warn", "danger"];
const sides = ["top", "right", "bottom", "left"]; const sides = ["top", "right", "bottom", "left"];
export default class Tooltip { export default class Tooltip {
/** /**
* *
* @constructor * @constructor
* @param {HTMLElement} node - DOM node to monitor and show the tooltip on * @param {HTMLElement} node - DOM node to monitor and show the tooltip on
* @param {string|HTMLElement} tip - string to show in the tooltip * @param {string|HTMLElement} tip - string to show in the tooltip
* @param {object} options - additional options for the tooltip * @param {object} options - additional options for the tooltip
* @param {"primary"|"info"|"success"|"warn"|"danger"} [options.style="primary"] - correlates to the discord styling/colors * @param {"primary"|"info"|"success"|"warn"|"danger"} [options.style="primary"] - correlates to the discord styling/colors
* @param {"top"|"right"|"bottom"|"left"} [options.side="top"] - can be any of top, right, bottom, left * @param {"top"|"right"|"bottom"|"left"} [options.side="top"] - can be any of top, right, bottom, left
* @param {boolean} [options.preventFlip=false] - prevents moving the tooltip to the opposite side if it is too big or goes offscreen * @param {boolean} [options.preventFlip=false] - prevents moving the tooltip to the opposite side if it is too big or goes offscreen
* @param {boolean} [options.disabled=false] - whether the tooltip should be disabled from showing on hover * @param {boolean} [options.disabled=false] - whether the tooltip should be disabled from showing on hover
*/ */
constructor(node, text, options = {}) { constructor(node, text, options = {}) {
const {style = "primary", side = "top", preventFlip = false, disabled = false} = options; const {style = "primary", side = "top", preventFlip = false, disabled = false} = options;
this.node = node; this.node = node;
this.label = text; this.label = text;
this.style = style.toLowerCase(); this.style = style.toLowerCase();
this.side = side.toLowerCase(); this.side = side.toLowerCase();
this.preventFlip = preventFlip; this.preventFlip = preventFlip;
this.disabled = disabled; this.disabled = disabled;
this.active = false; this.active = false;
if (!sides.includes(this.side)) return Logger.err("Tooltip", `Side ${this.side} does not exist.`); if (!sides.includes(this.side)) return Logger.err("Tooltip", `Side ${this.side} does not exist.`);
if (!styles.includes(this.style)) return Logger.err("Tooltip", `Style ${this.style} does not exist.`); if (!styles.includes(this.style)) return Logger.err("Tooltip", `Style ${this.style} does not exist.`);
this.element = DOMManager.parseHTML(`<div class="bd-layer">`); this.element = DOMManager.parseHTML(`<div class="bd-layer">`);
this.tooltipElement = DOMManager.parseHTML(`<div class="bd-tooltip"><div class="bd-tooltip-pointer"></div><div class="bd-tooltip-content"></div></div>`); this.tooltipElement = DOMManager.parseHTML(`<div class="bd-tooltip"><div class="bd-tooltip-pointer"></div><div class="bd-tooltip-content"></div></div>`);
this.tooltipElement.classList.add(`bd-tooltip-${this.style}`); this.tooltipElement.classList.add(`bd-tooltip-${this.style}`);
this.labelElement = this.tooltipElement.childNodes[1]; this.labelElement = this.tooltipElement.childNodes[1];
if (text instanceof HTMLElement) this.labelElement.append(text); if (text instanceof HTMLElement) this.labelElement.append(text);
else this.labelElement.textContent = text; else this.labelElement.textContent = text;
this.element.append(this.tooltipElement); this.element.append(this.tooltipElement);
this.node.addEventListener("mouseenter", () => { this.node.addEventListener("mouseenter", () => {
if (this.disabled) return; if (this.disabled) return;
this.show(); this.show();
}); });
this.node.addEventListener("mouseleave", () => { this.node.addEventListener("mouseleave", () => {
this.hide(); this.hide();
}); });
} }
/** Alias for the constructor */ /** Alias for the constructor */
static create(node, text, options = {}) {return new Tooltip(node, text, options);} static create(node, text, options = {}) {return new Tooltip(node, text, options);}
/** Container where the tooltip will be appended. */ /** Container where the tooltip will be appended. */
get container() {return document.querySelector(`#app-mount`);} get container() {return document.querySelector(`#app-mount`);}
/** Boolean representing if the tooltip will fit on screen above the element */ /** Boolean representing if the tooltip will fit on screen above the element */
get canShowAbove() {return this.node.getBoundingClientRect().top - this.element.offsetHeight >= 0;} get canShowAbove() {return this.node.getBoundingClientRect().top - this.element.offsetHeight >= 0;}
/** Boolean representing if the tooltip will fit on screen below the element */ /** Boolean representing if the tooltip will fit on screen below the element */
get canShowBelow() {return this.node.getBoundingClientRect().top + this.node.offsetHeight + this.element.offsetHeight <= DOMManager.screenHeight;} get canShowBelow() {return this.node.getBoundingClientRect().top + this.node.offsetHeight + this.element.offsetHeight <= DOMManager.screenHeight;}
/** Boolean representing if the tooltip will fit on screen to the left of the element */ /** Boolean representing if the tooltip will fit on screen to the left of the element */
get canShowLeft() {return this.node.getBoundingClientRect().left - this.element.offsetWidth >= 0;} get canShowLeft() {return this.node.getBoundingClientRect().left - this.element.offsetWidth >= 0;}
/** Boolean representing if the tooltip will fit on screen to the right of the element */ /** Boolean representing if the tooltip will fit on screen to the right of the element */
get canShowRight() {return this.node.getBoundingClientRect().left + this.node.offsetWidth + this.element.offsetWidth <= DOMManager.screenWidth;} get canShowRight() {return this.node.getBoundingClientRect().left + this.node.offsetWidth + this.element.offsetWidth <= DOMManager.screenWidth;}
/** Hides the tooltip. Automatically called on mouseleave. */ /** Hides the tooltip. Automatically called on mouseleave. */
hide() { hide() {
/** Don't rehide if already inactive */ /** Don't rehide if already inactive */
if (!this.active) return; if (!this.active) return;
this.active = false; this.active = false;
this.element.remove(); this.element.remove();
} }
/** Shows the tooltip. Automatically called on mouseenter. Will attempt to flip if position was wrong. */ /** Shows the tooltip. Automatically called on mouseenter. Will attempt to flip if position was wrong. */
show() { show() {
/** Don't reshow if already active */ /** Don't reshow if already active */
if (this.active) return; if (this.active) return;
this.active = true; this.active = true;
this.labelElement.textContent = this.label; // this.labelElement.textContent = this.label;
this.container.append(this.element); this.container.append(this.element);
if (this.side == "top") { if (this.side == "top") {
if (this.canShowAbove || (!this.canShowAbove && this.preventFlip)) this.showAbove(); if (this.canShowAbove || (!this.canShowAbove && this.preventFlip)) this.showAbove();
else this.showBelow(); else this.showBelow();
} }
if (this.side == "bottom") { if (this.side == "bottom") {
if (this.canShowBelow || (!this.canShowBelow && this.preventFlip)) this.showBelow(); if (this.canShowBelow || (!this.canShowBelow && this.preventFlip)) this.showBelow();
else this.showAbove(); else this.showAbove();
} }
if (this.side == "left") { if (this.side == "left") {
if (this.canShowLeft || (!this.canShowLeft && this.preventFlip)) this.showLeft(); if (this.canShowLeft || (!this.canShowLeft && this.preventFlip)) this.showLeft();
else this.showRight(); else this.showRight();
} }
if (this.side == "right") { if (this.side == "right") {
if (this.canShowRight || (!this.canShowRight && this.preventFlip)) this.showRight(); if (this.canShowRight || (!this.canShowRight && this.preventFlip)) this.showRight();
else this.showLeft(); else this.showLeft();
} }
/** Do not create a new observer each time if one already exists! */ /** Do not create a new observer each time if one already exists! */
if (this.observer) return; if (this.observer) return;
/** Use an observer in show otherwise you'll cause unclosable tooltips */ /** Use an observer in show otherwise you'll cause unclosable tooltips */
this.observer = new MutationObserver((mutations) => { this.observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
const nodes = Array.from(mutation.removedNodes); const nodes = Array.from(mutation.removedNodes);
const directMatch = nodes.indexOf(this.node) > -1; const directMatch = nodes.indexOf(this.node) > -1;
const parentMatch = nodes.some(parent => parent.contains(this.node)); const parentMatch = nodes.some(parent => parent.contains(this.node));
if (directMatch || parentMatch) { if (directMatch || parentMatch) {
this.hide(); this.hide();
this.observer.disconnect(); this.observer.disconnect();
} }
}); });
}); });
this.observer.observe(document.body, {subtree: true, childList: true}); this.observer.observe(document.body, {subtree: true, childList: true});
} }
/** Force showing the tooltip above the node. */ /** Force showing the tooltip above the node. */
showAbove() { showAbove() {
this.tooltipElement.classList.add("bd-tooltip-top"); this.tooltipElement.classList.add("bd-tooltip-top");
this.element.style.setProperty("top", toPx(this.node.getBoundingClientRect().top - this.element.offsetHeight - 10)); this.element.style.setProperty("top", toPx(this.node.getBoundingClientRect().top - this.element.offsetHeight - 10));
this.centerHorizontally(); this.centerHorizontally();
} }
/** Force showing the tooltip below the node. */ /** Force showing the tooltip below the node. */
showBelow() { showBelow() {
this.tooltipElement.classList.add("bd-tooltip-bottom"); this.tooltipElement.classList.add("bd-tooltip-bottom");
this.element.style.setProperty("top", toPx(this.node.getBoundingClientRect().top + this.node.offsetHeight + 10)); this.element.style.setProperty("top", toPx(this.node.getBoundingClientRect().top + this.node.offsetHeight + 10));
this.centerHorizontally(); this.centerHorizontally();
} }
/** Force showing the tooltip to the left of the node. */ /** Force showing the tooltip to the left of the node. */
showLeft() { showLeft() {
this.tooltipElement.classList.add("bd-tooltip-left"); this.tooltipElement.classList.add("bd-tooltip-left");
this.element.style.setProperty("left", toPx(this.node.getBoundingClientRect().left - this.element.offsetWidth - 10)); this.element.style.setProperty("left", toPx(this.node.getBoundingClientRect().left - this.element.offsetWidth - 10));
this.centerVertically(); this.centerVertically();
} }
/** Force showing the tooltip to the right of the node. */ /** Force showing the tooltip to the right of the node. */
showRight() { showRight() {
this.tooltipElement.classList.add("bd-tooltip-right"); this.tooltipElement.classList.add("bd-tooltip-right");
this.element.style.setProperty("left", toPx(this.node.getBoundingClientRect().left + this.node.offsetWidth + 10)); this.element.style.setProperty("left", toPx(this.node.getBoundingClientRect().left + this.node.offsetWidth + 10));
this.centerVertically(); this.centerVertically();
} }
centerHorizontally() { centerHorizontally() {
const nodecenter = this.node.getBoundingClientRect().left + (this.node.offsetWidth / 2); const nodecenter = this.node.getBoundingClientRect().left + (this.node.offsetWidth / 2);
this.element.style.setProperty("left", toPx(nodecenter - (this.element.offsetWidth / 2))); this.element.style.setProperty("left", toPx(nodecenter - (this.element.offsetWidth / 2)));
} }
centerVertically() { centerVertically() {
const nodecenter = this.node.getBoundingClientRect().top + (this.node.offsetHeight / 2); const nodecenter = this.node.getBoundingClientRect().top + (this.node.offsetHeight / 2);
this.element.style.setProperty("top", toPx(nodecenter - (this.element.offsetHeight / 2))); this.element.style.setProperty("top", toPx(nodecenter - (this.element.offsetHeight / 2)));
} }
} }
window.Tooltip = Tooltip; window.Tooltip = Tooltip;