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

fix(platform): dynamic page facets and title content, refactoring #8527

Merged
merged 4 commits into from
Aug 15, 2022
Merged

fix(platform): dynamic page facets and title content, refactoring #8527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c5b297b
fix(platform): dynamic page facets & title content support
platon-rov Aug 9, 2022
8e406a1
fix(platform): dynamic page styles
platon-rov Aug 9, 2022
48934e9
fix(platform): fdp-dynamic-page-title-host component removing
platon-rov Aug 9, 2022
f0fa3e8
fix(e2e): temporary disabling one of platform dynamic page
platon-rov Aug 15, 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
19 changes: 18 additions & 1 deletion ...p/platform/component-docs/platform-dynamic-page/platform-dynamic-page-docs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@
</component-example>
<code-example [exampleFiles]="dynamicPageResponsivePadding"></code-example>

<separator></separator>

<fd-docs-section-title id="non-collapsible" componentName="dynamic-page">
Disable Header Collapse
</fd-docs-section-title>
Expand All @@ -68,7 +70,9 @@
</component-example>
<code-example [exampleFiles]="dynamicPageNonCollapsible"></code-example>

<fd-docs-section-title id="flexible-column" componentName="dynamic-page">
<separator></separator>

<fd-docs-section-title id="facets" componentName="dynamic-page">
Tabbed Dynamic Page with a Flexible Column Layout
</fd-docs-section-title>
<description>
Expand All @@ -79,3 +83,16 @@
<fdp-platform-dynamic-page-flexible-column-example></fdp-platform-dynamic-page-flexible-column-example>
</component-example>
<code-example [exampleFiles]="dynamicPageFlexibleColumn"></code-example>

<separator></separator>

<fd-docs-section-title id="facets" componentName="dynamic-page">Dynamic Page with Facets</fd-docs-section-title>
<description>
The Dynamic Page header can consist of various facet types, such as Form facet, Key-value facet, Image facet, and
Rating Indicator facet. When an Image facet is used in the header content, collapsing the header will bring the
image facet next to the title. Expanding the header will place it back to its original place.
</description>
<component-example>
<fdp-platform-dynamic-page-facets-example></fdp-platform-dynamic-page-facets-example>
</component-example>
<code-example [exampleFiles]="dynamicPageFacets"></code-example>
28 changes: 28 additions & 0 deletions ...app/platform/component-docs/platform-dynamic-page/platform-dynamic-page-docs.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ import dynamicPageFlexibleColumnExample from '!./platform-dynamic-page-examples/
import dynamicPageFlexibleColumnExampleScss from '!./platform-dynamic-page-examples/platform-dynamic-page-flexible-column-example.component.scss?raw';
import dynamicPageFlexibleColumnExampleTsCode from '!./platform-dynamic-page-examples/platform-dynamic-page-flexible-column-example.component.ts?raw';

import dynamicPageFacetsExample from '!./platform-dynamic-page-examples/platform-dynamic-page-facets-example/platform-dynamic-page-facets-example.component.html?raw';
import dynamicPageFacetsExampleScss from '!./platform-dynamic-page-examples/platform-dynamic-page-facets-example/platform-dynamic-page-facets-example.component.scss?raw';
import dynamicPageFacetsExampleTsCode from '!./platform-dynamic-page-examples/platform-dynamic-page-facets-example/platform-dynamic-page-facets-example.component.ts?raw';

import platformDynamicPagePageOverflowServiceTs from '!./platform-dynamic-page-examples/platform-dynamic-page-page-overflow.service.ts?raw';

@Component({
Expand Down Expand Up @@ -61,6 +65,7 @@ export class PlatformDynamicPageDocsComponent implements OnInit, OnDestroy {
service: true
}
];

dynamicPageSnapScroll: ExampleFile[] = [
{
language: 'html',
Expand Down Expand Up @@ -176,6 +181,29 @@ export class PlatformDynamicPageDocsComponent implements OnInit, OnDestroy {
}
];

dynamicPageFacets: ExampleFile[] = [
{
language: 'html',
code: dynamicPageFacetsExample,
fileName: 'platform-dynamic-page-facets-example',
scssFileCode: dynamicPageFacetsExampleScss
},
{
language: 'typescript',
code: dynamicPageFacetsExampleTsCode,
fileName: 'platform-dynamic-page-facets-example',
component: 'PlatformDynamicPageFacetsExampleComponent'
},
{
language: 'typescript',
name: 'platform-dynamic-page-page-overflow.service.ts',
code: platformDynamicPagePageOverflowServiceTs,
fileName: 'platform-dynamic-page-page-overflow',
component: 'PlatformDynamicPagePageOverflowService',
service: true
}
];

ngOnInit(): void {
this._subscription = this._overflowHandlingService.isExampleOpened.subscribe((isExampleOpened) => {
const content = document.getElementById('page-content');
Expand Down
224 changes: 224 additions & 0 deletions .../platform-dynamic-page-facets-example/platform-dynamic-page-facets-example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
<button fd-button (click)="openPage()">Click to open full screen</button>
<div class="overlay" #overlay>
<ng-container *ngIf="fullscreen">
<fdp-dynamic-page ariaLabel="Example Dynamic Page">
<fdp-dynamic-page-title [title]="pageTitle" subtitle="Oversized multimaterial sneakers with quilted effect">
<!-- breadcrumb content -->
<fd-breadcrumb>
<fd-breadcrumb-item>
<a fd-link href="#">Men</a>
</fd-breadcrumb-item>
<fd-breadcrumb-item>
<a fd-link href="#">Shoes</a>
</fd-breadcrumb-item>
<fd-breadcrumb-item>
<a fd-link href="#">Running Shoes</a>
</fd-breadcrumb-item>
<fd-breadcrumb-item>
<span>Jogging</span>
</fd-breadcrumb-item>
</fd-breadcrumb>

<fdp-dynamic-page-key-info> LAST DAY OF SALE </fdp-dynamic-page-key-info>

<fdp-dynamic-page-title-image>
<fd-avatar image="http://picsum.photos/id/1018/400" size="s"></fd-avatar>
</fdp-dynamic-page-title-image>

<fdp-dynamic-page-global-actions>
<!-- global actions -->
<fd-toolbar fdType="transparent" [clearBorder]="true">
<button
fd-toolbar-item
fd-button
fdCompact
fdType="positive"
(click)="closePage($event)"
label="Accept"
title="Accept"
></button>
<button
fd-toolbar-item
fd-button
fdCompact
fdType="negative"
(click)="closePage($event)"
label="Reject"
title="Reject"
></button>
<fd-toolbar-separator></fd-toolbar-separator>
</fd-toolbar>
</fdp-dynamic-page-global-actions>
<fdp-dynamic-page-layout-actions>
<!-- layout actions -->
<fd-toolbar fdType="transparent" [clearBorder]="true">
<button
fd-button
fdType="transparent"
aria-label="Resize"
(click)="resizeClicked($event)"
title="Resize"
>
<i class="sap-icon--resize"></i>
</button>
<button
fd-button
fdType="transparent"
aria-label="Exit Fullscreen"
(click)="closePage($event)"
title="Exit Fullscreen"
>
<i class="sap-icon--exitfullscreen"></i>
</button>
<button
fd-button
fdType="transparent"
aria-label="Close"
(click)="closePage($event)"
title="Close"
>
<i class="sap-icon--decline"></i>
</button>
</fd-toolbar>
</fdp-dynamic-page-layout-actions>
</fdp-dynamic-page-title>
<fdp-dynamic-page-header
[collapsible]="true"
[pinnable]="true"
[collapsed]="false"
(collapsedChange)="onCollapseChange()"
>
<fd-facet-group ariaLabel="Facet Group">
<fd-facet type="form" facetTitle="Technical Data" id="facet1">
<fd-facet-content>
<label fd-form-label [colon]="true" for="form-value-10">Base unit</label>
<fd-text text="Each" id="form-value-10"></fd-text>
</fd-facet-content>
<fd-facet-content>
<label fd-form-label [colon]="true" for="form-value-11">Length</label>
<fd-text text="23.24 Centimeter" id="form-value-11"></fd-text>
</fd-facet-content>
<fd-facet-content>
<label fd-form-label [colon]="true" for="form-value-12">Width</label>
<fd-text text="86.1 Centimeter" id="form-value-12"></fd-text>
</fd-facet-content>
<fd-facet-content>
<label fd-form-label [colon]="true" for="form-value-13">Height</label>
<fd-text text="20.8 Centimeter" id="form-value-13"></fd-text>
</fd-facet-content>
</fd-facet>
<fd-facet type="rating-indicator" facetTitle="Rating Indicator" subtitle="6 reviews" id="facet2">
<fd-facet-content>
<fd-rating-indicator
size="md"
dynamicTextIndicator="of"
[value]="2.51"
></fd-rating-indicator>
</fd-facet-content>
</fd-facet>
<fd-facet type="image" id="facet3">
<fd-avatar title="Nature" image="http://picsum.photos/id/1018/400" size="l"></fd-avatar>
</fd-facet>
<fd-facet type="key-value" facetTitle="Status" id="facet4">
<span
fd-object-status
status="positive"
label="Delivery"
[large]="true"
title="Delivery"
aria-label="Delivery"
></span>
</fd-facet>
<fd-facet type="key-value" facetTitle="Delivery Time" id="facet5">
<span
fd-object-status
status="critical"
label="12 days"
glyph="shipping-status"
[large]="true"
title="12 days"
aria-label="12 days"
></span>
</fd-facet>
<fd-facet type="key-value" facetTitle="Assembly Option" id="facet6">
<span
fd-object-status
status="negative"
label="To be selected"
[large]="true"
title="To be selected"
aria-label="To be selected"
></span>
</fd-facet>
<fd-facet type="key-value" facetTitle="Pricing" id="facet7">
<fd-object-number
[number]="100.88"
[large]="true"
unit="EUR"
status="informative"
[decimal]="2"
></fd-object-number>
</fd-facet>
</fd-facet-group>
</fdp-dynamic-page-header>
<fdp-dynamic-page-content id="basic">
<!-- page content goes here -->
Normal Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit sunt laboriosam totam
maiores. Unde quas quis soluta adipisci mollitia distinctio. Natus nam repellat, aut ad et tempore cum.
Corporis, nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam ad provident
similique, voluptatibus obcaecati perferendis excepturi.
<fd-icon
glyph="question-mark"
fd-inline-help="Inline Help Tooltip"
tabindex="0"
aria-describedby="fd-inline-help-default"
ariaLabel="Inline Help Tooltip"
></fd-icon>
<br />
<br />
<br />
Velit officiis sunt, debitis eum perspiciatis consectetur? Consequatur consequuntur quia nisi iste
tempora aspernatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque architecto
dignissimos reprehenderit perspiciatis excepturi voluptate. Vel enim eius doloribus amet vitae debitis.
Similique vel ipsam debitis fuga sequi eveniet perspiciatis?
<br />
<br />
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat veniam libero nostrum explicabo sed
odit? Recusandae praesentium voluptatum cum omnis, placeat beatae quasi eum odio doloribus inventore,
eos iusto sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit sunt laboriosam
totam maiores. Unde quas quis soluta adipisci mollitia distinctio. Natus nam repellat, aut ad et tempore
cum. Corporis, nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam ad provident
similique, voluptatibus obcaecati perferendis excepturi.
<br />
<br />
<br />
Velit officiis sunt, debitis eum perspiciatis consectetur? Consequatur consequuntur quia nisi iste
tempora aspernatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque architecto
dignissimos reprehenderit perspiciatis excepturi voluptate. Vel enim eius doloribus amet vitae debitis.
Similique vel ipsam debitis fuga sequi eveniet perspiciatis?
<br />
<br />
<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat veniam libero nostrum explicabo sed
odit? Recusandae praesentium voluptatum cum omnis, placeat beatae quasi eum odio doloribus inventore,
eos iusto sed.
<br />
<br />
<br />
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus eligendi dolore omnis veritatis! Et
voluptatibus error, commodi, dignissimos nostrum nemo deleniti est cumque fuga reiciendis, fugiat
impedit explicabo voluptates at? Normal
</fdp-dynamic-page-content>
<fdp-dynamic-page-footer>
<!-- page footer content goes here -->
<div fd-bar barDesign="floating-footer">
<div fd-bar-right>
<fd-button-bar label="Save" fdType="emphasized" (click)="closePage($event)"></fd-button-bar>
<fd-button-bar label="Cancel" (click)="closePage($event)"></fd-button-bar>
</div>
</div>
</fdp-dynamic-page-footer>
</fdp-dynamic-page>
</ng-container>
</div>
10 changes: 10 additions & 0 deletions .../platform-dynamic-page-facets-example/platform-dynamic-page-facets-example.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
49 changes: 49 additions & 0 deletions ...es/platform-dynamic-page-facets-example/platform-dynamic-page-facets-example.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { Component, ChangeDetectionStrategy, ViewChild, ElementRef, OnDestroy } from '@angular/core';

import { PlatformDynamicPagePageOverflowService } from '../platform-dynamic-page-page-overflow.service';

@Component({
selector: 'fdp-platform-dynamic-page-facets-example',
templateUrl: './platform-dynamic-page-facets-example.component.html',
styleUrls: ['./platform-dynamic-page-facets-example.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PlatformDynamicPageFacetsExampleComponent implements OnDestroy {
@ViewChild('overlay')
overlay: ElementRef<HTMLElement>;

fullscreen = false;

pageTitle = 'Balenciaga Tripple S Trainers';

constructor(private _overflowHandlingService: PlatformDynamicPagePageOverflowService) {}

onCollapseChange(): void {
console.log('collapse changed');
}

resizeClicked(event: Event): void {
event.stopPropagation();
}

openPage(): void {
this.fullscreen = true;
this.overlay.nativeElement.style.width = '100%';
this._overflowHandlingService.isExampleOpened.next(true);
}

closePage(event: Event): void {
event.stopPropagation();
this.resetPageActions();
}

resetPageActions(): void {
this.fullscreen = false;
this.overlay.nativeElement.style.width = '0%';
this._overflowHandlingService.isExampleOpened.next(false);
}

ngOnDestroy(): void {
this.resetPageActions();
}
}
Loading