FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(navbar): Add themepicker component with lazy loaded themes by riavalon · Pull Request #136 · angular/material.angular.io · GitHub

This repository was archived by the owner on Jan 4, 2026. It is now read-only.

feat(navbar): Add themepicker component with lazy loaded themes - #136

Merged
jelbourn merged 1 commit into
angular:masterfrom
riavalon:theme-picker
Jun 15, 2017
Merged

feat(navbar): Add themepicker component with lazy loaded themes#136
jelbourn merged 1 commit into
angular:masterfrom
riavalon:theme-picker

Conversation

riavalon commented Mar 23, 2017
edited
Loading

Copy link
Copy Markdown
Contributor

Picking up the theme picker feature from where it was left off.

riavalon force-pushed the theme-picker branch 4 times, most recently from 6857c10 to 7f6cd6c Compare March 30, 2017 18:02

jelbourn left a comment
edited by riavalon
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

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:

  • Show the currently selected theme in the picker (similar to fonts.google.com)
  • Use inline SVGs instead of img / background-image so that we can manipulate their colors (could use md-icon for this).
  • Fix text and background color on all pages when switching to a dark theme
  • Remember selected theme in local storage (including updating on change)
  • Load different highlight.js files based on whether we're in a light or dark theme

* @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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Omit @private and type information from JsDoc since that's captured in the TypeScript code.

document.head.appendChild(linkEl);
}
return linkEl as HTMLLinkElement;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

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}`;
}

$theme-chooser-accent-stripe-size: 6px;


.theme-chooser-menu {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Prefix css classes with docs-

import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
import {StyleManager} from '../style-manager/style-manager';

@Component({

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

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.

{
primary: '#673AB7',
accent: '#FFC107',
href: 'assets/deeppurple-amber.css'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

We should omit assets/ on each entry and add it in the function call.

Comment thread angular-cli.json
{"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}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Can these be referenced directly from node_modules rather than copying them to assets?


.theme-chooser-accent {
position: absolute;
bottom: $theme-chooser-accent-stripe-size;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

How do you feel about the accent stripe? I'm not particularly fond of it.

riavalon force-pushed the theme-picker branch 3 times, most recently from 46e1553 to 74eb084 Compare April 13, 2017 17:24
riavalon force-pushed the theme-picker branch 4 times, most recently from d586c1e to f9b7669 Compare April 24, 2017 15:05
riavalon force-pushed the theme-picker branch 4 times, most recently from 9dcc56b to 1cfa71f Compare April 26, 2017 15:59
riavalon force-pushed the theme-picker branch 3 times, most recently from ee4b628 to db8f833 Compare May 26, 2017 18:22

jelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

I pulled down the PR and tried it out- looks great!

Comment thread src/app/app-module.ts Outdated
Footer,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,

jelbourn May 31, 2017
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

CUSTOM_ELEMENTS_SCHEMA ideally shouldn't be here; why was this needed?

Comment thread src/app/app-module.ts Outdated
MaterialModule,
MdNativeDateModule,
routing,
InlineSVGModule,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

InlineSvgModule (camelCase even for acronyms)

Comment thread src/app/material-docs-app.ts Outdated
import {Component, ViewEncapsulation} from '@angular/core';
import {Router, NavigationStart} from '@angular/router';

// import {ThemeStorage} from './shared/theme-chooser/theme-storage/theme-storage';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Commented line

Comment thread src/app/material-docs-app.ts Outdated

// public _setIsDarkTheme(theme) {
// this.isDarkTheme = theme ? theme.isDark : this.isDarkTheme;
// }

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Commented code

background-size: contain;
background-repeat: no-repeat;
background-position: center;
:host /deep/ .docs-component-category-list-card-image svg {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

I'd like to avoid /deep/ completely, instead preferring to add a global style (or, barring that, turning off view encapsulation for the component)

const Color = require('color');


export interface IThemeColors {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

We prefer not to prefix interfaces with I (here and elsewhere)


import {IDocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage';

const Color = require('color');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

What's this require doing here?

Comment thread src/app/shared/svg-viewer/svg-viewer.ts Outdated

public ngAfterViewInit() {
if (this.currTheme) {
setTimeout(this.swapTheme.bind(this, this.currTheme));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Prefer arrow functions to using bind

<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>-->

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Commented code

<md-icon>format_color_fill</md-icon>
</button>

<md-menu class="docs-theme-chooser-menu" #themeMenu="mdMenu" x-position="before">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Add a TODO here like

<!-- TODO: replace use of `md-menu` here with a custom overlay -->

riavalon force-pushed the theme-picker branch 3 times, most recently from 798538e to 1649a41 Compare June 6, 2017 19:39

jelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

LGTM

jelbourn merged commit f5478ed into angular:master Jun 15, 2017
Splaktar mentioned this pull request Jul 10, 2017

masonlr commented Mar 1, 2019
edited
Loading

Copy link
Copy Markdown

@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?

This file contains hidden or 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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants


Back | FazBrowse Home | New Git URL