Merge pull request #615 from pixelfed/frontend-ui-refactor

Frontend ui refactor

app/Http/Controllers/StatusController.php

@@ -142,7 +142,6 @@ class StatusController extends Controller
         $this->authCheck();
 
         $this->validate($request, [
-          'type'  => 'required|string',
           'item'  => 'required|integer|min:1',
         ]);
 

config/pixelfed.php

@@ -23,7 +23,7 @@ return [
     | This value is the version of your PixelFed instance.
     |
     */
-    'version' => '0.4.0',
+    'version' => '0.4.1',
 
     /*
     |--------------------------------------------------------------------------

resources/assets/js/components/PostComponent.vue

@@ -20,26 +20,21 @@
           </div>
         </a>
         <div class="float-right">
-          <div class="post-actions d-none">
+          <div class="post-actions">
           <div class="dropdown">
             <button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
             <span class="fas fa-ellipsis-v text-muted"></span>
             </button>
             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
+                <span class="menu-user d-none">
-                <div class="dropdown-divider"></div>
+                  <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
-                <form method="post" action="/i/mute">
+                  <a class="dropdown-item font-weight-bold" v-on:click="muteProfile">Mute Profile</a>
-                  <input type="hidden" name="_token" value="">            
+                  <a class="dropdown-item font-weight-bold" v-on:click="blockProfile">Block Profile</a>
-                  <input type="hidden" name="type" value="user">
+                </span>
-                  <input type="hidden" name="item" value="">
+                <span class="menu-author d-none">
-                  <button type="submit" class="dropdown-item btn btn-link font-weight-bold">Mute this user</button>
+                  <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
-                </form>
+                  <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost">Delete</a>
-                <form method="post" action="/i/block">
+                </span>
-                  <input type="hidden" name="_token" value="">            
-                  <input type="hidden" name="type" value="user">
-                  <input type="hidden" name="item" value="">
-                  <button type="submit" class="dropdown-item btn btn-link font-weight-bold">Block this user</button>
-                </form>
               </div>
             </div>
           </div>
@@ -65,26 +60,21 @@
               </div>
             </a>
               <div class="float-right">
-                <div class="post-actions d-none">
+                <div class="post-actions">
                 <div class="dropdown">
                   <button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
                   <span class="fas fa-ellipsis-v text-muted"></span>
                   </button>
                       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                        <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
+                        <span class="menu-user d-none">
-                        <div class="dropdown-divider"></div>
+                          <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
-                        <form method="post" action="/i/mute">
+                          <a class="dropdown-item font-weight-bold" v-on:click="muteProfile">Mute Profile</a>
-                          <input type="hidden" name="_token" value="">            
+                          <a class="dropdown-item font-weight-bold" v-on:click="blockProfile">Block Profile</a>
-                          <input type="hidden" name="type" value="user">
+                        </span>
-                          <input type="hidden" name="item" value="">
+                        <span class="menu-author d-none">
-                          <button type="submit" class="dropdown-item btn btn-link font-weight-bold">Mute this user</button>
+                          <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
-                        </form>
+                          <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost">Delete</a>
-                        <form method="post" action="/i/block">
+                        </span>
-                          <input type="hidden" name="_token" value="">            
-                          <input type="hidden" name="type" value="user">
-                          <input type="hidden" name="item" value="">
-                          <button type="submit" class="dropdown-item btn btn-link font-weight-bold">Block this user</button>
-                        </form>
                       </div>
                   </div>
                 </div>
@@ -102,31 +92,10 @@
             </div>
             <div class="card-body flex-grow-0 py-1">
               <div class="reactions my-1">
-                <form class="d-inline-flex pr-3 like-form" method="post" action="/i/like" style="display: inline;" :data-id="statusId" data-action="like">
+                <h3 v-bind:class="[reactions.liked ? 'fas fa-heart text-danger pr-3 m-0' : 'far fa-heart pr-3 m-0 like-btn']" title="Like" v-on:click="likeStatus"></h3>
-                  <input type="hidden" name="_token" value="">
-                  <input type="hidden" name="item" :value="statusId">
-                  <button class="btn btn-link text-dark p-0 border-0" type="submit" title="Like!">
-                    <h3 class="status-heart m-0 far fa-heart text-dark"></h3>
-                  </button>
-                </form>
                 <h3 class="far fa-comment pr-3 m-0" title="Comment" v-on:click="commentFocus"></h3>
-                <form class="d-inline-flex share-form pr-3" method="post" action="/i/share" style="display: inline;" data-id="11todo" data-action="share" data-count="status.favourite_count">
+                <h3 v-bind:class="[reactions.shared ? 'far fa-share-square pr-3 m-0 text-primary' : 'far fa-share-square pr-3 m-0 share-btn']" title="Share" v-on:click="shareStatus"></h3>
-                  <input type="hidden" name="_token" value="">
+                <h3 v-bind:class="[reactions.bookmarked ? 'fas fa-bookmark text-warning m-0 float-right' : 'far fa-bookmark m-0 float-right']" title="Bookmark" v-on:click="bookmarkStatus"></h3>
-                  <input type="hidden" name="item" :value="statusId">
-                  <button class="btn btn-link text-dark p-0" type="submit" title="Share">
-                    <h3 class="m-0 far fa-share-square"></h3>
-                  </button>
-                </form>
-
-                <span class="float-right">
-                  <form class="d-inline-flex" method="post" action="/i/bookmark" style="display: inline;" data-id="#" data-action="bookmark" onclick="this.preventDefault()">
-                    <input type="hidden" name="_token" value="">
-                    <input type="hidden" name="item" :value="statusId">
-                    <button class="btn btn-link text-dark p-0 border-0" type="submit" title="Save">
-                      <h3 class="m-0 far fa-bookmark"></h3>
-                    </button>
-                  </form>
-                </span>
               </div>
               <div class="reaction-counts font-weight-bold mb-0">
                 <span style="cursor:pointer;" v-on:click="likesModal">
@@ -150,7 +119,6 @@
             <form class="comment-form d-none" method="post" action="/i/comment" :data-id="statusId" data-truncate="false">
               <input type="hidden" name="_token" value="">
               <input type="hidden" name="item" :value="statusId">
-
               <input class="form-control" name="comment" placeholder="Add a comment..." autocomplete="off">
             </form>
           </div>
@@ -159,7 +127,7 @@
       </div>
     </div>
   </div>
-  
+
   <b-modal ref="likesModal" 
     id="l-modal"
     hide-footer 
@@ -228,6 +196,7 @@
 <script>
 
 pixelfed.postComponent = {};
+
 pixelfed.presenter = {
   show: {
     image: function(container, media) {
@@ -344,7 +313,10 @@ export default {
             status: {},
             media: {},
             user: {},
-            reactions: {},
+            reactions: {
+              liked: false,
+              shared: false
+            },
             likes: {},
             likesPage: 1,
             shares: {},
@@ -353,13 +325,13 @@ export default {
     },
 
     mounted() {
+      this.fetchData();
+      this.authCheck();
       let token = $('meta[name="csrf-token"]').attr('content');
       $('input[name="_token"]').each(function(k, v) {
           let el = $(v);
           el.val(token);
       });
-      this.fetchData();
-      this.authCheck();
     },
 
     updated() {
@@ -390,11 +362,14 @@ export default {
           $('.comment-form').removeClass('d-none');
         }
       },
+
       showMuteBlock() {
         let sid = this.status.account.id;
         let uid = this.user.id;
-        if(sid != uid) {
+        if(sid == uid) {
-          $('.post-actions').removeClass('d-none');
+          $('.post-actions .menu-author').removeClass('d-none');
+        } else {
+          $('.post-actions .menu-user').removeClass('d-none');
         }
       },
 
@@ -402,6 +377,10 @@ export default {
         return '/i/report?type=post&id=' + this.status.id;
       },
 
+      editUrl() {
+        return this.status.url + '/edit';
+      },
+
       timestampFormat() {
           let ts = new Date(this.status.created_at);
           return ts.toDateString() + ' ' + ts.toLocaleTimeString();
@@ -511,12 +490,16 @@ export default {
         if(container.children().length != 0) {
           return;
         }
-        switch(this.statusTemplate) {
+
+        let template = this.status.pf_type ? this.status.pf_type : this.statusTemplate;
+        switch(template) {
           case 'image':
+          case 'photo':
             pixelfed.presenter.show.image(container, media);
           break;
 
           case 'album':
+          case 'photo:album':
             pixelfed.presenter.show.imageAlbum(container, media, this.status);
           break;
 
@@ -524,6 +507,12 @@ export default {
             pixelfed.presenter.show.video(container, media);
           break;
 
+          case 'video:album':
+          case 'photo:video:album':
+              $('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('We cannot load this post properly. We\'re working on a fix!');
+                return;
+          break;
+
           default:
               $('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('An error occured, cannot fetch media. Please try again later.');
           break;
@@ -537,6 +526,107 @@ export default {
         $('.postPresenterLoader').addClass('d-none');
         $('.postPresenterContainer').removeClass('d-none');
       },
+
+      likeStatus(event) {
+        if($('body').hasClass('loggedIn') == false) {
+          return;
+        }
+
+        axios.post('/i/like', {
+          item: this.status.id
+        }).then(res => {
+          this.status.favourites_count = res.data.count;
+          if(this.reactions.liked == true) {
+            this.reactions.liked = false;
+          } else {
+            this.reactions.liked = true;
+          }
+        }).catch(err => {
+          swal('Error', 'Something went wrong, please try again later.', 'error');
+        });
+      },
+
+      shareStatus() {
+        if($('body').hasClass('loggedIn') == false) {
+          return;
+        }
+
+        axios.post('/i/share', {
+          item: this.status.id
+        }).then(res => {
+          this.status.reblogs_count = res.data.count;
+          if(this.reactions.shared == true) {
+            this.reactions.shared = false;
+          } else {
+            this.reactions.shared = true;
+          }
+        }).catch(err => {
+          swal('Error', 'Something went wrong, please try again later.', 'error');
+        });
+      },
+
+      bookmarkStatus() {
+        if($('body').hasClass('loggedIn') == false) {
+          return;
+        }
+
+        axios.post('/i/bookmark', {
+          item: this.status.id
+        }).then(res => {
+          if(this.reactions.bookmarked == true) {
+            this.reactions.bookmarked = false;
+          } else {
+            this.reactions.bookmarked = true;
+          }
+        }).catch(err => {
+          swal('Error', 'Something went wrong, please try again later.', 'error');
+        });
+      },
+
+      muteProfile() {
+        if($('body').hasClass('loggedIn') == false) {
+          return;
+        }
+
+        axios.post('/i/mute', {
+          type: 'user',
+          item: this.status.account.id
+        }).then(res => {
+          swal('Success', 'You have successfully muted ' + this.status.account.acct, 'success');
+        }).catch(err => {
+          swal('Error', 'Something went wrong. Please try again later.', 'error');
+        });
+      },
+
+      blockProfile() {
+        if($('body').hasClass('loggedIn') == false) {
+          return;
+        }
+
+        axios.post('/i/block', {
+          type: 'user',
+          item: this.status.account.id
+        }).then(res => {
+          swal('Success', 'You have successfully blocked ' + this.status.account.acct, 'success');
+        }).catch(err => {
+          swal('Error', 'Something went wrong. Please try again later.', 'error');
+        });
+      },
+
+      deletePost() {
+        if($('body').hasClass('loggedIn') == false) {
+          return;
+        }
+
+        axios.post('/i/delete', {
+          type: 'status',
+          item: this.status.id
+        }).then(res => {
+          swal('Success', 'You have successfully deleted this post', 'success');
+        }).catch(err => {
+          swal('Error', 'Something went wrong. Please try again later.', 'error');
+        });
+      }
     }
 }
 </script>