mirror of https://github.com/nextcloud/server
Fix avatar icons in user list when using dark theme
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
This commit is contained in:
parent
1f7e769ed6
commit
82139cc1e3
|
@ -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,
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue