From e5402bb821234ebaebd4b476cf741cc4287fdfd0 Mon Sep 17 00:00:00 2001
From: Dusan Vuckovic
Date: Tue, 30 Jan 2024 16:13:23 +0100
Subject: [PATCH] Maintenance: Desktop - Align form field link with agreed
design.
---
.cypress/utils.ts | 8 +++-
app/frontend/apps/desktop/form/index.ts | 7 ++++
.../desktop/initializer/3RD-PARTY-ICONS.md | 2 +
.../desktop/initializer/assets/person-add.svg | 5 +++
.../desktop/pages/home/views/Playground.vue | 2 +
app/frontend/apps/mobile/form/index.ts | 7 ++++
.../fields/FieldEditor/editor-signature.cy.ts | 6 ++-
.../shared/components/Form/FormFieldLink.vue | 39 ++++++++++++-------
.../Form/initializeFieldLinkClasses.ts | 16 ++++++++
app/frontend/shared/components/Form/types.ts | 3 ++
app/frontend/shared/form/features/addLink.ts | 6 ++-
app/frontend/shared/form/sections/link.ts | 15 ++-----
12 files changed, 89 insertions(+), 27 deletions(-)
create mode 100644 app/frontend/apps/desktop/initializer/assets/person-add.svg
create mode 100644 app/frontend/shared/components/Form/initializeFieldLinkClasses.ts
diff --git a/.cypress/utils.ts b/.cypress/utils.ts
index fc0f1dbb2982..61d7e1962524 100644
--- a/.cypress/utils.ts
+++ b/.cypress/utils.ts
@@ -1,11 +1,14 @@
// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
import { merge } from 'lodash-es'
+import { initializeAppName } from '#shared/composables/useAppName.ts'
import initializeStore from '#shared/stores/index.ts'
import initializeGlobalComponents from '#shared/initializer/globalComponents.ts'
import initializeGlobalProperties from '#shared/initializer/globalProperties.ts'
import { initializeForm, initializeFormFields } from '#mobile/form/index.ts'
+import { initializeGlobalComponentStyles } from '#mobile/initializer/initializeGlobalComponentStyles.ts'
import { initializeMobileIcons } from '#mobile/initializer/initializeMobileIcons.ts'
+import { initializeMobileVisuals } from '#mobile/initializer/mobileVisuals.ts'
// imported only for types
// for some reason adding it to tsconfig doesn't work
@@ -35,12 +38,15 @@ export const mountComponent: typeof mount = (
options: any,
): Cypress.Chainable => {
const plugins = []
+ plugins.push(() => { initializeAppName('mobile') })
plugins.push(initializeStore)
+ plugins.push(initializeGlobalComponentStyles)
plugins.push(initializeGlobalComponents)
plugins.push(initializeGlobalProperties)
- plugins.push(initializeMobileIcons())
+ plugins.push(initializeMobileIcons)
plugins.push(initializeForm)
plugins.push(initializeFormFields)
+ plugins.push(initializeMobileVisuals)
plugins.push((app: App) => router.install(app))
return cy.mount(component, merge({ global: { plugins } }, options))
diff --git a/app/frontend/apps/desktop/form/index.ts b/app/frontend/apps/desktop/form/index.ts
index 65a4731fc892..64f034022389 100644
--- a/app/frontend/apps/desktop/form/index.ts
+++ b/app/frontend/apps/desktop/form/index.ts
@@ -10,6 +10,7 @@ import type {
} from '#shared/types/form.ts'
import type { ImportGlobEagerOutput } from '#shared/types/utils.ts'
import { initializeFormClasses } from '#shared/components/Form/initializeFormClasses.ts'
+import { initializeFieldLinkClasses } from '#shared/components/Form/initializeFieldLinkClasses.ts'
import { initializeToggleClasses } from '#shared/components/Form/fields/FieldToggle/initializeToggleClasses.ts'
import { getCoreDesktopClasses } from './theme/global/getCoreDesktopClasses.ts'
@@ -49,6 +50,12 @@ export const initializeFormFields = () => {
loading: 'my-9 fill-yellow-300',
})
+ initializeFieldLinkClasses({
+ container: 'formkit-link',
+ base: 'ms-3 mb-2.5',
+ link: 'hover:rounded-sm hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 dark:hover:outline-blue-900',
+ })
+
initializeToggleClasses({
track:
'bg-stone-200 dark:bg-gray-500 ring-1 ring-neutral-100 dark:ring-gray-900 hover:outline hover:outline-1 hover:outline-offset-2 hover:outline-blue-600 dark:hover:outline-blue-900 focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-blue-800 hover:focus:outline-blue-800 dark:hover:focus:outline-blue-800 formkit-invalid:outline formkit-invalid:outline-1 formkit-invalid:outline-offset-2 formkit-invalid:outline-red-500 dark:hover:formkit-invalid:outline-red-500 formkit-errors:outline formkit-errors:outline-1 formkit-errors:outline-offset-2 formkit-errors:outline-red-500 dark:hover:formkit-errors:outline-red-500',
diff --git a/app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md b/app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md
index 7a6a203c59fa..66df5713851e 100644
--- a/app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md
+++ b/app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md
@@ -1,5 +1,6 @@
# Third Party Icons (`desktop`)
+- `assets/backspace.svg`
- `assets/box-arrow-up-right.svg`
- `assets/check-all.svg`
- `assets/check-circle-outline.svg`
@@ -15,6 +16,7 @@
- `assets/info-circle.svg`
- `assets/key.svg`
- `assets/moon.svg`
+- `assets/person-add.svg`
- `assets/phone.svg`
- `assets/search.svg`
- `assets/spinner.svg`
diff --git a/app/frontend/apps/desktop/initializer/assets/person-add.svg b/app/frontend/apps/desktop/initializer/assets/person-add.svg
new file mode 100644
index 000000000000..0b2850893ed4
--- /dev/null
+++ b/app/frontend/apps/desktop/initializer/assets/person-add.svg
@@ -0,0 +1,5 @@
+
diff --git a/app/frontend/apps/desktop/pages/home/views/Playground.vue b/app/frontend/apps/desktop/pages/home/views/Playground.vue
index 60c1f4ec7ad6..76aade33649a 100644
--- a/app/frontend/apps/desktop/pages/home/views/Playground.vue
+++ b/app/frontend/apps/desktop/pages/home/views/Playground.vue
@@ -124,6 +124,8 @@ const formSchema = [
clearable: true,
props: {
options: [...alphabetOptions.value, ...[longOption.value]],
+ link: '/',
+ linkIcon: 'person-add',
},
},
{
diff --git a/app/frontend/apps/mobile/form/index.ts b/app/frontend/apps/mobile/form/index.ts
index d0767f579fb0..88516229a056 100644
--- a/app/frontend/apps/mobile/form/index.ts
+++ b/app/frontend/apps/mobile/form/index.ts
@@ -10,6 +10,7 @@ import type {
} from '#shared/types/form.ts'
import type { ImportGlobEagerOutput } from '#shared/types/utils.ts'
import { initializeFormClasses } from '#shared/components/Form/initializeFormClasses.ts'
+import { initializeFieldLinkClasses } from '#shared/components/Form/initializeFieldLinkClasses.ts'
import { initializeToggleClasses } from '#shared/components/Form/fields/FieldToggle/initializeToggleClasses.ts'
import getCoreClasses from './theme/global/getCoreMobileClasses.ts'
@@ -37,6 +38,12 @@ export const initializeFormFields = () => {
loading: 'my-4',
})
+ initializeFieldLinkClasses({
+ container: 'formkit-link flex items-center py-2',
+ base: 'border-white/10 ltr:border-l ltr:pl-1 rtl:border-r rtl:pr-1',
+ link: 'h-10 w-12',
+ })
+
initializeToggleClasses({
track:
'bg-gray-300 border border-transparent focus-within:ring-1 focus-within:ring-white focus-within:ring-opacity-75 focus:outline-none formkit-invalid:border-solid formkit-invalid:border-red',
diff --git a/app/frontend/cypress/shared/components/Form/fields/FieldEditor/editor-signature.cy.ts b/app/frontend/cypress/shared/components/Form/fields/FieldEditor/editor-signature.cy.ts
index 23ce7aaf18dd..32af0139d628 100644
--- a/app/frontend/cypress/shared/components/Form/fields/FieldEditor/editor-signature.cy.ts
+++ b/app/frontend/cypress/shared/components/Form/fields/FieldEditor/editor-signature.cy.ts
@@ -65,6 +65,7 @@ describe('correctly adds signature', () => {
})
})
})
+
it('add bottom signature when content is already there', () => {
mountEditor()
@@ -95,6 +96,7 @@ describe('correctly adds signature', () => {
})
})
})
+
it('add signature before marker', () => {
const originalBody = html`
@@ -120,7 +122,9 @@ describe('correctly adds signature', () => {
'contain.html',
'
text
{
diff --git a/app/frontend/shared/components/Form/FormFieldLink.vue b/app/frontend/shared/components/Form/FormFieldLink.vue
index 0115c59da23f..5ff832d6f06f 100644
--- a/app/frontend/shared/components/Form/FormFieldLink.vue
+++ b/app/frontend/shared/components/Form/FormFieldLink.vue
@@ -2,23 +2,36 @@
-
diff --git a/app/frontend/shared/components/Form/initializeFieldLinkClasses.ts b/app/frontend/shared/components/Form/initializeFieldLinkClasses.ts
new file mode 100644
index 000000000000..540dd5f80034
--- /dev/null
+++ b/app/frontend/shared/components/Form/initializeFieldLinkClasses.ts
@@ -0,0 +1,16 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import type { FieldLinkClassMap } from './types.ts'
+
+// Provide your own map with the following keys, the values given here are just examples.
+let linkClasses: FieldLinkClassMap = {
+ container: 'field-link-container',
+ base: 'field-link-base',
+ link: 'field-link-link',
+}
+
+export const initializeFieldLinkClasses = (classes: FieldLinkClassMap) => {
+ linkClasses = classes
+}
+
+export const getFieldLinkClasses = () => linkClasses
diff --git a/app/frontend/shared/components/Form/types.ts b/app/frontend/shared/components/Form/types.ts
index 58225bf50db0..d5df28cdafeb 100644
--- a/app/frontend/shared/components/Form/types.ts
+++ b/app/frontend/shared/components/Form/types.ts
@@ -264,3 +264,6 @@ export interface FormStep {
export type FormClass = 'loading'
export type FormClassMap = Record
+
+export type FieldLinkClass = 'container' | 'base' | 'link'
+export type FieldLinkClassMap = Record
diff --git a/app/frontend/shared/form/features/addLink.ts b/app/frontend/shared/form/features/addLink.ts
index 073449d8a5e0..601c77b255af 100644
--- a/app/frontend/shared/form/features/addLink.ts
+++ b/app/frontend/shared/form/features/addLink.ts
@@ -1,11 +1,15 @@
// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
import type { FormKitNode } from '@formkit/core'
+import { useAppName } from '#shared/composables/useAppName.ts'
const addLink = (node: FormKitNode) => {
const { props } = node
- node.addProps(['link'])
+ node.addProps(['link', 'linkIcon'])
+
+ // The padding below is specific to mobile field layout only.
+ if (useAppName() !== 'mobile') return
const toggleLink = (isLink: boolean) => {
if (isLink) {
diff --git a/app/frontend/shared/form/sections/link.ts b/app/frontend/shared/form/sections/link.ts
index 906d4199c886..c4402d45b069 100644
--- a/app/frontend/shared/form/sections/link.ts
+++ b/app/frontend/shared/form/sections/link.ts
@@ -9,18 +9,11 @@ export const link = createSection(
'link',
() =>
({
- $el: 'div',
+ $cmp: markRaw(FormFieldLink),
if: '$link',
- attrs: {
- class: 'formkit-link flex items-center py-2',
+ props: {
+ link: '$link',
+ linkIcon: '$linkIcon',
},
- children: [
- {
- $cmp: markRaw(FormFieldLink),
- props: {
- link: '$link',
- },
- },
- ],
}) as unknown as FormKitSchemaNode,
)