Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(drawer): custom sass mixins for color, background, scrim #1730

Merged
merged 26 commits into from
Jan 2, 2018
Merged

feat(drawer): custom sass mixins for color, background, scrim #1730

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
792e833
feat(drawer): added fill, color, and scrim color mixins for temp, per…
Dec 7, 2017
4f57a8a
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 7, 2017
c6c6bba
feat(drawer): added default to the drawer ink colors
Dec 7, 2017
b6907f9
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 7, 2017
177bc40
feat(drawer): added classes to illustrate variants demo drawer pages
Dec 8, 2017
957f4da
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 11, 2017
a4ee956
feat(drawer): temporary drawer class naming refactor for sass color m…
Dec 11, 2017
cf45316
feat(drawer): change persistent and permanent classnames for sass col…
Dec 11, 2017
702a755
feat(drawer): updated drawer readme to follow classnaming conventions
Dec 11, 2017
a23155d
feat(drawer): updated drawer theme switches
Dec 12, 2017
9c1df2d
feat(drawer): fixed the permanent fill & ink color theming. Added __d…
Dec 12, 2017
f5072fd
feat(drawer): fixed permanent drawer readme
Dec 12, 2017
559b464
feat(drawer): removed __drawer el from permanent. fixed tests and lint
Dec 12, 2017
b3251f9
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 12, 2017
dfa4b7c
feat(drawer): PR updates adding mdc-form-field and classname updates
Dec 12, 2017
d41685c
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 12, 2017
1907002
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 12, 2017
e79edea
feat(drawer): added accessible fill color mixin and updated demos to …
Dec 12, 2017
989b7d4
feat(drawer): updated README with sass mixins to customize drawers
Dec 13, 2017
6e1c6a1
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 14, 2017
503c2ae
feat(drawer): update drawer demo pages with better BEM naming
Dec 14, 2017
336d123
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 15, 2017
1815681
feat(drawer): updated demo drawer--accessibility selector to change font
Dec 15, 2017
b6ff3eb
Merge branch 'master' into feat/drawer/custom-sass-mixins
Dec 22, 2017
09f1532
feat(drawer): updated ids in demo htmls files
Dec 22, 2017
8a43447
Merge branch 'master' into feat/drawer/custom-sass-mixins
Jan 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions demos/drawer/drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,24 @@
// limitations under the License.
//

@import "@material/list/mixins";
@import "@material/form-field/mdc-form-field";
Copy link
Contributor

Choose a reason for hiding this comment

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

