Skip to content

Commit

Permalink
add update to new font for donationgoal
Browse files Browse the repository at this point in the history
  • Loading branch information
@stCarolas
stCarolas committed Jun 25, 2024
1 parent dd896a9 commit ad11c73
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 80 deletions.
10 changes: 8 additions & 2 deletions src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,14 @@ const animations = [
];

export class AnimatedFontProperty extends DefaultWidgetProperty {
private _label: string;

constructor(params: {
widgetId: string;
name: string;
value?: any;
tab?: string | undefined;
tab?: string;
label?: string;
}) {
super(
params.widgetId,
Expand All @@ -58,6 +61,8 @@ export class AnimatedFontProperty extends DefaultWidgetProperty {
"",
params.tab,
);
this._label = params.label ?? "widget-font-label";
console.log(this._label);
}

copy() {
Expand All @@ -66,6 +71,7 @@ export class AnimatedFontProperty extends DefaultWidgetProperty {
name: this.name,
value: this.value,
tab: this.tab,
label: this._label
});
}

Expand Down Expand Up @@ -115,7 +121,7 @@ export class AnimatedFontProperty extends DefaultWidgetProperty {
{this.createFontImport()}
<div className="widget-settings-item">
<label className="widget-settings-name">
{t("widget-font-label")}
{t(this._label)}
</label>
<button
className={`${classes.button} oda-btn-default`}
Expand Down
70 changes: 15 additions & 55 deletions src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import {
DonationGoalProperty,
} from "../widgetproperties/DonationGoalProperty";
import { DonationGoalProperty } from "../widgetproperties/DonationGoalProperty";
import { WidgetProperty } from "../widgetproperties/WidgetProperty";
import { AbstractWidgetSettings } from "./AbstractWidgetSettings";
import { FontProperty } from "../widgetproperties/FontProperty";
import { NumberProperty } from "../widgetproperties/NumberProperty";
import { ColorProperty } from "../widgetproperties/ColorProperty";
import { SingleChoiceProperty } from "../widgetproperties/SingleChoiceProperty";
import { TextProperty } from "../widgetproperties/TextProperty";
import { AnimatedFontProperty } from "../widgetproperties/AnimatedFontProperty";

export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
constructor(widgetId: string, properties: WidgetProperty[]) {
Expand All @@ -18,30 +15,12 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
widgetId,
properties,
[
new FontProperty(
widgetId,
"titleFont",
"fontselect",
"Alice",
"widget-donationgoal-title-font-family",
"header",
),
new NumberProperty(
widgetId,
"titleFontSize",
"number",
"24",
"widget-donationgoal-title-font-size",
"header",
),
new ColorProperty(
widgetId,
"titleColor",
"color",
"#000000",
"widget-donationgoal-title-color",
"header",
),
new AnimatedFontProperty({
widgetId: widgetId,
name: "descriptionFont",
tab: "header",
label: "widget-donationgoal-title-font-family"
}),
new SingleChoiceProperty(
widgetId,
"titleTextAlign",
Expand All @@ -51,30 +30,12 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
["left", "center", "right"],
"header",
),
new FontProperty(
widgetId,
"filledFont",
"fontselect",
"Russo One",
"widget-donationgoal-amount-font-family",
"header",
),
new NumberProperty(
widgetId,
"filledFontSize",
"number",
"24",
"widget-donationgoal-amount-font-size",
"header",
),
new ColorProperty(
widgetId,
"filledTextColor",
"color",
"#ffffff",
"widget-donationgoal-amount-color",
"header",
),
new AnimatedFontProperty({
widgetId: widgetId,
name: "amountFont",
tab: "header",
label: "widget-donationgoal-amount-font-family"
}),
new ColorProperty(
widgetId,
"backgroundColor",
Expand Down Expand Up @@ -106,7 +67,7 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
"predefined",
"<collected> / <required> <currency>",
"widget-donationgoal-label-template",
"header"
"header",
),
new DonationGoalProperty(widgetId),
],
Expand All @@ -117,5 +78,4 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
copy() {
return new DonationGoalWidgetSettings(this.widgetId, this.properties);
}

}
45 changes: 22 additions & 23 deletions src/components/DonationGoal/DonationGoal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { findSetting } from "../utils";
import { PaymentPageConfig } from "../MediaWidget/PaymentPageConfig";
import { Goal } from "../ConfigurationPage/widgetproperties/DonationGoalProperty";
import FontImport from "../FontImport/FontImport";
import { produce } from "immer";
import { AnimatedFontProperty } from "../ConfigurationPage/widgetproperties/AnimatedFontProperty";

export default function DonationGoal({}) {
const { recipientId, settings, conf, widgetId } =
Expand Down Expand Up @@ -56,32 +58,32 @@ export default function DonationGoal({}) {
);
}, [recipientId]);

const fontSize = findSetting(settings, "titleFontSize", "24");
const font = findSetting(settings, "titleFont", "Alice");
const textColor = findSetting(settings, "titleColor", "black");
const titleFont = new AnimatedFontProperty({
widgetId: widgetId,
name: "descriptionFont",
value: findSetting(settings, "descriptionFont", null)
});
const amountFont = new AnimatedFontProperty({
widgetId: widgetId,
name: "amountFont",
value: findSetting(settings, "amountFont", null)
});
const titleTextAlign = findSetting(settings, "titleTextAlign", "left");
const labelTemplate = findSetting(
settings,
"labelTemplate",
"<collected> / <required> <currency>",
);
const textStyle = {
fontSize: fontSize ? fontSize + "px" : "unset",
fontFamily: font ? font : "unset",
fontWeight: 600,
textAlign: titleTextAlign,
color: textColor,
};
const textStyle = produce(titleFont.calcStyle(),(draft) => {
draft.textAlign = titleTextAlign;
});

const backgroundColor = findSetting(settings, "backgroundColor", "lightgray");
const progressbarStyle = {
backgroundColor: backgroundColor,
};

const filledColor = findSetting(settings, "filledColor", "green");
const filledTextColor = findSetting(settings, "filledTextColor", "white");
const filledFontSize = findSetting(settings, "filledFontSize", "24");
const filledFont = findSetting(settings, "filledFont", "Russo One");
let filledTextAlign = findSetting(settings, "filledTextAlign", "left");
switch (filledTextAlign) {
case "left":
Expand All @@ -91,21 +93,18 @@ export default function DonationGoal({}) {
filledTextAlign = "flex-end";
break;
}
const filledTextStyle = {
fontSize: filledFontSize ? filledFontSize + "px" : "unset",
fontFamily: filledFont ? filledFont : "unset",
color: filledTextColor,
justifyContent: filledTextAlign,
};
const filledTextStyle = produce(amountFont.calcStyle(),(draft) => {
draft.justifyContent = filledTextAlign;
});

return (
<>
<FontImport font={font} />
<FontImport font={filledFont} />
{amountFont.createFontImport()}
{titleFont.createFontImport()}
{goals.map((goal) => (
<>
<div className={`${classes.goalitem}`}>
<div style={textStyle} className={`${classes.goaldescription}`}>
<div style={textStyle} className={`${classes.goaldescription} ${titleFont.calcClassName()}`}>
{goal.briefDescription}
</div>
<div
Expand All @@ -122,7 +121,7 @@ export default function DonationGoal({}) {
}}
className={`${classes.goalfilled}`}
></div>
<div style={filledTextStyle} className={`${classes.goalamount}`}>
<div style={filledTextStyle} className={`${classes.goalamount} ${amountFont.calcClassName()}`}>
{labelTemplate
.replaceAll("<collected>", goal.accumulatedAmount.major)
.replaceAll("<required>", goal.requiredAmount.major)
Expand Down

0 comments on commit ad11c73

Please sign in to comment.