Skip to content

Commit

Permalink
add update to new font for donaters-top-list
Browse files Browse the repository at this point in the history
  • Loading branch information
@stCarolas
stCarolas committed Jun 26, 2024
1 parent 58c3183 commit 76a4890
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 114 deletions.
75 changes: 11 additions & 64 deletions src/components/ConfigurationPage/widgetsettings/DonatersTopListWidgetSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { AnimatedFontProperty } from "../widgetproperties/AnimatedFontProperty";
import { ColorProperty } from "../widgetproperties/ColorProperty";
import { DonatersTopListLayoutProperty } from "../widgetproperties/DonatersTopListLayoutProperty";
import { FontProperty } from "../widgetproperties/FontProperty";
Expand Down Expand Up @@ -52,46 +53,16 @@ export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
"widget-donaterslist-title",
"header",
),
new FontProperty(
widgetId,
"titleFont",
"fontselect",
"Roboto",
"widget-donaterslist-title-font-family",
"header",
),
new FontProperty(
widgetId,
"font",
"fontselect",
"Roboto",
"widget-donaterslist-list-font-family",
"list",
),
new NumberProperty(
widgetId,
"titleFontSize",
"number",
"24",
"widget-donaterslist-title-font-size",
"header",
),
new NumberProperty(
widgetId,
"fontSize",
"number",
"24",
"widget-donaterslist-list-font-size",
"list",
),
new ColorProperty(
widgetId,
"titleColor",
"color",
"#ffffff",
"widget-donaterslist-title-color",
"header",
),
new AnimatedFontProperty({
widgetId: widgetId,
name: "headerFont",
tab: "header"
}),
new AnimatedFontProperty({
widgetId: widgetId,
name: "messageFont",
tab: "list"
}),
new ColorProperty(
widgetId,
"titleBackgroundColor",
Expand All @@ -100,14 +71,6 @@ export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
"widget-donaterslist-title-background-color",
"header",
),
new ColorProperty(
widgetId,
"color",
"color",
"#ffffff",
"widget-donaterslist-list-color",
"list",
),
new ColorProperty(
widgetId,
"backgroundColor",
Expand All @@ -116,22 +79,6 @@ export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
"widget-donaterslist-list-background-color",
"list",
),
new NumberProperty(
widgetId,
"titleAlphaChannel",
"number",
"1.0",
"widget-donaterslist-title-transparency",
"header",
),
new NumberProperty(
widgetId,
"alphaChannel",
"number",
"1.0",
"widget-donaterslist-list-transparency",
"list",
),
new DonatersTopListLayoutProperty(widgetId, "vertical"),
],
tabs,
Expand Down
106 changes: 56 additions & 50 deletions src/components/DonatersTopList/DonatersTopList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,14 @@ import axios from "axios";
import "./DonatersTopList.css";
import { useLoaderData, useNavigate } from "react-router";
import { findSetting } from "../utils";
import { cleanupCommandListener, setupCommandListener, subscribe, unsubscribe } from "../../socket";
import {
cleanupCommandListener,
setupCommandListener,
subscribe,
unsubscribe,
} from "../../socket";
import FontImport from "../FontImport/FontImport";
import { AnimatedFontProperty } from "../ConfigurationPage/widgetproperties/AnimatedFontProperty";

