skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): improved tap responsiveness on mobile (#1792)

Browse Source 
* fix(button): improved tap responsiveness on mobile

Improves the tap responsiveness of buttons on mobile by replacing the `::after` overlay with a DOM node that prevents the default touch action.
Previously, the `::after` overlay would capture the first tap, causing the button to have to tapped twice in order to fire it's click handler.

Fixes #1316.
This commit is contained in:
Kristiyan Kostadinov
2016-11-11 23:25:43 +01:00
committed by Jeremy Elbourn
parent 3d4abac36e
commit 4183fbc000
4 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/button/_button-base.scss
+3 -19
View File
@@ -3,24 +3,6 @@
@import '../core/style/button-common';
// Applies a focus style to an md-button element.
@mixin md-button-focus {
&::after {
// The button spec calls for focus on raised buttons (and FABs) to be indicated with a
// black, 12% opacity shade over the normal color (for both light and dark themes).
// We do this by placing an :after pseudo-element with the appropriate shade over the button.
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background-color: rgba(black, 0.12);
border-radius: inherit;
pointer-events: none;
}
}
// Flat and raised button standards
$md-button-padding: 0 16px !default;
$md-button-min-width: 88px !default;
@@ -74,7 +56,9 @@ $md-mini-fab-padding: 8px !default;
}
&.md-button-focus {
@include md-button-focus();
.md-button-focus-overlay {
opacity: 1;
}
}
}
src/lib/button/_button-theme.scss
+3 -3
View File
@@ -7,15 +7,15 @@
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
&.md-primary::after {
&.md-primary .md-button-focus-overlay {
background-color: md-color($primary, 0.12);
}
&.md-accent::after {
&.md-accent .md-button-focus-overlay {
background-color: md-color($accent, 0.12);
}
&.md-warn::after {
&.md-warn .md-button-focus-overlay {
background-color: md-color($warn, 0.12);
}
}
src/lib/button/button.html
+2
View File
@@ -4,3 +4,5 @@
[md-ripple-trigger]="getHostElement()"
[md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
<!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
<div class="md-button-focus-overlay" (touchstart)="$event.preventDefault()"></div>
src/lib/button/button.scss
+17 -3
View File
@@ -10,11 +10,13 @@
// Only flat buttons and icon buttons (not raised or fabs) have a hover style.
&:hover {
// Use the same visual treatment for hover as for focus.
@include md-button-focus();
.md-button-focus-overlay {
opacity: 1;
}
}
&[disabled]:hover {
&.md-primary, &.md-accent, &.md-warn, &::after {
&.md-primary, &.md-accent, &.md-warn, .md-button-focus-overlay {
background-color: transparent;
}
}
@@ -56,7 +58,7 @@
}
// The ripple container should match the bounds of the entire button.
.md-button-ripple {
.md-button-ripple, .md-button-focus-overlay {
position: absolute;
top: 0;
left: 0;
@@ -64,6 +66,18 @@
right: 0;
}
// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
// element, however we use a proper DOM element in order to be able to disable the default
// touch action. This makes the buttons more responsive on touch devices.
.md-button-focus-overlay {
// The button spec calls for focus on raised buttons (and FABs) to be indicated with a
// black, 12% opacity shade over the normal color (for both light and dark themes).
background-color: rgba(black, 0.12);
border-radius: inherit;
pointer-events: none;
opacity: 0;
}
// For round buttons, the ripple container should clip child ripples to a circle.
.md-button-ripple-round {
border-radius: 50%;