-
-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(design-land): clean up design-land sidebar and template structure
- Loading branch information
Showing
17 changed files
with
363 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1 @@ | ||
| <daff-sidebar-viewport class="design-land__viewport" (backdropClicked)="toggleOpen()"> | ||
| <daff-sidebar class="design-land__sidebar" [mode]="mode$ | async" [open]="open"> | ||
| <design-land-nav></design-land-nav> | ||
| </daff-sidebar> | ||
| <nav daff-sidebar-viewport-nav daff-navbar> | ||
| <button daff-icon-button (click)="toggleOpen()" aria-label="Open Menu"> | ||
| <fa-icon [icon]="faBars"></fa-icon> | ||
| </button> | ||
| <daff-theme-switch-button class="design-land__theme-switch"></daff-theme-switch-button> | ||
| </nav> | ||
| <div class="design-land__content"> | ||
| <daff-article> | ||
| <router-outlet></router-outlet> | ||
| </daff-article> | ||
| </div> | ||
| </daff-sidebar-viewport> | ||
| <router-outlet></router-outlet> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +0,0 @@ | ||
| :host { | ||
| --daff-sidebar-side-fixed-top-shift: 64px; | ||
| } | ||
|
|
||
| .design-land { | ||
|
|
||
| &__theme-switch { | ||
| margin-left: auto; | ||
| } | ||
|
|
||
| &__content { | ||
| padding: 24px 48px 48px; | ||
| } | ||
| } | ||
|
|
||
| daff-link-set { | ||
| margin: 0 0 24px 0; | ||
|
|
||
| &:last-child { | ||
| margin: 0; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport-theme.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| @use 'sass:map'; | ||
| @use 'theme' as daff-theme; | ||
|
|
||
| @mixin sidebar-viewport-theme($theme) { | ||
| $gray: daff-theme.daff-map-deep-get($theme, 'core.gray'); | ||
| $base: daff-theme.daff-map-deep-get($theme, 'core.base'); | ||
|
|
||
| .design-land-sidebar-viewport { | ||
| &__sidebar { | ||
| border-right: 1px solid daff-theme.daff-illuminate($base, $gray, 2); | ||
| } | ||
|
|
||
| &__get-started-button { | ||
| background: daff-theme.daff-illuminate($base, $gray, 1); | ||
|
|
||
| &:hover { | ||
| background: daff-theme.daff-illuminate($base, $gray, 2); | ||
| } | ||
| } | ||
| } | ||
| } |
19 changes: 19 additions & 0 deletions
19
apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <daff-sidebar-viewport class="design-land-sidebar-viewport" (backdropClicked)="toggleOpen()"> | ||
| <daff-sidebar class="design-land-sidebar-viewport__sidebar" [mode]="mode$ | async" [open]="open"> | ||
| <design-land-nav></design-land-nav> | ||
| <daff-sidebar-footer> | ||
| <a href="https://github.com/graycoreio/daffodil" target="_blank" class="design-land-sidebar-viewport__get-started-button">Get Started</a> | ||
| </daff-sidebar-footer> | ||
| </daff-sidebar> | ||
| <nav daff-sidebar-viewport-nav daff-navbar> | ||
| <button daff-icon-button color="theme-contrast" (click)="toggleOpen()" [attr.aria-label]="ariaLabel"> | ||
| <fa-icon [icon]="faBars"></fa-icon> | ||
| </button> | ||
| <daff-theme-switch-button class="design-land-sidebar-viewport__theme-switch"></daff-theme-switch-button> | ||
| </nav> | ||
| <div class="design-land-sidebar-viewport__content"> | ||
| <daff-article> | ||
| <ng-content></ng-content> | ||
| </daff-article> | ||
| </div> | ||
| </daff-sidebar-viewport> |
31 changes: 31 additions & 0 deletions
31
apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| @use 'utilities' as daff; | ||
|
|
||
| :host { | ||
| --daff-sidebar-side-fixed-top-shift: 64px; | ||
| } | ||
|
|
||
| .design-land-sidebar-viewport { | ||
| &__theme-switch { | ||
| margin-left: auto; | ||
| } | ||
|
|
||
| &__content { | ||
| padding: 24px; | ||
|
|
||
| @include daff.breakpoint(mobile) { | ||
| padding: 48px; | ||
| } | ||
| } | ||
|
|
||
| &__sidebar { | ||
| width: 288px; | ||
| } | ||
|
|
||
| &__get-started-button { | ||
| display: block; | ||
| font-weight: 500; | ||
| padding: 16px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| } | ||
| } |
56 changes: 56 additions & 0 deletions
56
apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { HttpClientTestingModule } from '@angular/common/http/testing'; | ||
| import { | ||
| ComponentFixture, | ||
| TestBed, | ||
| waitForAsync, | ||
| } from '@angular/core/testing'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { NoopAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { RouterTestingModule } from '@angular/router/testing'; | ||
| import { DaffioGuidesNavModule } from 'apps/daffio/src/app/guides/components/guides-nav/guides-nav.module'; | ||
|
|
||
| import { | ||
| DaffSidebarModule, | ||
| DaffSidebarViewportComponent, | ||
| DaffSidebarComponent, | ||
| } from '@daffodil/design'; | ||
|
|
||
| import { DesignLandSidebarViewportComponent } from './sidebar-viewport.component'; | ||
|
|
||
| describe('DesignLandSidebarViewportComponent', () => { | ||
| let component: DesignLandSidebarViewportComponent; | ||
| let fixture: ComponentFixture<DesignLandSidebarViewportComponent>; | ||
|
|
||
| let daffSidebarViewport: DaffSidebarViewportComponent; | ||
| let daffSidebar: DaffSidebarComponent; | ||
|
|
||
|
|
||
| beforeEach(waitForAsync(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [ | ||
| RouterTestingModule, | ||
| NoopAnimationsModule, | ||
| DaffSidebarModule, | ||
| DaffioGuidesNavModule, | ||
| HttpClientTestingModule, | ||
| ], | ||
| declarations: [ | ||
| DesignLandSidebarViewportComponent, | ||
| ], | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(DesignLandSidebarViewportComponent); | ||
| component = fixture.componentInstance; | ||
|
|
||
| fixture.detectChanges(); | ||
| daffSidebar = fixture.debugElement.query(By.css('daff-sidebar')).componentInstance; | ||
| daffSidebarViewport = fixture.debugElement.query(By.css('daff-sidebar-viewport')).componentInstance; | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
46 changes: 46 additions & 0 deletions
46
apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { BreakpointObserver } from '@angular/cdk/layout'; | ||
| import { | ||
| ChangeDetectionStrategy, | ||
| Component, | ||
| Input, | ||
| } from '@angular/core'; | ||
| import { faBars } from '@fortawesome/free-solid-svg-icons'; | ||
| import { | ||
| map, | ||
| Observable, | ||
| } from 'rxjs'; | ||
|
|
||
| import { | ||
| DaffBreakpoints, | ||
| DaffSidebarMode, | ||
| DaffSidebarModeEnum, | ||
| } from '@daffodil/design'; | ||
|
|
||
| @Component({ | ||
| selector: 'design-land-sidebar-viewport', | ||
| templateUrl: './sidebar-viewport.component.html', | ||
| styleUrls: ['./sidebar-viewport.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class DesignLandSidebarViewportComponent { | ||
| faBars = faBars; | ||
|
|
||
| public mode$: Observable<DaffSidebarMode>; | ||
|
|
||
| public open = false; | ||
|
|
||
| constructor(private breakpoint: BreakpointObserver) { | ||
| this.open = this.breakpoint.isMatched(DaffBreakpoints.BIG_TABLET); | ||
| this.mode$ = this.breakpoint.observe(DaffBreakpoints.BIG_TABLET).pipe( | ||
| map((match) => match.matches ? DaffSidebarModeEnum.SideFixed : DaffSidebarModeEnum.Under), | ||
| ); | ||
| } | ||
|
|
||
| toggleOpen() { | ||
| this.open = !this.open; | ||
| } | ||
|
|
||
| get ariaLabel() { | ||
| return this.open ? 'close docs menu' : 'open docs menu'; | ||
| } | ||
| } |
Oops, something went wrong.