Feature: Desktop-View - Added common avatar support for desktop view.

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

@@ -4,6 +4,8 @@
 - `assets/box-arrow-in-right.svg`
 - `assets/box-arrow-up-right.svg`
 - `assets/brightness-alt-high.svg`
+- `assets/buildings-slash.svg`
+- `assets/buildings.svg`
 - `assets/check-all.svg`
 - `assets/check-circle-outline.svg`
 - `assets/check-square.svg`
@@ -12,6 +14,8 @@
 - `assets/chevron-down.svg`
 - `assets/chevron-left.svg`
 - `assets/chevron-right.svg`
+- `assets/crown-right.svg`
+- `assets/crown-silver.svg`
 - `assets/dash-circle.svg`
 - `assets/download.svg`
 - `assets/exclamation-triangle.svg`
@@ -39,6 +43,7 @@
   - URL: https://github.com/twbs/icons
 
 - `assets/crown.svg`
+
   - Author: Felix Niklas
   - License: MIT
 

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

@@ -0,0 +1,20 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7629 0.0746751C14.9103 0.165778 15 0.326712 15 0.500001V15.5C15 15.7761 14.7761 16 14.5 16H11.5C11.2239 16 11 15.7761 11 15.5V14H10V15.5C10 15.7761 9.77614 16 9.5 16H0.5C0.223858 16 0 15.7761 0 15.5V10C0 9.78479 0.137715 9.59372 0.341886 9.52566L6 7.63962V4.5C6 4.31061 6.107 4.13748 6.27639 4.05279L14.2764 0.0527869C14.4314 -0.0247102 14.6155 -0.0164282 14.7629 0.0746751ZM6 8.69371L1 10.3604V15H6V8.69371ZM7 15H9V13.5C9 13.2239 9.22386 13 9.5 13H11.5C11.7761 13 12 13.2239 12 13.5V15H14V1.30902L7 4.80902V15Z" />
+<path d="M2 11H3V12H2V11Z" />
+<path d="M4 11H5V12H4V11Z" />
+<path d="M2 13H3V14H2V13Z" />
+<path d="M4 13H5V14H4V13Z" />
+<path d="M8 9H9V10H8V9Z" />
+<path d="M10 9H11V10H10V9Z" />
+<path d="M8 11H9V12H8V11Z" />
+<path d="M10 11H11V12H10V11Z" />
+<path d="M12 9H13V10H12V9Z" />
+<path d="M12 11H13V12H12V11Z" />
+<path d="M8 7H9V8H8V7Z" />
+<path d="M10 7H11V8H10V7Z" />
+<path d="M12 7H13V8H12V7Z" />
+<path d="M8 5H9V6H8V5Z" />
+<path d="M10 5H11V6H10V5Z" />
+<path d="M12 5H13V6H12V5Z" />
+<path d="M12 3H13V4H12V3Z" />
+</svg>

app/frontend/apps/desktop/initializer/assets/crown-silver.svg

@@ -1,3 +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.56 11.88V6.12C0.24 6.12 0 5.88 0 5.56C0 5.24 0.24 5 0.56 5C0.88 5 1.12 5.24 1.12 5.56C1.12 5.8 1.04 5.96 0.8 6.04C0.8 6.04 1.28 8.68 4.24 8.68C7.2 8.68 7.68 6.04 7.68 6.04C7.52 5.96 7.44 5.72 7.44 5.56C7.44 5.24 7.68 5 8 5C8.32 5 8.56 5.24 8.56 5.56C8.56 5.8 8.48 5.96 8.32 6.04C8.32 6.04 8.8 8.76 11.76 8.76C14.72 8.76 15.12 6.04 15.12 6.04C14.96 5.96 14.8 5.72 14.8 5.56C14.8 5.24 15.04 5 15.36 5C15.68 5 16 5.24 16 5.56C16 5.88 15.76 6.12 15.44 6.12V11.88H0.56Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.7,16.3V9.1C2.3,9.1,2,8.8,2,8.4C2,8,2.3,7.7,2.7,7.7c0.4,0,0.7,0.3,0.7,0.7 c0,0.3-0.1,0.5-0.4,0.6c0,0,0.6,3.3,4.3,3.3S11.6,9,11.6,9c-0.2-0.1-0.3-0.4-0.3-0.6c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7 c0,0.3-0.1,0.5-0.3,0.6c0,0,0.6,3.4,4.3,3.4S20.9,9,20.9,9c-0.2-0.1-0.4-0.4-0.4-0.6c0-0.4,0.3-0.7,0.7-0.7S22,8,22,8.4 c0,0.4-0.3,0.7-0.7,0.7v7.2H2.7z" />
 </svg>

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

