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

Frontend ui refactor

package.json

@@ -14,27 +14,27 @@
         "axios": "^0.18",
         "bootstrap": ">=4.3.1",
         "cross-env": "^5.2.0",
-        "jquery": "^3.2",
+        "jquery": "^3.4.1",
         "lodash": "^4.17.11",
-        "popper.js": "^1.14.7",
+        "popper.js": "^1.15.0",
         "resolve-url-loader": "^2.3.2",
-        "sass": "^1.17.2",
+        "sass": "^1.19.0",
         "sass-loader": "^7.1.0",
-        "vue": "^2.6.7",
-        "vue-template-compiler": "^2.6.7"
+        "vue": "^2.6.10",
+        "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
-        "bootstrap-vue": "^2.0.0-rc.13",
+        "bootstrap-vue": "^2.0.0-rc.19",
         "emoji-mart-vue": "^2.6.6",
         "filesize": "^3.6.1",
-        "howler": "^2.1.1",
-        "infinite-scroll": "^3.0.4",
+        "howler": "^2.1.2",
+        "infinite-scroll": "^3.0.6",
         "laravel-echo": "^1.5.3",
-        "laravel-mix": "^4.0.14",
-        "node-sass": "^4.11.0",
+        "laravel-mix": "^4.0.15",
+        "node-sass": "^4.12.0",
         "opencollective": "^1.0.3",
         "opencollective-postinstall": "^2.0.2",
-        "plyr": "^3.5.0",
+        "plyr": "^3.5.4",
         "promise-polyfill": "8.1.0",
         "pusher-js": "^4.4.0",
         "quill": "^1.3.6",
@@ -43,9 +43,9 @@
         "sweetalert": "^2.1.2",
         "twitter-text": "^2.0.5",
         "vue-content-loader": "^0.2.1",
-        "vue-infinite-loading": "^2.4.3",
-        "vue-loading-overlay": "^3.1.1",
-        "vue-timeago": "^5.0.0"
+        "vue-infinite-loading": "^2.4.4",
+        "vue-loading-overlay": "^3.2.0",
+        "vue-timeago": "^5.1.2"
     },
     "collective": {
         "type": "opencollective",

resources/assets/js/components.js

@@ -8,9 +8,12 @@ import VueTimeago from 'vue-timeago';
 Vue.use(BootstrapVue);
 Vue.use(InfiniteLoading);
 Vue.use(Loading);
-Vue.use(VueTimeago);
+Vue.use(VueTimeago, {
+  name: 'Timeago',
+  locale: 'en'
+});
 
-pixelfed.readmore = () => {
+pixelfed.readmore = function() {
   $('.read-more').each(function(k,v) {
       let el = $(this);
       let attr = el.attr('data-readmore');

resources/assets/js/components/Timeline.vue

@@ -419,6 +419,9 @@
 			fetchProfile() {
 				axios.get('/api/v1/accounts/verify_credentials').then(res => {
 					this.profile = res.data;
+					if(this.profile.is_admin == true) {
+						this.modes.mod = true;
+					}
 					$('.profile-card .loader').addClass('d-none');
 					$('.profile-card .contents').removeClass('d-none');
 					$('.profile-card .card-footer').removeClass('d-none');
@@ -653,7 +656,7 @@
 			},
 
 			deletePost(status, index) {
-				if($('body').hasClass('loggedIn') == false || status.account.id !== this.profile.id) {
+				if($('body').hasClass('loggedIn') == false || this.ownerOrAdmin(status) == false) {
 					return;
 				}
 
@@ -834,12 +837,12 @@
 
 			modeModToggle() {
 				this.modes.mod = !this.modes.mod;
-				window.ls.set('pixelfed-classicui-settings', this.modes);
+				//window.ls.set('pixelfed-classicui-settings', this.modes);
 			},
 
 			modeNotifyToggle() {
 				this.modes.notify = !this.modes.notify;
-				window.ls.set('pixelfed-classicui-settings', this.modes);
+				//window.ls.set('pixelfed-classicui-settings', this.modes);
 			},
 
 			modeDarkToggle() {
@@ -863,12 +866,12 @@
 						this.modes.dark = true;
 					});
 				}
-				window.ls.set('pixelfed-classicui-settings', this.modes);
+				//window.ls.set('pixelfed-classicui-settings', this.modes);
 			},
 
 			modeInfiniteToggle() {
 				this.modes.infinite = !this.modes.infinite
-				window.ls.set('pixelfed-classicui-settings', this.modes);
+				//window.ls.set('pixelfed-classicui-settings', this.modes);
 			},
 
 			followingModal() {
@@ -991,6 +994,18 @@
 						this.following.splice(index, 1);
 					}
 				})
+			},
+
+			owner(status) {
+				return this.profile.id === status.account.id;
+			},
+
+			admin() {
+				return this.profile.is_admin == true;
+			},
+
+			ownerOrAdmin(status) {
+				return this.owner(status) || this.admin();
 			}
 		}
 	}