feat: alignments

2026-01-19 01:03:57 +00:00 · 2025-05-17 16:56:09 -03:00
parent baddd4a99b
commit 6a59036e21
3 changed files with 157 additions and 105 deletions
--- a/src/renderer/src/components/achievements/notification/achievement-notification.scss
+++ b/src/renderer/src/components/achievements/notification/achievement-notification.scss
@@ -1,7 +1,8 @@
@use "../../../scss/globals.scss";

 $margin-horizontal: 40px;
-$margin-vertical: 52px;
+$margin-top: 52px;
+$margin-bottom: 28px;

@keyframes content-in {
  0% {
@@ -141,13 +142,43 @@ $margin-vertical: 52px;
 .achievement-notification {
  width: 360px;
  height: 192px;
+  display: flex;
+
+  &.closing * {
+    animation: none;
+  }

-  &.closing *,
  &.closing *::before,
  &.closing *::after {
    animation: none !important;
  }

+  &.top_left {
+    align-items: start;
+  }
+
+  &.top_center {
+    align-items: start;
+  }
+
+  &.top_right {
+    justify-content: end;
+    align-items: start;
+  }
+
+  &.bottom_left {
+    align-items: end;
+  }
+
+  &.bottom_center {
+    align-items: end;
+  }
+
+  &.bottom_right {
+    justify-content: end;
+    align-items: end;
+  }
+
  .achievement-notification__outer-container {
    position: relative;
    display: grid;
@@ -161,35 +192,33 @@ $margin-vertical: 52px;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.25);

    &.top_left {
-      margin: $margin-vertical 0 0 $margin-horizontal;
+      margin: $margin-top 0 0 $margin-horizontal;
    }

    &.top_center {
-      margin: $margin-vertical 0 0 $margin-horizontal;
+      margin: $margin-top 0 0 $margin-horizontal;
    }

    &.top_right {
-      margin: $margin-vertical $margin-horizontal 0 0;
-      align-self: end;
+      margin: $margin-top $margin-horizontal 0 0;
    }

    &.bottom_left {
-      margin: 0 0 $margin-vertical $margin-horizontal;
+      margin: 0 0 $margin-bottom $margin-horizontal;
    }

    &.bottom_center {
-      margin: 0 0 $margin-vertical $margin-horizontal;
+      margin: 0 0 $margin-bottom $margin-horizontal;
    }

    &.bottom_right {
-      margin: 0 $margin-horizontal $margin-vertical 0;
-      align-self: end;
+      margin: 0 $margin-horizontal $margin-bottom 0;
    }
+  }

-    &.closing {
-      animation: content-out 450ms ease-in-out;
-      animation-fill-mode: forwards;
-    }
+  &.closing .achievement-notification__outer-container {
+    animation: content-out 450ms ease-in-out;
+    animation-fill-mode: forwards;
  }

  &__container {
@@ -278,79 +307,6 @@ $margin-vertical: 52px;
    box-shadow: 0px 0px 12px 0px rgba(12, 241, 202, 0.25);
  }

-  &__text-container {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  &__title {
-    font-size: 14px;
-    font-weight: 700;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: globals.$muted-color;
-    animation: title-in 450ms ease-in-out 900ms;
-  }
-
-  &__hidden-icon {
-    margin-right: 4px;
-    opacity: 0.5;
-  }
-
-  &__description {
-    font-size: 14px;
-    font-weight: 400;
-    overflow: hidden;
-    -webkit-line-clamp: 2; /* number of lines to show */
-    line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    color: globals.$body-color;
-    animation: description-in 450ms ease-in-out 900ms;
-  }
-
-  &__chip-container {
-    position: relative;
-    z-index: 2;
-
-    animation:
-      chip-stand-by 900ms,
-      chip-in 300ms ease-in-out 900ms;
-
-    &.closing {
-      animation: content-out 450ms ease-in-out;
-      animation-fill-mode: forwards;
-    }
-
-    &.top_left {
-      margin: $margin-vertical 0 0 $margin-horizontal;
-    }
-
-    &.top_center {
-      margin: $margin-vertical 0 0 $margin-horizontal;
-    }
-
-    &.top_right {
-      margin: $margin-vertical $margin-horizontal 0 0;
-    }
-
-    &.bottom_left {
-      margin: 0 0 $margin-vertical $margin-horizontal;
-    }
-
-    &.bottom_center {
-      margin: 0 0 $margin-vertical $margin-horizontal;
-    }
-
-    &.bottom_right {
-      margin: 0 $margin-horizontal $margin-vertical 0;
-    }
-  }
-
  &__additional-overlay {
    position: absolute;
    top: 0;
@@ -391,9 +347,49 @@ $margin-vertical: 52px;
    }
  }

+  &__text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: globals.$muted-color;
+    animation: title-in 450ms ease-in-out 900ms;
+  }
+
+  &__hidden-icon {
+    margin-right: 4px;
+    opacity: 0.5;
+  }
+
+  &__description {
+    font-size: 14px;
+    font-weight: 400;
+    overflow: hidden;
+    -webkit-line-clamp: 2; /* number of lines to show */
+    line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    color: globals.$body-color;
+    animation: description-in 450ms ease-in-out 900ms;
+  }
+
+  &.closing &__chip {
+    animation: content-out 450ms ease-in-out;
+    animation-fill-mode: forwards;
+  }
+
  &__chip {
    position: absolute;
-    top: -12px;
+
    right: 8px;
    display: flex;
    gap: 4px;
@@ -405,6 +401,37 @@ $margin-vertical: 52px;
    animation:
      chip-stand-by 900ms ease-in-out,
      chip-in 450ms ease-in-out 900ms;
+    z-index: 2;
+
+    &.top_left {
+      top: -12px;
+      margin: $margin-top 0 0 $margin-horizontal;
+    }
+
+    &.top_center {
+      top: -12px;
+      margin: $margin-top 0 0 $margin-horizontal;
+    }
+
+    &.top_right {
+      top: -12px;
+      margin: $margin-top $margin-horizontal 0 0;
+    }
+
+    &.bottom_left {
+      bottom: 70px;
+      margin: 0 0 $margin-bottom $margin-horizontal;
+    }
+
+    &.bottom_center {
+      bottom: 70px;
+      margin: 0 0 $margin-bottom $margin-horizontal;
+    }
+
+    &.bottom_right {
+      bottom: 70px;
+      margin: 0 $margin-horizontal $margin-bottom 0;
+    }

    &__icon {
      width: 16px;
--- a/src/renderer/src/components/achievements/notification/achievement-notification.tsx
+++ b/src/renderer/src/components/achievements/notification/achievement-notification.tsx
@@ -30,30 +30,25 @@ export function AchievementNotificationItem({
    >
      {achievement.points && (
        <div
-          className={cn("achievement-notification__chip-container", {
+          className={cn("achievement-notification__chip", {
            [position]: true,
-            closing: isClosing,
          })}
        >
-          <div className="achievement-notification__chip">
-            <HydraIcon className="achievement-notification__chip__icon" />
-            <span className="achievement-notification__chip__label">
-              +{achievement.points}
-            </span>
-          </div>
+          <HydraIcon className="achievement-notification__chip__icon" />
+          <span className="achievement-notification__chip__label">
+            +{achievement.points}
+          </span>
        </div>
      )}

      <div
        className={cn("achievement-notification__outer-container", {
          [position]: true,
-          closing: isClosing,
        })}
      >
        <div
          className={cn("achievement-notification__container", {
            [position]: true,
-            closing: isClosing,
          })}
        >
          <div className="achievement-notification__content">
--- a/src/renderer/src/pages/theme-editor/theme-editor.tsx
+++ b/src/renderer/src/pages/theme-editor/theme-editor.tsx
@@ -33,6 +33,8 @@ export default function ThemeEditor() {

  const [notificationVariation, setNotificationVariation] =
    useState<keyof typeof notificationVariations>("default");
+  const [notificationAlignment, setNotificationAlignment] =
+    useState<AchievementCustomNotificationPosition>("top_left");

  const achievementPreview = useMemo(() => {
    return {
@@ -42,9 +44,9 @@ export default function ThemeEditor() {
        isHidden: notificationVariation === "hidden",
        isPlatinum: notificationVariation === "platinum",
      },
-      position: "top_center" as AchievementCustomNotificationPosition,
+      position: notificationAlignment,
    };
-  }, [t, i18n.language, notificationVariation]);
+  }, [t, i18n.language, notificationVariation, notificationAlignment]);

  useEffect(() => {
    window.document.title = "Hydra - Theme Editor";
@@ -95,6 +97,21 @@ export default function ThemeEditor() {
    }
  };

+  const achievementCustomNotificationPositionOptions = useMemo(() => {
+    return [
+      "top_left",
+      "top_center",
+      "top_right",
+      "bottom_left",
+      "bottom_center",
+      "bottom_right",
+    ].map((position) => ({
+      key: position,
+      value: position,
+      label: t(position),
+    }));
+  }, [t]);
+
  return (
    <div className="theme-editor">
      <div
@@ -139,7 +156,7 @@ export default function ThemeEditor() {
          <div className="theme-editor__notification-preview">
            <SelectField
              className="theme-editor__notification-preview__select-variation"
-              label="Notification Variation"
+              label="Variation"
              options={Object.values(notificationVariations).map(
                (variation) => {
                  return {
@@ -156,11 +173,24 @@ export default function ThemeEditor() {
              }
            />

-            <AchievementNotificationItem
-              position={achievementPreview.position}
-              achievement={achievementPreview.achievement}
-              isClosing={isClosingNotifications}
+            <SelectField
+              label={"alignment"}
+              value={notificationAlignment}
+              onChange={(e) =>
+                setNotificationAlignment(
+                  e.target.value as AchievementCustomNotificationPosition
+                )
+              }
+              options={achievementCustomNotificationPositionOptions}
            />
+
+            <div style={{ border: "1px solid #444" }}>
+              <AchievementNotificationItem
+                position={achievementPreview.position}
+                achievement={achievementPreview.achievement}
+                isClosing={isClosingNotifications}
+              />
+            </div>
          </div>
        </CollapsedMenu>