From 3b972877583721c1c8c40e9d63fc4ca30b3f7cd3 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Sun, 30 May 2021 22:11:25 +0300 Subject: [PATCH] refactor(docs-infra): minor refactorings/style changes (#42396) This commit includes some minor refactorings and style changes as a follow-up to PR #41129. (The changes were minor enough that didn't warrant blocking the PR.) PR Close #42396 --- aio/src/app/app.module.ts | 6 +-- .../theme-toggle.component.spec.ts | 42 +++++++++---------- aio/src/styles/0-base/_typography-theme.scss | 9 ++-- .../_marketing-layout-theme.scss | 4 -- .../marketing-layout/_marketing-layout.scss | 4 ++ .../styles/1-layouts/top-menu/_top-menu.scss | 28 ++++++------- 6 files changed, 44 insertions(+), 49 deletions(-) diff --git a/aio/src/app/app.module.ts b/aio/src/app/app.module.ts index db5ffb6e88..37c7be96d8 100644 --- a/aio/src/app/app.module.ts +++ b/aio/src/app/app.module.ts @@ -39,10 +39,10 @@ import { WindowToken, windowProvider } from 'app/shared/window'; import { CustomElementsModule } from 'app/custom-elements/custom-elements.module'; import { SharedModule } from 'app/shared/shared.module'; +import { ThemeToggleComponent } from 'app/shared/theme-picker/theme-toggle.component'; import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module'; -import {environment} from '../environments/environment'; -import { ThemeToggleComponent } from './shared/theme-picker/theme-toggle.component'; +import { environment } from '../environments/environment'; // These are the hardcoded inline svg sources to be used by the `` component. // tslint:disable: max-line-length @@ -171,7 +171,7 @@ export const svgIconProviders = [ SearchBoxComponent, NotificationComponent, TopMenuComponent, - ThemeToggleComponent + ThemeToggleComponent, ], providers: [ Deployment, diff --git a/aio/src/app/shared/theme-picker/theme-toggle.component.spec.ts b/aio/src/app/shared/theme-picker/theme-toggle.component.spec.ts index 21b8312639..0dab1fc06c 100644 --- a/aio/src/app/shared/theme-picker/theme-toggle.component.spec.ts +++ b/aio/src/app/shared/theme-picker/theme-toggle.component.spec.ts @@ -1,5 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; import { ThemeStorage, ThemeToggleComponent } from './theme-toggle.component'; @@ -7,18 +6,18 @@ class FakeThemeStorage implements ThemeStorage { fakeStorage: string | null = null; getThemePreference(): string | null { - return this.fakeStorage; + return this.fakeStorage; } setThemePreference(isDark: boolean): void { - this.fakeStorage = String(isDark); + this.fakeStorage = String(isDark); } } -let themeStorage: ThemeStorage; - // Verify that FakeThemeStorage behaves like ThemeStorage would describe('FakeThemeStorage', () => { + let themeStorage: ThemeStorage; + beforeEach(() => { themeStorage = new FakeThemeStorage(); }); @@ -39,23 +38,19 @@ describe('FakeThemeStorage', () => { }); -let component: ThemeToggleComponent; -let fixture: ComponentFixture; -let debugElement: DebugElement; - describe('ThemeToggleComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ThemeToggleComponent ], - providers: [ { provide: ThemeStorage, useClass: FakeThemeStorage } ], - }) - .compileComponents(); - }); + let component: ThemeToggleComponent; + let fixture: ComponentFixture; beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ ThemeToggleComponent ], + providers: [ { provide: ThemeStorage, useClass: FakeThemeStorage } ], + }); + fixture = TestBed.createComponent(ThemeToggleComponent); component = fixture.componentInstance; - debugElement = fixture.debugElement; + fixture.detectChanges(); }); @@ -81,12 +76,13 @@ describe('ThemeToggleComponent', () => { }); it('should have the correct aria-label', () => { - expect(component.getToggleLabel()).toBe(`Switch to dark mode`); + expect(component.getToggleLabel()).toBe('Switch to dark mode'); component.toggleTheme(); - expect(component.getToggleLabel()).toBe(`Switch to light mode`); + expect(component.getToggleLabel()).toBe('Switch to light mode'); }); -}); -function getToggleButton(): HTMLButtonElement { - return debugElement.query(By.css('button')).nativeElement; -} + // Helpers + function getToggleButton(): HTMLButtonElement { + return fixture.debugElement.query(By.css('button')).nativeElement; + } +}); diff --git a/aio/src/styles/0-base/_typography-theme.scss b/aio/src/styles/0-base/_typography-theme.scss index f49e44bc15..dcf00d515b 100644 --- a/aio/src/styles/0-base/_typography-theme.scss +++ b/aio/src/styles/0-base/_typography-theme.scss @@ -16,18 +16,17 @@ color: if($is-dark-theme, constants.$offwhite, constants.$deepgray); } - h6 { - color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray); - } - h2 { border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray); } + h6 { + color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray); + } + p, ol, ul, - ol, li, input, a { diff --git a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss index 760c395812..2450cad07a 100644 --- a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss +++ b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss @@ -13,10 +13,6 @@ section#intro { color: constants.$white; - - .hero-logo { - background-image: url(/assets/images/logos/angular/angular.svg); - } } .announcement-bar { diff --git a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss index e3b15dd55b..148432ab61 100644 --- a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss +++ b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss @@ -46,6 +46,10 @@ section#intro { margin: 0 auto -32px; padding: 48px 0 0; + .hero-logo { + background-image: url(/assets/images/logos/angular/angular.svg); + } + @media (max-width: 780px) { flex-direction: column; justify-content: center; diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu.scss b/aio/src/styles/1-layouts/top-menu/_top-menu.scss index b9f25cb4f7..1b728e8fb3 100644 --- a/aio/src/styles/1-layouts/top-menu/_top-menu.scss +++ b/aio/src/styles/1-layouts/top-menu/_top-menu.scss @@ -203,24 +203,16 @@ mat-toolbar.app-toolbar { flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11. height: 100%; - @media screen and (max-width: 350px) { - a[title="GitHub"] { - display: none; - } - } - - a[title="Twitter"], a[title="YouTube"] { - @media screen and (max-width: 420px) { - display: none; - } - } - a { display: flex; align-items: center; padding: 0; margin: 24px 8px; + &:hover { + opacity: 0.8; + } + &:focus { outline-offset: 8px; } @@ -230,8 +222,16 @@ mat-toolbar.app-toolbar { padding: 0; } - &:hover { - opacity: 0.8; + @media screen and (max-width: 420px) { + &:not([title="GitHub"]) { + display: none; + } + } + + @media screen and (max-width: 350px) { + &[title="GitHub"] { + display: none; + } } img {