Skip to content
Browse files

Bug 815576 - Finalize interaction to improve usability and speed-of-a…

…ccess
  • Loading branch information...
1 parent 1734754 commit 67179e83d8e8396e35990b3c7c1f2a0bc3024b5f @steveck-chung steveck-chung committed Dec 5, 2012
Showing with 37 additions and 25 deletions.
  1. +10 −6 apps/system/index.html
  2. +5 −7 apps/system/js/lockscreen.js
  3. +22 −12 apps/system/style/lockscreen/lockscreen.css
View
16 apps/system/index.html
@@ -755,12 +755,16 @@ <h1 data-l10n-id="cancel-install">Cancel Install</h1>
</svg>
<div id="lockscreen-area"></div>
<div id="lockscreen-icon-container">
- <button id="lockscreen-area-camera" class="lockscreen-icon lockscreen-icon-left">
- <div id="lockscreen-accessibility-camera" role="button" class="lockscreen-icon-a11y-button" data-l10n-id="camera-a11y-button" aria-label="Camera"></div>
- </button>
- <button id="lockscreen-area-unlock" class="lockscreen-icon lockscreen-icon-right">
- <div id="lockscreen-accessibility-unlock" role="button" class="lockscreen-icon-a11y-button" data-l10n-id="unlock-a11y-button" aria-label="Unlock"></div>
- </button>
+ <div id="lockscreen-area-camera" class="lockscreen-icon-area lockscreen-icon-left">
+ <div class="lockscreen-icon">
+ <div id="lockscreen-accessibility-camera" role="button" class="lockscreen-icon-a11y-button" data-l10n-id="camera-a11y-button" aria-label="Camera"></div>
+ </div>
+ </div>
+ <div id="lockscreen-area-unlock" class="lockscreen-icon-area lockscreen-icon-right">
+ <div class="lockscreen-icon">
+ <div id="lockscreen-accessibility-unlock" role="button" class="lockscreen-icon-a11y-button" data-l10n-id="unlock-a11y-button" aria-label="Unlock"></div>
+ </div>
+ </div>
</div>
</div>
View
12 apps/system/js/lockscreen.js
@@ -268,13 +268,11 @@ var LockScreen = {
var overlay = this.overlay;
var target = evt.target;
- if (target === leftTarget || target === rightTarget) {
- break;
- }
-
- if (overlay.classList.contains('triggered') &&
- target != leftTarget && target != rightTarget) {
- this.unloadPanel();
+ // Reset timer when touch while overlay triggered
+ if (this.overlay.classList.contains('triggered')) {
+ clearTimeout(this.triggeredTimeoutId);
+ this.triggeredTimeoutId = setTimeout(this.unloadPanel.bind(this),
+ this.TRIGGERED_TIMEOUT);
break;
}
View
34 apps/system/style/lockscreen/lockscreen.css
@@ -225,27 +225,33 @@
#lockscreen-area {
position: absolute;
- height: 10rem;
+ height: 16rem;
left: 0;
right: 0;
bottom: 0;
}
-.lockscreen-icon {
+.lockscreen-icon-area {
+ width: 16rem;
+ height: 12rem;
position: absolute;
+ bottom: -3rem;
+ background-color: rgba(0,0,0,0.5)
+ border: none;
+}
+
+.lockscreen-icon {
+ margin-top: 4rem;
border-radius: 3rem;
width: 6rem;
height: 6rem;
- bottom: 1rem;
- margin-bottom: -2.1rem;
background-color: rgba(0, 0, 0, 0.3);
- outline: none;
-
-moz-box-sizing: border-box;
border: 2px solid rgba(255, 255, 255, 0.8);
+ pointer-events: none;
}
-.lockscreen-icon:active {
+.lockscreen-icon-area:active > .lockscreen-icon {
background-color: rgb(0, 138, 170);
}
@@ -274,11 +280,11 @@
}
.lockscreen-icon-right {
- right: 4rem;
+ right: 0;
}
.lockscreen-icon-left {
- left: 4rem;
+ left: 0;
}
button::-moz-focus-inner {
@@ -291,16 +297,18 @@ button::-moz-focus-inner {
animation: none;
}
-#lockscreen-area-unlock {
+#lockscreen-area-unlock > div {
background-image: url('./images/icon-unlock.png');
background-position: center;
background-repeat: no-repeat;
+ margin-left: 6rem;
}
-#lockscreen-area-camera {
- background: url('./images/icon-camera.png');
+#lockscreen-area-camera > div {
+ background-image: url('./images/icon-camera.png');
background-position: center;
background-repeat: no-repeat;
+ margin-left: 4rem;
}
[data-panel="emergency-call"] #lockscreen-panel-passcode {
@@ -504,6 +512,7 @@ button::-moz-focus-inner {
bottom: -5rem;
height: 5rem;
opacity: 0.4;
+ pointer-events: none;
transition:
transform 0.5s ease,
opacity 0.5s ease;
@@ -516,6 +525,7 @@ button::-moz-focus-inner {
.triggered #lockscreen-icon-container {
transform: translateY(-8.5rem);
opacity: 1;
+ pointer-events: auto;
}
@keyframes lockscreen-elastic {

0 comments on commit 67179e8

Please sign in to comment.
Something went wrong with that request. Please try again.