Skip to content

Commit

Permalink
feat(daffio): update named views to pass in options for sidebar heade…
Browse files Browse the repository at this point in the history
…r, content, and footer, and update usages in sidebars
  • Loading branch information
xelaint committed Jan 17, 2024
1 parent 3966654 commit e2eaad7
Show file tree
Hide file tree
Showing 32 changed files with 237 additions and 84 deletions.
9 changes: 6 additions & 3 deletions apps/daffio/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
"nx": {
"targets": {
"build": {
"outputs": ["{workspaceRoot}/dist/apps/daffio"]
"outputs": [
"{workspaceRoot}/dist/apps/daffio"
]
}
}
},
Expand Down Expand Up @@ -39,6 +41,7 @@
"@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
"@daffodil/design": "0.0.0-PLACEHOLDER",
"@daffodil/tools-dgeni": "0.0.0-PLACEHOLDER",
"@daffodil/theme-switch": "0.0.0-PLACEHOLDER"
"@daffodil/theme-switch": "0.0.0-PLACEHOLDER",
"@ngrx/component": "0.0.0-PLACEHOLDER"
}
}
}
3 changes: 2 additions & 1 deletion apps/daffio/src/app/api/api.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { DaffioDocsApiRoutingModule } from './api-routing.module';
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 { DaffioDocsSidebarComponentModule } from '../core/sidebar/components/docs-sidebar/docs-sidebar.module';
import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer.module';
import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.module';

Expand All @@ -18,7 +19,7 @@ import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.modu
DaffioDocsApiRoutingModule,
DaffioApiListModule,
DaffioDocViewerModule,
DaffioDocsSidebarModule,
DaffioDocsSidebarComponentModule,

