From 06d248d7c46860eca2ec0488c9ced03911bbe5a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Busso?= <90727999+agustinbusso@users.noreply.github.com> Date: Thu, 3 Aug 2023 15:04:23 -0300 Subject: [PATCH 1/5] Change UI according to the new mockup --- resources/img/nl-to-process.svg | 14 +++++++++++++ .../js/components/templates/ButtonCard.vue | 20 ++++++++++++++++++- .../templates/SelectTemplateModal.vue | 2 +- .../components/templates/TemplateSearch.vue | 11 ++++++---- resources/lang/en.json | 6 ++++-- 5 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 resources/img/nl-to-process.svg diff --git a/resources/img/nl-to-process.svg b/resources/img/nl-to-process.svg new file mode 100644 index 0000000000..bc5cb277b7 --- /dev/null +++ b/resources/img/nl-to-process.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/resources/js/components/templates/ButtonCard.vue b/resources/js/components/templates/ButtonCard.vue index c7131f6d0d..5d0cd6d09f 100644 --- a/resources/js/components/templates/ButtonCard.vue +++ b/resources/js/components/templates/ButtonCard.vue @@ -2,9 +2,13 @@
- + +
{{ button.title }}
+
+
{{ $t("Powered by ProcessMaker AI") }}
+
@@ -109,6 +113,20 @@ export default { .button-card.card-helper .card-text { color:#363A3E; } +.ai-slogan-container { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; +} +.ai-slogan { + font-size: 80%; + font-weight: 600; +} +.ai-slogan > img { + height: 16px; +} @media (min-width: 576px) { .card-deck .card { diff --git a/resources/js/components/templates/SelectTemplateModal.vue b/resources/js/components/templates/SelectTemplateModal.vue index b13a81bf92..e53ad58f1f 100644 --- a/resources/js/components/templates/SelectTemplateModal.vue +++ b/resources/js/components/templates/SelectTemplateModal.vue @@ -56,7 +56,7 @@ }, computed: { subtitle() { - return this.$t(`Create a new ${this.type}.`); + return this.$t(`Start a new process from a blank canvas, select a template or create a custom process by simply describing it to our AI modeler.`); }, createProcess() { return this.$t('Create Process'); diff --git a/resources/js/components/templates/TemplateSearch.vue b/resources/js/components/templates/TemplateSearch.vue index 2f9e6ade30..ef7142e888 100644 --- a/resources/js/components/templates/TemplateSearch.vue +++ b/resources/js/components/templates/TemplateSearch.vue @@ -102,13 +102,16 @@ export default { blankProcessButton: { title: `Blank ${this.type}`, icon: "fa fa-plus", + iconStyle: "font-size: 2em;", }, aiProcessButton: { - title: `AI ${this.type}`, + title: this.$t("Generate from Text"), helperEnabled: true, - helperTitle: this.$t("Your word is our command!"), - helperDescription: this.$t("Use Artificial Intelligence in any natural language to create complex Processes, just like writing to a person. Even describe your Process in one language, but output your model in another."), - icon: "fa fa-robot", + helperTitle: this.$t("Try our new Generative AI"), + helperDescription: this.$t("Describe your process. Our AI will build the model for you. Use it immediately or tweak it as needed."), + svgIcon: "../../../img/nl-to-process.svg", + svgIconStyle: "height: 2em;", + showAiSlogan: true, }, }; }, diff --git a/resources/lang/en.json b/resources/lang/en.json index 074c856159..a96c7a0274 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -1721,8 +1721,9 @@ "Template Author": "Template Author", "Create a new Process": "Create a new Process", "Since there is no interface translation for this language, translations for these screens will only render for anonymous users in web entries.": "Since there is no interface translation for this language, translations for these screens will only render for anonymous users in web entries.", - "Your word is our command!": "Your word is our command!", - "Use Artificial Intelligence in any natural language to create complex Processes, just like writing to a person. Even describe your Process in one language, but output your model in another.":"Use Artificial Intelligence in any natural language to create complex Processes, just like writing to a person. Even describe your Process in one language, but output your model in another.", + "Generate from Text": "Generate from Text", + "Try our new Generative AI": "Try our new Generative AI", + "Describe your process. Our AI will build the model for you. Use it immediately or tweak it as needed.":"Describe your process. Our AI will build the model for you. Use it immediately or tweak it as needed.", "Publish Template": "Publish Template", "This will create a re-usable template based on the :assetName :assetType": "This will create a re-usable template based on the :assetName :assetType", "Template Name": "Template Name", @@ -1753,6 +1754,7 @@ "The selected file is invalid or not supported for the Templates importer. Please verify that this file is a Template.":"The selected file is invalid or not supported for the Templates importer. Please verify that this file is a Template.", "The selected file is invalid or not supported for the Process importer. Please verify that this file is a Process.":"The selected file is invalid or not supported for the Process importer. Please verify that this file is a Process.", "Host URL": "Host URL", + "Start a new process from a blank canvas, select a template or create a custom process by simply describing it to our AI modeler.": "Start a new process from a blank canvas, select a template or create a custom process by simply describing it to our AI modeler.", "Enter the integration key from ProcessMaker IDP": "Enter the integration key from ProcessMaker IDP", "Enter the secret key from ProcessMaker IDP": "Enter the secret key from ProcessMaker IDP", "Host URL": "Host URL", From 4beaa53b7b34f4889b91802378980e0d31421cfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Busso?= <90727999+agustinbusso@users.noreply.github.com> Date: Thu, 3 Aug 2023 16:13:30 -0300 Subject: [PATCH 2/5] Update font size --- resources/js/components/templates/ButtonCard.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/templates/ButtonCard.vue b/resources/js/components/templates/ButtonCard.vue index 5d0cd6d09f..eba7565442 100644 --- a/resources/js/components/templates/ButtonCard.vue +++ b/resources/js/components/templates/ButtonCard.vue @@ -121,7 +121,7 @@ export default { text-align: center; } .ai-slogan { - font-size: 80%; + font-size: 70%; font-weight: 600; } .ai-slogan > img { From 939b0abbddf177381d72fedd950782bb41a74d07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Busso?= <90727999+agustinbusso@users.noreply.github.com> Date: Thu, 3 Aug 2023 16:13:40 -0300 Subject: [PATCH 3/5] Update text --- resources/js/components/templates/SelectTemplateModal.vue | 2 +- resources/lang/en.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/resources/js/components/templates/SelectTemplateModal.vue b/resources/js/components/templates/SelectTemplateModal.vue index e53ad58f1f..1ecaef7eba 100644 --- a/resources/js/components/templates/SelectTemplateModal.vue +++ b/resources/js/components/templates/SelectTemplateModal.vue @@ -56,7 +56,7 @@ }, computed: { subtitle() { - return this.$t(`Start a new process from a blank canvas, select a template or create a custom process by simply describing it to our AI modeler.`); + return this.$t(`Start a new process from a blank canvas, a text description, or a preset template.`); }, createProcess() { return this.$t('Create Process'); diff --git a/resources/lang/en.json b/resources/lang/en.json index a96c7a0274..c8601dab2b 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -1722,6 +1722,7 @@ "Create a new Process": "Create a new Process", "Since there is no interface translation for this language, translations for these screens will only render for anonymous users in web entries.": "Since there is no interface translation for this language, translations for these screens will only render for anonymous users in web entries.", "Generate from Text": "Generate from Text", + "Build Your Own": "Build Your Own", "Try our new Generative AI": "Try our new Generative AI", "Describe your process. Our AI will build the model for you. Use it immediately or tweak it as needed.":"Describe your process. Our AI will build the model for you. Use it immediately or tweak it as needed.", "Publish Template": "Publish Template", @@ -1754,7 +1755,7 @@ "The selected file is invalid or not supported for the Templates importer. Please verify that this file is a Template.":"The selected file is invalid or not supported for the Templates importer. Please verify that this file is a Template.", "The selected file is invalid or not supported for the Process importer. Please verify that this file is a Process.":"The selected file is invalid or not supported for the Process importer. Please verify that this file is a Process.", "Host URL": "Host URL", - "Start a new process from a blank canvas, select a template or create a custom process by simply describing it to our AI modeler.": "Start a new process from a blank canvas, select a template or create a custom process by simply describing it to our AI modeler.", + "Start a new process from a blank canvas, a text description, or a preset template.": "Start a new process from a blank canvas, a text description, or a preset template.", "Enter the integration key from ProcessMaker IDP": "Enter the integration key from ProcessMaker IDP", "Enter the secret key from ProcessMaker IDP": "Enter the secret key from ProcessMaker IDP", "Host URL": "Host URL", From 2a0b281fadb121d667801fe70b347649daf47868 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Busso?= <90727999+agustinbusso@users.noreply.github.com> Date: Thu, 3 Aug 2023 16:13:47 -0300 Subject: [PATCH 4/5] Add link to templates --- .../js/components/templates/TemplateSearch.vue | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/resources/js/components/templates/TemplateSearch.vue b/resources/js/components/templates/TemplateSearch.vue index ef7142e888..5eccac28ac 100644 --- a/resources/js/components/templates/TemplateSearch.vue +++ b/resources/js/components/templates/TemplateSearch.vue @@ -60,6 +60,7 @@
@@ -100,7 +110,7 @@ export default { perPage: 18, limit: 7, blankProcessButton: { - title: `Blank ${this.type}`, + title: this.$t("Build Your Own"), icon: "fa fa-plus", iconStyle: "font-size: 2em;", }, From 402f9fa93b128bec0c86b5c542912c36c8eb6c66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Busso?= <90727999+agustinbusso@users.noreply.github.com> Date: Thu, 3 Aug 2023 16:22:45 -0300 Subject: [PATCH 5/5] Add translation --- resources/js/components/templates/TemplateSearch.vue | 2 +- resources/lang/en.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/js/components/templates/TemplateSearch.vue b/resources/js/components/templates/TemplateSearch.vue index 5eccac28ac..64a5a2e701 100644 --- a/resources/js/components/templates/TemplateSearch.vue +++ b/resources/js/components/templates/TemplateSearch.vue @@ -78,7 +78,7 @@ - Visit our Gallery for more Templates + {{ $t("Visit our Gallery for more Templates") }} diff --git a/resources/lang/en.json b/resources/lang/en.json index c8601dab2b..5c15242078 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -1755,6 +1755,7 @@ "The selected file is invalid or not supported for the Templates importer. Please verify that this file is a Template.":"The selected file is invalid or not supported for the Templates importer. Please verify that this file is a Template.", "The selected file is invalid or not supported for the Process importer. Please verify that this file is a Process.":"The selected file is invalid or not supported for the Process importer. Please verify that this file is a Process.", "Host URL": "Host URL", + "Visit our Gallery for more Templates": "Visit our Gallery for more Templates", "Start a new process from a blank canvas, a text description, or a preset template.": "Start a new process from a blank canvas, a text description, or a preset template.", "Enter the integration key from ProcessMaker IDP": "Enter the integration key from ProcessMaker IDP", "Enter the secret key from ProcessMaker IDP": "Enter the secret key from ProcessMaker IDP",