const overflowHiddenForRootElement = (
<style
Expand All @@ -23,15 +29,6 @@ const fullHeight = (
/>
);

function hexToRgb(hex: string) {
var bigint = parseInt(hex.substring(1), 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;

return { r, g, b };
}

export default function DonatersTopList({}: {}) {
const [donaters, setDonaters] = useState(new Map());
const { recipientId, settings, conf, widgetId } = useLoaderData();
Expand Down Expand Up @@ -82,59 +79,54 @@ export default function DonatersTopList({}: {}) {
const type = findSetting(settings, "type", "All");

const title = findSetting(settings, "title", "Донатеры");
const titleColor = findSetting(settings, "titleColor", "black");
const titleBackgroundColor = hexToRgb(
findSetting(settings, "titleBackgroundColor", "white"),
);
const titleAlphaChannel = findSetting(settings, "titleAlphaChannel", "1.0");
const titleFont = findSetting(settings, "titleFont", "Roboto");
const titleFontSize = findSetting(settings, "titleFontSize", "24px");

const color = findSetting(settings, "color", "black");
const backgroundColor = hexToRgb(
findSetting(settings, "backgroundColor", "white"),
const titleBackgroundColor = findSetting(
settings,
"titleBackgroundColor",
"white",
);
const alphaChannel = findSetting(settings, "alphaChannel", "1.0");
const font = findSetting(settings, "font", "Roboto");
const fontSize = findSetting(settings, "fontSize", "24px");

console.log(`color: ${JSON.stringify(backgroundColor)}`);
console.log(`title color: ${JSON.stringify(titleBackgroundColor)}`);

// todo rename to listStyle - it's not only text style
const textStyle = {
fontSize: fontSize ? fontSize + "px" : "unset",
lineHeight: fontSize ? fontSize + "px" : "unset",
fontFamily: font ? font : "unset",
color: color,
};
const backgroundColor = findSetting(settings, "backgroundColor", "white");
const headerFont = new AnimatedFontProperty({
widgetId: widgetId,
name: "headerFont",
value: findSetting(settings, "headerFont", null),
});
const messageFont = new AnimatedFontProperty({
widgetId: widgetId,
name: "messageFont",
value: findSetting(settings, "messageFont", null),
});

const textStyle = messageFont.calcStyle();
textStyle.display = layout === "vertical" ? "block" : "inline";
textStyle.marginLeft = layout === "vertical" ? "0px" : "20px";

const donatersTopStyle = layout === "vertical" ? {} : { display: "inline" };
donatersTopStyle.fontSize = titleFontSize + "px";
donatersTopStyle.fontFamily = titleFont;
donatersTopStyle.color = titleColor;
donatersTopStyle.backgroundColor = `rgba(${titleBackgroundColor.r}, ${titleBackgroundColor.g}, ${titleBackgroundColor.b}, ${titleAlphaChannel})`;
const donatersTopStyle = headerFont.calcStyle();
if (layout === "vertical") {
donatersTopStyle.display = "inline";
}
donatersTopStyle.backgroundColor = titleBackgroundColor;

return (
<>
<FontImport font={font} />
<FontImport font={titleFont} />
{headerFont.createFontImport()}
{messageFont.createFontImport()}
{overflowHiddenForRootElement}
{fullHeight}
<style
dangerouslySetInnerHTML={{
__html: `#root { background-color: rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${alphaChannel}); }`,
__html: `#root { background-color: ${backgroundColor}; }`,
}}
/>

{"All" === type && (
<div className="donaters-list" style={textStyle}>
<div className={`donaters-list`} style={textStyle}>
{donaters &&
donaters.size > 0 &&
Array.from(donaters.keys()).map((donater) => (
<span key={donater} style={textStyle} className="donater">
<span
key={donater}
style={textStyle}
className={`donater ${messageFont.calcClassName()}`}
>
{donater} - {donaters.get(donater).major}{" "}
{donaters.get(donater).currency}{" "}
</span>
Expand All @@ -143,7 +135,10 @@ export default function DonatersTopList({}: {}) {
)}
{"Top" === type && (
<>
<div style={donatersTopStyle} className="donaters-title">
<div
style={donatersTopStyle}
className={`donaters-title ${headerFont.calcClassName()}`}
>
{title}
</div>
<div className="donaters-top">
Expand All @@ -152,7 +147,11 @@ export default function DonatersTopList({}: {}) {
Array.from(donaters.keys())
.slice(0, topsize)
.map((donater) => (
<div key={donater} style={textStyle} className="donater">
<div
key={donater}
style={textStyle}
className={`donater ${messageFont.calcClassName()}`}
>
{donater} - {donaters.get(donater).major}{" "}
{donaters.get(donater).currency}{" "}
</div>
Expand All @@ -162,7 +161,10 @@ export default function DonatersTopList({}: {}) {
)}
{"Last" === type && (
<>
<div style={donatersTopStyle} className="donaters-title">
<div
style={donatersTopStyle}
className={`donaters-title ${headerFont.calcClassName()}`}
>
{title}
</div>
<div className="donaters-top">
Expand All @@ -171,7 +173,11 @@ export default function DonatersTopList({}: {}) {
Array.from(donaters.keys())
.slice(0, topsize)
.map((donater) => (
<div key={donater} style={textStyle} className="donater">
<div
key={donater}
style={textStyle}
className={`donater ${messageFont.calcClassName()}`}
>
{donater} - {donaters.get(donater).major}{" "}
{donaters.get(donater).currency}{" "}
</div>
Expand Down

0 comments on commit 76a4890

Please sign in to comment.