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, )