Skip to content

Adding app layout types #677

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

Merged
merged 4 commits into from
Feb 10, 2022
Merged

Adding app layout types #677

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
200f8b2
Adding app layout types
Jialecl Feb 8, 2022
6cb6059
updating documentation
Jialecl Feb 8, 2022
4760539
updating documentaion
Jialecl Feb 10, 2022
73f94f7
Mode type update
Jialecl Feb 10, 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
81 changes: 41 additions & 40 deletions ...-cdk-site/src/app/components/examples/layout/app-layout-api/app-layout-api.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,36 +51,7 @@
<p>
Everything in this component will be displayed as content inside a sidenav at
the left. This is optional and if not specified, the sidenav will not be
shown. Check
<dxc-link
text="DxcSidenav"
href=""
underlined="false"
(click)="navigateToRoute('sidenav'); $event.preventDefault()"
></dxc-link>
for more information regarding its props. This also applies to the themming.
</p>


<dxc-heading
[level]="5"
weight="normal"
text="DxcApplicationLayoutFooter"
[margin]="{ bottom: 'small' }"
></dxc-heading>
<p>
This component has to be a child of DxcApplicationLayoutMain. Everything in
this component will be displayed as a footer, at the bottom of the screen. If
you want to show a
<dxc-link
text="DxcFooter"
href=""
underlined="false"
(click)="navigateToRoute('footer'); $event.preventDefault()"
></dxc-link
>, as a shortcut, you can directly use it without DxcApplicationLayoutFooter.
This is optional and if it is not specified, the DxcFooter will be shown by
default.
shown.
</p>

<dxc-heading
Expand All @@ -90,31 +61,65 @@
[margin]="{ bottom: 'small' }"
></dxc-heading>

<dxc-table>
<dxc-table [margin]="{ bottom: 'medium' }">
<tr>
<th>Name</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>mode: 'overlay' | 'push' </td>
<td>mode: 'overlay' | 'push'</td>
<td>
<code>'overlay'</code>
<code>'push'</code>
</td>
<td>
Default action over the content of the page, overlay the content or
push to the right.
Default action over the content of the page, overlay the content or push
to the right. In lower resolutions the mode will always be overlay.
</td>
</tr>
<tr>
<td>displayArrow: boolean</td>
<td>
<code>true</code>
</td>
<td>If false, the arrow button is hidden.</td>
<td>
If false, the arrow button is hidden. In lower resolutions the arrow will
be always displayed.
</td>
</tr>
<tr>
<td>padding: string | object</td>
<td></td>
<td>
Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall'
| 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an
object with 'top', 'bottom', 'left' and 'right' properties in order to
specify different padding sizes.
</td>
</tr>
</dxc-table>

<dxc-heading
[level]="5"
weight="normal"
text="DxcApplicationLayoutFooter"
[margin]="{ bottom: 'small' }"
></dxc-heading>
<p>
This component has to be a child of DxcApplicationLayoutMain. Everything in
this component will be displayed as a footer, at the bottom of the screen. If
you want to show a
<dxc-link
text="DxcFooter"
href=""
underlined="false"
(click)="navigateToRoute('footer'); $event.preventDefault()"
></dxc-link
>, as a shortcut, you can directly use it without DxcApplicationLayoutFooter.
This is optional and if it is not specified, the DxcFooter will be shown by
default.
</p>

<dxc-heading
[level]="5"
weight="normal"
Expand All @@ -126,7 +131,6 @@
container at the center.
</p>


<dxc-heading
[level]="4"
weight="normal"
Expand All @@ -138,7 +142,4 @@
want to use it from your Angular project. You have the following example:
</p>




<app-code-playground [code]="bindCode" type="TS"></app-code-playground>
76 changes: 52 additions & 24 deletions ...ication-layout/dxc-application-layout-sidenav/dxc-application-layout-sidenav.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,22 @@ import { responsiveSizes } from "../../variables";
import { coerceBooleanProperty } from "@angular/cdk/coercion";
import { SidenavService } from "./services/sidenav.service";

