From 8d9f2ec5bff368c7f06da08d64f83f0df1b9c7f3 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad <62008897+bsatarnejad@users.noreply.github.com> Date: Tue, 1 Nov 2022 14:36:06 +0100 Subject: [PATCH] [44481]Expandable Enterprise Edition banners (#11503) * make enterprise banner component extendible * make the collapsible input public * use spot classes for icons * replace EE banners in admin settings * replave EE banner for custom fields, project filters, stutus form, and wp form configurations * replace EE banner in WP filters. WP table view configurations and add widget modal * undo some replacements --- .../settings/projects_settings/show.html.erb | 1 + .../_enterprise_feature_hint.html.erb | 1 + app/views/custom_fields/_form.html.erb | 1 + app/views/custom_fields/_tab.html.erb | 2 ++ app/views/projects/filters/_form.html.erb | 1 + app/views/statuses/_form.html.erb | 1 + .../types/form/_form_configuration.html.erb | 1 + .../enterprise-banner.component.html | 27 ++++++++++++------ .../enterprise-banner.component.sass | 28 +++++++++++++++---- .../enterprise-banner.component.ts | 9 ++++++ 10 files changed, 58 insertions(+), 14 deletions(-) diff --git a/app/views/admin/settings/projects_settings/show.html.erb b/app/views/admin/settings/projects_settings/show.html.erb index 225d86e340..f6e6593378 100644 --- a/app/views/admin/settings/projects_settings/show.html.erb +++ b/app/views/admin/settings/projects_settings/show.html.erb @@ -61,6 +61,7 @@ See COPYRIGHT and LICENSE files for more details. angular_component_tag 'op-enterprise-banner', inputs: { textMessage: t('text_project_custom_field_html'), + collapsible: true, moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_projects][:href], } %> diff --git a/app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb b/app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb index 846a408143..88daaf1784 100644 --- a/app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb +++ b/app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb @@ -3,6 +3,7 @@ <%= angular_component_tag 'op-enterprise-banner', inputs: { + collapsible: true, textMessage: explanation, moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:attribute_highlighting][:href], } diff --git a/app/views/custom_fields/_form.html.erb b/app/views/custom_fields/_form.html.erb index c52a5fb523..f29b5c7286 100644 --- a/app/views/custom_fields/_form.html.erb +++ b/app/views/custom_fields/_form.html.erb @@ -74,6 +74,7 @@ See COPYRIGHT and LICENSE files for more details.
<%= angular_component_tag 'op-enterprise-banner', inputs: { + collapsible: true, textMessage: t('text_wp_custom_field_html'), moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_multiselect][:href], } diff --git a/app/views/custom_fields/_tab.html.erb b/app/views/custom_fields/_tab.html.erb index be650df316..95b8334ae7 100644 --- a/app/views/custom_fields/_tab.html.erb +++ b/app/views/custom_fields/_tab.html.erb @@ -32,6 +32,7 @@ See COPYRIGHT and LICENSE files for more details. <%= angular_component_tag 'op-enterprise-banner', inputs: { + collapsible: true, textMessage: t('text_project_custom_field_html'), moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_projects][:href], } @@ -44,6 +45,7 @@ See COPYRIGHT and LICENSE files for more details. <%= angular_component_tag 'op-enterprise-banner', inputs: { + collapsible: true, textMessage: t('text_wp_custom_field_html'), moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_multiselect][:href], } diff --git a/app/views/projects/filters/_form.html.erb b/app/views/projects/filters/_form.html.erb index e0d5d044a4..0f80c2110a 100644 --- a/app/views/projects/filters/_form.html.erb +++ b/app/views/projects/filters/_form.html.erb @@ -87,6 +87,7 @@ <%= angular_component_tag 'op-enterprise-banner', inputs: { + collapsible: true, textMessage: t('ee.upsale.project_filters.description_html'), moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_projects][:href], } diff --git a/app/views/statuses/_form.html.erb b/app/views/statuses/_form.html.erb index 2bfad689ce..e1a8d14de8 100644 --- a/app/views/statuses/_form.html.erb +++ b/app/views/statuses/_form.html.erb @@ -51,6 +51,7 @@ See COPYRIGHT and LICENSE files for more details. <%= angular_component_tag 'op-enterprise-banner', inputs: { + collapsible: true, textMessage: t('text_wp_status_read_only_html'), moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:status_read_only][:href], } diff --git a/app/views/types/form/_form_configuration.html.erb b/app/views/types/form/_form_configuration.html.erb index 100af85b22..352daa4b99 100644 --- a/app/views/types/form/_form_configuration.html.erb +++ b/app/views/types/form/_form_configuration.html.erb @@ -41,6 +41,7 @@ See COPYRIGHT and LICENSE files for more details. %> <%= angular_component_tag 'op-enterprise-banner', inputs: { + collapsible: true, opReferrer: 'form-configuration', textMessage: t('types.edit.more_info_text_html'), moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:form_configuration][:href], diff --git a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.html b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.html index df8ffea602..37f1651e60 100644 --- a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.html +++ b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.html @@ -7,25 +7,36 @@
-
-   - +
+ + +

- + {{text.you_contribute}} -
+
- + {{ text.more_info_text }} @@ -33,7 +44,7 @@ [href]="pricingUrl" target=”_blank” class="button -highlight"> - + {{ text.upgrade }} diff --git a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.sass b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.sass index 3c8e5a51bf..26702dd8bd 100644 --- a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.sass +++ b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.sass @@ -2,17 +2,21 @@ .op-enterprise-banner - &--title - font-weight: 400 + &--header font-size: 20px line-height: 24px - display: flex + display: grid + grid-template-columns: auto auto 1fr margin-top: 10px + align-items: center + + &--title + margin-left: $spot-spacing-0_5 &--description display: block @include spot-body-small - margin-bottom: $spot-spacing-0-75 + margin-bottom: $spot-spacing-0_75 &--image width: 115px @@ -25,5 +29,17 @@ justify-content: end &--info-button - padding-top: 1rem - padding-right: 1.5rem + padding-top: $spot-spacing-1_25 + padding-right: $spot-spacing-1_5 + + .spot-icon:before + padding-right: 0.875rem + + &--collapsible-button + background: transparent + color: $spot-color-main + border: 0 + padding: $spot-spacing-0_5 $spot-spacing-0_5 + cursor: pointer + display: flex + justify-content: end diff --git a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts index b9587d44d2..8566eeb053 100644 --- a/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts +++ b/frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts @@ -33,6 +33,10 @@ export class EnterpriseBannerComponent implements OnInit { @Input() public moreInfoLink:string; + @Input() public collapsible:boolean; + + public collapsed = false; + link:string; pricingUrl = pricingUrl; @@ -64,5 +68,10 @@ export class EnterpriseBannerComponent implements OnInit { ngOnInit():void { this.link = this.bannersService.getEnterPriseEditionUrl({ referrer: this.opReferrer }); + this.collapsed = this.collapsible; + } + + toggleCollapse():void { + this.collapsed = !this.collapsed; } }