From beee00bee3a17d6bd13da16e6a861165ff0499bc Mon Sep 17 00:00:00 2001 From: Pier-Paolo Mammi Date: Thu, 16 Jul 2026 16:09:33 +0200 Subject: [PATCH] add custom styling to common component --- .agents/skills/create-new-page/SKILL.md | 2 +- .agents/skills/css-design-system/SKILL.md | 4 +- react/common/src/App.css | 50 +++++++++++++++++++ .../common/src/ElixFormsComponentAbstract.tsx | 7 ++- .../src/IElixFormsComponentProperties.ts | 4 +- react/common/src/global.d.ts | 3 ++ .../src/App.css | 17 ------- .../src/App.jsx | 1 + 8 files changed, 63 insertions(+), 25 deletions(-) create mode 100644 react/common/src/App.css create mode 100644 react/common/src/global.d.ts diff --git a/.agents/skills/create-new-page/SKILL.md b/.agents/skills/create-new-page/SKILL.md index 5e2502f..1e35ce8 100644 --- a/.agents/skills/create-new-page/SKILL.md +++ b/.agents/skills/create-new-page/SKILL.md @@ -169,7 +169,7 @@ function App() { {/* Header, contenuto e footer della pagina */}
-
+

Titolo Pagina

{elixFormsReactRender} diff --git a/.agents/skills/css-design-system/SKILL.md b/.agents/skills/css-design-system/SKILL.md index cb03ad5..cf7c478 100644 --- a/.agents/skills/css-design-system/SKILL.md +++ b/.agents/skills/css-design-system/SKILL.md @@ -76,7 +76,7 @@ Le pagine seguono un layout standard elixForms con classi CSS specifiche:

Titolo Modulo

-
+
@@ -115,7 +115,7 @@ Le pagine seguono un layout standard elixForms con classi CSS specifiche: | `console_header` | Header della console | | `console_main` | Area contenuto principale | | `fe-module-header-container` | Header del modulo/form | -| `receipt` | Container del contenuto del form | +| `mainview` | Container del contenuto del form | ### Layout Campi Form (ElixFormsElement) | Classe | Scopo | diff --git a/react/common/src/App.css b/react/common/src/App.css new file mode 100644 index 0000000..fea24f8 --- /dev/null +++ b/react/common/src/App.css @@ -0,0 +1,50 @@ +@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap'); +@import url("https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/isipcss_overrides.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/iulib.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css"); +@import url("https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css"); +@import url("https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css"); + +/* Submit button styling (elixForms main submit) */ +.mainview .container form input[type="submit"] { + background-color: #0066cc; + color: #ffffff; + border: none; + border-radius: 6px; + padding: 10px 20px; + font-weight: 700; + font-size: 15px; + cursor: pointer; + box-shadow: none; + transition: + transform 120ms ease, + opacity 120ms ease; + display: inline-block; +} + +.mainview .container form input[type="submit"]:hover { + background-color: #0053a6; +} + +.mainview .container form input[type="submit"]:active { + opacity: 0.5; +} + +@media (max-width: 480px) { + .mainview .container form input[type="submit"] { + width: 100%; + padding-left: 18px; + padding-right: 18px; + } +} diff --git a/react/common/src/ElixFormsComponentAbstract.tsx b/react/common/src/ElixFormsComponentAbstract.tsx index 11d3059..aaa961d 100644 --- a/react/common/src/ElixFormsComponentAbstract.tsx +++ b/react/common/src/ElixFormsComponentAbstract.tsx @@ -1,3 +1,4 @@ +import './App.css' import * as FluentUI from '@fluentui/react'; import type { IElixFormsComponentFormState } from './IElixFormsComponentFormState'; import type { IElixFormsComponentProperties } from './IElixFormsComponentProperties'; @@ -132,6 +133,7 @@ export default abstract class ElixFormsComponentAbstract extends Component
)} -
+
{pageTitle &&

{pageTitle}

} {heroImageSrc && Hero Image} @@ -194,7 +196,8 @@ export default abstract class ElixFormsComponentAbstract extends Component +
+ {this.renderExtraContentPost()} diff --git a/react/common/src/IElixFormsComponentProperties.ts b/react/common/src/IElixFormsComponentProperties.ts index 5e884ef..a3df6b1 100644 --- a/react/common/src/IElixFormsComponentProperties.ts +++ b/react/common/src/IElixFormsComponentProperties.ts @@ -1,6 +1,3 @@ -import type { JSX } from "react"; -import type { IElixFormsComponentCustomFormFieldFactory } from "./IElixFormsComponentCustomFormFieldFactory"; - export interface IElixFormsComponentProperties { description: string; isDarkTheme: boolean; @@ -13,6 +10,7 @@ export interface IElixFormsComponentProperties { headerTitle?: string; pageTitle?: string; pageDescription?: string; + submitDescription?: string; heroImageSrc?: string; } diff --git a/react/common/src/global.d.ts b/react/common/src/global.d.ts new file mode 100644 index 0000000..1617d25 --- /dev/null +++ b/react/common/src/global.d.ts @@ -0,0 +1,3 @@ +declare module "*.css"; +declare module "*.svg"; +declare module "*.png"; diff --git a/react/recupero-proposta-cct-da-contratti/src/App.css b/react/recupero-proposta-cct-da-contratti/src/App.css index 9b09b91..2ce01c1 100644 --- a/react/recupero-proposta-cct-da-contratti/src/App.css +++ b/react/recupero-proposta-cct-da-contratti/src/App.css @@ -1,20 +1,3 @@ -@import url('https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/isipcss_overrides.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/iulib.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css'); -@import url('https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css'); -@import url('https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css'); - /* ===== Autocomplete Component Styles ===== */ .autocomplete-wrapper { diff --git a/react/recupero-proposta-cct-da-contratti/src/App.jsx b/react/recupero-proposta-cct-da-contratti/src/App.jsx index ebd517a..eb02a25 100644 --- a/react/recupero-proposta-cct-da-contratti/src/App.jsx +++ b/react/recupero-proposta-cct-da-contratti/src/App.jsx @@ -12,6 +12,7 @@ function App() { headerTitle="Modulo - Placeholder Titolo Modulo" pageTitle="Recupero Proposta CCT da Contratti" pageDescription="" + submitDescription='CONFERMA E PROSEGUI' /> ); }