Skip to content

Commit 249b8f9

Browse files
xelaintgriest024
xelaint
and
griest024
authored
feat(daffio): support always showing sidebar header and footer (#3451)
Co-authored-by: Peter Lauck <[email protected]>
1 parent 71f5f6f commit 249b8f9

24 files changed

+160
-72
lines changed

‎apps/daffio/src/app/app.module.ts

-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import { environment } from '../environments/environment';
3030
import { DaffioMarketingFooterComponentModule } from './core/footer/marketing-footer/marketing-footer.module';
3131
import { DaffioSimpleFooterComponentModule } from './core/footer/simple-footer/simple-footer.module';
3232
import { daffioRouterDataServiceConfig } from './core/router/data-service-config';
33-
import { DaffioSidebarFooterComponentModule } from './core/sidebar/components/sidebar-footer/sidebar-footer.module';
3433
import { DaffioSidebarHeaderComponentModule } from './core/sidebar/components/sidebar-header/sidebar-header.module';
3534
import { TemplateModule } from './core/template/template.module';
3635

@@ -48,7 +47,6 @@ import { TemplateModule } from './core/template/template.module';
4847
EffectsModule.forRoot(),
4948
AppRoutingModule,
5049
DaffioSidebarHeaderComponentModule,
51-
DaffioSidebarFooterComponentModule,
5250
DaffioSimpleFooterComponentModule,
5351
DaffioMarketingFooterComponentModule,
5452
//Make sure this loads after Router and Store

‎apps/daffio/src/app/core/nav/docs-sidebar.provider.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { DaffSidebarRegistration } from '@daffodil/design/sidebar';
2+
3+
import { DAFFIO_NAV_SIDEBAR_ID } from './header/sidebar-id';
4+
import { DaffioNavSidebarBodyComponent } from './sidebar-body/component';
5+
import { DaffioSidebarHeaderComponent } from '../sidebar/components/sidebar-header/sidebar-header.component';
6+
7+
export const DAFF_DOCS_NAV_SIDEBAR_REGISTRATION: DaffSidebarRegistration = {
8+
id: DAFFIO_NAV_SIDEBAR_ID,
9+
header: DaffioSidebarHeaderComponent,
10+
body: DaffioNavSidebarBodyComponent,
11+
};

‎apps/daffio/src/app/core/nav/sidebar.provider.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { DaffSidebarRegistration } from '@daffodil/design/sidebar';
22

33
import { DAFFIO_NAV_SIDEBAR_ID } from './header/sidebar-id';
44
import { DaffioNavSidebarBodyComponent } from './sidebar-body/component';
5-
import { DaffioSidebarFooterComponent } from '../sidebar/components/sidebar-footer/sidebar-footer.component';
5+
import { DaffioMarketingSidebarFooterComponent } from '../sidebar/components/marketing/footer/footer.component';
66
import { DaffioSidebarHeaderComponent } from '../sidebar/components/sidebar-header/sidebar-header.component';
77

88
export const DAFF_NAV_SIDEBAR_REGISTRATION: DaffSidebarRegistration = {
99
id: DAFFIO_NAV_SIDEBAR_ID,
1010
header: DaffioSidebarHeaderComponent,
1111
body: DaffioNavSidebarBodyComponent,
12-
footer: DaffioSidebarFooterComponent,
12+
footer: DaffioMarketingSidebarFooterComponent,
1313
};

‎apps/daffio/src/app/core/sidebar/components/docs/footer/footer-theme.scss

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@use 'sass:map';
2+
@use 'theme' as daff-theme;
3+
4+
@mixin daffio-docs-sidebar-footer-theme($theme) {
5+
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
6+
$base: daff-theme.daff-map-get($theme, 'core', 'base');
7+
8+
.daffio-docs-sidebar-footer {
9+
border-top: 1px solid daff-theme.daff-illuminate($base, $neutral, 2);
10+
11+
&::after {
12+
background: daff-theme.daff-illuminate($base, $neutral, 2);
13+
}
14+
}
15+
}

‎apps/daffio/src/app/core/sidebar/components/docs/footer/footer.component.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<daff-sidebar-footer >
2+
<a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-docs-sidebar-footer">
3+
<span>GitHub</span>
4+
<fa-icon [icon]="faArrowUpRightFromSquare"></fa-icon>
5+
</a>
6+
</daff-sidebar-footer>

‎apps/daffio/src/app/core/sidebar/components/docs/footer/footer.component.scss

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@use 'utilities' as daff;
2+
3+
.daffio-docs-sidebar-footer {
4+
@include daff.clickable();
5+
display: flex;
6+
gap: 0.5rem;
7+
justify-content: center;
8+
font-weight: 500;
9+
padding: 0.75rem;
10+
text-decoration: none;
11+
position: relative;
12+
13+
&::after {
14+
content: '';
15+
position: absolute;
16+
height: 100%;
17+
width: 100%;
18+
top: 0;
19+
left: 0;
20+
opacity: 0;
21+
transition: opacity 300ms;
22+
z-index: 0;
23+
}
24+
25+
> * {
26+
z-index: 1;
27+
}
28+
29+
&:hover {
30+
&::after {
31+
opacity: 1;
32+
}
33+
}
34+
}

‎apps/daffio/src/app/core/sidebar/components/docs/footer/footer.component.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
} from '@angular/core';
5+
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
6+
import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
7+
8+
import { DaffSidebarFooterComponent } from '@daffodil/design/sidebar';
9+
10+
@Component({
11+
selector: 'daffio-docs-sidebar-footer',
12+
templateUrl: './footer.component.html',
13+
styleUrls: ['./footer.component.scss'],
14+
changeDetection: ChangeDetectionStrategy.OnPush,
15+
standalone: true,
16+
imports: [
17+
DaffSidebarFooterComponent,
18+
FaIconComponent,
19+
],
20+
})
21+
export class DaffioDocsSidebarFooterComponent {
22+
faArrowUpRightFromSquare = faArrowUpRightFromSquare;
23+
}

