base design

Author: jjaffeux

assets/javascripts/discourse/components/reports/reactions.gjs

@@ -0,0 +1,13 @@
+import Component from "@glimmer/component";
+
+export default class Reactions extends Component {
+  <template>
+    <div class="rewind-report-page">
+      Let's take a look at the reactions you've used this year!
+    </div>
+
+    <div class="rewind-report-page">
+      page 2
+    </div>
+  </template>
+}

assets/javascripts/discourse/components/rewind.gjs

@@ -2,12 +2,18 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { eq } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import Reactions from "discourse/plugins/discourse-rewind/discourse/components/reports/reactions";
 
 export default class Rewind extends Component {
   @tracked rewind = [];
 
+  @tracked fullScreen = true;
+
   @action
   async loadRewind() {
     try {
@@ -17,10 +23,34 @@ export default class Rewind extends Component {
     }
   }
 
+  @action
+  toggleFullScreen() {
+    this.fullScreen = !this.fullScreen;
+  }
+
+  reportComponentForIdentifier(identifier) {
+    if (identifier === "reactions") {
+      return Reactions;
+    }
+  }
+
   <template>
-    <div class="rewind" {{didInsert this.loadRewind}}>
+    <div
+      class={{concatClass "rewind" (if this.fullScreen "-fullscreen")}}
+      {{didInsert this.loadRewind}}
+    >
+      <DButton
+        class="rewind__exit-fullscreen-btn"
+        @icon={{if this.fullScreen "discourse-compress" "discourse-expand"}}
+        title="Toggle fullscreen"
+        @action={{this.toggleFullScreen}}
+      />
       {{#each this.rewind as |report|}}
-        <p>{{report.identifier}}</p>
+        {{#if (eq report.identifier "reactions")}}
+          <div class="rewind-report">
+            <Reactions @report={{report}} />
+          </div>
+        {{/if}}
       {{/each}}
     </div>
   </template>

assets/stylesheets/common/card.scss

@@ -0,0 +1,2 @@
+.rewind-card {
+}

assets/stylesheets/common/index.scss

@@ -1 +1,3 @@
 @import "rewind";
+@import "report";
+@import "card";

assets/stylesheets/common/report.scss

@@ -0,0 +1,14 @@
+.rewind-report {
+}
+
+.rewind-report-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1em;
+  box-sizing: border-box;
+  font-weight: 700;
+  font-size: var(--font-up-2);
+  height: 100cqh;
+  width: 100cqw;
+}

assets/stylesheets/common/rewind.scss

@@ -1,6 +1,29 @@
 .rewind {
   width: 280px;
   height: 400px;
-  background-color: var(--secondary-high);
+  background-color: var(--secondary);
   border-radius: var(--d-border-radius);
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid var(--primary-very-low);
+  box-sizing: border-box;
+  position: relative;
+  container-type: size;
+
+  &.-fullscreen {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+  }
+}
+
+.rewind__exit-fullscreen-btn {
+  position: sticky;
+  top: 5px;
+  left: calc(100% - 45px);
 }

assets/stylesheets/mobile/card.scss

@@ -0,0 +1,3 @@
+@import "rewind";
+@import "report";
+@import "card";

assets/stylesheets/mobile/index.scss

@@ -0,0 +1,4 @@
+.report-page {
+  width: 100vw;
+  height: 100vh;
+}

assets/stylesheets/mobile/report.scss

@@ -0,0 +1,7 @@
+.rewind {
+  background-color: var(--secondary);
+  border-radius: var(--d-border-radius);
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid var(--primary-very-low);
+}