Skip to content

Commit

Permalink
Strip post of unnecessary features
Browse files Browse the repository at this point in the history
  • Loading branch information
@danon
danon committed Nov 4, 2024
1 parent 42d2a34 commit 56fa7be
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 250 deletions.
23 changes: 0 additions & 23 deletions resources/js/components/forum/post-wrapper.vue
View file

This file was deleted.

296 changes: 85 additions & 211 deletions resources/js/components/forum/post.vue
View file
Original file line number Diff line number Diff line change
@@ -1,152 +1,69 @@
<template>
<div :id="anchor"
class="card card-post"
:class="{'is-deleted': hidden, 'not-read': !post.is_read, 'highlight-flash': highlight, 'post-deleted-collapsed':isCollapsed}">
<div v-if="post.deleted_at"
@click="isCollapsed = !isCollapsed"
class="post-delete card-body text-decoration-none">
<vue-icon name="postDeleted"/>
Post usunięty
<vue-timeago :datetime="post.deleted_at"/>
<template v-if="post.deleter_name">przez {{ post.deleter_name }}.</template>
<template v-else>.</template>
<template v-if="post.delete_reason">Powód: {{ post.delete_reason }}.</template>
</div>
<div v-else-if="authorBlocked" class="post-delete card-body text-decoration-none" @click="isCollapsed = !isCollapsed">
<vue-icon name="postAuthorBlocked"/>
Treść posta została ukryta, ponieważ autorem jest zablokowany przez Ciebie użytkownik.
</div>
<div :class="{'collapse': isCollapsed, 'd-lg-block': !isCollapsed}" class="card-header d-none">
<div class="row">
<div class="col-2">
<h5 class="mb-0 post-author">
<vue-username v-if="post.user" :user="post.user" :owner="post.user_id === topic.owner_id"/>
<div class="d-flex">
<vue-avatar
v-if="post.user"
:name="post.user.name"
:photo="post.user.photo"
:is-online="post.user.is_online"
:initials="post.user.initials"
class="d-block img-thumbnail me-2 flex-shrink-0"
style="width:45px; height:45px;"
/>
<div :id="anchor"
class="card card-post flex-grow-1"
:class="{'is-deleted': hidden, 'not-read': !post.is_read, 'highlight-flash': highlight, 'post-deleted-collapsed':isCollapsed}">
<div v-if="post.deleted_at"
@click="isCollapsed = !isCollapsed"
class="post-delete card-body text-decoration-none">
<vue-icon name="postDeleted"/>
Post usunięty
<vue-timeago :datetime="post.deleted_at"/>
<template v-if="post.deleter_name">przez {{ post.deleter_name }}.</template>
<template v-else>.</template>
<template v-if="post.delete_reason">Powód: {{ post.delete_reason }}.</template>
</div>
<div v-else-if="authorBlocked" class="post-delete card-body text-decoration-none" @click="isCollapsed = !isCollapsed">
<vue-icon name="postAuthorBlocked"/>
Treść posta została ukryta, ponieważ autorem jest zablokowany przez Ciebie użytkownik.
</div>
<div class="card-header d-none" :class="[isCollapsed ? 'collapse' : 'd-lg-flex align-items-center']">
<span>
<span class="badge badge-secondary mb-1 me-1" v-text="post.user.group_name" v-if="post.user.group_name"/>
{{ ' ' }}
<span class="mb-0 post-author">
<vue-username v-if="post.user" :user="post.user" :owner="post.user_id === topic.owner_id"></vue-username>
<span v-else>{{ post.user_name }}</span>
</h5>
</div>

<div class="col-10 text-truncate small">
<vue-icon v-if="post.is_read" name="postWasRead"/>
<i v-else class="not-read" title="Nowy post"/>
</span>
{{ ' ' }}
<a :href="post.url" class="small text-body">
<vue-timeago :datetime="post.created_at"/>
<i v-if="post.is_read" class="not-read" title="Nowy post"/>
</span>
{{ ' ' }}
<span v-if="post.edit_count" class="edit-info ms-auto text-muted">
<a class="btn-history" :href="'/Forum/Post/Log/' + post.id" v-if="post.permissions.adm_access">
edytowany
</a>
<span v-else>
edytowany
</span>
<template v-if="post.edit_count === 1">przez</template>
<template v-else>{{ post.edit_count }}x, ostatnio:</template>
{{ ' ' }}
<a v-if="post.ip" :href="`/Adm/Stream?ip=${post.ip}`" :title="post.ip" class="text-muted small">
{{ post.ip }}
</a>
<vue-username :user="post.editor"/>
{{ ' ' }}
<small v-if="post.browser" :title="post.browser" class="text-muted">{{ post.browser }}</small>
</div>
</div>
</div>
<vue-post-review
v-if="post.has_review"
:post-id="post.id"
:review-style="post.review_style"
@close="closePostReview"
@answer="postReviewAnswer"
/>
<div :class="{'collapse': isCollapsed}" class="card-body">
<div class="media d-lg-none mb-2">
<div class="media-left me-2">
<vue-avatar
v-if="post.user"
:name="post.user.name"
:photo="post.user.photo"
:is-online="post.user.is_online"
:initials="post.user.initials"
class="d-block i-35 img-thumbnail"
></vue-avatar>
</div>