@@ -1,3 +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="M15.44 6.12V11.88H0.56V6.12C0.24 6.12 0 5.88 0 5.56C0 5.24 0.24 5 0.56 5C0.88 5 1.12 5.24 1.12 5.56C1.12 5.8 1.04 5.96 0.88 6.04L4.32 8.76L7.68 6.04C7.52 5.96 7.44 5.72 7.44 5.56C7.44 5.24 7.68 5 8 5C8.32 5 8.56 5.24 8.56 5.56C8.56 5.8 8.48 5.96 8.32 6.04L11.76 8.76L15.12 6.04C14.96 5.96 14.8 5.72 14.8 5.56C14.8 5.24 15.04 5 15.36 5C15.68 5 16 5.24 16 5.56C16 5.88 15.76 6.12 15.44 6.12Z" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3,9.1v7.2H2.7V9.1c0,0,0,0,0,0C2.3,9.1,2,8.8,2,8.4C2,8,2.3,7.7,2.7,7.7S3.4,8,3.4,8.4 c0,0.3-0.1,0.5-0.3,0.6l4.3,3.4L11.6,9c-0.2-0.1-0.3-0.4-0.3-0.6c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7c0,0.3-0.1,0.5-0.3,0.6 l4.3,3.4L20.9,9c-0.2-0.1-0.4-0.4-0.4-0.6c0-0.4,0.3-0.7,0.7-0.7S22,8,22,8.4C22,8.8,21.7,9.1,21.3,9.1z" />
 </svg>

app/frontend/apps/desktop/initializer/desktopIconsAliasesMap.ts

@@ -3,6 +3,8 @@
 export default {
   'vip-user': 'crown',
   'vip-organization': 'crown-silver',
+  organization: 'buildings',
+  'inactive-organization': 'buildings-slash',
   'input-cancel': 'close-small',
   facebook: 'facebook',
   github: 'github',

app/frontend/apps/desktop/initializer/initializeGlobalComponentStyles.ts

@@ -1,6 +1,9 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { initializeAlertClasses } from '#shared/initializer/initializeAlertClasses.ts'
+import { initializeAvatarClasses } from '#shared/initializer/initializeAvatarClasses.ts'
+import { initializeUserAvatarClasses } from '#shared/initializer/initializeUserAvatarClasses.ts'
+import { initializeOrganizationAvatarClasses } from '#shared/initializer/initializeOrganizationAvatarClasses.ts'
 import { initializeBadgeClasses } from '#shared/initializer/initializeBadgeClasses.ts'
 import { initializeLinkClasses } from '#shared/initializer/initializeLinkClasses.ts'
 import { initializeNotificationClasses } from '#shared/initializer/initializeNotificationClasses.ts'
@@ -29,6 +32,28 @@ export const initializeGlobalComponentStyles = () => {
     link: 'hover:underline',
   })
 
+  // TODO: check correct classes
+  initializeAvatarClasses({
+    vipOrganization: 'text-neutral-400',
+    vipUser: 'text-yellow-300',
+  })
+
+  initializeUserAvatarClasses({
+    backgroundColors: [
+      'bg-neutral-500',
+      'bg-red-500',
+      'bg-yellow-300',
+      'bg-blue-800',
+      'bg-green-500',
+      'bg-pink-300',
+      'bg-yellow-600',
+    ],
+  })
+
+  initializeOrganizationAvatarClasses({
+    backgroundColor: 'bg-green-100 dark:bg-gray-200',
+  })
+
   initializeLinkClasses({
     base: 'link link-hover text-blue-800 focus-visible:rounded-sm focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800',
   })

app/frontend/apps/desktop/pages/home/views/Playground.vue

@@ -6,9 +6,11 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { reset } from '@formkit/core'
 
+import { convertToGraphQLId } from '#shared/graphql/utils.ts'
 import { useSessionStore } from '#shared/stores/session.ts'
-
 import CommonAlert from '#shared/components/CommonAlert/CommonAlert.vue'
+import CommonUserAvatar from '#shared/components/CommonUserAvatar/CommonUserAvatar.vue'
+import CommonOrganizationAvatar from '#shared/components/CommonOrganizationAvatar/CommonOrganizationAvatar.vue'
 import Form from '#shared/components/Form/Form.vue'
 import type { FormValues } from '#shared/components/Form/types.ts'
 
@@ -18,7 +20,6 @@ import CommonProgressBar from '#desktop/components/CommonProgressBar/CommonProgr
 import type { CommonButtonItem } from '#desktop/components/CommonButtonGroup/types.ts'
 import CommonPopover from '#desktop/components/CommonPopover/CommonPopover.vue'
 import CommonPopoverMenu from '#desktop/components/CommonPopover/CommonPopoverMenu.vue'
