From 0f87cde5c7f2bd78d4fb05261c3c9698e7e1a41f Mon Sep 17 00:00:00 2001 From: Daniel Wilkowski Date: Tue, 10 Oct 2023 21:59:04 +0200 Subject: [PATCH] Implement timeline --- app/Http/Resources/ActivityResource.php | 38 +++++--- app/Http/Resources/Api/MicroblogResource.php | 1 + resources/js/pages/homepage.js | 16 +++- resources/lang/pl/activity.php | 8 -- resources/sass/pages/_homepage.scss | 97 ++++++++++++++++++++ resources/views/home.twig | 38 ++++++-- 6 files changed, 165 insertions(+), 33 deletions(-) delete mode 100644 resources/lang/pl/activity.php diff --git a/app/Http/Resources/ActivityResource.php b/app/Http/Resources/ActivityResource.php index a6707724ce..5615fac1cf 100644 --- a/app/Http/Resources/ActivityResource.php +++ b/app/Http/Resources/ActivityResource.php @@ -9,6 +9,7 @@ use Coyote\User; use Illuminate\Http\Request; use Illuminate\Http\Resources\Json\JsonResource; +use function cdn; /** * @property int $user_id @@ -31,24 +32,33 @@ class ActivityResource extends JsonResource public function toArray($request) { return [ - 'excerpt' => $this->excerpt, - 'created_at' => $this->created_at, - 'headline' => $this->headline(), - 'user_id' => $this->user_id, - 'object' => strtolower(class_basename($this->content_type)), - 'type' => strtolower(class_basename($this->content_type)), - 'user' => [ - 'photo' => $this->user_id ? $this->user->photo : '' - ] + 'excerpt' => $this->excerpt, + 'created_at' => format_date($this->created_at), + 'timestamp' => carbon($this->created_at)->timestamp, + 'headline' => $this->headline($this->user(), $this->topic()), + 'user_id' => $this->user_id, + 'object' => strtolower(class_basename($this->content_type)), + 'type' => strtolower(class_basename($this->content_type)), + 'user_avatar' => $this->userPicture() ]; } - public function headline(): string + public function userPicture(): string { - return trans('activity.headline.' . strtolower(class_basename($this->content_type)), [ - 'user' => $this->user(), - 'topic' => $this->topic() - ]); + if ($this->user_id) { + if ($this->user->photo->getFilename()) { + return $this->user->photo->url(); + } + } + return cdn('img/avatar.png'); + } + + private function headline(string $user, string $topic): string + { + return [ + Post::class => "$user dodał post w $topic", + Post\Comment::class => "$user dodał komentarz w $topic", + ][$this->content_type]; } public function user(): string diff --git a/app/Http/Resources/Api/MicroblogResource.php b/app/Http/Resources/Api/MicroblogResource.php index 5f4b9e2420..432135ff41 100644 --- a/app/Http/Resources/Api/MicroblogResource.php +++ b/app/Http/Resources/Api/MicroblogResource.php @@ -39,6 +39,7 @@ public function toArray($request) 'url' => $this->parent_id ? UrlBuilder::microblogComment($this->resource, true) : UrlBuilder::microblog($this->resource, true), 'created_at' => $this->created_at->toIso8601String(), 'updated_at' => $this->created_at->toIso8601String(), + 'timestamp' => $this->created_at->timestamp, 'comments' => $this->when( $this->isNotComment(), function () { diff --git a/resources/js/pages/homepage.js b/resources/js/pages/homepage.js index 5923fe62a7..f4a4affcef 100644 --- a/resources/js/pages/homepage.js +++ b/resources/js/pages/homepage.js @@ -3,6 +3,7 @@ import PerfectScrollbar from 'perfect-scrollbar'; import Vue from "vue"; import VueNotifications from "vue-notification"; import {mapGetters} from "vuex"; +import VueAvatar from '../components/avatar.vue'; import VueMicroblog from "../components/microblog/microblog"; import VueModals from "../plugins/modals.ts"; import VuePaste from '../plugins/paste.js'; @@ -17,7 +18,10 @@ new Vue({ el: '#js-microblog', delimiters: ['${', '}'], mixins: [LiveMixin], - components: {'vue-microblog': VueMicroblog}, + components: { + 'vue-microblog': VueMicroblog, + 'vue-avatar': VueAvatar, + }, store, created() { Object.keys(window.microblogs).forEach(id => store.commit('microblogs/ADD', window.microblogs[id])); @@ -27,7 +31,15 @@ new Vue({ mounted() { this.liveNotifications(); }, - computed: mapGetters('microblogs', ['microblogs']) + computed: { + ...mapGetters('microblogs', ['microblogs']), + timeline() { + return Object + .values(this.microblogs) + .concat(window.activities) + .sort((a, b) => b.timestamp - a.timestamp); + } + } }); function switchForumTab(index) { diff --git a/resources/lang/pl/activity.php b/resources/lang/pl/activity.php deleted file mode 100644 index 78e7019d05..0000000000 --- a/resources/lang/pl/activity.php +++ /dev/null @@ -1,8 +0,0 @@ - [ - 'post' => ':user dodał post w :topic', - 'comment' => ':user dodał komentarz w :topic', - ] -]; diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss index 4ad0edcf60..67116bddb4 100644 --- a/resources/sass/pages/_homepage.scss +++ b/resources/sass/pages/_homepage.scss @@ -200,3 +200,100 @@ margin: 1.25rem; padding: 0; } + +.timeline { + @include media-breakpoint-up(md) { + border-left: 1px solid #ddd; + } + margin: 10px 0 0 10px; + + .icon { + position: absolute; + z-index: 1; + left: -10px; + color: #777; + background: white; + box-shadow: 0 1px 2px #CCC; + border: 1px solid #ddd; + border-radius: 50%; + text-align: center; + width: 20px; + height: 20px; + font-size: 11px; + + i { + line-height: 20px; + } + + &.comment { + top: 6px; + } + + &.post { + top: 14px; + } + + &.microblog { + top: 20px; + @include media-breakpoint-up(md) { + top: 28px; + } + } + } + + .body { + padding-left: 5px; + @include media-breakpoint-up(md) { + padding: 0 0 0 20px; + } + + width: 100%; + + .item { + @include media-breakpoint-up(md) { + max-width: 90%; + } + + @include media-breakpoint-up(lg) { + max-width: 80%; + } + + @include media-breakpoint-up(xl) { + max-width: 70%; + } + + img { + width: 38px; + height: 38px; + border: 1px solid #d0d0d0; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); + background: white; + padding: 2px; + border-radius: 3px; + } + + .content { + margin: 0; + } + + &.comment { + margin-bottom: 18px; + + .content { + margin: 5px 0 0; + padding-left: 10px; + border-left: 1px solid #ddd; + } + } + + &.post { + @extend .card; + @extend .p-2; + + .content { + margin-top: 0.5rem; + } + } + } + } +} \ No newline at end of file diff --git a/resources/views/home.twig b/resources/views/home.twig index 018ec7e9fe..4726508f49 100644 --- a/resources/views/home.twig +++ b/resources/views/home.twig @@ -123,13 +123,13 @@
- activity.user.name

{{ activity.headline|raw }}

- {{ activity.created_at|format_date }} + {{ activity.created_at }} {{ activity.excerpt }}
@@ -145,14 +145,33 @@

- - - Popularne wpisy na mikroblogu - + + Oś czasu

- +
+
+
+ + + +
+
+ + +
+
+
@@ -272,6 +291,7 @@ {% endblock %}