mirror of
https://github.com/discourse/discourse-rewind.git
synced 2025-07-07 22:32:11 +00:00
various tweaks
This commit is contained in:
Joffrey JAFFEUX
parent
42e31a7f24
commit
27b843f2c5
@ -4,22 +4,17 @@
|
||||
module DiscourseRewind
|
||||
class Rewind::Action::Reactions < Rewind::Action::BaseReport
|
||||
def call
|
||||
post_used_reactions = {}
|
||||
post_received_reactions = {}
|
||||
chat_used_reactions = {}
|
||||
chat_received_reactions = {}
|
||||
data = {}
|
||||
|
||||
if defined?(DiscourseReactions::Reaction)
|
||||
# This is missing heart reactions (default like)
|
||||
post_used_reactions =
|
||||
DiscourseReactions::Reaction
|
||||
data[:post_used_reactions] = DiscourseReactions::Reaction
|
||||
.by_user(user)
|
||||
.where(created_at: date)
|
||||
.group(:reaction_value)
|
||||
.count
|
||||
|
||||
post_received_reactions =
|
||||
DiscourseReactions::Reaction
|
||||
data[:post_received_reactions] = DiscourseReactions::Reaction
|
||||
.includes(:post)
|
||||
.where(posts: { user_id: user.id })
|
||||
.where(created_at: date)
|
||||
@ -29,11 +24,13 @@ module DiscourseRewind
|
||||
end
|
||||
|
||||
if SiteSetting.chat_enabled
|
||||
chat_used_reactions =
|
||||
Chat::MessageReaction.where(user: user).where(created_at: date).group(:emoji).count
|
||||
data[:chat_used_reactions] = Chat::MessageReaction
|
||||
.where(user: user)
|
||||
.where(created_at: date)
|
||||
.group(:emoji)
|
||||
.count
|
||||
|
||||
chat_received_reactions =
|
||||
Chat::MessageReaction
|
||||
data[:chat_received_reactions] = Chat::MessageReaction
|
||||
.includes(:chat_message)
|
||||
.where(chat_message: { user_id: user.id })
|
||||
.where(created_at: date)
|
||||
@ -41,15 +38,7 @@ module DiscourseRewind
|
||||
.count
|
||||
end
|
||||
|
||||
{
|
||||
data: {
|
||||
post_used_reactions: sort_and_limit(post_used_reactions),
|
||||
post_received_reactions: sort_and_limit(post_received_reactions),
|
||||
chat_used_reactions: sort_and_limit(chat_used_reactions),
|
||||
chat_received_reactions: sort_and_limit(chat_received_reactions),
|
||||
},
|
||||
identifier: "reactions",
|
||||
}
|
||||
{ data:, identifier: "reactions" }
|
||||
end
|
||||
|
||||
def enabled?
|
||||
|
||||
@ -41,7 +41,7 @@ export default class ActivityCalendar extends Component {
|
||||
<template>
|
||||
<div class="rewind-report-page -activity-calendar">
|
||||
<div class="rewind-card">
|
||||
<h3>Activity Calendar</h3>
|
||||
<h3 class="rewind-report-title">Activity Calendar</h3>
|
||||
<table class="rewind-calendar">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { service } from "@ember/service";
|
||||
|
||||
export default class Rewind extends Component {
|
||||
@service siteSettings;
|
||||
|
||||
<template>
|
||||
<div class="rewind-report-page">
|
||||
<h1>{{this.siteSettings.title}} 2024 rewind</h1>
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
@ -28,18 +28,21 @@ export default class Reactions extends Component {
|
||||
|
||||
<template>
|
||||
<div class="rewind-report-page -post-received-reactions">
|
||||
<h3 class="rewind-report-title">Most received reactions in topics</h3>
|
||||
<div class="rewind-report-container">
|
||||
{{#each-in @report.data.post_received_reactions as |emojiName count|}}
|
||||
<div class="rewind-card">
|
||||
<div class="rewind-card scale">
|
||||
<span>{{replaceEmoji (concat ":" emojiName ":")}}</span>
|
||||
<span>{{this.cleanEmoji emojiName}}</span>
|
||||
<span>{{count}} times</span>
|
||||
</div>
|
||||
{{/each-in}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rewind-report-page -post-used-reactions">
|
||||
<div class="rewind-card">
|
||||
<h3>Most used reactions in topics</h3>
|
||||
<h3 class="rewind-report-title">Most used reactions in topics</h3>
|
||||
<div class="rewind-reactions-chart">
|
||||
{{#each-in @report.data.post_used_reactions as |emojiName count|}}
|
||||
<div class="rewind-reactions-row">
|
||||
@ -50,13 +53,15 @@ export default class Reactions extends Component {
|
||||
<div
|
||||
class="rewind-reactions-bar"
|
||||
style={{this.computePercentageStyle count}}
|
||||
title={{count}}
|
||||
></div>
|
||||
</div>
|
||||
{{/each-in}}
|
||||
|
||||
<span class="rewind-total-reactions">Percentage of total number of
|
||||
reactions:
|
||||
{{this.totalPostUsedReactions}}</span>
|
||||
<span class="rewind-total-reactions">
|
||||
Total number of reactions:
|
||||
{{this.totalPostUsedReactions}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,6 +4,7 @@ import { on } from "@ember/modifier";
|
||||
import { action } from "@ember/object";
|
||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import { schedule } from "@ember/runloop";
|
||||
import { service } from "@ember/service";
|
||||
import { eq } from "truth-helpers";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
@ -15,11 +16,14 @@ import BestTopics from "discourse/plugins/discourse-rewind/discourse/components/
|
||||
import FavoriteCategories from "discourse/plugins/discourse-rewind/discourse/components/reports/favorite-categories";
|
||||
import FavoriteTags from "discourse/plugins/discourse-rewind/discourse/components/reports/favorite-tags";
|
||||
import FBFF from "discourse/plugins/discourse-rewind/discourse/components/reports/fbff";
|
||||
import Introduction from "discourse/plugins/discourse-rewind/discourse/components/reports/introduction";
|
||||
import Reactions from "discourse/plugins/discourse-rewind/discourse/components/reports/reactions";
|
||||
import ReadingTime from "discourse/plugins/discourse-rewind/discourse/components/reports/reading-time";
|
||||
import WordCloud from "discourse/plugins/discourse-rewind/discourse/components/reports/word-cloud";
|
||||
|
||||
export default class Rewind extends Component {
|
||||
@service siteSettings;
|
||||
|
||||
@tracked rewind = [];
|
||||
|
||||
@tracked fullScreen = true;
|
||||
@ -64,6 +68,7 @@ export default class Rewind extends Component {
|
||||
{{on "keydown" this.handleEscape}}
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
<div class="rewind">
|
||||
{{#if this.loadingRewind}}
|
||||
<div class="rewind-loader">
|
||||
@ -71,6 +76,24 @@ export default class Rewind extends Component {
|
||||
<div class="rewind-loader__text">Crunching your data...</div>
|
||||
</div>
|
||||
{{else}}
|
||||
|
||||
<img
|
||||
src="/plugins/discourse-rewind/images/blue_blob.svg"
|
||||
class="blob_1"
|
||||
/>
|
||||
<img
|
||||
src="/plugins/discourse-rewind/images/yellow_blob.svg"
|
||||
class="blob_2"
|
||||
/>
|
||||
<img
|
||||
src="/plugins/discourse-rewind/images/red_blob.svg"
|
||||
class="blob_3"
|
||||
/>
|
||||
<img
|
||||
src="/plugins/discourse-rewind/images/discourse_blob_1.svg"
|
||||
class="blob_4"
|
||||
/>
|
||||
|
||||
<DButton
|
||||
class="rewind__exit-fullscreen-btn"
|
||||
@icon={{if this.fullScreen "discourse-compress" "discourse-expand"}}
|
||||
@ -81,9 +104,12 @@ export default class Rewind extends Component {
|
||||
class="rewind__scroll-wrapper"
|
||||
{{didInsert this.registerScrollWrapper}}
|
||||
>
|
||||
{{#each this.rewind as |report|}}
|
||||
{{log report.identifier}}
|
||||
<div class="rewind-report">
|
||||
<Introduction />
|
||||
</div>
|
||||
|
||||
{{#each this.rewind as |report|}}
|
||||
<div class={{concatClass "rewind-report" report.identifier}}>
|
||||
{{#if (eq report.identifier "reactions")}}
|
||||
<Reactions @report={{report}} />
|
||||
{{else if (eq report.identifier "activity-calendar")}}
|
||||
|
||||
28
assets/stylesheets/common/blobs.scss
Normal file
28
assets/stylesheets/common/blobs.scss
Normal file
@ -0,0 +1,28 @@
|
||||
.blob_1 {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: -50px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.blob_2 {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
right: -50px;
|
||||
width: 200px;
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
.blob_3 {
|
||||
position: absolute;
|
||||
top: 500px;
|
||||
left: 500px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.blob_4 {
|
||||
position: absolute;
|
||||
top: 805px;
|
||||
left: -50px;
|
||||
width: 200px;
|
||||
}
|
||||
@ -8,4 +8,5 @@
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
@ -4,8 +4,4 @@
|
||||
@import "post-received-reactions";
|
||||
@import "post-used-reactions";
|
||||
@import "activity-calendar";
|
||||
|
||||
.rewind h3 {
|
||||
font-size: var(--font-down-1);
|
||||
text-align: left;
|
||||
}
|
||||
@import "blobs";
|
||||
|
||||
@ -1,16 +1,32 @@
|
||||
.rewind-report-page.-post-received-reactions {
|
||||
.rewind-reactions-chart {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.-post-received-reactions {
|
||||
.rewind-card {
|
||||
width: 177px;
|
||||
height: 190px;
|
||||
background: var(--secondary);
|
||||
|
||||
.emoji {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.scale:nth-child(1) {
|
||||
scale: 0.6;
|
||||
}
|
||||
.scale:nth-child(2) {
|
||||
scale: 0.7;
|
||||
margin-left: -70px;
|
||||
}
|
||||
.scale:nth-child(3) {
|
||||
scale: 0.8;
|
||||
margin-left: -50px;
|
||||
}
|
||||
.scale:nth-child(4) {
|
||||
scale: 0.9;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.scale:nth-child(5) {
|
||||
scale: 1;
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
.rewind-report-page.-post-used-reactions {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
width: 50%;
|
||||
|
||||
.-post-used-reactions {
|
||||
.rewind-card {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.rewind-reactions-chart {
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
.rewind-report {
|
||||
}
|
||||
|
||||
.rewind-report-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -9,4 +6,22 @@
|
||||
box-sizing: border-box;
|
||||
font-weight: 700;
|
||||
font-size: var(--font-up-2);
|
||||
width: 100%;
|
||||
gap: 1em;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rewind-report {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.rewind-report-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rewind-report-title {
|
||||
font-size: var(--font-down-1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2em 4em;
|
||||
padding: 2em;
|
||||
|
||||
&.-fullscreen {
|
||||
top: 0;
|
||||
@ -17,7 +17,6 @@
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(4.9px);
|
||||
-webkit-backdrop-filter: blur(4.9px);
|
||||
}
|
||||
@ -29,10 +28,12 @@
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--secondary);
|
||||
box-shadow: 0 0 0 1px var(--primary-300), 0 0 0 4px var(--primary-100);
|
||||
border: 1px solid var(--primary-300);
|
||||
border-radius: calc(var(--d-border-radius) / 2);
|
||||
container-type: size;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.rewind__scroll-wrapper {
|
||||
@ -41,6 +42,9 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.rewind__exit-fullscreen-btn {
|
||||
|
||||
4
public/images/blue_blob.svg
Normal file
4
public/images/blue_blob.svg
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1210 610 140 130" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1283.24 614.914C1316.55 616.934 1344.6 650.011 1342.58 683.318C1340.56 716.624 1314.47 738.03 1281.16 736.01C1247.85 733.99 1218.41 709.181 1221.97 676.003C1225.38 644.136 1249.93 612.894 1283.24 614.914Z" fill="#28ABE2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 361 B |
4
public/images/discourse_blob_1.svg
Normal file
4
public/images/discourse_blob_1.svg
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1270 290 30 40" fill="none">
|
||||
<path d="M1282.88 303.406C1282.55 303.406 1282.22 303.433 1281.88 303.487C1278.11 304.091 1274.7 307.828 1275.53 313.038C1276.36 318.248 1281.23 321.188 1285.04 320.581C1286.85 320.289 1288.21 319.345 1289.08 317.767C1290.02 316.058 1290.31 313.679 1289.89 311.073C1289.48 308.513 1288.41 306.349 1286.86 304.973C1285.7 303.939 1284.34 303.406 1282.88 303.406ZM1283.93 326.071C1277.36 326.071 1271.31 320.883 1270.19 313.893C1268.97 306.233 1273.73 299.317 1281.03 298.148C1284.47 297.6 1287.82 298.588 1290.45 300.934C1292.93 303.135 1294.62 306.434 1295.23 310.216C1295.84 314.062 1295.35 317.574 1293.81 320.372C1292.15 323.4 1289.34 325.367 1285.89 325.916C1285.24 326.022 1284.58 326.071 1283.93 326.071Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 812 B |
4
public/images/discourse_blob_2.svg
Normal file
4
public/images/discourse_blob_2.svg
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="190 330 40 40" fill="none">
|
||||
<path d="M211.877 344.406C211.549 344.406 211.216 344.433 210.882 344.487C207.106 345.091 203.697 348.828 204.531 354.038C205.363 359.248 210.226 362.188 214.04 361.581C215.852 361.289 217.21 360.345 218.077 358.767C219.019 357.058 219.308 354.679 218.893 352.073C218.481 349.513 217.408 347.349 215.86 345.973C214.698 344.939 213.335 344.406 211.877 344.406ZM212.933 367.071C206.364 367.071 200.309 361.883 199.192 354.893C197.967 347.233 202.727 340.317 210.027 339.148C213.473 338.6 216.817 339.588 219.452 341.934C221.926 344.135 223.623 347.434 224.229 351.216C224.845 355.062 224.355 358.574 222.814 361.372C221.148 364.4 218.337 366.367 214.891 366.916C214.236 367.022 213.584 367.071 212.933 367.071Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 810 B |
3
public/images/large-yellow-blob.svg
Normal file
3
public/images/large-yellow-blob.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="960" height="320" viewBox="0 0 960 320" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M960 116.354C960 203.4 663 319.384 459 319.385C255 319.385 0 280.065 0 193.029C0 105.983 133.31 -27.7899 434.155 5.60498C735 38.9999 960 29.3086 960 116.354Z" fill="#FBF5AF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 332 B |
4
public/images/orange_blob.svg
Normal file
4
public/images/orange_blob.svg
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M224.036 82.9766C224.036 105.821 196.974 129.299 175.822 129.299C154.671 129.299 131 109.736 131 86.8915C131 64.0469 160.478 36.0002 181.629 36.0002C202.781 36.0002 224.036 60.132 224.036 82.9766Z" fill="#F0794A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 347 B |
4
public/images/red_blob.svg
Normal file
4
public/images/red_blob.svg
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 170 50 50" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3373 213.134C32.5994 206.47 33.0421 197.279 38.463 186.324C42.9735 177.209 56.221 177.09 64.6731 180.156C74.1634 183.601 73.8346 197.973 63.8052 211.816C57.8382 220.051 46.5675 220.286 39.3373 213.134Z" fill="#E84A51"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 357 B |
3
public/images/wave-orange.svg
Normal file
3
public/images/wave-orange.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="1652" height="70" viewBox="0 0 1652 70" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M750 16.4996C328 -20.6245 70 16.4996 0 16.4996V70H1652V16.4996C1652 16.4996 1172 53.6238 750 16.4996Z" fill="#F0794A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 236 B |
3
public/images/wave-yellow.svg
Normal file
3
public/images/wave-yellow.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="1652" height="155" viewBox="0 0 1652 155" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M750 30.8091C154 -51.3817 46.5 63.6928 0 30.8091V155H1652V30.8091C1652 30.8091 1346 113 750 30.8091Z" fill="#FFFFE5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 237 B |
4
public/images/yellow_blob.svg
Normal file
4
public/images/yellow_blob.svg
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1050 10 300 250" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1114.01 198.933C1076.72 152.566 1071.43 59.1169 1117.79 21.82C1164.16 -15.4746 1238.98 10.0209 1276.28 56.3873C1313.57 102.751 1316.16 171.357 1268.13 206.477C1221.99 240.208 1151.31 245.299 1114.01 198.933Z" fill="#FBF5AF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 363 B |
Loading…
x
Reference in New Issue
Block a user