-import CommonUserAvatar from '#shared/components/CommonUserAvatar/CommonUserAvatar.vue'
 import ThemeSwitch from '#desktop/components/ThemeSwitch/ThemeSwitch.vue'
 import { usePopover } from '#desktop/components/CommonPopover/usePopover.ts'
 
@@ -516,4 +517,47 @@ const appearance = ref('auto')
       </template>
     </Form>
   </div>
+
+  <div class="flex flex-col gap-4 w-1/2 ltr:ml-2 rtl:mr-2">
+    <h2 class="text-lg">Avatars</h2>
+
+    <CommonUserAvatar
+      :entity="{
+        firstname: 'John',
+        lastname: 'Doe',
+        fullname: 'John Doe',
+        id: convertToGraphQLId('User', '123'),
+      }"
+    />
+    <CommonUserAvatar
+      :entity="{
+        firstname: 'Max',
+        lastname: 'Mustermann',
+        fullname: 'Max Mustermann',
+        vip: true,
+        id: convertToGraphQLId('User', '323'),
+      }"
+    />
+    <CommonOrganizationAvatar
+      :entity="{
+        name: 'Example AG',
+        active: true,
+        vip: true,
+      }"
+      size="large"
+    />
+    <CommonOrganizationAvatar
+      :entity="{
+        name: 'Example AG',
+        active: true,
+        vip: true,
+      }"
+    />
+    <CommonOrganizationAvatar
+      :entity="{
+        name: 'Example AG',
+        active: false,
+      }"
+    />
+  </div>
 </template>

app/frontend/apps/mobile/initializer/initializeGlobalComponentStyles.ts

@@ -1,6 +1,9 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { initializeLinkClasses } from '#shared/initializer/initializeLinkClasses.ts'
+import { initializeAvatarClasses } from '#shared/initializer/initializeAvatarClasses.ts'
+import { initializeUserAvatarClasses } from '#shared/initializer/initializeUserAvatarClasses.ts'
+import { initializeOrganizationAvatarClasses } from '#shared/initializer/initializeOrganizationAvatarClasses.ts'
 import { initializeNotificationClasses } from '#shared/initializer/initializeNotificationClasses.ts'
 import { initializeAlertClasses } from '#shared/initializer/initializeAlertClasses.ts'
 
@@ -18,6 +21,27 @@ export const initializeGlobalComponentStyles = () => {
     link: 'hover:underline',
   })
 
+  initializeAvatarClasses({
+    vipUser: 'text-yellow',
+    vipOrganization: 'text-gray-100',
+  })
+
+  initializeUserAvatarClasses({
+    backgroundColors: [
+      'bg-gray',
+      'bg-red-bright',
+      'bg-yellow',
+      'bg-blue',
+      'bg-green',
+      'bg-pink',
+      'bg-orange',
+    ],
+  })
+
+  initializeOrganizationAvatarClasses({
+    backgroundColor: 'bg-gray-200',
+  })
+
   initializeNotificationClasses({
     base: 'rounded px-4 py-2',
     baseContainer: 'ltr:right-0 rtl:left-0',

app/frontend/shared/components/CommonAvatar/CommonAvatar.vue

@@ -1,8 +1,11 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { i18n } from '#shared/i18n.ts'
 import { computed } from 'vue'
+
+import { i18n } from '#shared/i18n.ts'
+import { getAvatarClasses } from '#shared/initializer/initializeAvatarClasses.ts'
+
 import type { AvatarSize } from './types.ts'
 
 export interface Props {
@@ -40,6 +43,8 @@ const avatarLabel = computed(() => {
   if (props.decorative) return undefined
   return props.ariaLabel || i18n.t('Avatar with initials %s', props.initials)
 })
+
+const classMap = getAvatarClasses()
 </script>
 
 <template>
@@ -62,7 +67,11 @@ const avatarLabel = computed(() => {
       v-if="vipIcon"
       size="xl"
       class="vip pointer-events-none absolute -top-[48px] w-10 ltr:left-1/2 ltr:-ml-5 rtl:right-1/2 rtl:-mr-5"
-      :class="vipIcon === 'vip-organization' ? 'text-gray-100' : 'text-yellow'"
+      :class="
+        vipIcon === 'vip-organization'
+          ? classMap.vipOrganization
+          : classMap.vipUser
+      "
       :name="vipIcon"
       decorative
     />

app/frontend/shared/components/CommonAvatar/types.ts

@@ -1,3 +1,8 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 export type AvatarSize = 'xs' | 'small' | 'medium' | 'normal' | 'large' | 'xl'
+
+export interface AvatarClassMap {
+  vipUser: string
+  vipOrganization: string
+}