Feature: Desktop view - Implement avatar handling.

Co-authored-by: Tobias Schäfer <ts@zammad.com>
Co-authored-by: Dominik Klein <dk@zammad.com>
Co-authored-by: Benjamin Scharf <bs@zammad.com>

app/frontend/apps/desktop/components/CommonButton/CommonButton.vue

@@ -152,7 +152,7 @@ const iconSizeClass = computed(() => {
 
 <template>
   <button
-    class="btn h-min min-h-min flex-nowrap gap-x-2.5 border-0 font-normal shadow-none hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:hover:outline-blue-900"
+    class="btn h-min min-h-min flex-nowrap gap-x-1 border-0 font-normal shadow-none hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:hover:outline-blue-900"
     :class="[
       ...variantClasses,
       ...sizeClasses,

app/frontend/apps/desktop/components/CommonDialog/CommonDialogActionFooter.vue

@@ -38,7 +38,7 @@ const action = () => {
     class="flex items-center gap-2 ltr:justify-end rtl:flex-row-reverse rtl:justify-start"
   >
     <CommonButton
-      size="medium"
+      size="large"
       :prefix-icon="cancelButton?.prefixIcon"
       :variant="cancelButton?.variant || 'secondary'"
       @click="cancel()"
@@ -47,7 +47,7 @@ const action = () => {
     </CommonButton>
     <CommonButton
       v-if="!hideActionButton"
-      size="medium"
+      size="large"
       :prefix-icon="actionButton?.prefixIcon"
       :variant="actionButton?.variant || 'primary'"
       @click="action()"

app/frontend/apps/desktop/components/CommonFlyout/CommonFlyoutActionFooter.vue

@@ -45,7 +45,7 @@ const execute = () => {
 <template>
   <div class="flex items-center justify-end gap-2">
     <CommonButton
-      size="medium"
+      size="large"
       :disabled="isDisabled || cancelButton?.disabled"
       :prefix-icon="cancelButton?.prefixIcon"
       :variant="cancelButton?.variant || 'secondary'"
@@ -55,7 +55,7 @@ const execute = () => {
     </CommonButton>
     <CommonButton
       v-if="!hideActionButton"
-      size="medium"
+      size="large"
       :disabled="isDisabled || actionButton?.disabled"
       :form="formNodeId"
       :type="actionButton?.type"

app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md

@@ -12,6 +12,9 @@
 - `assets/calendar-event.svg`
 - `assets/calendar-range.svg`
 - `assets/calendar.svg`
+- `assets/camera-video.svg`
+- `assets/camera-video-off.svg`
+- `assets/camera.svg`
 - `assets/check-all.svg`
 - `assets/check-circle-outline.svg`
 - `assets/check-square.svg`

app/frontend/apps/desktop/initializer/assets/camera-video-off.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9615 12.3653C11.2394 12.068 11.4276 11.6858 11.483 11.2618L14.5939 12.6444C15.2551 12.9383 16 12.4543 16 11.7306V4.26938C16 3.54572 15.2551 3.06166 14.5939 3.35557L11.483 4.73817C11.3548 3.75732 10.5158 3 9.5 3H4.27193L4.98621 4H9.5C10.0523 4 10.5 4.44772 10.5 5V11C10.5 11.1894 10.4473 11.3665 10.3559 11.5175L10.9615 12.3653ZM1.42788 4.17973C1.1692 4.36048 1 4.66048 1 5V11C1 11.5523 1.44772 12 2 12H7.01379L7.72807 13H2C0.89543 13 0 12.1046 0 11V5C0 4.32499 0.3344 3.72808 0.846576 3.3659L1.42788 4.17973ZM15 11.7306L11.5 10.1751V5.82494L15 4.26938L15 11.7306Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5931 15.2906L0.593132 1.29062L1.40687 0.709381L11.4069 14.7094L10.5931 15.2906Z"/>
+</svg>

app/frontend/apps/desktop/initializer/assets/camera-video.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5C0 3.89543 0.89543 3 2 3H9.5C10.5158 3 11.3548 3.75732 11.483 4.73817L14.5939 3.35557C15.2551 3.06166 16 3.54572 16 4.26938V11.7306C16 12.4543 15.2551 12.9383 14.5939 12.6444L11.483 11.2618C11.3548 12.2427 10.5158 13 9.5 13H2C0.89543 13 0 12.1046 0 11V5ZM11.5 10.1751L15 11.7306L15 4.26938L11.5 5.82494V10.1751ZM2 4C1.44772 4 1 4.44772 1 5V11C1 11.5523 1.44772 12 2 12H9.5C10.0523 12 10.5 11.5523 10.5 11V5C10.5 4.44772 10.0523 4 9.5 4H2Z"/>
+</svg>

app/frontend/apps/desktop/initializer/assets/camera.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15 12.5C15 13.0523 14.5523 13.5 14 13.5H2C1.44772 13.5 1 13.0523 1 12.5V6.5C1 5.94772 1.44772 5.5 2 5.5H3.17157C3.96722 5.5 4.73028 5.18393 5.29289 4.62132L6.12132 3.79289C6.30886 3.60536 6.56321 3.5 6.82843 3.5H9.17157C9.43679 3.5 9.69114 3.60536 9.87868 3.79289L10.7071 4.62132C11.2697 5.18393 12.0328 5.5 12.8284 5.5H14C14.5523 5.5 15 5.94772 15 6.5V12.5ZM2 4.5C0.895431 4.5 0 5.39543 0 6.5V12.5C0 13.6046 0.895431 14.5 2 14.5H14C15.1046 14.5 16 13.6046 16 12.5V6.5C16 5.39543 15.1046 4.5 14 4.5H12.8284C12.298 4.5 11.7893 4.28929 11.4142 3.91421L10.5858 3.08579C10.2107 2.71071 9.70201 2.5 9.17157 2.5H6.82843C6.29799 2.5 5.78929 2.71071 5.41421 3.08579L4.58579 3.91421C4.21071 4.28929 3.70201 4.5 3.17157 4.5H2Z" />
+  <path
+    d="M8 11.5C6.61929 11.5 5.5 10.3807 5.5 9C5.5 7.61929 6.61929 6.5 8 6.5C9.38071 6.5 10.5 7.61929 10.5 9C10.5 10.3807 9.38071 11.5 8 11.5ZM8 12.5C9.933 12.5 11.5 10.933 11.5 9C11.5 7.067 9.933 5.5 8 5.5C6.067 5.5 4.5 7.067 4.5 9C4.5 10.933 6.067 12.5 8 12.5Z" />
+  <path
+    d="M3 7C3 7.27614 2.77614 7.5 2.5 7.5C2.22386 7.5 2 7.27614 2 7C2 6.72386 2.22386 6.5 2.5 6.5C2.77614 6.5 3 6.72386 3 7Z" />
+</svg>

app/frontend/apps/desktop/pages/personal-setting/views/__tests__/view-personal-setting-appearance.spec.ts → app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-appearance.spec.ts

@@ -1,8 +1,7 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { visitView } from '#tests/support/components/visitView.ts'
-import { expect } from 'vitest'
-import { waitForAccountAppearanceMutationCalls } from '../../graphql/mutations/accountAppearance.mocks.ts'
+import { waitForAccountAppearanceMutationCalls } from '../graphql/mutations/accountAppearance.mocks.ts'
 
 describe('appearance page', () => {
   it('update appearance to dark', async () => {

app/frontend/apps/desktop/pages/personal-setting/__tests__/personal-setting-avatar-a11y.spec.ts

@@ -0,0 +1,31 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import { axe } from 'vitest-axe'
+import { visitView } from '#tests/support/components/visitView.ts'
+import { waitForNextTick } from '#tests/support/utils.ts'
+
+describe('testing avatar a11y view', async () => {
+  it('has no accessibility violations', async () => {
+    await visitView('/personal-setting/avatar')
+
+    const results = await axe(document.body)
+    expect(results).toHaveNoViolations()
+  })
+
+  // TODO: some accessibility needs to be fixed.
+  it.skip('has no accessibility violations with upload new avatar by file flyout', async () => {
+    const view = await visitView('/personal-setting/avatar')
+
+    const file = new File([], 'test.jpg', { type: 'image/jpeg' })
+    await view.events.upload(view.getByTestId('fileUploadInput'), file)
+
+    await waitForNextTick()
+
+    await view.findByRole('complementary', {
+      name: 'Crop Image',
+    })
+
+    const results = await axe(document.body)
+    expect(results).toHaveNoViolations()
+  })
+})