<div class="media-body">
<h5 class="mb-0 post-author">
<vue-username v-if="post.user" :user="post.user" :owner="post.user_id === topic.owner_id"></vue-username>
<span v-else>{{ post.user_name }}</span>
</h5>

<a :href="post.url" class="text-muted small">
<vue-timeago :datetime="post.created_at"/>
</a>

<a v-if="post.ip" :href="`/Adm/Stream?ip=${post.ip}`" :title="post.ip" class="text-muted small">
({{ post.ip }})
</a>
</div>
<vue-timeago :datetime="post.updated_at"/>
</span>
</div>

<div class="row">
<div class="d-none d-lg-block col-lg-2">
<template v-if="post.user">
<vue-avatar
v-if="post.user"
:name="post.user.name"
:photo="post.user.photo"
:initials="post.user.initials"
:is-online="post.user.is_online"
class="post-avatar img-thumbnail"
></vue-avatar>

<span v-if="post.user.group_name" class="badge badge-secondary mb-1">{{ post.user.group_name }}</span>

<ul class="post-stats list-unstyled">
<li>
<strong>Rejestracja:</strong>
<small>{{ formatDistanceToNow(post.user.created_at) }}</small>
</li>

<li>
<strong>Ostatnio:</strong>
<small>
{{ formatDistanceToNow(post.user.visited_at ? post.user.visited_at : post.user.created_at) }}
</small>
</li>

<li v-if="post.user.location">
<strong>Lokalizacja:</strong>
<small>{{ post.user.location }}</small>
</li>

<li v-if="post.user.allow_count">
<strong>Postów:</strong>
<small>
<a title="Znajdź posty tego użytkownika"
:href="`/Forum/User/${post.user.id}`"
style="text-decoration: underline">{{ post.user.posts }}</a>
</small>
</li>
</ul>
</template>
</div>

<div v-show="!post.is_editing" class="col-12 col-lg-10">
<vue-post-review
v-if="post.has_review"
:post-id="post.id"
:review-style="post.review_style"
@close="closePostReview"
@answer="postReviewAnswer"
/>
<div :class="{'collapse': isCollapsed}" class="card-body">
<div v-show="!post.is_editing">
<vue-flag v-for="flag in flags" :key="flag.id" :flag="flag"/>
<div class="post-vote">
<strong
class="vote-count"
title="Ocena posta"
@click="loadVoters(post)"
:aria-label="voters"
data-balloon-pos="left"
data-balloon-break
v-text="post.score"
/>
<a
v-if="!hidden"
:class="{'on': post.is_voted}"
:aria-label="voters"
@click="checkAuth(vote, post)"
@mouseenter.once="loadVoters(post)"
data-balloon-pos="left"
data-balloon-break
class="vote-up"
href="javascript:"
>
<vue-icon name="postVoted" v-if="post.is_voted"/>
<vue-icon name="postVote" v-else/>
</a>
<a v-if="!hidden && post.permissions.accept"
:class="{'on': post.is_accepted}"
@click="accept(post)"
Expand Down Expand Up @@ -176,50 +93,11 @@
</template>
</div>
<vue-tags :tags="tags" class="tag-clouds-md mt-2 mb-2"/>
<div v-if="post.edit_count" class="edit-info">
<strong>
<a class="btn-history"
title="Zobacz historię zmian tego posta"
:href="'/Forum/Post/Log/' + post.id"
v-if="post.permissions.update">
<vue-icon name="postEditHistoryShow"/>
</a>
edytowany {{ post.edit_count }}x,
ostatnio:
<vue-username :user="post.editor"/>
</strong>
{{ ' ' }}
<vue-timeago :datetime="post.updated_at"/>
</div>
<div class="post-comments">
<div v-if="post.comments_count > Object.keys(post.comments).length"
class="d-inline-block mb-2 show-all-comments">
<a @click="loadComments(post)" href="javascript:">
<vue-icon name="postFoldedCommentsUnfold"/>
Zobacz
{{ declination(totalComments, ['pozostały', 'pozostałe', 'pozostałe']) }}
{{ totalComments }}
{{ declination(totalComments, ['komentarz', 'komentarze', 'komentarzy']) }}
</a>
</div>
<vue-comment
v-for="comment in post.comments"
:key="comment.id"
:comment="comment"/>
<vue-comment-form
v-show="isCommenting"
:comment="commentDefault"
@save="isCommenting = false"
@cancel="isCommenting = false"
ref="comment-form"
class="mt-2"/>
</div>
</div>

