Skip to content

Commit 56628da

Browse files
xelaintdamienwebdev
xelaint
and
damienwebdev
authored
feat(design, daffio): move sidebar content pad and nav pad code to css
Co-authored-by: Damien Retzinger <[email protected]>
1 parent 5cb84f3 commit 56628da

File tree

12 files changed

+147
-107
lines changed

12 files changed

+147
-107
lines changed

‎apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
:host {
2+
--daff-sidebar-left-width: 288px;
3+
--daff-sidebar-right-width: 288px;
4+
}
5+
16
.daffio-sidebar {
2-
max-width: 290px;
3-
width: 100%;
47
border-right: 1px solid rgb(var(--daff-theme-contrast-rgb), 0.1);
58
}

‎apps/daffio/src/app/core/sidebar/services/sidebar.service.spec.ts

+16-22
Original file line numberDiff line numberDiff line change
@@ -44,34 +44,28 @@ describe('DaffioSidebarService', () => {
4444
service = TestBed.inject(DaffioSidebarService);
4545
});
4646

47-
describe('mode$', () => {
48-
describe('in big tablet mode', () => {
49-
beforeEach(() => {
50-
breakpointSpy.next({ matches: true, breakpoints: {}});
51-
});
47+
describe('when the viewport is big tablet or bigger', () => {
48+
beforeEach(() => {
49+
breakpointSpy.next({ matches: true, breakpoints: {}});
50+
});
5251

53-
it('should pull sidebar mode from router data', () => {
54-
dataSpy.next({
55-
sidebarMode: DaffSidebarModeEnum.Side,
56-
});
57-
expect(service.mode$).toBeObservable(cold('a', { a: DaffSidebarModeEnum.Side }));
52+
it('should pull sidebar mode from router data', () => {
53+
dataSpy.next({
54+
sidebarMode: DaffSidebarModeEnum.Side,
5855
});
56+
expect(service.mode$).toBeObservable(cold('a', { a: DaffSidebarModeEnum.Side }));
57+
});
5958

60-
it('should default to side-fixed', () => {
61-
dataSpy.next({});
62-
expect(service.mode$).toBeObservable(cold('a', { a: DaffSidebarModeEnum.SideFixed }));
63-
});
59+
it('should default the mode to side-fixed', () => {
60+
dataSpy.next({});
61+
expect(service.mode$).toBeObservable(cold('a', { a: DaffSidebarModeEnum.SideFixed }));
6462
});
63+
});
6564

66-
describe('in smaller than big tablet', () => {
67-
beforeEach(() => {
68-
breakpointSpy.next({ matches: false, breakpoints: {}});
69-
});
65+
it('should have a mode of under when the viewport is smaller than big tablet', () => {
66+
breakpointSpy.next({ matches: false, breakpoints: {}});
7067

71-
it('should be under', () => {
72-
expect(service.mode$).toBeObservable(cold('a', { a: DaffSidebarModeEnum.Under }));
73-
});
74-
});
68+
expect(service.mode$).toBeObservable(cold('(ab)', { a: DaffSidebarModeEnum.SideFixed, b: DaffSidebarModeEnum.Under }));
7569
});
7670

7771
describe('activeRegistration$', () => {

‎apps/daffio/src/app/core/sidebar/services/sidebar.service.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
distinctUntilChanged,
99
filter,
1010
map,
11+
startWith,
1112
} from 'rxjs';
1213

1314
import {
@@ -38,6 +39,7 @@ export class DaffioSidebarService extends DaffSidebarService {
3839
readonly mode$ = combineLatest([
3940
this.routerData.data$,
4041
this.breakpointObserver.observe(DaffBreakpoints.BIG_TABLET).pipe(
42+
startWith({ matches: true }),
4143
map((result) => result?.matches),
4244
),
4345
]).pipe(

‎apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.scss

+2-4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
:host {
44
--daff-sidebar-side-fixed-top-shift: 64px;
5+
--daff-sidebar-left-width: 288px;
6+
--daff-sidebar-right-width: 288px;
57
}
68

79
.design-land-sidebar-viewport {
@@ -17,10 +19,6 @@
1719
}
1820
}
1921

20-
&__sidebar {
21-
width: 288px;
22-
}
23-
2422
&__get-started-button {
2523
display: block;
2624
font-weight: 500;

‎libs/design/sidebar/README.md

+20-3
Original file line numberDiff line numberDiff line change
@@ -102,11 +102,28 @@ By default, sidebar supports two methods of closing itself: clicking on the back
102102
### Custom styles
103103

104104
#### Setting a sidebar's width
105-
The default size of a sidebar is `240px`. The width can be changed by setting it via CSS:
105+
The default size of a sidebar is `240px`. The `--daff-sidebar-left-width` and `--daff-sidebar-right-width` variables can be used to change the width of a left or right sidebar. These variables need to be defined on `<daff-sidebar-viewport>` or on the shadow DOM.
106+
107+
`custom-sidebar-viewport.html`
108+
```html
109+
<daff-sidebar-viewport>
110+
<daff-sidebar></daff-sidebar>
111+
</daff-sidebar-viewport>
112+
```
113+
114+
```scss
115+
:host {
116+
--daff-sidebar-left-width: 288px;
117+
--daff-sidebar-right-width: 288px;
118+
}
119+
```
120+
121+
or:
106122

107123
```scss
108-
daff-sidebar {
109-
width: 240px;
124+
daff-sidebar-viewport {
125+
--daff-sidebar-left-width: 288px;
126+
--daff-sidebar-right-width: 288px;
110127
}
111128
```
112129

‎libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.html

+2-6
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,15 @@
77
</daff-sidebar-viewport-backdrop>
88

99
<div class="daff-sidebar-viewport__nav"
10-
[@transformContent]="_animationState"
11-
[style.padding-left.px]="_navPadLeft"
12-
[style.padding-right.px]="_navPadRight">
10+
[@transformContent]="_animationState">
1311
<ng-content select="[daff-sidebar-viewport-nav]"></ng-content>
1412
</div>
1513

1614
<div class="daff-sidebar-viewport__content"
1715
[@transformContent]="_animationState"
1816
(@transformContent.start)="onContentAnimationStart($event)"
1917
(@transformContent.done)="onContentAnimationDone($event)">
20-
<div class="daff-sidebar-viewport__inner"
21-
[style.padding-left.px]="_contentPadLeft"
22-
[style.padding-right.px]="_contentPadRight">
18+
<div class="daff-sidebar-viewport__inner">
2319
<ng-content></ng-content>
2420
</div>
2521
</div>

‎libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.scss

+41
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '../helper/variables';
2+
@use '../../../scss/layout';
23

34
:host {
45
// fixes a bug where certain elements show in front of backdrop for a second.
@@ -7,6 +8,46 @@
78
position: relative;
89
width: 100%;
910
z-index: variables.$daff-sidebar-viewport-z-index;
11+
12+
&.pad-left {
13+
.daff-sidebar-viewport__inner {
14+
padding-left: 0;
15+
16+
@include layout.breakpoint(big-tablet) {
17+
padding-left: var(--daff-sidebar-left-width, 240px);
18+
}
19+
}
20+
21+
+ &.beside {
22+
.daff-sidebar-viewport__nav {
23+
padding-left: 0;
24+
25+
@include layout.breakpoint(big-tablet) {
26+
padding-left: var(--daff-sidebar-left-width, 240px);
27+
}
28+
}
29+
}
30+
}
31+
32+
&.pad-right {
33+
.daff-sidebar-viewport__inner {
34+
padding-right: 0;
35+
36+
@include layout.breakpoint(big-tablet) {
37+
padding-right: var(--daff-sidebar-right-width, 240px);
38+
}
39+
}
40+
41+
+ &.beside {
42+
.daff-sidebar-viewport__nav {
43+
padding-right: 0;
44+
45+
@include layout.breakpoint(big-tablet) {
46+
padding-right: var(--daff-sidebar-right-width, 240px);
47+
}
48+
}
49+
}
50+
}
1051
}
1152

1253
.daff-sidebar-viewport {

‎libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts

+7-35
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
daffSidebarViewportScrollFactory,
2929
} from './scroll-token/scroll.token';
3030
import { sidebarViewportBackdropInteractable } from './utils/backdrop-interactable';
31-
import { sidebarViewportContentPadding } from './utils/content-pad';
31+
import { isSidebarViewportContentPadded } from './utils/content-pad';
3232
import {
3333
isViewportContentShifted,
3434
sidebarViewportContentShift,
@@ -82,6 +82,8 @@ export class DaffSidebarViewportComponent implements AfterContentChecked, OnDest
8282
return {
8383
'daff-sidebar-viewport': true,
8484
[this.navPlacement]: true,
85+
'pad-left': this._isPaddedLeft,
86+
'pad-right': this._isPaddedRight,
8587
};
8688
};
8789

@@ -128,25 +130,9 @@ export class DaffSidebarViewportComponent implements AfterContentChecked, OnDest
128130
*/
129131
private _shift = '0px';
130132

131-
/**
132-
* The left padding on the content when left side-fixed sidebars are open.
133-
*/
134-
public _contentPadLeft = 0;
135-
136-
/**
137-
* The left padding on the nav when left side-fixed sidebars are open.
138-
*/
139-
public _navPadLeft = 0;
133+
private _isPaddedLeft = false;
140134

141-
/**
142-
* The right padding on the content when right side-fixed sidebars are open.
143-
*/
144-
public _contentPadRight = 0;
145-
146-
/**
147-
* The right padding on the content when right side-fixed sidebars are open.
148-
*/
149-
public _navPadRight = 0;
135+
private _isPaddedRight = false;
150136

151137
/**
152138
* Whether or not the backdrop is interactable
@@ -171,7 +157,6 @@ export class DaffSidebarViewportComponent implements AfterContentChecked, OnDest
171157
this.updateAnimationState();
172158
this.cdRef.markForCheck();
173159
}
174-
175160
const nextBackdropInteractable = sidebarViewportBackdropInteractable(this.sidebars);
176161
if (this._backdropInteractable !== nextBackdropInteractable) {
177162
this._backdropInteractable = nextBackdropInteractable;
@@ -192,21 +177,8 @@ export class DaffSidebarViewportComponent implements AfterContentChecked, OnDest
192177
}
193178
};
194179

195-
const nextLeftPadding = sidebarViewportContentPadding(this.sidebars, 'left');
196-
if(this._contentPadLeft !== nextLeftPadding) {
197-
this._contentPadLeft = nextLeftPadding;
198-
this._navPadLeft = this.isNavOnSide ? this._contentPadLeft : null;
199-
this.updateAnimationState();
200-
this.cdRef.markForCheck();
201-
}
202-
203-
const nextRightPadding = sidebarViewportContentPadding(this.sidebars, 'right');
204-
if(this._contentPadRight !== nextRightPadding) {
205-
this._contentPadRight = nextRightPadding;
206-
this._navPadRight = this.isNavOnSide ? this._contentPadRight : null;
207-
this.updateAnimationState();
208-
this.cdRef.markForCheck();
209-
}
180+
this._isPaddedLeft = isSidebarViewportContentPadded(this.sidebars, 'left');
181+
this._isPaddedRight = isSidebarViewportContentPadded(this.sidebars, 'right');
210182
}
211183

212184
ngOnDestroy() {

‎libs/design/sidebar/src/sidebar-viewport/utils/content-pad.spec.ts

+17-17
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from '@angular/core/testing';
1313
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
1414

15-
import { sidebarViewportContentPadding } from './content-pad';
15+
import { isSidebarViewportContentPadded } from './content-pad';
1616
import { DaffSidebarComponent } from '../../sidebar/sidebar.component';
1717

1818
@Component({
@@ -27,7 +27,7 @@ class IterableWrapperComponent{
2727
}
2828

2929

30-
describe('@daffodil/design | sidebar-viewport | sidebarViewportContentPadding', () => {
30+
describe('@daffodil/design | sidebar-viewport | isSidebarViewportContentPadded', () => {
3131
let fixture: ComponentFixture<IterableWrapperComponent>;
3232
let wrapper: IterableWrapperComponent;
3333

@@ -52,26 +52,26 @@ describe('@daffodil/design | sidebar-viewport | sidebarViewportContentPadding',
5252

5353
it('should correctly pad sidebars', () => {
5454
const sidebarCombinations = [
55-
{ sidebars: [], left: 0, right: 0 },
56-
{ sidebars: [{ mode: 'side', side: 'left', open: false }], left: 0, right: 0 },
57-
{ sidebars: [{ mode: 'side', side: 'left', open: true }], left: 0, right: 0 },
58-
{ sidebars: [{ mode: 'side', side: 'left', open: true }, { mode: 'side', side: 'right', open: true }], left: 0, right: 0 },
59-
{ sidebars: [{ mode: 'over', side: 'left', open: false }, { mode: 'over', side: 'right', open: false }], left: 0, right: 0 },
60-
{ sidebars: [{ mode: 'over', side: 'left', open: true }, { mode: 'over', side: 'right', open: true }], left: 0, right: 0 },
61-
{ sidebars: [{ mode: 'under', side: 'left', open: false }, { mode: 'under', side: 'right', open: false }], left: 0, right: 0 },
62-
{ sidebars: [{ mode: 'under', side: 'left', open: true }, { mode: 'under', side: 'right', open: true }], left: 0, right: 0 },
63-
{ sidebars: [{ mode: 'side-fixed', side: 'left', open: false }, { mode: 'under', side: 'right', open: false }], left: 0, right: 0 },
64-
{ sidebars: [{ mode: 'side-fixed', side: 'left', open: true }, { mode: 'under', side: 'right', open: false }], left: 240, right: 0 },
65-
{ sidebars: [{ mode: 'under', side: 'left', open: false }, { mode: 'side-fixed', side: 'right', open: false }], left: 0, right: 0 },
66-
{ sidebars: [{ mode: 'under', side: 'left', open: false }, { mode: 'side-fixed', side: 'right', open: true }], left: 0, right: 240 },
67-
{ sidebars: [{ mode: 'side-fixed', side: 'left', open: true }, { mode: 'side-fixed', side: 'right', open: true }], left: 240, right: 240 },
55+
{ sidebars: [], left: false, right: false },
56+
{ sidebars: [{ mode: 'side', side: 'left', open: false }], left: false, right: false },
57+
{ sidebars: [{ mode: 'side', side: 'left', open: true }], left: false, right: false },
58+
{ sidebars: [{ mode: 'side', side: 'left', open: true }, { mode: 'side', side: 'right', open: true }], left: false, right: false },
59+
{ sidebars: [{ mode: 'over', side: 'left', open: false }, { mode: 'over', side: 'right', open: false }], left: false, right: false },
60+
{ sidebars: [{ mode: 'over', side: 'left', open: true }, { mode: 'over', side: 'right', open: true }], left: false, right: false },
61+
{ sidebars: [{ mode: 'under', side: 'left', open: false }, { mode: 'under', side: 'right', open: false }], left: false, right: false },
62+
{ sidebars: [{ mode: 'under', side: 'left', open: true }, { mode: 'under', side: 'right', open: true }], left: false, right: false },
63+
{ sidebars: [{ mode: 'side-fixed', side: 'left', open: false }, { mode: 'under', side: 'right', open: false }], left: false, right: false },
64+
{ sidebars: [{ mode: 'side-fixed', side: 'left', open: true }, { mode: 'under', side: 'right', open: false }], left: true, right: false },
65+
{ sidebars: [{ mode: 'under', side: 'left', open: false }, { mode: 'side-fixed', side: 'right', open: false }], left: false, right: false },
66+
{ sidebars: [{ mode: 'under', side: 'left', open: false }, { mode: 'side-fixed', side: 'right', open: true }], left: false, right: true },
67+
{ sidebars: [{ mode: 'side-fixed', side: 'left', open: true }, { mode: 'side-fixed', side: 'right', open: true }], left: true, right: true },
6868
];
6969

7070
sidebarCombinations.forEach((el) => {
7171
wrapper.sidebars = el.sidebars;
7272
fixture.detectChanges();
73-
expect(sidebarViewportContentPadding(wrapper.sidebarComponents, 'left')).toEqual(el.left);
74-
expect(sidebarViewportContentPadding(wrapper.sidebarComponents, 'right')).toEqual(el.right);
73+
expect(isSidebarViewportContentPadded(wrapper.sidebarComponents, 'left')).toEqual(el.left);
74+
expect(isSidebarViewportContentPadded(wrapper.sidebarComponents, 'right')).toEqual(el.right);
7575
});
7676
});
7777
});

‎libs/design/sidebar/src/sidebar-viewport/utils/content-pad.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,20 @@ import { DaffSidebarSide } from '../../helper/sidebar-side';
55
import { DaffSidebarComponent } from '../../sidebar/sidebar.component';
66

77
/**
8-
* Given a list of sidebars, compute the associated content shift.
8+
* Given a list of sidebars, compute the whether or not the content is padded.
99
*/
10-
export const sidebarViewportContentPadding = (sidebars: QueryList<DaffSidebarComponent>, side: DaffSidebarSide): number =>
11-
sidebars.reduce((acc: number, sidebar) => {
10+
export const isSidebarViewportContentPadded = (sidebars: QueryList<DaffSidebarComponent>, side: DaffSidebarSide): boolean =>
11+
sidebars.reduce((acc: boolean, sidebar) => {
1212
if(!(sidebar.mode === DaffSidebarModeEnum.SideFixed && sidebar.open)) {
13-
return acc;
13+
return acc || false;
1414
}
1515

1616
if(sidebar.side === side){
17-
return sidebar.width;
17+
return true;
1818
} else {
1919
// This component is "stateless", its possible to have two open "under" sidebars.
2020
// As such, we defer to "left" being open by default.
2121
return acc;
2222
}
23-
}, 0);
23+
}, false);
24+

0 commit comments

Comments
 (0)