Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow themed join/exit button and fix wrap bug #1185

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Allow themed join/exit button and fix wrap bug #1185

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c7ce6f1
Allow themed join/exit button and fix wrap bug
Josh-Archer May 4, 2023
493de9d
Forgot to remove this
Josh-Archer May 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions CharactersPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,32 +559,26 @@ function inject_join_exit_abovevtt_button() {
if ($(".ddbc-campaign-summary").length === 0) return; // we don't have any campaign data
if ($("#avtt-character-join-button").length > 0) return; // we already injected a button

$(".ct-character-sheet-desktop > .ct-character-header-desktop").css({display: "inline-flex"})
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This unfortunately pushes the edit button off the other side of the screen for me when not full screen with beyond20 enabled.

I think the button overlapping the player header tidbits (xp race etc.) is also only an issue with beyond20 enabled and not full screen?

It's still a good issue to fix since so many of our users use beyond20.

image

const desktopPosition = $(".ct-character-sheet-desktop > .ct-character-header-desktop > .ct-character-header-desktop__group--gap");
const tabletPosition = $(".ct-character-sheet-tablet .ct-main-tablet > .ct-main-tablet__campaign");
const mobilePosition = $(".ct-character-sheet-mobile .ct-main-mobile > .ct-main-mobile__campaign");

const buttonText = is_abovevtt_page() ? "Exit AboveVTT" : "Join AboveVTT";
const button = $(`<a id="avtt-character-join-button" class="ct-character-header-desktop__button" style="float:right;"><img style="height:18px;" src="${window.EXTENSION_PATH + "assets/avtt-logo.png"}" title="AboveVTT Logo" />${buttonText}</a>`);
let color = $(".ddbc-campaign-summary").css("border-color") ?? "black";
button.css({
"color": "white",
"background": color
});
button.hover(() => button.css({"filter": "brightness(85%)"}), () => button.css({"filter": "brightness(100%)"}));

if (desktopPosition.length > 0) {
desktopPosition.append(button);
button.css({
"color": "white"
});
} else if (tabletPosition.length > 0) {
tabletPosition.prepend(button);
if (tabletPosition.hasClass("ct-main-tablet__campaign--dark-mode")) {
button.css({"color": "white", "background": "rgba(16,22,26,.859)"});
} else {
button.css({"background": "white"});
}
} else if (mobilePosition.length > 0) {
mobilePosition.prepend(button);
if (mobilePosition.hasClass("ct-main-mobile__campaign--dark-mode")) {
button.css({"color": "white", "background": "rgba(16,22,26,.859)"});
} else {
button.css({"background": "white"});
}
}

button.click(function(event) {
Expand Down Expand Up @@ -655,6 +649,13 @@ function observe_character_theme_change() {
// console.log("theme_observer is calling find_and_set_player_color", mutation, node);
const newColor = node.innerHTML.match(/#(?:[0-9a-fA-F]{3}){1,2}/)?.[0];
if (newColor) {
let button = $("#avtt-character-join-button");
//$(".ct-character-sheet-desktop > .ct-character-header-desktop > .ct-character-header-desktop__group--gap");
let color = $(".ct-character-header-desktop__button").css("border-color") ?? "black";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can find the theme color a little easier in all layouts with $('.dice-toolbar').css('--dice-color')
Currently this doesn't look like it grabs it in mobile layout.

I find it a little distracting being fully colored rather than just the border like the other buttons. I'm sure I'd get used to it but if you guys like it though I'm good with putting it in I use my own theme anyway lol.

button.css({
"color": "white",
"background": color
});
update_window_color(newColor);
if(window.PeerManager != undefined)
window.PeerManager.send(PeerEvent.preferencesChange());
Expand Down