From bc06ae5c032a46fa954d30dfae9469f0ddac06b1 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Fri, 16 May 2025 16:18:19 -0300 Subject: [PATCH] feat: notification preview on theme editor --- src/main/events/themes/update-custom-theme.ts | 1 + src/main/services/window-manager.ts | 23 +--- .../achievement-notification.scss | 0 .../notification/achievement-notification.tsx | 50 ++++++++ .../collapsed-menu/collapsed-menu.scss | 40 ++++++ .../collapsed-menu/collapsed-menu.tsx | 52 ++++++++ .../components/select-field/select-field.tsx | 5 +- .../notification/achievement-notification.tsx | 62 +++++----- .../aparence/modals/add-theme-modal.tsx | 50 ++++---- .../src/pages/theme-editor/theme-editor.scss | 23 +++- .../src/pages/theme-editor/theme-editor.tsx | 114 +++++++++++++++--- src/shared/constants.ts | 5 + src/shared/index.ts | 22 ++++ 13 files changed, 347 insertions(+), 100 deletions(-) rename src/renderer/src/{pages => components}/achievements/notification/achievement-notification.scss (100%) create mode 100644 src/renderer/src/components/achievements/notification/achievement-notification.tsx create mode 100644 src/renderer/src/components/collapsed-menu/collapsed-menu.scss create mode 100644 src/renderer/src/components/collapsed-menu/collapsed-menu.tsx diff --git a/src/main/events/themes/update-custom-theme.ts b/src/main/events/themes/update-custom-theme.ts index b9a8e048..92d85b8b 100644 --- a/src/main/events/themes/update-custom-theme.ts +++ b/src/main/events/themes/update-custom-theme.ts @@ -21,6 +21,7 @@ const updateCustomTheme = async ( if (theme.isActive) { WindowManager.mainWindow?.webContents.send("css-injected", code); + WindowManager.notificationWindow?.webContents.send("css-injected", code); } }; diff --git a/src/main/services/window-manager.ts b/src/main/services/window-manager.ts index dc07e673..1ea5ea1d 100644 --- a/src/main/services/window-manager.ts +++ b/src/main/services/window-manager.ts @@ -20,11 +20,10 @@ import { db, gamesSublevel, levelKeys } from "@main/level"; import { orderBy, slice } from "lodash-es"; import type { AchievementCustomNotificationPosition, - AchievementNotificationInfo, ScreenState, UserPreferences, } from "@types"; -import { AuthPage } from "@shared"; +import { AuthPage, generateAchievementCustomNotificationTest } from "@shared"; import { isStaging } from "@main/constants"; export class WindowManager { @@ -377,23 +376,7 @@ export class WindowManager { this.notificationWindow?.webContents.send( "on-achievement-unlocked", userPreferences.achievementCustomNotificationPosition ?? "top_left", - [ - { - title: t("test_achievement_notification_title", { - ns: "notifications", - lng: language, - }), - description: t("test_achievement_notification_description", { - ns: "notifications", - lng: language, - }), - iconUrl: "https://cdn.losbroxas.org/favicon.svg", - points: 100, - isHidden: false, - isRare: false, - isPlatinum: false, - }, - ] as AchievementNotificationInfo[] + [generateAchievementCustomNotificationTest(t, language)] ); }, 1000); } @@ -419,7 +402,7 @@ export class WindowManager { } const editorWindow = new BrowserWindow({ - width: 600, + width: 720, height: 720, minWidth: 600, minHeight: 540, diff --git a/src/renderer/src/pages/achievements/notification/achievement-notification.scss b/src/renderer/src/components/achievements/notification/achievement-notification.scss similarity index 100% rename from src/renderer/src/pages/achievements/notification/achievement-notification.scss rename to src/renderer/src/components/achievements/notification/achievement-notification.scss diff --git a/src/renderer/src/components/achievements/notification/achievement-notification.tsx b/src/renderer/src/components/achievements/notification/achievement-notification.tsx new file mode 100644 index 00000000..dddbe436 --- /dev/null +++ b/src/renderer/src/components/achievements/notification/achievement-notification.tsx @@ -0,0 +1,50 @@ +import { + AchievementCustomNotificationPosition, + AchievementNotificationInfo, +} from "@types"; +import cn from "classnames"; +import "./achievement-notification.scss"; + +interface AchievementNotificationProps { + position: AchievementCustomNotificationPosition; + currentAchievement: AchievementNotificationInfo; + isClosing: boolean; +} + +export function AchievementNotificationItem({ + position, + currentAchievement, + isClosing, +}: Readonly) { + return ( +
+
+
+ {currentAchievement.title} +
+

+ {currentAchievement.title} +

+

+ {currentAchievement.description} +

+
+
+
+
+ ); +} diff --git a/src/renderer/src/components/collapsed-menu/collapsed-menu.scss b/src/renderer/src/components/collapsed-menu/collapsed-menu.scss new file mode 100644 index 00000000..c209940e --- /dev/null +++ b/src/renderer/src/components/collapsed-menu/collapsed-menu.scss @@ -0,0 +1,40 @@ +@use "../../scss/globals.scss"; + +.collapsed-menu { + &__button { + height: 72px; + padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 2); + display: flex; + align-items: center; + background-color: globals.$background-color; + color: globals.$muted-color; + width: 100%; + cursor: pointer; + transition: all ease 0.2s; + gap: globals.$spacing-unit; + font-size: globals.$body-font-size; + font-weight: bold; + + &:hover { + background-color: rgba(255, 255, 255, 0.05); + } + + &:active { + opacity: globals.$active-opacity; + } + } + + &__chevron { + transition: transform ease 0.2s; + + &--open { + transform: rotate(180deg); + } + } + + &__content { + overflow: hidden; + transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); + position: relative; + } +} diff --git a/src/renderer/src/components/collapsed-menu/collapsed-menu.tsx b/src/renderer/src/components/collapsed-menu/collapsed-menu.tsx new file mode 100644 index 00000000..67058598 --- /dev/null +++ b/src/renderer/src/components/collapsed-menu/collapsed-menu.tsx @@ -0,0 +1,52 @@ +import { useEffect, useRef, useState } from "react"; +import { ChevronDownIcon } from "@primer/octicons-react"; +import "./collapsed-menu.scss"; + +export interface CollapsedMenuProps { + title: string; + children: React.ReactNode; +} + +export function CollapsedMenu({ + title, + children, +}: Readonly) { + const content = useRef(null); + const [isOpen, setIsOpen] = useState(true); + const [height, setHeight] = useState(0); + + useEffect(() => { + if (content.current && content.current.scrollHeight !== height) { + setHeight(isOpen ? content.current.scrollHeight : 0); + } else if (!isOpen) { + setHeight(0); + } + }, [isOpen, children, height]); + + return ( +
+ + +
+ {children} +
+
+ ); +} diff --git a/src/renderer/src/components/select-field/select-field.tsx b/src/renderer/src/components/select-field/select-field.tsx index 69e3d74b..08334b9f 100644 --- a/src/renderer/src/components/select-field/select-field.tsx +++ b/src/renderer/src/components/select-field/select-field.tsx @@ -18,12 +18,13 @@ export function SelectField({ options = [{ key: "-", value: value?.toString() || "-", label: "-" }], theme = "primary", onChange, -}: SelectProps) { + className, +}: Readonly) { const [isFocused, setIsFocused] = useState(false); const id = useId(); return ( -
+
{label && (
- +
+
+ +
+
+ +
+ { + return { + key: variation, + value: variation, + label: variation, + }; + } + )} + onChange={(value) => + setNotificationVariation( + value.target.value as keyof typeof notificationVariations + ) + } + /> + + +
+ +