For demo pages, we use relative paths in our Sass @imports (demo pages don't need to be distributed via npm).

@import "../common";
@import "../../packages/mdc-drawer/mdc-drawer";
@import "../../packages/mdc-drawer/mixins";
@import "../../packages/mdc-elevation/mdc-elevation";
@import "../../packages/mdc-list/mdc-list";

.demo-drawer {
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's rename this to demo-drawer--custom.

The HTML elements should initially just have class="demo-drawer", and the JS can toggle demo-drawer--custom.

Does that make sense?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Initially it seemed strange to have a class with no styles on it though, but yup that makes sense as it is more BEM like.

@include mdc-drawer-fill-color(#3f51b5);
@include mdc-drawer-ink-color(#fff);
@include mdc-list-item-graphic-ink-color(#fff);
Copy link
Contributor

Choose a reason for hiding this comment

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

We should probably call the primary-text-ink-color mixin too
(it needs to be called on the .mdc-list-item element, btw;
otherwise it will overwrite the value set by mdc-drawer-fill-color.)

So we probably want something like:

.demo-drawer--custom {
  @include mdc-drawer-fill-color($material-color-teal-900);
  @include mdc-drawer-ink-color(#fff);

  .demo-drawer-list-item {
    @include mdc-list-item-graphic-ink-color(text-icon-on-dark);
    @include mdc-list-item-primary-text-ink-color(text-secondary-on-dark);
  }

  .demo-drawer-list-item.mdc-list-item--selected {
    @include mdc-list-item-graphic-ink-color(text-primary-on-dark);
    @include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
  }
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ah ok - ya initially I had this in the mixin, but then we took it out. After removing I should have just put it in the demo classes. Makes sense.

Copy link
Contributor Author

@moog16 moog16 Dec 14, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

Should I also do the same changes on .demo-drawer--accessible? If so, should I also create mdc-list accessible mixins?

I think I should have rename the selector .demo-drawer-list-item.mdc-list-item--selected to .demo-drawer-list-item.demo-list-item--selected, since I removed the .mdc-* from the demo pages. Or are we allowing this one because its part of the API?

}

.demo-form-field {
Copy link
Contributor

Choose a reason for hiding this comment

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

Add this class name in the HTML

margin: 16px 0;
}

.demo-switch {
margin-top: 16px;
Copy link
Contributor

Choose a reason for hiding this comment

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

This looks weird - can we remove it?

Copy link
Contributor Author

@moog16 moog16 Dec 14, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

ah forgot to remove. good catch

}
52 changes: 37 additions & 15 deletions demos/drawer/permanent-drawer-above-toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/switch.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand Down Expand Up @@ -51,7 +52,7 @@
}

/* Place drawer above toolbar shadow. */
.mdc-permanent-drawer {
.mdc-drawer--permanent {
Copy link
Contributor

Choose a reason for hiding this comment

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

🎉

z-index: 2;
}

Expand All @@ -73,11 +74,11 @@
</style>
</head>
<body class="mdc-typography demo-body">
<nav class="mdc-permanent-drawer">
<div class="mdc-permanent-drawer__toolbar-spacer"></div>
<nav id="demo-theme-switch" class="mdc-drawer mdc-drawer--permanent">
<div class="mdc-drawer__toolbar-spacer"></div>
<div class="mdc-list-group">
<nav class="mdc-list">
<a class="mdc-list-item mdc-permanent-drawer--selected" href="#">
<a class="mdc-list-item mdc-drawer--selected" href="#">
Copy link
Contributor

Choose a reason for hiding this comment

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

mdc-drawer--selected should be mdc-list-item--selected

Ditto in other files

<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
Expand All @@ -94,17 +95,17 @@
<hr class="mdc-list-divider">

<nav class="mdc-list">
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
</a>
</nav>
</div>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
</a>
</nav>
</div>
</nav>
<div class="demo-content">
<!-- TODO: #324 - Should switch to .mdc-toolbar--fixed -->
Expand All @@ -122,6 +123,17 @@
<main class="demo-main">
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
<p class="mdc-typography--body1">It sits to the left of this content.</p>

<div class="mdc-form-field demo-form-field">
<div class="mdc-switch demo-switch">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">Theme off/on</label>
Copy link
Contributor

Choose a reason for hiding this comment

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

Reword label text to "Custom theme off/on"

Ditto in other files

</div>

<div class="extra-content-wrapper">
<button id="toggle-wide">Toggle extra-wide content</button>
<div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
Expand All @@ -144,6 +156,16 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
document.querySelector('#toggle-tall').addEventListener('click', function() {
extraTall.style.display = extraTall.style.display ? '' : 'none';
});

var drawerEl = document.querySelector('#demo-theme-switch');
Copy link
Contributor

Choose a reason for hiding this comment

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

This should probably be #demo-drawer

Ditto in other files

Copy link
Contributor Author

Choose a reason for hiding this comment

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

don't know what I was thinking there...changing

var switchEl = document.querySelector('.mdc-switch');
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's use an ID instead of a class name

Ditto in other files

switchEl.addEventListener('change', function(e) {
if(e.target.checked) {
drawerEl.classList.add('demo-drawer');
Copy link
Contributor

Choose a reason for hiding this comment

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

'demo-drawer--custom'

Ditto in other files

} else {
drawerEl.classList.remove('demo-drawer');
}
});
</script>
</body>
</html>
27 changes: 25 additions & 2 deletions demos/drawer/permanent-drawer-below-toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/switch.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand Down Expand Up @@ -78,10 +79,10 @@
</header>

<div class="demo-content mdc-toolbar-fixed-adjust">
<nav class="mdc-permanent-drawer">
<nav id="demo-theme-switch" class="mdc-drawer mdc-drawer--permanent">
Copy link
Contributor

Choose a reason for hiding this comment

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

Rename demo-theme-switch to demo-drawer

Ditto in other files

<div class="mdc-list-group">
<nav class="mdc-list">
<a class="mdc-list-item mdc-permanent-drawer--selected" href="#">
<a class="mdc-list-item mdc-drawer--selected" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
Expand Down Expand Up @@ -113,6 +114,18 @@
<main class="demo-main">
<h1 class="mdc-typography--display1">Permanent Drawer</h1>
<p class="mdc-typography--body1">It sits to the left of this content.</p>

<div class="mdc-form-field demo-form-field">
<div class="mdc-switch demo-switch">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">Theme off/on</label>
</div>


<div class="extra-content-wrapper">
<button id="toggle-wide">Toggle extra-wide content</button>
<div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
Expand All @@ -135,6 +148,16 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
document.querySelector('#toggle-tall').addEventListener('click', function() {
extraTall.style.display = extraTall.style.display ? '' : 'none';
});

var drawerEl = document.querySelector('#demo-theme-switch');
var switchEl = document.querySelector('.mdc-switch');
switchEl.addEventListener('change', function(e) {
if(e.target.checked) {
drawerEl.classList.add('demo-drawer');
} else {
drawerEl.classList.remove('demo-drawer');
}
});
</script>
</body>
</html>
52 changes: 36 additions & 16 deletions demos/drawer/persistent-drawer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/switch.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand Down Expand Up @@ -52,16 +53,17 @@

.demo-main {
padding-left: 16px;
padding-bottom: 16px;
}
</style>
</head>
<body class="mdc-typography demo-body">
<aside class="mdc-persistent-drawer">
<nav class="mdc-persistent-drawer__drawer">
<div class="mdc-persistent-drawer__toolbar-spacer"></div>
<aside class="mdc-drawer mdc-drawer--persistent demo-drawer">
<nav class="mdc-drawer__drawer">
<div class="mdc-drawer__toolbar-spacer"></div>
<div class="mdc-list-group">
<nav class="mdc-list">
<a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
<a class="mdc-list-item mdc-drawer--selected" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
Expand All @@ -78,17 +80,17 @@
<hr class="mdc-list-divider">

<nav class="mdc-list">
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
</a>
</nav>
</div>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam
</a>
</nav>
</div>
</nav>
</aside>
<div class="demo-content">
Expand All @@ -107,11 +109,20 @@
<main class="demo-main">
<h1 class="mdc-typography--display1">Persistent Drawer</h1>
<p class="mdc-typography--body1">Click the menu icon above to open and close the drawer.</p>
<div class="mdc-form-field">
<div class="mdc-switch demo-switch">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">Theme off/on</label>
</div>
</main>

<script src="/assets/material-components-web.js"></script>
<script>
var drawerEl = document.querySelector('.mdc-persistent-drawer');
var drawerEl = document.querySelector('.mdc-drawer');
var MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;
var drawer = new MDCPersistentDrawer(drawerEl);
document.querySelector('.demo-menu').addEventListener('click', function() {
Expand All @@ -123,6 +134,15 @@ <h1 class="mdc-typography--display1">Persistent Drawer</h1>
drawerEl.addEventListener('MDCPersistentDrawer:close', function() {
console.log('Received MDCPersistentDrawer:close');
});

var switchEl = document.querySelector('.mdc-switch');
switchEl.addEventListener('change', function(e) {
if(e.target.checked) {
drawerEl.classList.add('demo-drawer');
} else {
drawerEl.classList.remove('demo-drawer');
}
});
</script>
</div>
</body>
Expand Down
34 changes: 27 additions & 7 deletions demos/drawer/temporary-drawer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/drawer/drawer.css.js"></script>
<script src="/assets/switch.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Expand All @@ -33,6 +34,7 @@

.demo-main {
padding-left: 16px;
padding-bottom: 16px;
overflow: auto;
}
</style>
Expand All @@ -50,16 +52,16 @@
</div>
</div>

<aside class="mdc-temporary-drawer">
<nav class="mdc-temporary-drawer__drawer">
<header class="mdc-temporary-drawer__header">
<div class="mdc-temporary-drawer__header-content mdc-theme--primary-bg mdc-theme--text-primary-on-primary">
<aside class="mdc-drawer mdc-drawer--temporary">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content mdc-theme--text-primary-on-primary mdc-theme--primary-bg">
Header here
</div>
</header>
<nav class="mdc-temporary-drawer__content mdc-list-group">
<nav class="mdc-drawer__content mdc-list-group">
<div id="icon-with-text-demo" class="mdc-list">
<a class="mdc-list-item mdc-temporary-drawer--selected" href="#">
<a class="mdc-list-item mdc-drawer--selected" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
Expand Down Expand Up @@ -92,11 +94,20 @@
<main class="demo-main mdc-toolbar-fixed-adjust">
<h1 class="mdc-typography--display1">Temporary Drawer</h1>
<p class="mdc-typography--body1">Click the menu icon above to open.</p>
<div class="mdc-form-field">
<div class="mdc-switch demo-switch">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">Theme off/on</label>
</div>
</main>

<script src="/assets/material-components-web.js"></script>
<script>
var drawerEl = document.querySelector('.mdc-temporary-drawer');
var drawerEl = document.querySelector('.mdc-drawer');
var MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;
var drawer = new MDCTemporaryDrawer(drawerEl);
document.querySelector('.demo-menu').addEventListener('click', function() {
Expand All @@ -108,6 +119,15 @@ <h1 class="mdc-typography--display1">Temporary Drawer</h1>
drawerEl.addEventListener('MDCTemporaryDrawer:close', function() {
console.log('Received MDCTemporaryDrawer:close');
});

var switchEl = document.querySelector('.mdc-switch');
switchEl.addEventListener('change', function(e) {
if(e.target.checked) {
drawerEl.classList.add('demo-drawer');
} else {
drawerEl.classList.remove('demo-drawer');
}
});
</script>
</body>
</html>
Loading