DaffContainerModule,
],
Expand Down
12 changes: 8 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/docs-sidebar-content/docs-sidebar-content.component';
import { DaffioMarketingSidebarContentComponent } from './core/sidebar/components/marketing-sidebar/marketing-sidebar-content/marketing-sidebar-content.component';
import { DaffioMarketingSidebarFooterComponent } from './core/sidebar/components/marketing-sidebar/marketing-sidebar-footer/marketing-sidebar-footer.component';
import { DaffioMarketingSidebarHeaderComponent } from './core/sidebar/components/marketing-sidebar/marketing-sidebar-header/marketing-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]: DaffioMarketingSidebarHeaderComponent,
[DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioMarketingSidebarContentComponent,
[DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioMarketingSidebarFooterComponent,
},
},
},
Expand All @@ -42,7 +46,7 @@ export const appRoutes: Routes = [
data: {
daffNamedViews: {
[DaffioRouterNamedViewsEnum.NAV]: DaffioDocsHeaderContainer,
[DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioDocsSidebarComponent,
[DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioDocsSidebarContentComponent,
},
},
},
Expand Down
6 changes: 5 additions & 1 deletion apps/daffio/src/app/core/sidebar/actions/sidebar.actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,14 @@ export enum SidebarActionTypes {

export class ToggleSidebar implements Action {
readonly type = SidebarActionTypes.ToggleSidebarAction;

constructor(public payload?: string ){}
}

export class OpenSidebar implements Action {
readonly type = SidebarActionTypes.OpenSidebarAction;

constructor(public payload?: string){}
}

export class CloseSidebar implements Action {
Expand All @@ -33,7 +37,7 @@ export class SetSidebarVisibility implements Action {
export class SetSidebarState implements Action {
readonly type = SidebarActionTypes.SetSidebarStateAction;

constructor(public payload: { mode?: DaffSidebarMode; open?: boolean }){}
constructor(public payload: { mode?: DaffSidebarMode; open?: boolean; kind?: string }){}
}

export class SetSidebarMode implements Action {
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
@@ -1,23 +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 { DaffioDocsSidebarComponent } from './docs-sidebar.component';
import { DaffioDocsSidebarContentComponent } from './docs-sidebar-content/docs-sidebar-content.component';

@NgModule({
imports: [
CommonModule,
RouterModule,

FontAwesomeModule,
DaffListModule,
DaffButtonModule,
],
declarations: [
DaffioDocsSidebarComponent,
DaffioDocsSidebarContentComponent,
],
exports: [
DaffioDocsSidebarComponent,
DaffioDocsSidebarContentComponent,
],
})
export class DaffioDocsSidebarComponentModule { }
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
@@ -0,0 +1 @@
<a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-marketing-sidebar-footer">Get Started</a>
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@use 'utilities' as daff;

.daffio-marketing-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-marketing-sidebar-footer',
templateUrl: './marketing-sidebar-footer.component.html',
styleUrls: ['./marketing-sidebar-footer.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioMarketingSidebarFooterComponent {
}
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-marketing-sidebar-header',
templateUrl: './marketing-sidebar-header.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioMarketingSidebarHeaderComponent {
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,17 @@
@use 'sass:map';
@use 'theme' as daff-theme;

@mixin daffio-marketing-sidebar-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-marketing-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
@@ -1,23 +1,35 @@
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 { DaffioMarketingSidebarComponent } from './marketing-sidebar.component';
import { DaffioMarketingSidebarContentComponent } from './marketing-sidebar-content/marketing-sidebar-content.component';
import { DaffioMarketingSidebarFooterComponent } from './marketing-sidebar-footer/marketing-sidebar-footer.component';
import { DaffioMarketingSidebarHeaderComponent } from './marketing-sidebar-header/marketing-sidebar-header.component';

@NgModule({
imports: [
CommonModule,
RouterModule,

FontAwesomeModule,
DaffListModule,
DaffButtonModule,
DaffSidebarModule,
],
declarations: [
DaffioMarketingSidebarComponent,
DaffioMarketingSidebarHeaderComponent,
DaffioMarketingSidebarContentComponent,
DaffioMarketingSidebarFooterComponent,
],
exports: [
DaffioMarketingSidebarComponent,
DaffioMarketingSidebarHeaderComponent,
DaffioMarketingSidebarContentComponent,
DaffioMarketingSidebarFooterComponent,
],
})
export class DaffioMarketingSidebarComponentModule { }
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
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,19 @@ import {
Component,
OnInit,
} from '@angular/core';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import {
Store,
select,
} from '@ngrx/store';
import { DaffioDoc } from 'apps/daffio/src/app/docs/models/doc';
import { DaffioDocsService } from 'apps/daffio/src/app/docs/services/docs.service';
import { Observable } from 'rxjs';
import {
map,
Observable,
} from 'rxjs';

import { DaffSidebarMode } from '@daffodil/design/sidebar';
import { DaffRouterNamedViewService } from '@daffodil/router';

import { DaffioGuideList } from '../../../../docs/models/guide-list';
import { DaffioRouterNamedViewsEnum } from '../../../../named-views/models/named-views.enum';
Expand All @@ -30,21 +33,28 @@ import * as fromDaffioSidebar from '../../reducers/index';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioSidebarViewportContainer implements OnInit {
faTimes = faTimes;
readonly sidebarNamedView = DaffioRouterNamedViewsEnum.SIDEBAR;
readonly sidebarHeaderNamedView = DaffioRouterNamedViewsEnum.SIDEBARHEADER;
readonly sidebarContentNamedView = DaffioRouterNamedViewsEnum.SIDEBARCONTENT;
readonly sidebarFooterNamedView = DaffioRouterNamedViewsEnum.SIDEBARFOOTER;

showSidebar$: Observable<boolean>;
sidebarContents$: Observable<DaffioGuideList>;
mode$: Observable<DaffSidebarMode>;
showSidebarHeader$: Observable<boolean>;
showSidebarFooter$: Observable<boolean>;

ngOnInit() {
this.sidebarContents$ = this.docService.getGuideList();
this.showSidebar$ = this.store.pipe(select(fromDaffioSidebar.selectShowSidebar));
this.mode$ = this.store.pipe(select(fromDaffioSidebar.selectSidebarMode));
this.showSidebarHeader$ = this.namedViewService.namedViews$.pipe(map((namedViews) => !!namedViews[this.sidebarHeaderNamedView]));
this.showSidebarFooter$ = this.namedViewService.namedViews$.pipe(map((namedViews) => !!namedViews[this.sidebarFooterNamedView]));
}

constructor(private store: Store<fromDaffioSidebar.State>,
private docService: DaffioDocsService<DaffioDoc, DaffioGuideList>) { }
constructor(
private store: Store<fromDaffioSidebar.State>,
private docService: DaffioDocsService<DaffioDoc, DaffioGuideList>,
private namedViewService: DaffRouterNamedViewService) { }

close() {
this.store.dispatch(new CloseSidebar());
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export class DaffioSidebarRoutingModeEffects {

changeModeWhenVisitingConfiguredRoute$ = createEffect(() => (): Observable<Action> => combineLatest(
this.actions$.pipe<RouterNavigatedAction>(ofType(ROUTER_NAVIGATED)),
this.breakpointsObserver.observe(DaffBreakpoints.TABLET),
this.breakpointsObserver.observe(DaffBreakpoints.BIG_TABLET),
).pipe(
map(([action, state]) => {
const mode = computeDeepestSidebarMode(action.payload.routerState.root);
Expand Down
Loading

0 comments on commit e2eaad7

Please sign in to comment.