| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
Sorry, something went wrong.
There was a problem hiding this comment.
Pulled this down and tried it out- this is a good start!
Let's keep this PR scoped as-is but omit the theme-picker from the navbar until we get these follow-ups done:
Sorry, something went wrong.
| * @param key The key for the slot whose element we want. | ||
| * @param create Whether to create the element if it doesn't exist. | ||
| * @returns {HTMLLinkElement} The `<link.` element. | ||
| * @private |
There was a problem hiding this comment.
Omit @private and type information from JsDoc since that's captured in the TypeScript code.
Sorry, something went wrong.
| document.head.appendChild(linkEl); | ||
| } | ||
| return linkEl as HTMLLinkElement; | ||
| } |
There was a problem hiding this comment.
Rather than having one function perform two behaviors with an option, I generally prefer breaking it up into separate functions. Also, most of these can be module-level functions since they are pure functions, e.g.
class StyleManager {
setStyle(key: string, href: string) {
getLinkElementForKey(key).setAttribute('href', href);
}
removeStyle(key: string) {
const existingLinkElement = getExistingLinkElementByKey(key);
if (existingLinkElement) {
document.head.removeChild(existingLinkElement);
}
}
}
function getLinkElementForKey(key: string) {
return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
}
function getExistingLinkElementByKey(key: string) {
return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
}
function createLinkElementWithKey(key: string) {
const linkEl = document.createElement('link');
linkEl.setAttribute('rel', 'stylesheet');
linkEl.classList.add(getClassNameForKey(key));
document.head.appendChild(linkEl);
return linkEl;
}
function getClassNameForKey(key: string) {
return `style-manager-${key}`;
}
Sorry, something went wrong.
| $theme-chooser-accent-stripe-size: 6px; | ||
|
|
||
|
|
||
| .theme-chooser-menu { |
There was a problem hiding this comment.
Prefix css classes with docs-
Sorry, something went wrong.
| import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core'; | ||
| import {StyleManager} from '../style-manager/style-manager'; | ||
|
|
||
| @Component({ |
There was a problem hiding this comment.
We should make the theme chooser aria-hidden="true" and ensure that the button is not in the tab order since a screen-reader user won't get any benefit from changing the app colors.
Sorry, something went wrong.
| { | ||
| primary: '#673AB7', | ||
| accent: '#FFC107', | ||
| href: 'assets/deeppurple-amber.css' |
There was a problem hiding this comment.
We should omit assets/ on each entry and add it in the function call.
Sorry, something went wrong.
| {"input": "assets/pink-bluegrey.css", "lazy": true}, | ||
| {"input": "assets/deeppurple-amber.css", "lazy": true}, | ||
| {"input": "assets/indigo-pink.css", "lazy": true}, | ||
| {"input": "assets/purple-green.css", "lazy": true} |
There was a problem hiding this comment.
Can these be referenced directly from node_modules rather than copying them to assets?
Sorry, something went wrong.
|
|
||
| .theme-chooser-accent { | ||
| position: absolute; | ||
| bottom: $theme-chooser-accent-stripe-size; |
There was a problem hiding this comment.
How do you feel about the accent stripe? I'm not particularly fond of it.
Sorry, something went wrong.
There was a problem hiding this comment.
I pulled down the PR and tried it out- looks great!
Sorry, something went wrong.
| Footer, | ||
| ], | ||
| schemas: [ | ||
| CUSTOM_ELEMENTS_SCHEMA, |
There was a problem hiding this comment.
CUSTOM_ELEMENTS_SCHEMA ideally shouldn't be here; why was this needed?
Sorry, something went wrong.
| MaterialModule, | ||
| MdNativeDateModule, | ||
| routing, | ||
| InlineSVGModule, |
There was a problem hiding this comment.
InlineSvgModule (camelCase even for acronyms)
Sorry, something went wrong.
| import {Component, ViewEncapsulation} from '@angular/core'; | ||
| import {Router, NavigationStart} from '@angular/router'; | ||
|
|
||
| // import {ThemeStorage} from './shared/theme-chooser/theme-storage/theme-storage'; |
There was a problem hiding this comment.
Commented line
Sorry, something went wrong.
|
|
||
| // public _setIsDarkTheme(theme) { | ||
| // this.isDarkTheme = theme ? theme.isDark : this.isDarkTheme; | ||
| // } |
There was a problem hiding this comment.
Commented code
Sorry, something went wrong.
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| :host /deep/ .docs-component-category-list-card-image svg { |
There was a problem hiding this comment.
I'd like to avoid /deep/ completely, instead preferring to add a global style (or, barring that, turning off view encapsulation for the component)
Sorry, something went wrong.
| const Color = require('color'); | ||
|
|
||
|
|
||
| export interface IThemeColors { |
There was a problem hiding this comment.
We prefer not to prefix interfaces with I (here and elsewhere)
Sorry, something went wrong.
|
|
||
| import {IDocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage'; | ||
|
|
||
| const Color = require('color'); |
There was a problem hiding this comment.
What's this require doing here?
Sorry, something went wrong.
|
|
||
| public ngAfterViewInit() { | ||
| if (this.currTheme) { | ||
| setTimeout(this.swapTheme.bind(this, this.currTheme)); |
There was a problem hiding this comment.
Prefer arrow functions to using bind
Sorry, something went wrong.
| <div class="docs-theme-chooser-swatch"> | ||
| <md-icon class="docs-theme-chosen-icon" *ngIf="currentTheme === theme">check_circle</md-icon> | ||
| <div class="docs-theme-chooser-primary" [style.background]="theme.primary"></div> | ||
| <!--<div class="docs-theme-chooser-accent" [style.background]="theme.accent"></div>--> |
There was a problem hiding this comment.
Commented code
Sorry, something went wrong.
| <md-icon>format_color_fill</md-icon> | ||
| </button> | ||
|
|
||
| <md-menu class="docs-theme-chooser-menu" #themeMenu="mdMenu" x-position="before"> |
There was a problem hiding this comment.
Add a TODO here like
<!-- TODO: replace use of `md-menu` here with a custom overlay -->
Sorry, something went wrong.
There was a problem hiding this comment.
LGTM
Sorry, something went wrong.
|
@jelbourn I'm looking at theme-picker.ts and can't see how the default theme (isDefault: true property in themes) is honoured when you first load the page. installTheme() is called from the constructor with a theme argument if there is a theme in local storage or a theme is supplied by query parameters (otherwise it's called with a null argument). If it's the first time you're visiting the page, neither of these may be present. Am I missing something? |
Sorry, something went wrong.
| Back | FazBrowse Home | New Git URL |
Picking up the theme picker feature from where it was left off.