diff options
author | Carl Schwan <carl@carlschwan.eu> | 2022-09-12 10:48:38 +0300 |
---|---|---|
committer | Carl Schwan <carl@carlschwan.eu> | 2022-09-12 10:52:36 +0300 |
commit | 82139cc1e3a0feb0dcab7cff1ad8c424c7b010c3 (patch) | |
tree | 5bfb218575fd280a3e5f71de4a6d3380b43f4924 /apps/settings | |
parent | 1f7e769ed6ce1e7fe6b093c0e77a3f281b8c8ad3 (diff) |
Fix avatar icons in user list when using dark theme
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
Diffstat (limited to 'apps/settings')
-rw-r--r-- | apps/settings/src/components/UserList.vue | 7 | ||||
-rw-r--r-- | apps/settings/src/components/UserList/UserRow.vue | 9 | ||||
-rw-r--r-- | apps/settings/src/components/UserList/UserRowSimple.vue | 6 | ||||
-rw-r--r-- | apps/settings/src/mixins/UserRowMixin.js | 27 |
4 files changed, 37 insertions, 12 deletions
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue index d64868651e6..723673de076 100644 --- a/apps/settings/src/components/UserList.vue +++ b/apps/settings/src/components/UserList.vue @@ -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 diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue index 820a90fb1e3..3254c17d4ce 100644 --- a/apps/settings/src/components/UserList/UserRow.vue +++ b/apps/settings/src/components/UserList/UserRow.vue @@ -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 { diff --git a/apps/settings/src/components/UserList/UserRowSimple.vue b/apps/settings/src/components/UserList/UserRowSimple.vue index 105994e2f75..95d2b203d34 100644 --- a/apps/settings/src/components/UserList/UserRowSimple.vue +++ b/apps/settings/src/components/UserList/UserRowSimple.vue @@ -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() { diff --git a/apps/settings/src/mixins/UserRowMixin.js b/apps/settings/src/mixins/UserRowMixin.js index 6342419e9da..23ed7a1ffab 100644 --- a/apps/settings/src/mixins/UserRowMixin.js +++ b/apps/settings/src/mixins/UserRowMixin.js @@ -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, + } + ) + } }, }, } |