<vue-form
v-if="post.is_editing"
ref="form"
class="col-12 col-lg-10 mt-2 mb-2"
class="mt-2 mb-2"
:post="post"
:show-title-input="post.id === topic.first_post_id"
:show-tags-input="post.id === topic.first_post_id"
Expand All @@ -230,13 +108,26 @@
@save="$store.commit('posts/edit', post)"
/>
</div>
</div>

<div :class="{'collapse': isCollapsed}" class="card-footer" v-if="!authorBlocked">
<div class="row">
<div class="d-none d-lg-block col-lg-2"/>
<div class="col-12 d-flex col-lg-10">
<div :class="{'collapse': isCollapsed}" class="card-footer" v-if="!authorBlocked">
<div class="d-flex">
<div v-if="!post.deleted_at">
<button
type="button"
class="btn btn-sm"
v-if="!hidden"
:aria-label="voters"
@click="checkAuth(vote, post)"
@mouseenter.once="loadVoters(post)"
data-balloon-pos="down"
data-balloon-break
>
<span class="me-2" v-text="post.score"/>
<vue-icon name="postVoted" class="text-primary" v-if="post.is_voted"/>
<vue-icon name="postVote" v-else/>
Doceń
</button>

<button @click="checkAuth(subscribe, post)" class="btn btn-sm">
<span v-if="post.is_subscribed" class="text-primary">
<vue-icon name="postSubscribed"/>
Expand All @@ -249,17 +140,15 @@
<vue-icon name="postShare"/>
<span class="d-none d-sm-inline ms-1">Udostępnij</span>
</button>

<button v-if="!post.is_locked || post.permissions.write" @click="checkAuth(comment)" class="btn btn-sm">
<span v-if="isCommenting" class="text-primary">
<vue-icon name="postCommentActive"/>
</span>
<vue-icon v-else name="postComment"/>
<span class="d-none d-sm-inline ms-1">Komentuj</span>
</button>
</div>
<div v-if="post.permissions.write">
<template v-if="!post.deleted_at">
<button @click="$emit('reply', post, false)" class="btn btn-sm" title="Dodaj cytat do pola odpowiedzi">
<vue-icon name="postAnswerQuote"/>
<span class="d-none d-sm-inline ms-1">Odpowiedz</span>
</button>
</template>

<div v-if="post.permissions.write" class="ms-auto">
<button v-if="post.permissions.update && !post.deleted_at" @click="edit" class="btn btn-sm">
<span v-if="post.is_editing" class="text-primary">
<vue-icon name="postEditActive"/>
Expand All @@ -281,22 +170,6 @@
</button>
</template>

<template v-if="!post.deleted_at">
<button @click="$emit('reply', post)" class="btn btn-sm btn-fast-reply" title="Odpowiedz na ten post">
<vue-icon name="postMentionAuthor"/>
</button>

<button @click="$emit('reply', post, false)" class="btn btn-sm" title="Dodaj cytat do pola odpowiedzi">
<vue-icon name="postAnswerQuote"/>
<span class="d-none d-sm-inline ms-1">Odpowiedz</span>
</button>

<a href="javascript:" :data-metadata="post.metadata" :data-url="post.url" class="btn btn-sm">
<vue-icon name="postReport"/>
<span class="d-none d-sm-inline ms-1">Zgłoś</span>
</a>
</template>

<div v-if="post.permissions.merge || post.permissions.adm_access" class="dropdown float-end">
<button class="btn btn-sm" data-bs-toggle="dropdown">
<vue-icon name="postMenuDropdown"/>
Expand All @@ -319,8 +192,9 @@
</div>
</div>
</div>
<vue-modal ref="delete-modal" @delete="reasonId => deletePost(false, reasonId)" :reasons="reasons"/>
</div>
<vue-modal ref="delete-modal" @delete="reasonId => deletePost(false, reasonId)" :reasons="reasons"/>

</div>
</template>

Expand Down
6 changes: 3 additions & 3 deletions resources/js/pages/forum/posts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@ import {mapGetters, mapState} from "vuex";

import VueForm from "../../components/forum/form.vue";
import VuePoll from "../../components/forum/poll.vue";
import VuePostWrapper from "../../components/forum/post-wrapper.vue";
import VuePost from "../../components/forum/post.vue";
import VuePagination from "../../components/pagination.vue";
import {PostCommentSaved, PostSaved, PostVoted, Subscriber} from "../../libs/live";
import store from "../../store/index";
import {Post} from "../../types/models";
import {notify} from "../../toast";
import {Post} from "../../types/models";

export default {
name: 'Posts',
delimiters: ['${', '}'],
components: {
'vue-post-wrapper': VuePostWrapper,
'vue-post': VuePost,
'vue-form': VueForm,
'vue-poll': VuePoll,
'vue-pagination': VuePagination,
Expand Down
Loading

0 comments on commit 56fa7be

Please sign in to comment.