Skip to content

Commit

Permalink
Merge pull request #48955 from nextcloud/backport/48889/stable28
Browse files Browse the repository at this point in the history
  • Loading branch information
provokateurin authored Oct 29, 2024
2 parents a32ddbb + 81ce2ad commit 2f7e487
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 13 deletions.
40 changes: 40 additions & 0 deletions apps/files_sharing/src/utils/AccountIcon.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*!
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { afterEach, describe, it, expect } from '@jest/globals'
import { generateAvatarSvg } from './AccountIcon'
describe('AccountIcon', () => {

afterEach(() => {
delete document.body.dataset.themes
})

it('should generate regular account avatar svg', () => {
const svg = generateAvatarSvg('admin')
expect(svg).toContain('/avatar/admin/32')
expect(svg).not.toContain('dark')
expect(svg).toContain('?guestFallback=true')
})

it('should generate guest account avatar svg', () => {
const svg = generateAvatarSvg('admin', true)
expect(svg).toContain('/avatar/guest/admin/32')
expect(svg).not.toContain('dark')
expect(svg).not.toContain('?guestFallback=true')
})

it('should generate dark mode account avatar svg', () => {
document.body.dataset.themes = 'dark'
const svg = generateAvatarSvg('admin')
expect(svg).toContain('/avatar/admin/32/dark')
expect(svg).toContain('?guestFallback=true')
})

it('should generate dark mode guest account avatar svg', () => {
document.body.dataset.themes = 'dark'
const svg = generateAvatarSvg('admin', true)
expect(svg).toContain('/avatar/guest/admin/32/dark')
expect(svg).not.toContain('?guestFallback=true')
})
})
20 changes: 15 additions & 5 deletions apps/files_sharing/src/utils/AccountIcon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,22 @@
*/
import { generateUrl } from '@nextcloud/router'

const isDarkMode = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches === true
|| document.querySelector('[data-themes*=dark]') !== null
const isDarkMode = () => {
return window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches === true
|| document.querySelector('[data-themes*=dark]') !== null
}

export const generateAvatarSvg = (userId: string, isGuest = false) => {
// normal avatar url: /avatar/{userId}/32?guestFallback=true
// dark avatar url: /avatar/{userId}/32/dark?guestFallback=true
// guest avatar url: /avatar/guest/{userId}/32
// guest dark avatar url: /avatar/guest/{userId}/32/dark
const basePath = isGuest ? `/avatar/guest/${userId}` : `/avatar/${userId}`
const darkModePath = isDarkMode() ? '/dark' : ''
const guestFallback = isGuest ? '' : '?guestFallback=true'

export const generateAvatarSvg = (userId: string, isExternalUser = false) => {
const url = isDarkMode ? '/avatar/{userId}/32/dark' : '/avatar/{userId}/32'
const avatarUrl = generateUrl(isExternalUser ? url + '?guestFallback=true' : url, { userId })
const url = `${basePath}/32${darkModePath}${guestFallback}`
const avatarUrl = generateUrl(url, { userId })
return `<svg width="32" height="32" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg" class="sharing-status__avatar">
<image href="${avatarUrl}" height="32" width="32" />
Expand Down
Loading

0 comments on commit 2f7e487

Please sign in to comment.