Merge pull request #2469 from pixelfed/staging

Update navbar, add avatar

resources/assets/js/app.js

@@ -200,6 +200,14 @@ window.App.util = {
 
 	clipboard: (function(data) {
 		return navigator.clipboard.writeText(data);
+	}),
+
+	navatar: (function() {
+		$('#navbarDropdown .far').addClass('d-none');
+			$('#navbarDropdown img').attr('src',window._sharedData.curUser.avatar)
+			.removeClass('d-none')
+			.addClass('rounded-circle border shadow')
+			.attr('width', 34).attr('height', 34);
 	})
 
 };

resources/assets/js/components/Activity.vue

@@ -130,6 +130,10 @@ export default {
 
 	methods: {
 		fetchNotifications() {
+			axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
+					window._sharedData.curUser = res.data;
+					window.App.util.navatar();
+			});
 			axios.get('/api/pixelfed/v1/notifications', {
 				params: {
 					pg: true

resources/assets/js/components/CollectionComponent.vue

@@ -191,6 +191,8 @@ export default {
 				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
 					this.currentUser = res.data;
 					this.owner = this.currentUser.id == this.profileId;
+					window._sharedData.curUser = res.data;
+					window.App.util.navatar();
 				});
 			}
 		},

resources/assets/js/components/CollectionCompose.vue

@@ -145,6 +145,10 @@ export default {
 	mounted() {
 		this.fetchRecentPosts();
 		this.fetchItems();
+		axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
+			window._sharedData.curUser = res.data;
+			window.App.util.navatar();
+		});
 	},
 	methods: {
 		addToIds(id) {

resources/assets/js/components/Direct.vue

@@ -246,6 +246,7 @@ export default {
 			axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
 				this.profile = res.data;
 				window._sharedData.curUser = res.data;
+				window.App.util.navatar();
 			});
 		},
 

resources/assets/js/components/DirectMessage.vue

@@ -433,6 +433,7 @@
 				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
 					this.profile = res.data;
 					window._sharedData.curUser = res.data;
+					window.App.util.navatar();
 				});
 			},
 

resources/assets/js/components/DiscoverComponent.vue

@@ -252,6 +252,10 @@
 					this.posts = res.data.posts;
 					this.loaded = true;
 				});
+				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
+					window._sharedData.curUser = res.data;
+					window.App.util.navatar();
+				});
 			},
 
 			fetchCategories() {

resources/assets/js/components/Hashtag.vue

@@ -123,6 +123,12 @@
 		},
 		methods: {
 			getResults() {
+				if(this.authenticated) {
+					axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
+						window._sharedData.curUser = res.data;
+						window.App.util.navatar();
+					});
+				}
 				axios.get('/api/v2/discover/tag', {
 					params: {
 						hashtag: this.hashtag,

resources/assets/js/components/PostComponent.vue

@@ -841,6 +841,7 @@ export default {
                 self.status = response.data.status;
                 self.user = response.data.user;
                 window._sharedData.curUser = self.user;
+                window.App.util.navatar();
                 self.media = self.status.media_attachments;
                 self.reactions = response.data.reactions;
                 self.likes = response.data.likes;

resources/assets/js/components/Profile.vue

@@ -705,6 +705,8 @@
 			if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
 				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
 					this.user = res.data;
+					window._sharedData.curUser = res.data;
+					window.App.util.navatar();
 					if(res.data.id == this.profileId || this.relationship.following == true) {
 						axios.get('/api/stories/v0/exists/' + this.profileId)
 						.then(res => {

resources/assets/js/components/RemotePost.vue

@@ -526,6 +526,10 @@ export default {
             }).catch(error => {
               swal('Oops!', 'An error occured, please try refreshing the page.', 'error');
             });
+            axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
+              window._sharedData.curUser = res.data;
+              window.App.util.navatar();
+            });
       },
 
       likesModal() {

resources/assets/js/components/RemoteProfile.vue

@@ -220,6 +220,8 @@
 			fetchProfile() {
 				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
 					this.user = res.data
+					window._sharedData.curUser = res.data;
+					window.App.util.navatar();
 				});
 				axios.get('/api/pixelfed/v1/accounts/' + this.profileId)
 				.then(res => {

resources/assets/js/components/SearchResults.vue

@@ -361,6 +361,10 @@ export default {
 			let lexer = this.searchLexer();
 			this.analysis = lexer;
 			this.fetchSearchResults();
+			axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
+				window._sharedData.curUser = res.data;
+				window.App.util.navatar();
+			});
 		},
 
 		fetchSearchResults() {

resources/assets/js/components/Timeline.vue

@@ -781,6 +781,7 @@
 						this.modes.mod = true;
 					}
 					window._sharedData.curUser = res.data;
+					window.App.util.navatar();
 					this.hasStory();
 					// this.expRec();
 				}).catch(err => {

resources/views/layouts/partial/nav.blade.php

@@ -31,7 +31,7 @@
                 @endif
             @else
                 <div class="ml-auto">
-                    <ul class="navbar-nav">
+                    <ul class="navbar-nav align-items-center">
                         <li class="nav-item px-md-2 d-none d-md-block">
                             <a class="nav-link font-weight-bold text-muted" href="{{route('discover')}}" title="Discover" data-toggle="tooltip" data-placement="bottom">
                                 <i class="far fa-compass fa-lg"></i>
@@ -54,6 +54,7 @@
                             <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="User Menu" data-toggle="tooltip" data-placement="bottom">
                                 <i class="far fa-user fa-lg text-muted"></i>
                                 <span class="sr-only">User Menu</span>
+                                <img class="d-none" src="/storage/avatars/default.png?v=0" class="rounded-circle border shadow" width="34" height="34" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
                             </a>
 
                             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">