Permalink
Browse files

Changed touch and click highlighting for image lists, and added heade…

…r styling for dark lists to complete issue #137
  • Loading branch information...
1 parent 0dee601 commit 666f9edc1d37ef3cab73b3d8066c2b570d90901c Tim Neil committed May 28, 2012
Showing with 393 additions and 83 deletions.
  1. +1 −0 CHANGELOG.md
  2. +60 −3 pkg/bbui-0.9.2.css
  3. +32 −8 pkg/bbui-0.9.2.js
  4. +103 −12 samples/bbui-0.9.2.css
  5. +105 −49 samples/bbui-0.9.2.js
  6. +60 −3 src/bbUI.css
  7. +1 −3 src/plugins/grid.js
  8. +31 −5 src/plugins/imageList.js
View
@@ -21,6 +21,7 @@ Below you will find all the different changes that have been added since the fir
* Added radio button styling for BB10
* Added header styling (normal, solid) to the BB10 image and grid list
* Changed header text justification on the image and grid list
+* Changed list highlighting for BB10 to match UX specs
## Version 0.9.1
View
@@ -1829,6 +1829,18 @@ a.bb5-button-highlight span {
font-weight: bold;
}
+.bb-bb10-image-list-header-normal-light {
+ background: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
+ font-weight: normal;
+ color: black;
+}
+
+.bb-bb10-image-list-header-normal-dark {
+ background: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
+ font-weight: normal;
+ color: white;
+}
+
.bb-bb10-image-list-header-hires
{
height:44px;
@@ -1837,6 +1849,7 @@ a.bb5-button-highlight span {
padding-top:5px;
border-bottom-width: 3px;
border-bottom-style: solid;
+ margin-bottom: 1px;
}
.bb-bb10-image-list-header-lowres
@@ -1846,6 +1859,7 @@ a.bb5-button-highlight span {
font-size: 16pt;
border-bottom-width: 2px;
border-bottom-style: solid;
+ margin-bottom: 1px;
}
.bb-bb10-image-list-header p
@@ -1896,14 +1910,44 @@ a.bb5-button-highlight span {
padding-left: 5px;
height: 56px;
border-bottom-width: 1px;
+ border-top-width: 1px;
+ border-top-style: solid;
+ border-bottom-style: solid;
}
.bb-bb10-image-list-item-hires
{
padding-top: 6px;
padding-left: 5px;
- height: 113px;
+ height: 111px;
+ border-top-width: 2px;
border-bottom-width: 2px;
+ border-top-style: solid;
+ border-bottom-style: solid;
+}
+
+.bb-bb10-image-list-item-overlay-hires {
+ position:relative;
+ border-width: 4px;
+ border-style: solid;
+ border-color: transparent;
+ background-color: transparent;
+ z-index: 100;
+ margin-top: -118px;
+ margin-left: -5px;
+ height: 109px;
+}
+
+.bb-bb10-image-list-item-overlay-lowres {
+ position:relative;
+ border-width: 2px;
+ border-style: solid;
+ border-color: transparent;
+ background-color: transparent;
+ z-index: 100;
+ margin-top: -61px;
+ margin-left: -5px;
+ height: 55px;
}
.bb-bb10-image-list-item-details-lowres
@@ -1935,15 +1979,15 @@ a.bb5-button-highlight span {
.bb-bb10-image-list-item-dark
{
color:White;
- border-bottom-style: solid;
+ border-bottom-color: #3A3A3A;
border-bottom-color: #3A3A3A;
}
.bb-bb10-image-list-item-light
{
color:Black;
- border-bottom-style: solid;
border-bottom-color: #D9DCDE;
+ border-top-color: #D9DCDE;
}
.bb-bb10-image-list-item-lowres .title
@@ -2957,6 +3001,7 @@ a.bb5-button-highlight span {
padding:0px;
}
+
.bb-bb10-grid-header-lowres
{
height:28px;
@@ -2979,6 +3024,18 @@ a.bb5-button-highlight span {
font-weight: bold;
}
+.bb-bb10-grid-header-normal-light {
+ background: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
+ font-weight: normal;
+ color: black;
+}
+
+.bb-bb10-grid-header-normal-dark {
+ background: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
+ font-weight: normal;
+ color: white;
+}
+
.bb-bb10-grid-header-lowres p
{
font-size: 16pt;
View
@@ -1673,6 +1673,7 @@ bb.imageList = {
var type = innerChildNode.getAttribute('data-bb-type').toLowerCase(),
description = innerChildNode.innerHTML,
title,
+ overlay,
accentText,
img,
details,
@@ -1686,9 +1687,7 @@ bb.imageList = {
innerChildNode.style.color = 'white';
title.style['border-bottom-color'] = 'transparent';
} else {
- innerChildNode.style.background = '-webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD))';
- innerChildNode.style['font-weight'] = 'normal';
- innerChildNode.style.color = 'black';
+ normal = normal + ' bb-bb10-image-list-header-normal-'+bb.screen.listColor;
innerChildNode.style['border-bottom-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
}
@@ -1782,22 +1781,32 @@ bb.imageList = {
// Clean-up
innerChildNode.removeAttribute('data-bb-img');
innerChildNode.removeAttribute('data-bb-title');
+ // Add our highlight overlay
+ overlay = document.createElement('div');
+ overlay.setAttribute('class','bb-bb10-image-list-item-overlay-'+res);
+ innerChildNode.appendChild(overlay);
+
// Set up our variables
innerChildNode.fingerDown = false;
innerChildNode.contextShown = false;
+ innerChildNode.overlay = overlay;
innerChildNode.contextMenu = contextMenu;
innerChildNode.description = description;
innerChildNode.title = title.innerHTML;
+
+
innerChildNode.ontouchstart = function () {
- this.setAttribute('class',this.highlight);
+ //this.setAttribute('class',this.highlight);
+ this.overlay.style['border-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
innerChildNode.fingerDown = true;
innerChildNode.contextShown = false;
if (innerChildNode.contextMenu) {
window.setTimeout(this.touchTimer, 667);
}
};
innerChildNode.ontouchend = function (event) {
- this.setAttribute('class',this.normal);
+ //this.setAttribute('class',this.normal);
+ this.overlay.style['border-color'] = 'transparent';
innerChildNode.fingerDown = false;
if (innerChildNode.contextShown) {
event.preventDefault();
@@ -1811,6 +1820,23 @@ bb.imageList = {
}
};
innerChildNode.touchTimer = innerChildNode.touchTimer.bind(innerChildNode);
+
+ // Add our subscription for click events to change highlighting on click
+ innerChildNode.trappedClick = innerChildNode.onclick;
+ innerChildNode.onclick = undefined;
+ innerChildNode.addEventListener('click',function (e) {
+ this.setAttribute('class',this.highlight);
+ if (this.trappedClick) {
+ setTimeout(this.trappedClick, 0);
+ }
+ setTimeout(this.finishHighlight, 250);
+ },false);
+
+ // Finish the highlight on a delay
+ innerChildNode.finishHighlight = function() {
+ this.setAttribute('class',this.normal);
+ };
+ innerChildNode.finishHighlight = innerChildNode.finishHighlight.bind(innerChildNode);
}
}
}
@@ -2004,9 +2030,7 @@ bb.grid = {
title.style.color = 'white';
title.style['border-bottom-color'] = 'transparent';
} else {
- title.style.background = '-webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD))';
- title.style['font-weight'] = 'normal';
- title.style.color = 'black';
+ title.normal = title.normal + ' bb-bb10-grid-header-normal-'+bb.screen.listColor;
title.style['border-bottom-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
}
Oops, something went wrong.

0 comments on commit 666f9ed

Please sign in to comment.