Signed-off-by: Carl Schwan <carl@carlschwan.eu>tags/v25.0.0beta7
@@ -212,7 +212,8 @@ | |||
:settings="settings" | |||
:show-config="showConfig" | |||
:sub-admins-groups="subAdminsGroups" | |||
:user="user" /> | |||
:user="user" | |||
:is-dark-theme="isDarkTheme" /> | |||
<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler"> | |||
<div slot="spinner"> | |||
<div class="users-icon-loading icon-loading" /> | |||
@@ -378,6 +379,10 @@ export default { | |||
}, | |||
] | |||
}, | |||
isDarkTheme() { | |||
return window.getComputedStyle(this.$el) | |||
.getPropertyValue('--background-invert-if-dark') === 'invert(100%)' | |||
}, | |||
}, | |||
watch: { | |||
// watch url change and group select |
@@ -28,7 +28,7 @@ | |||
<div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}" | |||
class="avatar"> | |||
<img v-if="!loading.delete && !loading.disable && !loading.wipe" | |||
:src="generateAvatar(user.id)" | |||
:src="generateAvatar(user.id, isDarkTheme)" | |||
alt="" | |||
height="32" | |||
width="32"> | |||
@@ -54,6 +54,7 @@ | |||
:sub-admins-groups="subAdminsGroups" | |||
:user-actions="userActions" | |||
:user="user" | |||
:is-dark-theme="isDarkTheme" | |||
:class="{'row--menu-opened': openedMenu}" /> | |||
<div v-else | |||
:class="{ | |||
@@ -65,7 +66,7 @@ | |||
<div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}" | |||
class="avatar"> | |||
<img v-if="!loading.delete && !loading.disable && !loading.wipe" | |||
:src="generateAvatar(user.id)" | |||
:src="generateAvatar(user.id, isDarkTheme)" | |||
alt="" | |||
height="32" | |||
width="32"> | |||
@@ -295,6 +296,10 @@ export default { | |||
type: Array, | |||
default: () => [], | |||
}, | |||
isDarkTheme: { | |||
type: Boolean, | |||
required: true, | |||
}, | |||
}, | |||
data() { | |||
return { |
@@ -7,7 +7,7 @@ | |||
alt="" | |||
width="32" | |||
height="32" | |||
:src="generateAvatar(user.id)" /> | |||
:src="generateAvatar(user.id, isDarkTheme)" /> | |||
</div> | |||
<!-- dirty hack to ellipsis on two lines --> | |||
<div class="name"> | |||
@@ -130,6 +130,10 @@ export default { | |||
type: Object, | |||
required: true, | |||
}, | |||
isDarkTheme: { | |||
type: Boolean, | |||
required: true, | |||
}, | |||
}, | |||
computed: { | |||
userGroupsLabels() { |
@@ -158,16 +158,27 @@ export default { | |||
* Generate avatar url | |||
* | |||
* @param {string} user The user name | |||
* @param {bool} isDarkTheme Whether the avatar should be the dark version | |||
* @return {string} | |||
*/ | |||
generateAvatar(user) { | |||
return generateUrl( | |||
'/avatar/{user}/64?v={version}', | |||
{ | |||
user, | |||
version: oc_userconfig.avatar.version, | |||
} | |||
) | |||
generateAvatar(user, isDarkTheme) { | |||
if (isDarkTheme) { | |||
return generateUrl( | |||
'/avatar/{user}/64/dark?v={version}', | |||
{ | |||
user, | |||
version: oc_userconfig.avatar.version, | |||
} | |||
) | |||
} else { | |||
return generateUrl( | |||
'/avatar/{user}/64?v={version}', | |||
{ | |||
user, | |||
version: oc_userconfig.avatar.version, | |||
} | |||
) | |||
} | |||
}, | |||
}, | |||
} |