Merge branch 'main' of https://github.com/jjaffeux/discourse-rewind

assets/javascripts/discourse/connectors/after-header-panel/rewind-decoration.gjs

@@ -0,0 +1,37 @@
+import Component from "@glimmer/component";
+import { TrackedObject } from "@ember-compat/tracked-built-ins";
+import bodyClass from "discourse/helpers/body-class";
+import KeyValueStore from "discourse/lib/key-value-store";
+import isRewindActive from "discourse/plugins/discourse-rewind/discourse/lib/is-rewind-active";
+
+export default class AvatarDecorator extends Component {
+  store = new TrackedObject(
+    new KeyValueStore("discourse_rewind_" + this.fetchYear)
+  );
+
+  get fetchYear() {
+    const currentDate = new Date();
+    const currentMonth = currentDate.getMonth();
+    const currentYear = currentDate.getFullYear();
+
+    if (currentMonth === 0) {
+      return currentYear - 1;
+    } else {
+      return currentYear;
+    }
+  }
+
+  get dismissed() {
+    return this.store.getObject("_dismissed") ?? false;
+  }
+
+  get showDecorator() {
+    return isRewindActive() && !this.dismissed;
+  }
+
+  <template>
+    {{#if this.showDecorator}}
+      {{bodyClass "rewind-notification-active"}}
+    {{/if}}
+  </template>
+}

assets/stylesheets/common/best-posts.scss

@@ -26,7 +26,7 @@
     z-index: -1;
     position: absolute;
     top: 8px;
-    left: -28px;
+    left: -20px;
     width: 0px;
     height: 0px;
     display: flex;
@@ -39,7 +39,7 @@
       z-index: -1;
       position: absolute;
       top: 8px;
-      left: -28px;
+      left: -20px;
       width: 0px;
       height: 0px;
       display: flex;

assets/stylesheets/common/best-topics.scss

@@ -47,7 +47,7 @@
     z-index: -1;
     position: absolute;
     top: 8px;
-    left: -28px;
+    left: -20px;
     width: 0px;
     height: 0px;
     display: flex;
@@ -60,7 +60,7 @@
       z-index: -1;
       position: absolute;
       top: 8px;
-      left: -28px;
+      left: -20px;
       width: 0px;
       height: 0px;
       display: flex;

assets/stylesheets/common/rewind-callout.scss

@@ -1,19 +1,33 @@
 .rewind-callout {
   background: var(--primary);
-  padding: 0.5em;
+  padding: 12px;
   margin-bottom: 0.5em;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
+  width: calc(100% - 12px);
   border-radius: var(--d-border-radius);
+  height: calc(100% - 12px);
+  margin: 0 auto;
+  box-shadow: 0 0 0 6px var(--primary);
+  transition: box-shadow;
+  transition-duration: 0.5s;
+  transition-timing-function: ease-in-out;
+  .rewind-logo {
+    height: 30px;
+  }
 
   &:hover,
   &:focus {
-    background: var(--primary-low-mid) !important;
-  }
-
-  &__arrow {
-    color: var(--secondary);
+    background: var(--primary) !important;
+    box-shadow: 0 0 0 2px rgba(var(--d-blue), 1),
+      0 0 0 4px rgba(var(--d-green), 1), 0 0 0 6px rgba(var(--d-orange), 1),
+      0 0 0 8px rgba(var(--d-red), 1);
+    @if color-scheme-is-light {
+      box-shadow: 0 0 0 2px rgba(var(--d-blue-dark), 1),
+        0 0 0 4px rgba(var(--d-green-dark), 1),
+        0 0 0 6px rgba(var(--d-orange-dark), 1),
+        0 0 0 8px rgba(var(--d-red-dark), 1);
+    }
   }
 }

assets/stylesheets/common/rewind-header.scss

@@ -10,6 +10,16 @@
   }
 
   @media (prefers-color-scheme: dark) {
+    &.-light {
+      display: block;
+    }
+
+    &.-dark {
+      display: none;
+    }
+  }
+
+  @if is-dark-color-scheme() {
     &.-dark {
       display: none;
     }
@@ -35,3 +45,15 @@
     font-size: var(--font-up-1);
   }
 }
+
+.rewind-notification-active #toggle-current-user::after {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  content: "";
+  background-image: url(/plugins/discourse-rewind/images/rewind-avatar-2-shimmer.gif);
+  display: block;
+  background-size: cover;
+}

assets/stylesheets/common/rewind.scss

@@ -50,7 +50,7 @@
 
 .background-1 {
   background: url(/plugins/discourse-rewind/images/blur-bg.png);
-  @media (prefers-color-scheme: dark) {
+  @if is-dark-color-scheme() {
     opacity: 0.15;
   }
   background-size: contain;

assets/stylesheets/common/top-words.scss

@@ -68,7 +68,7 @@
   .rewind-card {
     box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 1);
     border: none;
-    @media (prefers-color-scheme: dark) {
+    @if is-dark-color-scheme() {
       background-color: var(--primary-200);
       box-shadow: 0 0 0 4px rgba(var(--mystery-color-dark), 1);
     }
@@ -97,13 +97,13 @@
   }
   &:hover .rewind-card__inner {
     box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
-    @media (prefers-color-scheme: dark) {
-      box-shadow: 0px 3px 8px 2px rgba(var(--secondary-rgb), 0.9);
+    @if is-dark-color-scheme() {
+      box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
     }
   }
   .rewind-card__inner {
     box-shadow: 0px 0px 6px 2px rgba(var(--primary-rgb), 0.25);
-    @media (prefers-color-scheme: dark) {
+    @if is-dark-color-scheme() {
       box-shadow: 0px 0px 6px 2px rgba(var(--secondary-rgb), 0.9);
     }
   }

assets/stylesheets/common/variables.scss

@@ -17,7 +17,7 @@
   border: 2px solid var(--primary);
   border-radius: var(--rewind-border-radius);
   box-shadow: 4px 4px 0 0 rgba(var(--primary-rgb), 0.25);
-  @media screen and (prefers-color-scheme: dark) {
+  @if is-dark-color-scheme() {
     box-shadow: 0 4px 5px -2px rgba(var(--secondary-rgb), 0.5);
   }
 }