change the design of enterprise banner

pull/10743/head
bsatarnejad 2 years ago
parent f4ff5a4476
commit e4a60a60c0
  1. 3
      config/locales/js-en.yml
  2. 4
      frontend/src/app/features/boards/board/board-partitioned-page/board-list-container.component.html
  3. 1
      frontend/src/app/features/boards/new-board-modal/new-board-modal.component.ts
  4. 5
      frontend/src/app/features/boards/new-board-modal/new-board-modal.html
  5. 8
      frontend/src/app/features/enterprise/enterprise-trial.service.ts
  6. 5
      frontend/src/app/features/work-packages/components/filters/query-filters/query-filters.component.html
  7. 1
      frontend/src/app/features/work-packages/components/filters/query-filters/query-filters.component.ts
  8. 4
      frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/columns-tab.component.html
  9. 4
      frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/highlighting-tab.component.html
  10. 4
      frontend/src/app/shared/components/enterprise-banner/enterprise-banner-bootstrap.component.ts
  11. 44
      frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.html
  12. 30
      frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.sass
  13. 30
      frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts
  14. 4
      frontend/src/app/shared/components/grids/widgets/add/add.modal.html
  15. BIN
      frontend/src/assets/images/enterprise_edition.png
  16. 5
      frontend/src/global_styles/content/_toast.sass
  17. 8
      frontend/src/global_styles/fonts/_openproject_icon_definitions.sass
  18. 1
      modules/boards/config/locales/js-en.yml

@ -296,7 +296,8 @@ en:
one: "First sorting criteria"
two: "Second sorting criteria"
three: "Third sorting criteria"
upsale_for_more: "For more advanced filters, check out the"
upsale_for_more: "Advanced filters allow you to use almost any work package attribute as a filter. Please upgrade to a paid pain to use this feature."
more_info: "More information"
upsale_link: 'Enterprise Edition.'
general_text_no: "no"
general_text_yes: "yes"

@ -40,12 +40,12 @@
</div>
</div>
</div>
<enterprise-banner
<op-enterprise-banner
*ngIf="eeShowBanners"
[leftMargin]="true"
[linkMessage]="text.upgrade_to_ee_text"
[textMessage]="text.teaser_text"
opReferrer="boards#board-show"
>
</enterprise-banner>
</op-enterprise-banner>
</ng-container>

