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

Commit 11a8ff3

Browse files
touficbatachelynnmercier
touficbatache
authored and
lynnmercier
committed
fix(toolbar): Wrong placement of last icon when there is a menu (#1068)
Resolved #1026
1 parent 264c154 commit 11a8ff3

File tree

3 files changed

+100
-1
lines changed

3 files changed

+100
-1
lines changed

‎demos/toolbar/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,12 @@ <h2>Fixed Toolbar<button type="button" onclick="toggleRTL(1)">Toggle RTL</button
127127
<iframe class="demo-container" src="./fixed-toolbar.html" width="320" height="600"></iframe>
128128
</div>
129129

130+
<div class="example">
131+
<h2>Fixed Toolbar with Menu<button type="button" onclick="toggleRTL(1)">Toggle RTL</button></h2>
132+
<p><a href="./menu-toolbar.html" target="_blank">View in separate window</a></p>
133+
<iframe class="demo-container" src="./menu-toolbar.html" width="320" height="600"></iframe>
134+
</div>
135+
130136
<div class="example">
131137
<h2>Waterfall Toolbar<button type="button" onclick="toggleRTL(2)">Toggle RTL</button></h2>
132138
<p><a href="./waterfall-toolbar.html" target="_blank">View in separate window</a></p>

‎demos/toolbar/menu-toolbar.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2016 Google Inc. All rights reserved.
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
https://www.apache.org/licenses/LICENSE-2.0
8+
Unless required by applicable law or agreed to in writing, software
9+
distributed under the License is distributed on an "AS IS" BASIS,
10+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
See the License for the specific language governing permissions and
12+
limitations under the License
13+
-->
14+
<html>
15+
<head>
16+
<meta charset="utf-8">
17+
<title>MDC Toolbar Demo</title>
18+
<meta name="viewport" content="width=device-width, initial-scale=1">
19+
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png" />
20+
<script src="../assets/material-components-web.css.js" charset="utf-8"></script>
21+
<script src="../assets/demo-styles.css.js" charset="utf-8"></script>
22+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
23+
<style>
24+
.mdc-toolbar-demo {
25+
margin: 0px;
26+
}
27+
.demo-paragraph {
28+
margin: 0px;
29+
padding: 20px 28px;
30+
}
31+
@media (max-width: 599px) {
32+
.demo-paragraph {
33+
padding: 16px;
34+
}
35+
}
36+
#demo-menu {
37+
margin-top: 8px;
38+
margin-right: 8px;
39+
}
40+
</style>
41+
</head>
42+
<body class="mdc-typography mdc-toolbar-demo">
43+
<header class="mdc-toolbar mdc-toolbar--fixed">
44+
<div class="mdc-toolbar__row">
45+
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
46+
<a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
47+
<span class="mdc-toolbar__title">Title</span>
48+
</section>
49+
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
50+
<a href="#" class="material-icons mdc-toolbar__icon" aria-label="Download" alt="Download">file_download</a>
51+
<a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
52+
<div class="mdc-menu-anchor">
53+
<a href="#" class="material-icons mdc-toolbar__icon toggle" aria-label="Bookmark this page" alt="Bookmark this page">more_vert</a>
54+
<div class="mdc-simple-menu" tabindex="-1" id="demo-menu">
55+
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
56+
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.069s;">Back</li>
57+
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.124s;">Forward</li>
58+
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;">Reload</li>
59+
<li class="mdc-list-divider" role="separator"></li>
60+
61+
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.236s;">Save As...</li>
62+
</ul>
63+
</div>
64+
</div>
65+
</section>
66+
</div>
67+
</header>
68+
<main>
69+
70+
<div class="mdc-toolbar-fixed-adjust">
71+
<p class="demo-paragraph">
72+
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
73+
</p>
74+
<p class="demo-paragraph">
75+
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
76+
</p>
77+
<p class="demo-paragraph">
78+
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
79+
</p>
80+
</div>
81+
</main>
82+
83+
<script src="../assets/material-components-web.js" charset="utf-8"></script>
84+
<script>
85+
var menuEl = document.querySelector('#demo-menu');
86+
var menu = new mdc.menu.MDCSimpleMenu(menuEl);
87+
var toggle = document.querySelector('.toggle');
88+
toggle.addEventListener('click', function() {
89+
menu.open = !menu.open;
90+
});
91+
</script>
92+
</body>
93+
</html>

‎packages/mdc-toolbar/mdc-toolbar.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
cursor: pointer;
9494
}
9595

96-
&__icon:last-child {
96+
&__icon:last-of-type {
9797
padding-right: 16px;
9898
}
9999

0 commit comments

Comments
 (0)