Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[44481]Expandable Enterprise Edition banners #11503

Merged
merged 7 commits into from
Nov 1, 2022
Merged

[44481]Expandable Enterprise Edition banners #11503

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fe62bc1
make enterprise banner component extendible
bsatarnejad Oct 25, 2022
c18b727
make the collapsible input public
bsatarnejad Oct 25, 2022
e93631d
use spot classes for icons
bsatarnejad Oct 26, 2022
9452a45
replace EE banners in admin settings
bsatarnejad Oct 27, 2022
1a4aa6e
replave EE banner for custom fields, project filters, stutus form, an…
bsatarnejad Oct 27, 2022
15ff9b2
replace EE banner in WP filters. WP table view configurations and add…
bsatarnejad Oct 27, 2022
bf0976a
undo some replacements
bsatarnejad Nov 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/views/admin/settings/projects_settings/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
}
%>
Expand Down
1 change: 1 addition & 0 deletions app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
}
Expand Down
27 changes: 19 additions & 8 deletions frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,44 @@

<img [src]="image.enterprise_edition" class="hidden-for-mobile op-enterprise-banner--image">
<div class="op-toast--content">
<div class="op-enterprise-banner--title">
<op-icon icon-classes="button--icon icon-medal"></op-icon> &nbsp;
<span [textContent]="text.enterpriseFeature"></span>
<div class="op-enterprise-banner--header">
<span class="spot-icon spot-icon_medal"></span>
<span [textContent]="text.enterpriseFeature" class="op-enterprise-banner--title"></span>
<button
*ngIf="collapsible"
class="op-enterprise-banner--collapsible-button"
type="button"
(click)="toggleCollapse()"
>
<span class="spot-icon"
[ngClass]="collapsed ? 'spot-icon_arrow-down1' : 'spot-icon_arrow-up1'"
aria-hidden="true">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same goes for thsi one, of course

</span>
</button>
</div>
<br>

<span class="op-enterprise-banner--description" [innerHtml]="textMessage"></span>

<span class="op-enterprise-banner--description">
<span class="op-enterprise-banner--description" *ngIf="!collapsed">
<strong [textContent]="text.become_hero"></strong> {{text.you_contribute}}
</span>

<div class="op-enterprise-banner--buttons">
<div class="op-enterprise-banner--buttons" *ngIf="!collapsed">
<a
*ngIf="moreInfoLink"
[attr.href]="moreInfoLink"
class="button--link op-enterprise-banner--info-button"
class="op-enterprise-banner--info-button"
target=”_blank”>
<op-icon icon-classes="icon icon-external-link"></op-icon>
<span class="spot-icon spot-icon_external-link"></span>
{{ text.more_info_text }}
</a>

<a
[href]="pricingUrl"
target=”_blank”
class="button -highlight">
<op-icon icon-classes="button--icon icon-medal"></op-icon>
<span class="spot-icon spot-icon_medal"></span>
{{ text.upgrade }}
</a>

Expand Down
28 changes: 22 additions & 6 deletions frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
9 changes: 9 additions & 0 deletions frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ export class EnterpriseBannerComponent implements OnInit {

@Input() public moreInfoLink:string;

@Input() public collapsible:boolean;

public collapsed = false;

link:string;

pricingUrl = pricingUrl;
Expand Down Expand Up @@ -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;
}
}