diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/assets/stylesheets/scss/forum.scss | 10 | ||||
| -rw-r--r-- | resources/vue/apps/forum/discussions/Show.vue | 15 | ||||
| -rw-r--r-- | resources/vue/components/forum/discussions/DiscussionFooter.vue | 88 |
3 files changed, 65 insertions, 48 deletions
diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss index 0fab91c..9e3bbbb 100644 --- a/resources/assets/stylesheets/scss/forum.scss +++ b/resources/assets/stylesheets/scss/forum.scss @@ -497,7 +497,6 @@ $card-max-width: 300px; &__unread { width: 5px; - margin-right: 15px; background-color: $red; } @@ -666,6 +665,10 @@ $card-max-width: 300px; .discussion { background-color: var(--color--main-navigation-background); + hr { + margin: 0; + } + &__status, &__body, &__form-container { @@ -677,7 +680,12 @@ $card-max-width: 300px; gap: 15px; } + &__footer { + display: flex; + } + &__status { + flex: 1; display: flex; align-items: center; flex-wrap: wrap; diff --git a/resources/vue/apps/forum/discussions/Show.vue b/resources/vue/apps/forum/discussions/Show.vue index 51d8daf..9c0d1c0 100644 --- a/resources/vue/apps/forum/discussions/Show.vue +++ b/resources/vue/apps/forum/discussions/Show.vue @@ -46,7 +46,7 @@ const props = defineProps({ }); const isLoading = ref(false); -const postCreateForm = ref(false) +const postCreateForm = ref(false); const editDiscussion = id => STUDIP.Dialog.fromURL( STUDIP.URLHelper.getURL(`dispatch.php/course/forum/discussions/edit/${id}`), @@ -74,7 +74,7 @@ const goBackURL = computed(() => { }); const canEditDiscussion = computed(() => { - return forumConfig.isModerator || props.discussion.user_id === STUDIP.USER_ID + return forumConfig.isModerator || props.discussion.user_id === STUDIP.USER_ID; }) const fetchPostings = async () => { @@ -137,9 +137,9 @@ onMounted(async () => { // remove highlights document.getElementById("discussion_start").addEventListener("click", function() { removeHighlight('.post-content mark'); - }) + }); } -}) +}); </script> <template> @@ -219,8 +219,8 @@ onMounted(async () => { <hr /> <DiscussionFooter :discussion="discussion" - :posts_count="posts.length" - :recent_activity="posts[posts.length - 1] ? posts[posts.length - 1].mkdate : null" + :posts="posts" + :read_index="read_index" v-model:postCreateForm="postCreateForm" /> <hr /> @@ -240,8 +240,7 @@ onMounted(async () => { <div v-if="posts.length > 3" class="discussion"> <DiscussionFooter :discussion="discussion" - :posts_count="posts.length" - :recent_activity="posts[posts.length - 1].mkdate" + :posts="posts" v-model:postCreateForm="postCreateForm" /> </div> diff --git a/resources/vue/components/forum/discussions/DiscussionFooter.vue b/resources/vue/components/forum/discussions/DiscussionFooter.vue index 5def908..293f657 100644 --- a/resources/vue/components/forum/discussions/DiscussionFooter.vue +++ b/resources/vue/components/forum/discussions/DiscussionFooter.vue @@ -5,61 +5,71 @@ import ForumMembers from "../ForumMembers.vue"; import {$gettext} from "../../../../assets/javascripts/lib/gettext"; import {numberFormatter} from "../../../../assets/javascripts/lib/number_formatter"; import {useForumConfig} from "../../../store/pinia/forum/ForumConfig"; +import {computed} from "vue"; const postCreateForm = defineModel('postCreateForm'); const forumConfig = useForumConfig(); -defineProps({ +const props = defineProps({ discussion: { type: Object, required: true }, - posts_count: { + posts: { + type: Array, + required: true + }, + read_index: { type: Number, default: 0 - }, - recent_activity: { - type: String, } }); + +const recentActivity = computed(() => props.posts.at(-1)?.mkdate ?? props.discussion.mkdate); +const hasUnreadPost = computed(() => { + return props.read_index < 2 && props.posts.length > 1 && props.posts[1].author.id !== STUDIP.USER_ID; +}); </script> <template> - <div class="discussion__status"> - <div class="flex items-start gap-20"> - <div class="text-center"> - <p>{{ $gettext('Erstellt') }}</p> - <StudipDateTime :iso="discussion.mkdate" :date_only="true" /> - </div> - <div class="text-center"> - <p>{{ $gettext('Beiträge') }}</p> - <p>{{ posts_count }}</p> - </div> - <div class="text-center"> - <p>{{ $gettext('Aufrufe') }}</p> - <p>{{ numberFormatter(discussion.view_count, 1) }}</p> - </div> - <div class="text-center"> - <p>{{ $gettext('Aktivität') }}</p> - <StudipDateTime v-if="recent_activity" :iso="recent_activity" :relative="true" /> - <StudipDateTime v-else :iso="discussion.mkdate" :relative="true"/> + <div class="discussion__footer"> + <div v-if="!forumConfig.allowGuestAccess && hasUnreadPost" class="post__unread"> + </div> + <div class="discussion__status"> + <div class="flex items-start gap-20"> + <div class="text-center"> + <p>{{ $gettext('Erstellt') }}</p> + <StudipDateTime :iso="discussion.mkdate" :date_only="true" /> + </div> + <div class="text-center"> + <p>{{ $gettext('Beiträge') }}</p> + <p>{{ posts.length }}</p> + </div> + <div class="text-center"> + <p>{{ $gettext('Aufrufe') }}</p> + <p>{{ numberFormatter(discussion.view_count, 1) }}</p> + </div> + <div class="text-center"> + <p>{{ $gettext('Aktivität') }}</p> + <StudipDateTime :iso="recentActivity" :relative="true" /> + </div> </div> + <ForumMembers :members="discussion.members" :limit="5" size="35px" /> + <a + v-if="!forumConfig.allowGuestAccess && !discussion.closed_at" + href="#new-post" + class="button button--icon-label" + role="button" + :title="$gettext('Antworten')" + :aria-label="$gettext('Antworten')" + :class="{ + 'disabled': postCreateForm + }" + @click="postCreateForm = true" + > + <StudipIcon shape="reply" :size="20" aria-hidden="true" /> + {{ $gettext('Antworten') }} + </a> </div> - <ForumMembers :members="discussion.members" :limit="5" size="35px" /> - <a - v-if="!forumConfig.allowGuestAccess && !discussion.closed_at" - href="#new-post" - class="button button--icon-label" - role="button" - :title="$gettext('Antworten')" - :aria-label="$gettext('Antworten')" - :class="{ - 'disabled': postCreateForm - }" - @click="postCreateForm = true" - > - <StudipIcon shape="reply" :size="20" aria-hidden="true" /> - {{ $gettext('Antworten') }} - </a> </div> </template> |