Skip to content

Commit

Permalink
feat(daffio): update named views to specify sidebar header, content, …
Browse files Browse the repository at this point in the history
…and footer separately, and update usages (#2724)

Co-authored-by: Peter Lauck <[email protected]>
  • Loading branch information
xelaint and griest024 committed Jan 19, 2024
1 parent def9f5a commit 891a730
Show file tree
Hide file tree
Showing 32 changed files with 269 additions and 104 deletions.
1 change: 1 addition & 0 deletions apps/daffio/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"@daffodil/core": "0.0.0-PLACEHOLDER",
"@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
"@daffodil/design": "0.0.0-PLACEHOLDER",
"@daffodil/router": "0.0.0-PLACEHOLDER",
"@daffodil/tools-dgeni": "0.0.0-PLACEHOLDER",
"@daffodil/theme-switch": "0.0.0-PLACEHOLDER"
}
Expand Down
2 changes: 0 additions & 2 deletions apps/daffio/src/app/api/api.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { DaffioApiListModule } from './components/api-list/api-list.module';
import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer.module';
import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.module';

@NgModule({
imports: [
Expand All @@ -18,7 +17,6 @@ import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.modu
DaffioDocsApiRoutingModule,
DaffioApiListModule,
DaffioDocViewerModule,
DaffioDocsSidebarModule,

DaffContainerModule,
],
Expand Down
14 changes: 10 additions & 4 deletions apps/daffio/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import { DaffRouteWithNamedViews } from '@daffodil/router';

import { DaffioDocsHeaderContainer } from './core/header/containers/docs-header/docs-header.component';
import { DaffioMarketingHeaderContainer } from './core/header/containers/marketing-header/marketing-header.component';
import { DaffioDocsSidebarComponent } from './core/sidebar/components/docs-sidebar/docs-sidebar.component';
import { DaffioMarketingSidebarComponent } from './core/sidebar/components/marketing-sidebar/marketing-sidebar.component';
import { DaffioDocsSidebarContentComponent } from './core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component';
import { DaffioMarketingSidebarContentComponent } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component';
import { DaffioSidebarFooterComponent } from './core/sidebar/components/sidebar-footer/sidebar-footer.component';
import { DaffioSidebarHeaderComponent } from './core/sidebar/components/sidebar-header/sidebar-header.component';
import { TemplateComponent } from './core/template/template.component';
import { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enum';

Expand All @@ -28,7 +30,9 @@ export const appRoutes: Routes = [
data: {
daffNamedViews: {
[DaffioRouterNamedViewsEnum.NAV]: DaffioMarketingHeaderContainer,
[DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioMarketingSidebarComponent,
[DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent,
[DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioMarketingSidebarContentComponent,
[DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent,
},
},
},
Expand All @@ -42,7 +46,9 @@ export const appRoutes: Routes = [
data: {
daffNamedViews: {
[DaffioRouterNamedViewsEnum.NAV]: DaffioDocsHeaderContainer,
[DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioDocsSidebarComponent,
[DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent,
[DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioDocsSidebarContentComponent,
[DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent,
},
},
},
Expand Down
12 changes: 8 additions & 4 deletions apps/daffio/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@ import { AppRoutingModule } from './app-routing.module';
import { DaffioAppComponent } from './app.component';
import { DaffioDocsHeaderContainerModule } from './core/header/containers/docs-header/docs-header.module';
import { DaffioMarketingHeaderContainerModule } from './core/header/containers/marketing-header/marketing-header.module';
import { DaffioDocsSidebarComponentModule } from './core/sidebar/components/docs-sidebar/docs-sidebar.module';
import { DaffioMarketingSidebarComponentModule } from './core/sidebar/components/marketing-sidebar/marketing-sidebar.module';
import { DaffioDocsSidebarContentComponentModule } from './core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module';
import { DaffioMarketingSidebarContentComponentModule } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.module';
import { DaffioSidebarFooterComponentModule } from './core/sidebar/components/sidebar-footer/sidebar-footer.module';
import { DaffioSidebarHeaderComponentModule } from './core/sidebar/components/sidebar-header/sidebar-header.module';
import { TemplateModule } from './core/template/template.module';
import { environment } from '../environments/environment';

Expand All @@ -34,8 +36,10 @@ import { environment } from '../environments/environment';
AppRoutingModule,
DaffioMarketingHeaderContainerModule,
DaffioDocsHeaderContainerModule,
DaffioMarketingSidebarComponentModule,
DaffioDocsSidebarComponentModule,
DaffioMarketingSidebarContentComponentModule,
DaffioDocsSidebarContentComponentModule,
DaffioSidebarHeaderComponentModule,
DaffioSidebarFooterComponentModule,

//Make sure this loads after Router and Store
StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import {
} from '@angular/core';

@Component({
selector: 'daffio-docs-sidebar',
templateUrl: './docs-sidebar.component.html',
styleUrls: ['./docs-sidebar.component.scss'],
selector: 'daffio-docs-sidebar-content',
templateUrl: './docs-sidebar-content.component.html',
styleUrls: ['./docs-sidebar-content.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioDocsSidebarComponent {
export class DaffioDocsSidebarContentComponent {
links: any[] = [
{ path: '/api', title: 'API Index' },
];
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { DaffButtonModule } from '@daffodil/design/button';
import { DaffListModule } from '@daffodil/design/list';

import { DaffioDocsSidebarContentComponent } from './docs-sidebar-content.component';

@NgModule({
imports: [
CommonModule,
RouterModule,

FontAwesomeModule,
DaffListModule,
DaffButtonModule,
],
declarations: [
DaffioDocsSidebarContentComponent,
],
exports: [
DaffioDocsSidebarContentComponent,
],
})
export class DaffioDocsSidebarContentComponentModule { }
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import {
} from '@angular/core';

@Component({
selector: 'daffio-marketing-sidebar',
templateUrl: './marketing-sidebar.component.html',
styleUrls: ['./marketing-sidebar.component.scss'],
selector: 'daffio-marketing-sidebar-content',
templateUrl: './marketing-sidebar-content.component.html',
styleUrls: ['./marketing-sidebar-content.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioMarketingSidebarComponent {
export class DaffioMarketingSidebarContentComponent {
links: any[] = [
{ path: '/why-pwa', title: 'Why PWA' },
{ path: '/api', title: 'Docs' },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router';

import { DaffListModule } from '@daffodil/design/list';

import { DaffioDocsSidebarComponent } from './docs-sidebar.component';
import { DaffioMarketingSidebarContentComponent } from './marketing-sidebar-content.component';

@NgModule({
imports: [
Expand All @@ -14,10 +14,10 @@ import { DaffioDocsSidebarComponent } from './docs-sidebar.component';
DaffListModule,
],
declarations: [
DaffioDocsSidebarComponent,
DaffioMarketingSidebarContentComponent,
],
exports: [
DaffioDocsSidebarComponent,
DaffioMarketingSidebarContentComponent,
],
})
export class DaffioDocsSidebarComponentModule { }
export class DaffioMarketingSidebarContentComponentModule { }

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
@use 'sass:map';
@use 'theme' as daff-theme;

@mixin daffio-sidebar-footer-theme($theme) {
$gray: daff-theme.daff-map-deep-get($theme, 'core.gray');
$base: daff-theme.daff-map-deep-get($theme, 'core.base');
$base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast');
$primary: map.get($theme, primary);

.daffio-sidebar-footer {
background: daff-theme.daff-illuminate($base, $gray, 2);

&:hover {
background: daff-theme.daff-illuminate($base, $gray, 3);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-sidebar-footer">Get Started</a>
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@use 'utilities' as daff;

.daffio-sidebar-footer {
@include daff.clickable();
display: block;
font-weight: 500;
padding: 16px;
text-align: center;
text-decoration: none;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {
ChangeDetectionStrategy,
Component,
} from '@angular/core';

@Component({
selector: 'daffio-sidebar-footer',
templateUrl: './sidebar-footer.component.html',
styleUrls: ['./sidebar-footer.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioSidebarFooterComponent {
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { DaffioSidebarFooterComponent } from './sidebar-footer.component';

@NgModule({
imports: [
CommonModule,
RouterModule,
],
declarations: [
DaffioSidebarFooterComponent,
],
exports: [
DaffioSidebarFooterComponent,
],
})
export class DaffioSidebarFooterComponentModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<button daff-icon-button color="theme-contrast" daffSidebarHeaderAction (click)="close()">
<fa-icon [icon]="faTimes"></fa-icon>
</button>
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import {
ChangeDetectionStrategy,
Component,
} from '@angular/core';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { Store } from '@ngrx/store';

import { CloseSidebar } from '../../actions/sidebar.actions';
import * as fromDaffioSidebar from '../../reducers/index';

@Component({
selector: 'daffio-sidebar-header',
templateUrl: './sidebar-header.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioSidebarHeaderComponent {
faTimes = faTimes;

constructor(private store: Store<fromDaffioSidebar.State>){}

close() {
this.store.dispatch(new CloseSidebar());
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { DaffButtonModule } from '@daffodil/design/button';
import { DaffListModule } from '@daffodil/design/list';
import { DaffSidebarModule } from '@daffodil/design/sidebar';

import { DaffioSidebarHeaderComponent } from './sidebar-header.component';

@NgModule({
imports: [
CommonModule,
RouterModule,

FontAwesomeModule,
DaffListModule,
DaffButtonModule,
DaffSidebarModule,
],
declarations: [
DaffioSidebarHeaderComponent,
],
exports: [
DaffioSidebarHeaderComponent,
],
})
export class DaffioSidebarHeaderComponentModule { }
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<daff-sidebar-viewport (backdropClicked)="close()">
<daff-sidebar class="daffio-sidebar" [mode]="mode$ | async" [open]="showSidebar$ | async" (escapePressed)="close()">
<daff-sidebar-header>
<button daff-icon-button color="theme-contrast" daffSidebarHeaderAction (click)="close()">
<fa-icon [icon]="faTimes"></fa-icon>
</button>
<daff-sidebar-header *ngIf="showSidebarHeader$ | async">
<ng-container [daffRouterNamedViewOutlet]="sidebarHeaderNamedView"></ng-container>
</daff-sidebar-header>
<ng-container [daffRouterNamedViewOutlet]="sidebarNamedView"></ng-container>
<daff-sidebar-footer>
<a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-sidebar-viewport__get-started">Get Started</a>
<ng-container [daffRouterNamedViewOutlet]="sidebarContentNamedView"></ng-container>
<daff-sidebar-footer *ngIf="showSidebarFooter$ | async">
<ng-container [daffRouterNamedViewOutlet]="sidebarFooterNamedView"></ng-container>
</daff-sidebar-footer>
</daff-sidebar>
<ng-container daff-sidebar-viewport-nav>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
.daffio-sidebar-viewport {
&__get-started {
display: block;
font-weight: 500;
padding: 16px;
text-align: center;
text-decoration: none;
}
}
.daffio-sidebar {
max-width: 290px;
width: 100%;
border-right: 1px solid rgb(var(--daff-theme-contrast-rgb), 0.1);
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
StoreModule,
combineReducers,
} from '@ngrx/store';
import { DaffioGuidesNavModule } from 'apps/daffio/src/app/guides/components/guides-nav/guides-nav.module';
import { cold } from 'jasmine-marbles';

import {
Expand Down Expand Up @@ -47,7 +46,6 @@ describe('DaffioSidebarViewportContainer', () => {
RouterTestingModule,
NoopAnimationsModule,
DaffSidebarModule,
DaffioGuidesNavModule,
HttpClientTestingModule,
],
declarations: [
Expand Down
Loading

0 comments on commit 891a730

Please sign in to comment.