Merge pull request #3119 from nextcloud/avatar-new-style

Use dark themed avatar on dark theme
nextcloud-libraries · Sep 8, 2022 · 08a64cc · 08a64cc
2 parents a7dc6b8 + f2e8c60
commit 08a64cc
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
@@ -321,9 +321,9 @@ export default {
  }
 
  if (this.hasStatus && this.showUserStatus && this.showUserStatusCompact) {
- return t('Avatar of {displayName}, {status}', { displayName: this.displayName || this.userId, status: this.userStatus.status })
+ return t('Avatar of {displayName}, {status}', { displayName: this.displayName ?? this.user, status: this.userStatus.status })
  }
- return t('Avatar of {displayName}', { displayName: this.displayName || this.userId })
+ return t('Avatar of {displayName}', { displayName: this.displayName ?? this.user })
  },
 
  canDisplayUserStatus() {
@@ -378,7 +378,7 @@ export default {
 
  if (!this.iconClass && !this.avatarSrcSetLoaded) {
  const rgb = usernameToColor(this.getUserIdentifier)
- style.backgroundColor = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')'
+ style.backgroundColor = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.1)'
  }
  return style
  },
@@ -559,9 +559,11 @@ export default {
  * @return {string}
  */
  avatarUrlGenerator(user, size) {
- let url = '/avatar/{user}/{size}'
+ const darkTheme = window.getComputedStyle(this.$el)
+ .getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
+ let url = '/avatar/{user}/{size}' + (darkTheme ? '/dark' : '')
  if (this.isGuest) {
- url = '/avatar/guest/{user}/{size}'
+ url = '/avatar/guest/{user}/{size}' + (darkTheme ? '/dark' : '')
  }
 
  let avatarUrl = generateUrl(