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

Frontend ui refactor

public/mix-manifest.json

@@ -1,12 +1,12 @@
 {
     "/js/activity.js": "/js/activity.js?id=7915246c3bc2b7e9770e",
-    "/js/app.js": "/js/app.js?id=7d4d436f303c905366be",
+    "/js/app.js": "/js/app.js?id=83172b0464c4537ed42a",
     "/css/app.css": "/css/app.css?id=f63e0c0ea131fe4ebadf",
     "/css/appdark.css": "/css/appdark.css?id=ce87661b97cb9f4dda93",
-    "/js/components.js": "/js/components.js?id=c9e8be3a63b7a2a66c38",
-    "/js/discover.js": "/js/discover.js?id=5019f7c271f4291fc058",
-    "/js/micro.js": "/js/micro.js?id=455a642f01046a663d52",
-    "/js/profile.js": "/js/profile.js?id=64b5cfb06bfca0d28ec6",
-    "/js/status.js": "/js/status.js?id=83d60fe293ae18fd363a",
-    "/js/timeline.js": "/js/timeline.js?id=f10a5940a499eec22451"
+    "/js/components.js": "/js/components.js?id=7b5983fe04a27eb1273c",
+    "/js/discover.js": "/js/discover.js?id=95091dda6723ab05dbb5",
+    "/js/micro.js": "/js/micro.js?id=69703f96f09e6ff04be6",
+    "/js/profile.js": "/js/profile.js?id=dd006b565cac9962d5ad",
+    "/js/status.js": "/js/status.js?id=281d075819ccc5ea794d",
+    "/js/timeline.js": "/js/timeline.js?id=c94e9cce335078728537"
 }

resources/assets/js/components/Micro.vue

@@ -3,7 +3,6 @@
 </template>
 
 <style type="text/css" scoped>
-	@import '~quill/dist/quill.snow.css';
 	body {
 		background-color: #ECECEC;
 	}
@@ -19,7 +18,6 @@
 </style>
 
 <script type="text/javascript">
-import Quill from 'quill';
 
 export default {
 	data() {

resources/assets/js/components/PostComments.vue

@@ -19,10 +19,10 @@
     <div class="comments" data-min-id="0" data-max-id="0">
       <p v-for="(reply, index) in results" class="mb-0 d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
         <span>
-          <a class="text-dark font-weight-bold mr-1" :href="reply.account.url">{{reply.account.username}}</a>
-          <span v-html="reply.content" class=""></span>
+          <a class="text-dark font-weight-bold mr-1" :href="reply.account.url" v-bind:title="reply.account.username">{{truncate(reply.account.username,15)}}</a>
+          <span class="text-break" v-html="reply.content"></span>
         </span>
-        <span class="" style="min-width:38px">
+        <span class="pl-2" style="min-width:38px">
           <span v-on:click="likeStatus(reply, $event)"><i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
             <post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block pl-2"></post-menu>
         </span>
@@ -36,9 +36,13 @@
   .text-lighter {
     color:#B8C2CC !important;
   }
+  .text-break {
+    word-break: break-all !important;
+  }
 </style>
 
 <script>
+
 export default {
     props: ['post-id', 'post-username', 'user'],
     data() {
@@ -153,7 +157,13 @@ export default {
         }).catch(err => {
           swal('Error', 'Something went wrong, please try again later.', 'error');
         });
+      },
+      truncate(str,lim) {
+        return _.truncate(str,{
+          length: lim
+        });
       }
     },
+
 }
 </script>

resources/assets/js/components/PostComponent.vue

@@ -27,23 +27,23 @@
             <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
           </div>
         </a>
-        <div class="float-right">
+        <div v-if="user != false" class="float-right">
           <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">
-                <span class="menu-user d-none">
+                <div v-if="!owner()">
                   <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
-                  <a class="dropdown-item font-weight-bold" v-on:click="muteProfile">Mute Profile</a>
-                  <a class="dropdown-item font-weight-bold" v-on:click="blockProfile">Block Profile</a>
-                </span>
-                <span class="menu-author d-none">
+                  <a class="dropdown-item font-weight-bold" v-on:click="muteProfile()">Mute Profile</a>
+                  <a class="dropdown-item font-weight-bold" v-on:click="blockProfile()">Block Profile</a>
+                </div>
+                <div v-if="ownerOrAdmin()">
                   <!-- <a class="dropdown-item font-weight-bold" :href="editUrl()">Disable Comments</a> -->
                   <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
                   <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
-                </span>
+                </div>
               </div>
             </div>
           </div>
@@ -238,9 +238,9 @@ export default {
     props: ['status-id', 'status-username', 'status-template', 'status-url', 'status-profile-url', 'status-avatar'],
     data() {
         return {
-            status: {},
+            status: false,
             media: {},
-            user: {},
+            user: false,
             reactions: {
               liked: false,
               shared: false
@@ -517,14 +517,28 @@ export default {
             }
             axios.post('/i/delete', {
               type: 'status',
-              item: status.id
+              item: this.status.id
             }).then(res => {
               swal('Success', 'You have successfully deleted this post', 'success');
+              window.location.href = '/';
             }).catch(err => {
               swal('Error', 'Something went wrong. Please try again later.', 'error');
             });
         }
+      },
+      
+      owner() {
+        return this.user.id === this.status.account.id;
+      },
+
+      admin() {
+        return this.user.is_admin == true;
+      },
+
+      ownerOrAdmin() {
+        return this.owner() || this.admin();
       }
-    }
+
+    },
 }
 </script>