Feature: Desktop-View - Ticket detail view article list

Co-authored-by: Benjamin Scharf <bs@zammad.com>
Co-authored-by: Martin Gruner <mg@zammad.com>
Co-authored-by: Mantas Masalskis <mm@zammad.com>

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

@@ -33,7 +33,9 @@ export interface Props {
   noSingleActionMode?: boolean
   customMenuButtonLabel?: string
   defaultIcon?: string
-  defaultButtonVariant?: ButtonVariant
+  defaultButtonVariant?: ButtonVariant | 'neutral-light' | 'neutral-dark'
+  noPaddedDefaultButton?: boolean
+  noSmallRoundingDefaultButton?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -41,6 +43,7 @@ const props = withDefaults(defineProps<Props>(), {
   placement: 'arrowStart',
   orientation: 'autoVertical',
   defaultButtonVariant: 'neutral',
+  noPaddedDefaultButton: true,
 })
 
 const popoverMenu = ref<InstanceType<typeof CommonPopoverMenu>>()
@@ -63,6 +66,16 @@ const singleActionAriaLabel = computed(() => {
   return singleMenuItem.value?.ariaLabel || singleMenuItem.value?.label
 })
 
+const buttonVariantClassExtension = computed(() => {
+  if (props.defaultButtonVariant === 'neutral-dark')
+    return 'border border-neutral-100 !outline-transparent  hover:border-blue-700 dark:hover:border-blue-700 hover:border-blue-800 bg-white hover:bg-white text-gray-100 dark:border-gray-900 dark:bg-gray-500 dark:text-neutral-400'
+
+  if (props.defaultButtonVariant === 'neutral-light')
+    return 'border border-neutral-100 !outline-transparent  hover:border-blue-700 dark:hover:border-blue-700 hover:border-blue-800 hover:bg-white bg-blue-100 text-gray-100 dark:border-gray-900 dark:bg-stone-500 dark:text-neutral-400'
+
+  return ''
+})
+
 const singleActionMode = computed(() => {
   if (props.noSingleActionMode) return false
 
@@ -114,11 +127,16 @@ const variantClasses = computed(() => {
         :aria-label="$t(customMenuButtonLabel || 'Action menu button')"
         aria-haspopup="true"
         :aria-controls="popoverIsOpen ? menuId : undefined"
-        class="rounded-sm !p-0"
-        :class="{
-          'outline outline-1 outline-offset-1 outline-blue-800': popoverIsOpen,
-        }"
-        :variant="defaultButtonVariant"
+        :class="[
+          {
+            'outline outline-1 outline-offset-1 outline-blue-800':
+              popoverIsOpen,
+            'p-0': noPaddedDefaultButton,
+            'rounded-sm': !noSmallRoundingDefaultButton,
+          },
+          buttonVariantClassExtension,
+        ]"
+        :variant="defaultButtonVariant as ButtonVariant"
         :size="buttonSize"
         :icon="defaultIcon || 'three-dots-vertical'"
         @click="toggle"

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

@@ -73,7 +73,7 @@ const variantClasses = computed(() => {
       ]
     case 'secondary':
     default:
-      return ['bg-transparent', 'hover:bg-transparent', 'text-blue-800']
+      return ['-:bg-transparent', '-:hover:bg-transparent', 'text-blue-800']
   }
 })
 
@@ -137,7 +137,7 @@ const iconSizeClass = computed(() => {
 
 <template>
   <button
-    class="-:inline-flex -:focus:outline-none -:focus:outline-0 -:focus:outline-offset-0 h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 border-0 font-normal shadow-none transition duration-200 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:hover:outline focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] dark:hover:outline-blue-900"
+    class="-:inline-flex -:focus:outline-none -:focus:outline-0 -:focus:outline-offset-0 -:border-0 h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 font-normal shadow-none transition duration-200 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:hover:outline focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] dark:hover:outline-blue-900"
     :class="[
       ...variantClasses,
       ...sizeClasses,

app/frontend/apps/desktop/components/CommonButton/__tests__/CommonButton.spec.ts

@@ -11,7 +11,11 @@ describe('CommonButton.vue', () => {
     const button = view.getByRole('button')
 
     expect(button).toHaveAttribute('type', 'button')
-    expect(button).toHaveClasses(['-:inline-flex', 'bg-transparent', 'btn-sm'])
+    expect(button).toHaveClasses([
+      '-:inline-flex',
+      '-:bg-transparent',
+      'btn-sm',
+    ])
   })
 
   it('renders default slot as the button label', async () => {
@@ -71,7 +75,7 @@ describe('CommonButton.vue', () => {
     },
     {
       variant: 'secondary',
-      classes: ['bg-transparent'],
+      classes: ['-:bg-transparent'],
     },
     {
       variant: 'tertiary',

app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts.snapshot.txt

@@ -78,7 +78,9 @@
           defaultbuttonvariant="neutral"
           entity="[object Object]"
           hidearrow="false"
+          nopaddeddefaultbutton="true"
           nosingleactionmode="false"
+          nosmallroundingdefaultbutton="false"
           orientation="autoVertical"
           placement="arrowStart"
         />

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.67789 11.894C2.88828 12.1049 2.99363 12.3988 2.96523 12.6954C2.90159 13.3601 2.75502 14.0519 2.56677 14.6945C3.96166 14.3721 4.81358 13.9981 5.20082 13.8019C5.42062 13.6905 5.67381 13.6642 5.91182 13.728C6.56966 13.9044 7.27076 14 8 14C11.9956 14 15 11.1925 15 8C15 4.80754 11.9956 2 8 2C4.0044 2 1 4.80754 1 8C1 9.46809 1.6173 10.8304 2.67789 11.894ZM2.18489 15.7989C2.17816 15.8003 2.17142 15.8016 2.16466 15.8029C2.07283 15.821 1.97922 15.8388 1.88382 15.8563C1.75 15.8808 1.61264 15.9047 1.47172 15.9277C1.27271 15.9603 1.12037 15.7521 1.19898 15.5664C1.25034 15.4451 1.30097 15.3179 1.3503 15.1861C1.38164 15.1023 1.41245 15.0167 1.44259 14.9294C1.44389 14.9256 1.44518 14.9219 1.44648 14.9181C1.69422 14.1984 1.89596 13.3711 1.96979 12.6001C0.743061 11.3699 0 9.76087 0 8C0 4.13401 3.58172 1 8 1C12.4183 1 16 4.13401 16 8C16 11.866 12.4183 15 8 15C7.18324 15 6.39508 14.8929 5.65284 14.6939C5.13337 14.9571 4.01434 15.4363 2.18489 15.7989Z" />
+</svg>

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

@@ -0,0 +1,15 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 7H14V8H13V7Z"/>
+<path d="M13 9H14V10H13V9Z"/>
+<path d="M13 11H14V12H13V11Z"/>
+<path d="M11 7H12V8H11V7Z"/>
+<path d="M11 9H12V10H11V9Z"/>
+<path d="M11 11H12V12H11V11Z"/>
+<path d="M7 7H8V8H7V7Z"/>
+<path d="M7 9H8V10H7V9Z"/>
+<path d="M7 11H8V12H7V11Z"/>
+<path d="M9 7H10V8H9V7Z"/>
+<path d="M9 9H10V10H9V9Z"/>
+<path d="M9 11H10V12H9V11Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3V0H7V3H6C6 1.89543 5.10457 1 4 1C2.89543 1 2 1.89543 2 3C0.895431 3 0 3.89543 0 5V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V5C16 3.89543 15.1046 3 14 3ZM13 1H8V5H13V1ZM14 4V6H7V4H6V12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12V4C1.44772 4 1 4.44772 1 5V14C1 14.5523 1.44772 15 2 15H14C14.5523 15 15 14.5523 15 14V5C15 4.44772 14.5523 4 14 4ZM3 12C3 12.5523 3.44772 13 4 13C4.55228 13 5 12.5523 5 12V3C5 2.44772 4.55228 2 4 2C3.44772 2 3 2.44772 3 3V12Z"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.50221 5.51287C9.40928 5.47125 9.3 5.53899 9.3 5.64674V6.65002C9.3 6.92616 9.07614 7.15002 8.8 7.15002H2.5V10.05H8.8C9.07614 10.05 9.3 10.2739 9.3 10.55V11.5533C9.3 11.661 9.40928 11.7288 9.5022 11.6872L13.4857 8.75437C13.4994 8.74428 13.5137 8.73489 13.5283 8.72625C13.6239 8.66994 13.6239 8.5301 13.5283 8.47378C13.5137 8.46514 13.4994 8.45575 13.4857 8.44566L9.50221 5.51287ZM8.3 5.64674C8.3 4.75131 9.2694 4.21388 10.0247 4.65898C10.0393 4.66762 10.0536 4.677 10.0673 4.68709L14.0608 7.62723C14.7797 8.07439 14.7797 9.12564 14.0608 9.5728L10.0673 12.5129C10.0536 12.523 10.0393 12.5324 10.0247 12.5411C9.2694 12.9862 8.3 12.4487 8.3 11.5533V11.05H2C1.72386 11.05 1.5 10.8262 1.5 10.55V6.65002C1.5 6.37388 1.72386 6.15002 2 6.15002H8.3V5.64674Z" />
+</svg>

app/frontend/apps/desktop/initializer/assets/pencil-square.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5016 1.93934C15.6969 2.1346 15.6969 2.45118 15.5016 2.64645L14.4587 3.68933L12.4587 1.68933L13.5016 0.646447C13.6969 0.451184 14.0134 0.451185 14.2087 0.646447L15.5016 1.93934Z" />
+<path d="M13.7516 4.39644L11.7516 2.39644L4.93861 9.20943C4.88372 9.26432 4.84237 9.33123 4.81782 9.40487L4.01326 11.8186C3.94812 12.014 4.13405 12.1999 4.32949 12.1348L6.74317 11.3302C6.81681 11.3057 6.88372 11.2643 6.93861 11.2094L13.7516 4.39644Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 13.5C1 14.3284 1.67157 15 2.5 15H13.5C14.3284 15 15 14.3284 15 13.5V7.5C15 7.22386 14.7761 7 14.5 7C14.2239 7 14 7.22386 14 7.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5C2 2.22386 2.22386 2 2.5 2H9C9.27614 2 9.5 1.77614 9.5 1.5C9.5 1.22386 9.27614 1 9 1H2.5C1.67157 1 1 1.67157 1 2.5V13.5Z" />
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.59778 5.01287C6.69071 4.97125 6.79999 5.03899 6.79999 5.14674V6.30002C6.79999 6.57616 7.02385 6.80002 7.29999 6.80002C7.96708 6.80002 9.31297 6.80521 10.6009 7.62223C11.584 8.24585 12.5907 9.38188 13.1948 11.4983C12.1744 10.5147 11.0096 9.98246 9.98996 9.69948C9.23659 9.49039 8.55907 9.4159 8.06891 9.39351C7.82336 9.38229 7.62345 9.38408 7.48285 9.38888C7.41251 9.39128 7.35688 9.39444 7.31767 9.39711C7.29806 9.39844 7.28254 9.39966 7.27133 9.4006L7.25775 9.40178L7.25343 9.40219L7.2519 9.40233C7.25164 9.40236 7.25078 9.40244 7.29999 9.90002L7.25078 9.40244C6.99495 9.42775 6.79999 9.64293 6.79999 9.90002V11.0533C6.79999 11.161 6.69071 11.2288 6.59779 11.1872L2.61425 8.25437C2.60054 8.24428 2.58633 8.23489 2.57167 8.22625C2.47611 8.16994 2.47611 8.0301 2.57167 7.97378C2.58633 7.96514 2.60054 7.95575 2.61425 7.94566L6.59778 5.01287ZM7.79999 10.3858C7.86798 10.3867 7.94263 10.3888 8.02327 10.3925C8.45655 10.4123 9.05715 10.4784 9.72253 10.6631C11.0491 11.0312 12.6194 11.8646 13.6629 13.7428C13.7792 13.9522 14.0276 14.0497 14.2552 13.9753C14.4829 13.9009 14.6258 13.6756 14.5961 13.438C14.1323 9.72758 12.7103 7.77611 11.1366 6.77781C9.89054 5.98737 8.60923 5.8359 7.79999 5.80689V5.14674C7.79999 4.25131 6.83059 3.71388 6.07532 4.15898C6.06065 4.16762 6.04644 4.177 6.03273 4.18709L2.03922 7.12723C1.32026 7.57439 1.32026 8.62564 2.03922 9.0728L6.03273 12.0129C6.04644 12.023 6.06065 12.0324 6.07532 12.0411C6.83059 12.4862 7.79999 11.9487 7.79999 11.0533V10.3858Z" />
+</svg>