Fold subsequent posts on chevron click

pradoslaw · Nov 4, 2024 · b72848d · b72848d
1 parent add3bc8
commit b72848d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 25 deletions.
diff --git a/resources/js/components/forum/post.vue b/resources/js/components/forum/post.vue
@@ -1,17 +1,35 @@
 <template>
-  <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 class="d-flex" :style="{'margin-left': nestLevel === 1 ? '52px':'0px', 'margin-top': nestLevel === 1 ? '-12px' : '12px'}">
+    <div class="flex-shrink-0">
+      <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"
+        style="width:45px; height:45px; z-index:2;"
+      />
+      <div
+        v-if="nestLevel===0"
+        style="
+          height: 100%; 
+          opacity: 0.2; 
+          margin-left: 22px; 
+          margin-top: -34px; 
+          z-index: 1; 
+          border: 1px solid currentColor; 
+          border-right: none; 
+          border-top: none;
+          border-bottom-left-radius: 8px;
+        "/>
+    </div>
     <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}">
+         :class="{'is-deleted': hidden, 'not-read': !post.is_read, 'highlight-flash': highlight, 'post-deleted-collapsed':isCollapsed}"
+         :style="{ marginTop:'6px'} "
+         v-if="!folded"
+    >
       <div v-if="post.deleted_at"
            @click="isCollapsed = !isCollapsed"
            class="post-delete card-body text-decoration-none">
@@ -26,7 +44,10 @@
         <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']">
+      <div class="card-header d-flex align-items-center"
+           :class="[isCollapsed ? 'collapse' : '']"
+           :style="[{paddingTop:'0.25rem', paddingBottom:'0.25rem'}, folded ? { borderBottom:'none'} : {}]"
+      >
         <span>
           <span class="badge badge-secondary mb-1 me-1" v-text="post.user.group_name" v-if="post.user.group_name"/>
           {{ ' ' }}
@@ -53,14 +74,7 @@
           <vue-timeago :datetime="post.updated_at"/>
         </span>
       </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="{'collapse': isCollapsed}" class="card-body" v-if="!folded">
         <div v-show="!post.is_editing">
           <vue-flag v-for="flag in flags" :key="flag.id" :flag="flag"/>
           <div class="post-vote">
@@ -108,10 +122,13 @@
           @save="$store.commit('posts/edit', post)"
         />
       </div>
-
-      <div :class="{'collapse': isCollapsed}" class="card-footer" v-if="!authorBlocked">
+      <div :class="{'collapse': isCollapsed}" class="card-footer" v-if="!authorBlocked && !folded">
         <div class="d-flex">
           <div v-if="!post.deleted_at">
+            <button type="button" class="btn btn-sm" @click="fold">
+              <i class="fa-light fa-circle-chevron-down me-1"/>
+              6
+            </button>
             <button
               type="button"
               class="btn btn-sm"
@@ -122,9 +139,9 @@
               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/>
+              <span class="ms-1 me-1" v-text="post.score"/>
               Doceń
             </button>
 
@@ -194,7 +211,6 @@
       </div>
       <vue-modal ref="delete-modal" @delete="reasonId => deletePost(false, reasonId)" :reasons="reasons"/>
     </div>
-
   </div>
 </template>
 
@@ -255,7 +271,14 @@ export default {
     uploadMimes: {
       type: String,
     },
+    nestLevel: {
+      type: Number,
+    },
+    folded: {
+      type: Boolean,
+    },
   },
+  emits: ['fold'],
   data() {
     return {
       isProcessing: false,
@@ -279,6 +302,9 @@ export default {
     }
   },
   methods: {
+    fold() {
+      this.$emit('fold');
+    },
     closePostReview(): void {
       this.post.has_review = false;
     },

diff --git a/resources/js/pages/forum/posts.ts b/resources/js/pages/forum/posts.ts
@@ -24,6 +24,7 @@ export default {
     undefinedPost: {text: '', html: '', assets: []},
     reasons: window.reasons,
     popularTags: window.popularTags,
+    folded: {}
   }),
   created() {
     store.commit('posts/init', window.pagination);
@@ -63,6 +64,9 @@ export default {
     });
   },
   methods: {
+    fold(which) {
+      this.folded[which] = !(this.folded[which] || false);
+    },
     liveUpdate() {
       const subscriber = new Subscriber(`topic:${window.topic.id}`);
 

diff --git a/resources/views/forum/topic.twig b/resources/views/forum/topic.twig
@@ -134,7 +134,9 @@
           :key="post.id"
           :post="post"
           @reply="reply"
-          :style="{'margin-left': key %2===1? '52px':'0px'}"
+          :nest-level="key % 2"
+          :folded="folded[key]"
+          @fold="fold(key+1)"
       ></vue-post>
 
       <div class="page-pagination d-flex mb-3">