type Space =
| "xxsmall"
| "xsmall"
| "small"
| "medium"
| "large"
| "xlarge"
| "xxlarge";

type Padding = {
top?: Space;
bottom?: Space;
left?: Space;
right?: Space;
};

@Component({
selector: "dxc-application-layout-sidenav",
templateUrl: "./dxc-application-layout-sidenav.component.html",
Expand All @@ -24,8 +40,20 @@ import { SidenavService } from "./services/sidenav.service";
})
export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
@HostBinding("class") sidenavStyles;
@Input() mode: string = "push";
@Input() padding: any;
/**
* Default action over the content of the page, overlay the content or push to the right ('push' | 'overlay').
* In lower resolutions the mode will always be overlay.
*/
@Input() mode: "push" | "overlay" = "push";
/**
* Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
*/
@Input() padding: Space | Padding;
/**
* If false, the arrow button is hidden.
* In lower resolutions the arrow will be always displayed.
*/
@Input()
get displayArrow(): boolean {
return this._displayArrow;
Expand All @@ -51,7 +79,7 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
constructor(
private utils: CssUtils,
private sidenavService: SidenavService
) { }
) {}

@HostListener("window:resize", ["$event"])
onResize(event) {
Expand Down Expand Up @@ -113,8 +141,8 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
this.isShown !== undefined
? this.isShown
: this.innerWidth <= responsiveSizes.tablet
? false
: true;
? false
: true;
this.sidenavService.showMenu(this.isShown);
}

Expand All @@ -133,7 +161,7 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
return css`
z-index: 400;
position: ${(inputs.mode === "overlay" && this.displayArrow) ||
inputs.isResponsive
inputs.isResponsive
? "absolute"
: "relative"};
height: ${inputs.mode === "overlay" || inputs.isResponsive ? "100%" : ""};
Expand All @@ -145,22 +173,22 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
.sidenavMenu {
${this.isShown ? this.utils.getPaddings(inputs.padding) : ""}
width: ${inputs.isShown
? "calc(300px" +
this.utils.getPaddingOrMargin(null, inputs.padding) +
")"
: "0px"};
? "calc(300px" +
this.utils.getPaddingOrMargin(null, inputs.padding) +
")"
: "0px"};
overflow-y: auto;
overflow-x: hidden;
transform: ${inputs.isShown
? "translateX(0)"
: !inputs.isShown
? "translateX(-100%) !important"
: ""};
? "translateX(0)"
: !inputs.isShown
? "translateX(-100%) !important"
: ""};
opacity: ${inputs.isShown ? "1" : "0"};
visibility: ${inputs.isShown ? "visible" : "hidden"};
transition: ${this.firstClick
? "transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, width 0.4s ease-in-out, padding 0.4s ease-in-out;"
: "width 0.4s ease-in-out"};
? "transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, width 0.4s ease-in-out, padding 0.4s ease-in-out;"
: "width 0.4s ease-in-out"};
&::-webkit-scrollbar {
width: 2px;
}
Expand All @@ -186,24 +214,24 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
left: ${this.isShown ? "calc(300px - 21px)" : "calc(0px - 21px)"};
top: calc(50% - 21px);
transition: ${this.firstClick
? "transform 0.4s ease-in-out, left 0.4s ease-in-out;"
: ""};
? "transform 0.4s ease-in-out, left 0.4s ease-in-out;"
: ""};
cursor: pointer;
z-index: ${inputs.mode === "overlay" || this.isResponsive
? "401"
: "auto"};
? "401"
: "auto"};
.sidenavArrowImage {
height: 18px;
width: 18px;
display: flex;
align-items: center;
margin-left: ${inputs.isShown ? "0px" : "10px"};
transform: ${inputs.isShown
? "rotate(-180deg)"
: "rotate(0deg) !important"};
? "rotate(-180deg)"
: "rotate(0deg) !important"};
transition: ${this.firstClick
? "margin 0.4s ease-in, transform 0.4s ease-in-out; "
: ""};
? "margin 0.4s ease-in, transform 0.4s ease-in-out; "
: ""};
fill: var(--sidenav-arrowColor);
}
}
Expand Down