feat: renaming class names to BEM

This commit is contained in:
Chubby Granny Chaser
2025-05-17 22:59:38 +01:00
parent 1247a105a0
commit 5ae67a3dc7
9 changed files with 49 additions and 49 deletions

View File

@@ -281,7 +281,7 @@ export class AchievementWatcherManager {
totalNewGamesWithAchievements, totalNewGamesWithAchievements,
totalNewAchievements, totalNewAchievements,
userPreferences.achievementCustomNotificationPosition ?? userPreferences.achievementCustomNotificationPosition ??
"top_left" "top-left"
); );
} else { } else {
publishCombinedNewAchievementNotification( publishCombinedNewAchievementNotification(

View File

@@ -128,7 +128,7 @@ export const mergeAchievements = async (
if (userPreferences?.achievementCustomNotificationsEnabled !== false) { if (userPreferences?.achievementCustomNotificationsEnabled !== false) {
WindowManager.notificationWindow?.webContents.send( WindowManager.notificationWindow?.webContents.send(
"on-achievement-unlocked", "on-achievement-unlocked",
userPreferences.achievementCustomNotificationPosition ?? "top_left", userPreferences.achievementCustomNotificationPosition ?? "top-left",
achievementsInfo achievementsInfo
); );
} else { } else {

View File

@@ -289,35 +289,35 @@ export class WindowManager {
const display = screen.getPrimaryDisplay(); const display = screen.getPrimaryDisplay();
const { width, height } = display.workAreaSize; const { width, height } = display.workAreaSize;
if (position === "bottom_center") { if (position === "bottom-center") {
return { return {
x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2, x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
y: height - this.NOTIFICATION_WINDOW_HEIGHT, y: height - this.NOTIFICATION_WINDOW_HEIGHT,
}; };
} }
if (position === "bottom_right") { if (position === "bottom-right") {
return { return {
x: width - this.NOTIFICATION_WINDOW_WIDTH, x: width - this.NOTIFICATION_WINDOW_WIDTH,
y: height - this.NOTIFICATION_WINDOW_HEIGHT, y: height - this.NOTIFICATION_WINDOW_HEIGHT,
}; };
} }
if (position === "top_center") { if (position === "top-center") {
return { return {
x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2, x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
y: 0, y: 0,
}; };
} }
if (position === "bottom_left") { if (position === "bottom-left") {
return { return {
x: 0, x: 0,
y: height - this.NOTIFICATION_WINDOW_HEIGHT, y: height - this.NOTIFICATION_WINDOW_HEIGHT,
}; };
} }
if (position === "top_right") { if (position === "top-right") {
return { return {
x: width - this.NOTIFICATION_WINDOW_WIDTH, x: width - this.NOTIFICATION_WINDOW_WIDTH,
y: 0, y: 0,
@@ -375,7 +375,7 @@ export class WindowManager {
setTimeout(() => { setTimeout(() => {
this.notificationWindow?.webContents.send( this.notificationWindow?.webContents.send(
"on-achievement-unlocked", "on-achievement-unlocked",
userPreferences.achievementCustomNotificationPosition ?? "top_left", userPreferences.achievementCustomNotificationPosition ?? "top-left",
[generateAchievementCustomNotificationTest(t, language)] [generateAchievementCustomNotificationTest(t, language)]
); );
}, 1000); }, 1000);

View File

@@ -144,28 +144,28 @@ $margin-bottom: 28px;
height: 192px; height: 192px;
display: flex; display: flex;
&.top_left { &--top-left {
align-items: start; align-items: start;
} }
&.top_center { &--top-center {
align-items: start; align-items: start;
} }
&.top_right { &--top-right {
justify-content: end; justify-content: end;
align-items: start; align-items: start;
} }
&.bottom_left { &--bottom-left {
align-items: end; align-items: end;
} }
&.bottom_center { &--bottom-center {
align-items: end; align-items: end;
} }
&.bottom_right { &--bottom-right {
justify-content: end; justify-content: end;
align-items: end; align-items: end;
} }
@@ -183,27 +183,27 @@ $margin-bottom: 28px;
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.25);
} }
&.top_left &__outer-container { &--top-left &__outer-container {
margin: $margin-top 0 0 $margin-horizontal; margin: $margin-top 0 0 $margin-horizontal;
} }
&.top_center &__outer-container { &--top-center &__outer-container {
margin: $margin-top 0 0 $margin-horizontal; margin: $margin-top 0 0 $margin-horizontal;
} }
&.top_right &__outer-container { &--top-right &__outer-container {
margin: $margin-top $margin-horizontal 0 0; margin: $margin-top $margin-horizontal 0 0;
} }
&.bottom_left &__outer-container { &--bottom-left &__outer-container {
margin: 0 0 $margin-bottom $margin-horizontal; margin: 0 0 $margin-bottom $margin-horizontal;
} }
&.bottom_center &__outer-container { &--bottom-center &__outer-container {
margin: 0 0 $margin-bottom $margin-horizontal; margin: 0 0 $margin-bottom $margin-horizontal;
} }
&.bottom_right &__outer-container { &--bottom-right &__outer-container {
margin: 0 $margin-horizontal $margin-bottom 0; margin: 0 $margin-horizontal $margin-bottom 0;
} }
@@ -423,32 +423,32 @@ $margin-bottom: 28px;
} }
} }
&.top_left &__chip { &--top-left &__chip {
top: -12px; top: -12px;
margin: $margin-top 0 0 $margin-horizontal; margin: $margin-top 0 0 $margin-horizontal;
} }
&.top_center &__chip { &--top-center &__chip {
top: -12px; top: -12px;
margin: $margin-top 0 0 $margin-horizontal; margin: $margin-top 0 0 $margin-horizontal;
} }
&.top_right &__chip { &--top-right &__chip {
top: -12px; top: -12px;
margin: $margin-top $margin-horizontal 0 0; margin: $margin-top $margin-horizontal 0 0;
} }
&.bottom_left &__chip { &--bottom-left &__chip {
bottom: 70px; bottom: 70px;
margin: 0 0 $margin-bottom $margin-horizontal; margin: 0 0 $margin-bottom $margin-horizontal;
} }
&.bottom_center &__chip { &--bottom-center &__chip {
bottom: 70px; bottom: 70px;
margin: 0 0 $margin-bottom $margin-horizontal; margin: 0 0 $margin-bottom $margin-horizontal;
} }
&.bottom_right &__chip { &--bottom-right &__chip {
bottom: 70px; bottom: 70px;
margin: 0 $margin-horizontal $margin-bottom 0; margin: 0 $margin-horizontal $margin-bottom 0;
} }

View File

@@ -24,7 +24,7 @@ export function AchievementNotificationItem({
return ( return (
<div <div
className={cn("achievement-notification", { className={cn("achievement-notification", {
[position]: true, [`${baseClassName}--${position}`]: true,
[`${baseClassName}--closing`]: isClosing, [`${baseClassName}--closing`]: isClosing,
[`${baseClassName}--hidden`]: achievement.isHidden, [`${baseClassName}--hidden`]: achievement.isHidden,
[`${baseClassName}--rare`]: achievement.isRare, [`${baseClassName}--rare`]: achievement.isRare,

View File

@@ -16,7 +16,7 @@ export function AchievementNotification() {
const [isClosing, setIsClosing] = useState(false); const [isClosing, setIsClosing] = useState(false);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [position, setPosition] = const [position, setPosition] =
useState<AchievementCustomNotificationPosition>("top_left"); useState<AchievementCustomNotificationPosition>("top-left");
const [achievements, setAchievements] = useState< const [achievements, setAchievements] = useState<
AchievementNotificationInfo[] AchievementNotificationInfo[]

View File

@@ -41,7 +41,7 @@ export function SettingsGeneral() {
achievementNotificationsEnabled: false, achievementNotificationsEnabled: false,
achievementCustomNotificationsEnabled: true, achievementCustomNotificationsEnabled: true,
achievementCustomNotificationPosition: achievementCustomNotificationPosition:
"top_left" as AchievementCustomNotificationPosition, "top-left" as AchievementCustomNotificationPosition,
language: "", language: "",
customStyles: window.localStorage.getItem("customStyles") || "", customStyles: window.localStorage.getItem("customStyles") || "",
}); });
@@ -108,7 +108,7 @@ export function SettingsGeneral() {
achievementCustomNotificationsEnabled: achievementCustomNotificationsEnabled:
userPreferences.achievementCustomNotificationsEnabled ?? true, userPreferences.achievementCustomNotificationsEnabled ?? true,
achievementCustomNotificationPosition: achievementCustomNotificationPosition:
userPreferences.achievementCustomNotificationPosition ?? "top_left", userPreferences.achievementCustomNotificationPosition ?? "top-left",
friendRequestNotificationsEnabled: friendRequestNotificationsEnabled:
userPreferences.friendRequestNotificationsEnabled ?? false, userPreferences.friendRequestNotificationsEnabled ?? false,
language: language ?? "en", language: language ?? "en",
@@ -118,12 +118,12 @@ export function SettingsGeneral() {
const achievementCustomNotificationPositionOptions = useMemo(() => { const achievementCustomNotificationPositionOptions = useMemo(() => {
return [ return [
"top_left", "top-left",
"top_center", "top-center",
"top_right", "top-right",
"bottom_left", "bottom-left",
"bottom_center", "bottom-center",
"bottom_right", "bottom-right",
].map((position) => ({ ].map((position) => ({
key: position, key: position,
value: position, value: position,

View File

@@ -34,7 +34,7 @@ export default function ThemeEditor() {
const [notificationVariation, setNotificationVariation] = const [notificationVariation, setNotificationVariation] =
useState<keyof typeof notificationVariations>("default"); useState<keyof typeof notificationVariations>("default");
const [notificationAlignment, setNotificationAlignment] = const [notificationAlignment, setNotificationAlignment] =
useState<AchievementCustomNotificationPosition>("top_left"); useState<AchievementCustomNotificationPosition>("top-left");
const achievementPreview = useMemo(() => { const achievementPreview = useMemo(() => {
return { return {
@@ -99,12 +99,12 @@ export default function ThemeEditor() {
const achievementCustomNotificationPositionOptions = useMemo(() => { const achievementCustomNotificationPositionOptions = useMemo(() => {
return [ return [
"top_left", "top-left",
"top_center", "top-center",
"top_right", "top-right",
"bottom_left", "bottom-left",
"bottom_center", "bottom-center",
"bottom_right", "bottom-right",
].map((position) => ({ ].map((position) => ({
key: position, key: position,
value: position, value: position,

View File

@@ -71,12 +71,12 @@ export interface GameAchievement {
} }
export type AchievementCustomNotificationPosition = export type AchievementCustomNotificationPosition =
| "top_left" | "top-left"
| "top_center" | "top-center"
| "top_right" | "top-right"
| "bottom_left" | "bottom-left"
| "bottom_center" | "bottom-center"
| "bottom_right"; | "bottom-right";
export interface UserPreferences { export interface UserPreferences {
downloadsPath?: string | null; downloadsPath?: string | null;