‎apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss ‎apps/daffio/src/app/core/sidebar/components/marketing/footer/footer-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
@use 'sass:map';
22
@use 'theme' as daff-theme;
33

4-
@mixin daffio-sidebar-footer-theme($theme) {
4+
@mixin daffio-marketing-sidebar-footer-theme($theme) {
55
$neutral: daff-theme.daff-map-get($theme, 'core', 'neutral');
66
$base: daff-theme.daff-map-get($theme, 'core', 'base');
77
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');
88
$primary: daff-theme.daff-map-get($theme, primary);
99

10-
.daffio-sidebar-footer {
10+
.daffio-marketing-sidebar-footer {
1111
background: daff-theme.daff-illuminate($base, $neutral, 2);
1212

1313
&:hover {

‎apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.html ‎apps/daffio/src/app/core/sidebar/components/marketing/footer/footer.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<daff-sidebar-footer>
2-
<a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-sidebar-footer">Get Started</a>
2+
<a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-marketing-sidebar-footer">Get Started</a>
33
</daff-sidebar-footer>

‎apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.scss ‎apps/daffio/src/app/core/sidebar/components/marketing/footer/footer.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use 'utilities' as daff;
22

3-
.daffio-sidebar-footer {
3+
.daffio-marketing-sidebar-footer {
44
@include daff.clickable();
55
display: block;
66
font-weight: 500;

‎apps/daffio/src/app/core/sidebar/components/marketing/footer/footer.component.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
} from '@angular/core';
5+
6+
import { DaffSidebarFooterComponent } from '@daffodil/design/sidebar';
7+
8+
@Component({
9+
selector: 'daffio-marketing-sidebar-footer',
10+
templateUrl: './footer.component.html',
11+
styleUrls: ['./footer.component.scss'],
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
standalone: true,
14+
imports: [
15+
DaffSidebarFooterComponent,
16+
],
17+
})
18+
export class DaffioMarketingSidebarFooterComponent { }

‎apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.ts

-13
This file was deleted.

‎apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.module.ts

-22
This file was deleted.

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import {
1313
import {
1414
daffSidebarIsFloatingMode,
1515
DaffSidebarModeEnum,
16-
DaffSidebarRegistration,
1716
} from '@daffodil/design/sidebar';
1817

18+
import { DaffioSidebarRegistration } from '../../registration/type';
1919
import { DaffioSidebarService } from '../../services/sidebar.service';
2020

2121
@Component({
@@ -29,7 +29,7 @@ export class DaffioSidebarViewportContainer implements OnInit {
2929
mode$: Observable<DaffSidebarModeEnum>;
3030
showSidebarHeader$: Observable<boolean>;
3131
showSidebarFooter$: Observable<boolean>;
32-
component$: Observable<DaffSidebarRegistration>;
32+
component$: Observable<DaffioSidebarRegistration>;
3333

3434
ngOnInit() {
3535
this.component$ = this.sidebarService.activeRegistration$;
@@ -39,13 +39,13 @@ export class DaffioSidebarViewportContainer implements OnInit {
3939
this.component$,
4040
this.mode$,
4141
]).pipe(
42-
map(([component, mode]) => component?.header && daffSidebarIsFloatingMode(mode)),
42+
map(([component, mode]) => component?.header && (component.alwaysShowHeader || daffSidebarIsFloatingMode(mode))),
4343
);
4444
this.showSidebarFooter$ = combineLatest([
4545
this.component$,
4646
this.mode$,
4747
]).pipe(
48-
map(([component, mode]) => component?.footer && daffSidebarIsFloatingMode(mode)),
48+
map(([component, mode]) => component?.footer && (component.alwaysShowFooter || daffSidebarIsFloatingMode(mode))),
4949
);
5050
}
5151

‎apps/daffio/src/app/core/sidebar/models/route.type.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import { Route } from '@angular/router';
22

3-
import {
4-
DaffSidebarModeEnum,
5-
DaffSidebarRegistration,
6-
} from '@daffodil/design/sidebar';
3+
import { DaffSidebarModeEnum } from '@daffodil/design/sidebar';
4+
5+
import { DaffioSidebarRegistration } from '../registration/type';
76

87
export interface DaffioRouteWithSidebars extends Route {
98
data?: Route['data'] & {
109
/**
1110
* A collection of sidebars available on the current page.
1211
*/
13-
daffioSidebars?: Record<DaffSidebarRegistration['id'], DaffSidebarRegistration>;
12+
daffioSidebars?: Record<DaffioSidebarRegistration['id'], DaffioSidebarRegistration>;
1413
/**
1514
* The sidebar that should be shown automatically (if any) when the viewport enters big tablet.
1615
*/
17-
daffioDockedSidebar?: DaffSidebarRegistration['id'];
16+
daffioDockedSidebar?: DaffioSidebarRegistration['id'];
1817
sidebarMode?: DaffSidebarModeEnum;
1918
};
2019
}

‎apps/daffio/src/app/core/sidebar/registration/type.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { DaffSidebarRegistration } from '@daffodil/design/sidebar';
2+
3+
export interface DaffioSidebarRegistration extends DaffSidebarRegistration {
4+
/**
5+
* Whether to show the sidebar header regardless of sidebar mode.
6+
*/
7+
alwaysShowHeader?: boolean;
8+
/**
9+
* Whether to show the sidebar footer regardless of sidebar mode.
10+
*/
11+
alwaysShowFooter?: boolean;
12+
}

‎apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:host {
2+
display: block;
3+
padding: 1rem 0;
4+
}

‎apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const DEFAULT_ROUTER_LINK_ACTIVE_CONFIG: RouterLinkActive['routerLinkActiveOptio
1818
@Component({
1919
selector: 'daffio-api-nav-list',
2020
templateUrl: './nav-list.component.html',
21+
styleUrl: './nav-list.component.scss',
2122
changeDetection: ChangeDetectionStrategy.OnPush,
2223
standalone: true,
2324
imports: [

‎apps/daffio/src/app/docs/api/sidebar/provider.ts

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import { DaffioApiNavListSidebarContainer } from './component';
2-
import { DaffioSidebarFooterComponent } from '../../../core/sidebar/components/sidebar-footer/sidebar-footer.component';
3-
import { DaffioSidebarHeaderComponent } from '../../../core/sidebar/components/sidebar-header/sidebar-header.component';
4-
import { DAFFIO_DOCS_LIST_SIDEBAR_ID } from '../../containers/docs-list/sidebar.provider';
2+
import { DaffioSidebarRegistration } from '../../../core/sidebar/registration/type';
3+
import { DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION } from '../../containers/docs-list/sidebar.provider';
54

6-
export const DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION = {
7-
id: DAFFIO_DOCS_LIST_SIDEBAR_ID,
8-
header: DaffioSidebarHeaderComponent,
5+
export const DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION: DaffioSidebarRegistration = {
6+
...DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION,
97
body: DaffioApiNavListSidebarContainer,
10-
footer: DaffioSidebarFooterComponent,
118
};

‎apps/daffio/src/app/docs/components/docs-list/docs-list.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
:host {
22
display: block;
3-
padding: 1rem 0 0;
3+
padding: 1rem 0;
44
}

‎apps/daffio/src/app/docs/containers/docs-list/sidebar.provider.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { DaffioDocsListContainer } from './docs-list.component';
2-
import { DaffioSidebarFooterComponent } from '../../../core/sidebar/components/sidebar-footer/sidebar-footer.component';
2+
import { DaffioDocsSidebarFooterComponent } from '../../../core/sidebar/components/docs/footer/footer.component';
33
import { DaffioSidebarHeaderComponent } from '../../../core/sidebar/components/sidebar-header/sidebar-header.component';
4+
import { DaffioSidebarRegistration } from '../../../core/sidebar/registration/type';
45

56
export const DAFFIO_DOCS_LIST_SIDEBAR_ID = 'daffioDocsList';
67

7-
export const DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION = {
8+
export const DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION: DaffioSidebarRegistration = {
89
id: DAFFIO_DOCS_LIST_SIDEBAR_ID,
910
header: DaffioSidebarHeaderComponent,
1011
body: DaffioDocsListContainer,
11-
footer: DaffioSidebarFooterComponent,
12+
footer: DaffioDocsSidebarFooterComponent,
13+
alwaysShowFooter: true,
1214
};

‎apps/daffio/src/app/docs/design/containers/docs-list/sidebar.provider.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1+
import { DaffioSidebarRegistration } from 'apps/daffio/src/app/core/sidebar/registration/type';
2+
13
import { DaffioDocsDesignListContainer } from './docs-list.component';
2-
import { DaffioSidebarFooterComponent } from '../../../../core/sidebar/components/sidebar-footer/sidebar-footer.component';
3-
import { DaffioSidebarHeaderComponent } from '../../../../core/sidebar/components/sidebar-header/sidebar-header.component';
4+
import { DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION } from '../../../containers/docs-list/sidebar.provider';
45

56
export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_ID = 'daffioDocsList';
67

7-
export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION = {
8-
id: DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_ID,
9-
header: DaffioSidebarHeaderComponent,
8+
export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION: DaffioSidebarRegistration = {
9+
...DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION,
1010
body: DaffioDocsDesignListContainer,
11-
footer: DaffioSidebarFooterComponent,
1211
};

‎apps/daffio/src/app/docs/docs-routing.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
import { DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION } from './containers/docs-list/sidebar.provider';
1515
import { DaffioSimpleFooterComponent } from '../core/footer/simple-footer/simple-footer.component';
1616
import { DaffioDocsNavContainer } from '../core/nav/docs/docs.component';
17+
import { DAFF_DOCS_NAV_SIDEBAR_REGISTRATION } from '../core/nav/docs-sidebar.provider';
1718
import { DaffioRouterNamedViewsEnum } from '../core/router/named-views/models/named-views.enum';
1819
import { DaffioRoute } from '../core/router/route.type';
1920

@@ -32,6 +33,7 @@ export const docsRoutes: Routes = [
3233
{ url: `/${DAFF_DOCS_PATH}/${DAFF_DOCS_DESIGN_PATH}`, title: 'Design' },
3334
],
3435
daffioSidebars: {
36+
[DAFF_DOCS_NAV_SIDEBAR_REGISTRATION.id]: DAFF_DOCS_NAV_SIDEBAR_REGISTRATION,
3537
[DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION.id]: DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION,
3638
},
3739
},

‎apps/daffio/src/scss/component-themes.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
@use '../app/docs/api/components/api-list-section/api-list-section-theme' as api-list-section;
88
@use '../app/docs/api/components/api-package/api-package-theme' as api-package;
99
@use '../app/newsletter/newsletter-theme' as newsletter;
10-
@use '../app/core/sidebar/components/sidebar-footer/sidebar-footer-theme' as sidebar-footer;
10+
@use '../app/core/sidebar/components/marketing/footer/footer-theme' as marketing-sidebar-footer;
11+
@use '../app/core/sidebar/components/docs/footer/footer-theme' as docs-sidebar-footer;
1112
@use '../app/core/header/components/header/header-theme' as header;
1213

1314
@mixin component-themes($theme) {
@@ -20,6 +21,7 @@
2021
@include api-list-section.daffio-api-list-section-theme($theme);
2122
@include api-package.daffio-api-package-theme($theme);
2223
@include newsletter.daffio-newsletter-theme($theme);
23-
@include sidebar-footer.daffio-sidebar-footer-theme($theme);
2424
@include header.daffio-header-theme($theme);
25+
@include marketing-sidebar-footer.daffio-marketing-sidebar-footer-theme($theme);
26+
@include docs-sidebar-footer.daffio-docs-sidebar-footer-theme($theme);
2527
}

0 commit comments

Comments
 (0)