@ -81,6 +81,7 @@ export class NewBoardModalComponent extends OpModalComponent implements OnInit {
teaser_text: this.I18n.t('js.boards.upsale.teaser_text'),
upgrade_to_ee_text: this.I18n.t('js.boards.upsale.upgrade'),
more_info_ee_text: this.I18n.t('js.boards.upsale.more_info'),
};
constructor(

@ -5,12 +5,13 @@
<op-modal-header (close)="closeMe($event)">{{text.board_type}}</op-modal-header>
<div class="op-modal--body">
<enterprise-banner
<op-enterprise-banner
*ngIf="eeShowBanners"
[linkMessage]="text.upgrade_to_ee_text"
[textMessage]="text.teaser_text"
[moreInfoText]="text.more_info_ee_text"
opReferrer="boards"
></enterprise-banner>
></op-enterprise-banner>
<p
*ngIf="!eeShowBanners"

@ -53,10 +53,12 @@ export class EnterpriseTrialService {
readonly pathHelper:PathHelperService,
protected toastService:ToastService) {
const { gon } = window as any;
this.baseUrlAugur = gon.augur_url;
this.tokenVersion = gon.token_version;
if (gon) {
this.baseUrlAugur = gon.augur_url;
this.tokenVersion = gon.token_version;
}
if ((window as any).gon.ee_trial_key) {
if ((window as any).gon?.ee_trial_key) {
this.setMailSubmittedStatus();
}
}

@ -70,10 +70,11 @@
</div>
</li>
</ul>
<enterprise-banner class="advanced-filters--add-filter-info"
<op-enterprise-banner class="advanced-filters--add-filter-info"
*ngIf="eeShowBanners"
[linkMessage]="text.upsale_link"
[textMessage]="text.upsale_for_more"
[moreInfoText]="text.more_info"
opReferrer="wp-filter#filters">
</enterprise-banner>
</op-enterprise-banner>
</fieldset>

@ -71,6 +71,7 @@ export class QueryFiltersComponent extends UntilDestroyedMixin implements OnInit
close_filter: this.I18n.t('js.filter.description.text_close_filter'),
upsale_for_more: this.I18n.t('js.filter.upsale_for_more'),
upsale_link: this.I18n.t('js.filter.upsale_link'),
more_info: this.I18n.t('js.filter.more_info'),
close_form: this.I18n.t('js.close_form_title'),
selected_filter_list: this.I18n.t('js.label_selected_filter_list'),
button_delete: this.I18n.t('js.button_delete'),

@ -12,9 +12,9 @@
<p class="form--inline-instructions" [textContent]="text.columnsHelp"></p>
</div>
<enterprise-banner class="ee-relation-columns-upsale"
<op-enterprise-banner class="ee-relation-columns-upsale"
*ngIf="eeShowBanners"
[linkMessage]="text.upsaleCheckOutLink"
[textMessage]="text.upsaleRelationColumns"
opReferrer="wp-list-columns#relations">
</enterprise-banner>
</op-enterprise-banner>

@ -1,10 +1,10 @@
<div>
<enterprise-banner class="ee-attribute-highlighting-upsale"
<op-enterprise-banner class="ee-attribute-highlighting-upsale"
*ngIf="eeShowBanners"
[linkMessage]="text.upsaleCheckOutLink"
[textMessage]="text.upsaleAttributeHighlighting"
opReferrer="wp-attribute-highlighting#attribute-highlighting">
</enterprise-banner>
</op-enterprise-banner>
<form>
<p [textContent]="text.highlighting_mode.description"></p>
<div class="form--field">

@ -6,11 +6,11 @@ export const enterpriseBannerSelector = 'enterprise-banner-bootstrap';
@Component({
selector: enterpriseBannerSelector,
template: `
<enterprise-banner
<op-enterprise-banner
[textMessage]="textMessage"
[linkMessage]="linkMessage"
[opReferrer]="referrer">
</enterprise-banner>
</op-enterprise-banner>
`,
})
export class EnterpriseBannerBootstrapComponent implements OnInit {

@ -4,12 +4,46 @@
>
<div class="op-toast -ee-upsale"
[ngClass]="{'-left-margin': leftMargin }">
<img [src]="image.enterprise_edition" class="hidden-for-mobile op-enterprise-banner--image">
<div class="op-toast--content">
<p class="-bold" [textContent]="text.enterpriseFeature"></p>
<p [textContent]="textMessage"></p>
<a [href]="link"
target='blank'
[textContent]="linkMessage"></a>
<div class="op-enterprise-banner--title">
<op-icon icon-classes="button--icon icon-medal"></op-icon> &nbsp;
<span [textContent]="text.enterpriseFeature"></span>
</div>
<br>
<span class="op-enterprise-banner--description" [textContent]="textMessage"></span>
<strong [textContent]="text.become_hero"></strong> &nbsp;
<span [textContent]="text.you_contribute"></span>
<div class="op-enterprise-banner--buttons">
<a
*ngIf="moreInfoText"
class="button--link op-enterprise-banner--info-button"
target=”_blank”>
<op-icon icon-classes="icon icon-external-link"></op-icon>
{{ moreInfoText }}
</a>
<a
href="https://www.openproject.org/pricing/"
target=”_blank”
class="button -highlight">
<op-icon icon-classes="button--icon icon-medal"></op-icon>
{{ text.upgrade }}
</a>
<button
target=”_blank”
(click)="openTrialModal()"
class="button -alt-highlight">
{{ text.button_trial }}
</button>
</div>
</div>
</div>
</div>

@ -1,8 +1,28 @@
.op-enterprise-banner
.op-toast
&.-left-margin
margin-left: 1.25rem
&--title
font-weight: 400
font-size: 20px
line-height: 24px
display: flex
margin-top: 10px
&--description
margin-bottom: 10px
display: flex
&--image
width: 115px
height: 75px
padding-right: 20px
margin: auto
&--buttons
display: flex
margin-top: 10px
justify-content: end
&--info-button
padding-top: 20px
padding-right: 25px
.op-toast--content p
margin-bottom: 10px

@ -1,14 +1,19 @@
import {
ChangeDetectionStrategy,
Component,
Injector,
Input,
OnInit,
} from '@angular/core';
import { BannersService } from 'core-app/core/enterprise/banners.service';
import { I18nService } from 'core-app/core/i18n/i18n.service';
import { EnterpriseTrialModalComponent } from 'core-app/features/enterprise/enterprise-modal/enterprise-trial.modal';
import { EnterpriseTrialService } from 'core-app/features/enterprise/enterprise-trial.service';
import { imagePath } from 'core-app/shared/helpers/images/path-helper';
import { OpModalService } from '../modal/modal.service';
@Component({
selector: 'enterprise-banner',
selector: 'op-enterprise-banner',
styleUrls: ['./enterprise-banner.component.sass'],
templateUrl: './enterprise-banner.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
@ -22,18 +27,39 @@ export class EnterpriseBannerComponent implements OnInit {
@Input() public opReferrer:string;
@Input() public moreInfoText:string;
@Input() public moreInfoLink:string;
public link:string;
public text:any = {
public text = {
enterpriseFeature: this.I18n.t('js.upsale.ee_only'),
become_hero: this.I18n.t('js.admin.enterprise.upsale.become_hero'),
you_contribute: this.I18n.t('js.admin.enterprise.upsale.you_contribute'),
button_trial: this.I18n.t('js.admin.enterprise.upsale.button_start_trial'),
upgrade: this.I18n.t('js.admin.enterprise.upsale.button_upgrade'),
};
image = {
enterprise_edition: imagePath('enterprise_edition.png'),
};
constructor(
protected I18n:I18nService,
protected bannersService:BannersService,
readonly eeTrialService:EnterpriseTrialService,
protected opModalService:OpModalService,
readonly injector:Injector,
) {}
ngOnInit():void {
this.link = this.bannersService.getEnterPriseEditionUrl({ referrer: this.opReferrer });
}
public openTrialModal():void {
this.eeTrialService.cancelled = true;
this.eeTrialService.modalOpen = true;
this.opModalService.show(EnterpriseTrialModalComponent, this.injector);
}
}

@ -13,12 +13,12 @@
class="grid--addable-widget"
></div>
<enterprise-banner
<op-enterprise-banner
*ngIf="eeShowBanners"
[linkMessage]="text.upsale_link"
[textMessage]="text.upsale_text"
class="grid--add-widget-ee"
opReferrer="grids#add-widget"
></enterprise-banner>
></op-enterprise-banner>
</div>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

@ -78,10 +78,6 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
@include icon-mixin-info1
color: $nm-color-info-icon
%nm-icon-enterprise
@include icon-mixin-enterprise
color: $nm-color-info-icon
%error-placeholder
background-color: $nm-color-error-background
border-color: var(--content-form-danger-zone-bg-color)
@ -166,7 +162,6 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
&.-ee-upsale::before
@extend %info-placeholder
@include messages-icon
@extend %nm-icon-enterprise
&.-upload
padding: $nm-upload-box-padding

@ -544,14 +544,6 @@
.icon-email-alert:before
content: "\f14e"
@mixin icon-mixin-enterprise
content: "\f14f"
.icon-enterprise:before
content: "\f14f"
@mixin icon-mixin-enumerations
content: "\f150"

@ -10,6 +10,7 @@ en:
upsale:
teaser_text: 'Would you like ready-to-use board templates? Advanced boards are an Enterprise feature. Please upgrade to a paid plan.'
upgrade: 'Upgrade now'
more_info: 'About advanced boards'
lists:
delete: 'Delete list'

Loading…
Cancel
Save