Skip to content
This repository
Browse code

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

…r styling for dark lists to complete issue #137
  • Loading branch information...
commit 666f9edc1d37ef3cab73b3d8066c2b570d90901c 1 parent 0dee601
Tim Neil tneil authored
1  CHANGELOG.md
Source Rendered
@@ -21,6 +21,7 @@ Below you will find all the different changes that have been added since the fir
21 21 * Added radio button styling for BB10
22 22 * Added header styling (normal, solid) to the BB10 image and grid list
23 23 * Changed header text justification on the image and grid list
  24 +* Changed list highlighting for BB10 to match UX specs
24 25
25 26
26 27 ## Version 0.9.1
63 pkg/bbui-0.9.2.css
@@ -1829,6 +1829,18 @@ a.bb5-button-highlight span {
1829 1829 font-weight: bold;
1830 1830 }
1831 1831
  1832 +.bb-bb10-image-list-header-normal-light {
  1833 + background: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
  1834 + font-weight: normal;
  1835 + color: black;
  1836 +}
  1837 +
  1838 +.bb-bb10-image-list-header-normal-dark {
  1839 + background: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
  1840 + font-weight: normal;
  1841 + color: white;
  1842 +}
  1843 +
1832 1844 .bb-bb10-image-list-header-hires
1833 1845 {
1834 1846 height:44px;
@@ -1837,6 +1849,7 @@ a.bb5-button-highlight span {
1837 1849 padding-top:5px;
1838 1850 border-bottom-width: 3px;
1839 1851 border-bottom-style: solid;
  1852 + margin-bottom: 1px;
1840 1853 }
1841 1854
1842 1855 .bb-bb10-image-list-header-lowres
@@ -1846,6 +1859,7 @@ a.bb5-button-highlight span {
1846 1859 font-size: 16pt;
1847 1860 border-bottom-width: 2px;
1848 1861 border-bottom-style: solid;
  1862 + margin-bottom: 1px;
1849 1863 }
1850 1864
1851 1865 .bb-bb10-image-list-header p
@@ -1896,14 +1910,44 @@ a.bb5-button-highlight span {
1896 1910 padding-left: 5px;
1897 1911 height: 56px;
1898 1912 border-bottom-width: 1px;
  1913 + border-top-width: 1px;
  1914 + border-top-style: solid;
  1915 + border-bottom-style: solid;
1899 1916 }
1900 1917
1901 1918 .bb-bb10-image-list-item-hires
1902 1919 {
1903 1920 padding-top: 6px;
1904 1921 padding-left: 5px;
1905   - height: 113px;
  1922 + height: 111px;
  1923 + border-top-width: 2px;
1906 1924 border-bottom-width: 2px;
  1925 + border-top-style: solid;
  1926 + border-bottom-style: solid;
  1927 +}
  1928 +
  1929 +.bb-bb10-image-list-item-overlay-hires {
  1930 + position:relative;
  1931 + border-width: 4px;
  1932 + border-style: solid;
  1933 + border-color: transparent;
  1934 + background-color: transparent;
  1935 + z-index: 100;
  1936 + margin-top: -118px;
  1937 + margin-left: -5px;
  1938 + height: 109px;
  1939 +}
  1940 +
  1941 +.bb-bb10-image-list-item-overlay-lowres {
  1942 + position:relative;
  1943 + border-width: 2px;
  1944 + border-style: solid;
  1945 + border-color: transparent;
  1946 + background-color: transparent;
  1947 + z-index: 100;
  1948 + margin-top: -61px;
  1949 + margin-left: -5px;
  1950 + height: 55px;
1907 1951 }
1908 1952
1909 1953 .bb-bb10-image-list-item-details-lowres
@@ -1935,15 +1979,15 @@ a.bb5-button-highlight span {
1935 1979 .bb-bb10-image-list-item-dark
1936 1980 {
1937 1981 color:White;
1938   - border-bottom-style: solid;
  1982 + border-bottom-color: #3A3A3A;
1939 1983 border-bottom-color: #3A3A3A;
1940 1984 }
1941 1985
1942 1986 .bb-bb10-image-list-item-light
1943 1987 {
1944 1988 color:Black;
1945   - border-bottom-style: solid;
1946 1989 border-bottom-color: #D9DCDE;
  1990 + border-top-color: #D9DCDE;
1947 1991 }
1948 1992
1949 1993 .bb-bb10-image-list-item-lowres .title
@@ -2957,6 +3001,7 @@ a.bb5-button-highlight span {
2957 3001 padding:0px;
2958 3002 }
2959 3003
  3004 +
2960 3005 .bb-bb10-grid-header-lowres
2961 3006 {
2962 3007 height:28px;
@@ -2979,6 +3024,18 @@ a.bb5-button-highlight span {
2979 3024 font-weight: bold;
2980 3025 }
2981 3026
  3027 +.bb-bb10-grid-header-normal-light {
  3028 + background: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
  3029 + font-weight: normal;
  3030 + color: black;
  3031 +}
  3032 +
  3033 +.bb-bb10-grid-header-normal-dark {
  3034 + background: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
  3035 + font-weight: normal;
  3036 + color: white;
  3037 +}
  3038 +
2982 3039 .bb-bb10-grid-header-lowres p
2983 3040 {
2984 3041 font-size: 16pt;
40 pkg/bbui-0.9.2.js
@@ -1673,6 +1673,7 @@ bb.imageList = {
1673 1673 var type = innerChildNode.getAttribute('data-bb-type').toLowerCase(),
1674 1674 description = innerChildNode.innerHTML,
1675 1675 title,
  1676 + overlay,
1676 1677 accentText,
1677 1678 img,
1678 1679 details,
@@ -1686,9 +1687,7 @@ bb.imageList = {
1686 1687 innerChildNode.style.color = 'white';
1687 1688 title.style['border-bottom-color'] = 'transparent';
1688 1689 } else {
1689   - innerChildNode.style.background = '-webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD))';
1690   - innerChildNode.style['font-weight'] = 'normal';
1691   - innerChildNode.style.color = 'black';
  1690 + normal = normal + ' bb-bb10-image-list-header-normal-'+bb.screen.listColor;
1692 1691 innerChildNode.style['border-bottom-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
1693 1692 }
1694 1693
@@ -1782,14 +1781,23 @@ bb.imageList = {
1782 1781 // Clean-up
1783 1782 innerChildNode.removeAttribute('data-bb-img');
1784 1783 innerChildNode.removeAttribute('data-bb-title');
  1784 + // Add our highlight overlay
  1785 + overlay = document.createElement('div');
  1786 + overlay.setAttribute('class','bb-bb10-image-list-item-overlay-'+res);
  1787 + innerChildNode.appendChild(overlay);
  1788 +
1785 1789 // Set up our variables
1786 1790 innerChildNode.fingerDown = false;
1787 1791 innerChildNode.contextShown = false;
  1792 + innerChildNode.overlay = overlay;
1788 1793 innerChildNode.contextMenu = contextMenu;
1789 1794 innerChildNode.description = description;
1790 1795 innerChildNode.title = title.innerHTML;
  1796 +
  1797 +
1791 1798 innerChildNode.ontouchstart = function () {
1792   - this.setAttribute('class',this.highlight);
  1799 + //this.setAttribute('class',this.highlight);
  1800 + this.overlay.style['border-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
1793 1801 innerChildNode.fingerDown = true;
1794 1802 innerChildNode.contextShown = false;
1795 1803 if (innerChildNode.contextMenu) {
@@ -1797,7 +1805,8 @@ bb.imageList = {
1797 1805 }
1798 1806 };
1799 1807 innerChildNode.ontouchend = function (event) {
1800   - this.setAttribute('class',this.normal);
  1808 + //this.setAttribute('class',this.normal);
  1809 + this.overlay.style['border-color'] = 'transparent';
1801 1810 innerChildNode.fingerDown = false;
1802 1811 if (innerChildNode.contextShown) {
1803 1812 event.preventDefault();
@@ -1811,6 +1820,23 @@ bb.imageList = {
1811 1820 }
1812 1821 };
1813 1822 innerChildNode.touchTimer = innerChildNode.touchTimer.bind(innerChildNode);
  1823 +
  1824 + // Add our subscription for click events to change highlighting on click
  1825 + innerChildNode.trappedClick = innerChildNode.onclick;
  1826 + innerChildNode.onclick = undefined;
  1827 + innerChildNode.addEventListener('click',function (e) {
  1828 + this.setAttribute('class',this.highlight);
  1829 + if (this.trappedClick) {
  1830 + setTimeout(this.trappedClick, 0);
  1831 + }
  1832 + setTimeout(this.finishHighlight, 250);
  1833 + },false);
  1834 +
  1835 + // Finish the highlight on a delay
  1836 + innerChildNode.finishHighlight = function() {
  1837 + this.setAttribute('class',this.normal);
  1838 + };
  1839 + innerChildNode.finishHighlight = innerChildNode.finishHighlight.bind(innerChildNode);
1814 1840 }
1815 1841 }
1816 1842 }
@@ -2004,9 +2030,7 @@ bb.grid = {
2004 2030 title.style.color = 'white';
2005 2031 title.style['border-bottom-color'] = 'transparent';
2006 2032 } else {
2007   - title.style.background = '-webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD))';
2008   - title.style['font-weight'] = 'normal';
2009   - title.style.color = 'black';
  2033 + title.normal = title.normal + ' bb-bb10-grid-header-normal-'+bb.screen.listColor;
2010 2034 title.style['border-bottom-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
2011 2035 }
2012 2036
115 samples/bbui-0.9.2.css
@@ -1829,24 +1829,41 @@ a.bb5-button-highlight span {
1829 1829 font-weight: bold;
1830 1830 }
1831 1831
  1832 +.bb-bb10-image-list-header-normal-light {
  1833 + background: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
  1834 + font-weight: normal;
  1835 + color: black;
  1836 +}
  1837 +
  1838 +.bb-bb10-image-list-header-normal-dark {
  1839 + background: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
  1840 + font-weight: normal;
  1841 + color: white;
  1842 +}
  1843 +
1832 1844 .bb-bb10-image-list-header-hires
1833 1845 {
1834   - height:47px;
  1846 + height:44px;
1835 1847 line-height:47px;
1836 1848 font-size: 28pt;
1837 1849 padding-top:5px;
  1850 + border-bottom-width: 3px;
  1851 + border-bottom-style: solid;
  1852 + margin-bottom: 1px;
1838 1853 }
1839 1854
1840 1855 .bb-bb10-image-list-header-lowres
1841 1856 {
1842   - height:30px;
  1857 + height:28px;
1843 1858 line-height:30px;
1844 1859 font-size: 16pt;
  1860 + border-bottom-width: 2px;
  1861 + border-bottom-style: solid;
  1862 + margin-bottom: 1px;
1845 1863 }
1846 1864
1847 1865 .bb-bb10-image-list-header p
1848 1866 {
1849   - color: White;
1850 1867 margin:0px;
1851 1868 padding:0px;
1852 1869 padding-top:4px;
@@ -1893,14 +1910,44 @@ a.bb5-button-highlight span {
1893 1910 padding-left: 5px;
1894 1911 height: 56px;
1895 1912 border-bottom-width: 1px;
  1913 + border-top-width: 1px;
  1914 + border-top-style: solid;
  1915 + border-bottom-style: solid;
1896 1916 }
1897 1917
1898 1918 .bb-bb10-image-list-item-hires
1899 1919 {
1900 1920 padding-top: 6px;
1901 1921 padding-left: 5px;
1902   - height: 113px;
  1922 + height: 111px;
  1923 + border-top-width: 2px;
1903 1924 border-bottom-width: 2px;
  1925 + border-top-style: solid;
  1926 + border-bottom-style: solid;
  1927 +}
  1928 +
  1929 +.bb-bb10-image-list-item-overlay-hires {
  1930 + position:relative;
  1931 + border-width: 4px;
  1932 + border-style: solid;
  1933 + border-color: transparent;
  1934 + background-color: transparent;
  1935 + z-index: 100;
  1936 + margin-top: -118px;
  1937 + margin-left: -5px;
  1938 + height: 109px;
  1939 +}
  1940 +
  1941 +.bb-bb10-image-list-item-overlay-lowres {
  1942 + position:relative;
  1943 + border-width: 2px;
  1944 + border-style: solid;
  1945 + border-color: transparent;
  1946 + background-color: transparent;
  1947 + z-index: 100;
  1948 + margin-top: -61px;
  1949 + margin-left: -5px;
  1950 + height: 55px;
1904 1951 }
1905 1952
1906 1953 .bb-bb10-image-list-item-details-lowres
@@ -1932,15 +1979,15 @@ a.bb5-button-highlight span {
1932 1979 .bb-bb10-image-list-item-dark
1933 1980 {
1934 1981 color:White;
1935   - border-bottom-style: solid;
  1982 + border-bottom-color: #3A3A3A;
1936 1983 border-bottom-color: #3A3A3A;
1937 1984 }
1938 1985
1939 1986 .bb-bb10-image-list-item-light
1940 1987 {
1941 1988 color:Black;
1942   - border-bottom-style: solid;
1943 1989 border-bottom-color: #D9DCDE;
  1990 + border-top-color: #D9DCDE;
1944 1991 }
1945 1992
1946 1993 .bb-bb10-image-list-item-lowres .title
@@ -2954,27 +3001,44 @@ a.bb5-button-highlight span {
2954 3001 padding:0px;
2955 3002 }
2956 3003
  3004 +
2957 3005 .bb-bb10-grid-header-lowres
2958 3006 {
2959   - height:30px;
  3007 + height:28px;
2960 3008 line-height:30px;
2961 3009 vertical-align:middle;
  3010 + border-bottom-width: 2px;
  3011 + border-bottom-style: solid;
  3012 + font-weight: bold;
2962 3013 }
2963 3014
2964 3015 .bb-bb10-grid-header-hires
2965 3016 {
2966   - height:46px;
  3017 + height:44px;
2967 3018 line-height:46px;
2968 3019 padding-top:5px;
2969 3020 vertical-align:middle;
2970 3021 padding-left: 10px;
  3022 + border-bottom-width: 3px;
  3023 + border-bottom-style: solid;
  3024 + font-weight: bold;
  3025 +}
  3026 +
  3027 +.bb-bb10-grid-header-normal-light {
  3028 + background: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
  3029 + font-weight: normal;
  3030 + color: black;
  3031 +}
  3032 +
  3033 +.bb-bb10-grid-header-normal-dark {
  3034 + background: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
  3035 + font-weight: normal;
  3036 + color: white;
2971 3037 }
2972 3038
2973 3039 .bb-bb10-grid-header-lowres p
2974 3040 {
2975   - color: White;
2976 3041 font-size: 16pt;
2977   - font-weight: bold;
2978 3042 line-height:30px;
2979 3043 margin:0px;
2980 3044 padding:0px;
@@ -2984,9 +3048,7 @@ a.bb5-button-highlight span {
2984 3048
2985 3049 .bb-bb10-grid-header-hires p
2986 3050 {
2987   - color: White;
2988 3051 font-size: 28pt;
2989   - font-weight: bold;
2990 3052 line-height:46px;
2991 3053 margin:0px;
2992 3054 padding:0px;
@@ -2994,6 +3056,35 @@ a.bb5-button-highlight span {
2994 3056 margin-left: 10px;
2995 3057 }
2996 3058
  3059 +.bb-bb10-grid-header-left-lowres
  3060 +{
  3061 + text-align:left;
  3062 + padding-left: 10px;
  3063 +}
  3064 +
  3065 +.bb-bb10-grid-header-right-lowres
  3066 +{
  3067 + text-align:right;
  3068 + padding-right: 10px;
  3069 +}
  3070 +
  3071 +.bb-bb10-grid-header-left-hires
  3072 +{
  3073 + text-align:left;
  3074 + padding-left: 20px;
  3075 +}
  3076 +
  3077 +.bb-bb10-grid-header-right-hires
  3078 +{
  3079 + text-align:right;
  3080 + padding-right: 20px;
  3081 +}
  3082 +
  3083 +.bb-bb10-grid-header-center
  3084 +{
  3085 + text-align:center;
  3086 +}
  3087 +
2997 3088 .bb-bb10-grid-row-lowres
2998 3089 {
2999 3090 padding:1px;
154 samples/bbui-0.9.2.js
@@ -1631,11 +1631,19 @@ bb.imageList = {
1631 1631 innerChildNode,
1632 1632 normal,
1633 1633 highlight,
  1634 + R,G,B,
1634 1635 contextMenu,
1635 1636 items,
1636 1637 hideImages,
1637 1638 imageEffect,
1638   - imagePlaceholder;
  1639 + imagePlaceholder,
  1640 + solidHeader = false,
  1641 + headerJustify;
  1642 +
  1643 + // Get our highlight RGB colors
  1644 + R = parseInt((bb.slider.cutHex(bb.options.bb10HighlightColor)).substring(0,2),16)
  1645 + G = parseInt((bb.slider.cutHex(bb.options.bb10HighlightColor)).substring(2,4),16);
  1646 + B = parseInt((bb.slider.cutHex(bb.options.bb10HighlightColor)).substring(4,6),16);
1639 1647
1640 1648 // Apply our transforms to all Image Lists
1641 1649 for (i = 0; i < elements.length; i++) {
@@ -1647,6 +1655,11 @@ bb.imageList = {
1647 1655 imagePlaceholder = outerElement.hasAttribute('data-bb-image-placeholder') ? outerElement.getAttribute('data-bb-image-placeholder') : undefined;
1648 1656 }
1649 1657
  1658 + // Get our header style
  1659 + solidHeader = outerElement.hasAttribute('data-bb-header-style') ? (outerElement.getAttribute('data-bb-header-style').toLowerCase() == 'solid') : false;
  1660 + // Get our header justification
  1661 + headerJustify = outerElement.hasAttribute('data-bb-header-justify') ? outerElement.getAttribute('data-bb-header-justify').toLowerCase() : 'center';
  1662 +
1650 1663 // Assign our context menu if there is one
1651 1664 if (outerElement.hasAttribute('data-bb-context') && outerElement.getAttribute('data-bb-context').toLowerCase() == 'true') {
1652 1665 contextMenu = bb.screen.contextMenu;
@@ -1660,6 +1673,7 @@ bb.imageList = {
1660 1673 var type = innerChildNode.getAttribute('data-bb-type').toLowerCase(),
1661 1674 description = innerChildNode.innerHTML,
1662 1675 title,
  1676 + overlay,
1663 1677 accentText,
1664 1678 img,
1665 1679 details,
@@ -1667,36 +1681,29 @@ bb.imageList = {
1667 1681
1668 1682 if (type == 'header') {
1669 1683 // Set our normal and highlight styling
1670   - normal = 'bb-bb10-image-list-header bb10Accent bb-bb10-image-list-header-'+res;
1671   - highlight = 'bb-bb10-image-list-header bb10Highlight bb-bb10-image-list-header-'+res;
  1684 + normal = 'bb-bb10-image-list-header bb-bb10-image-list-header-'+res;
  1685 + if (solidHeader) {
  1686 + normal = normal +' bb10Accent';
  1687 + innerChildNode.style.color = 'white';
  1688 + title.style['border-bottom-color'] = 'transparent';
  1689 + } else {
  1690 + normal = normal + ' bb-bb10-image-list-header-normal-'+bb.screen.listColor;
  1691 + innerChildNode.style['border-bottom-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
  1692 + }
  1693 +
1672 1694 // Check for alignment
1673   - if (innerChildNode.hasAttribute('data-bb-justify')) {
1674   - if (innerChildNode.getAttribute('data-bb-justify').toLowerCase() == 'left') {
1675   - normal = normal + ' bb-bb10-image-list-header-left-'+res;
1676   - highlight = highlight + ' bb-bb10-image-list-header-left-'+res;
1677   - } else if (innerChildNode.getAttribute('data-bb-justify').toLowerCase() == 'right') {
1678   - normal = normal + ' bb-bb10-image-list-header-right-'+res;
1679   - highlight = highlight + ' bb-bb10-image-list-header-right-'+res;
1680   - } else {
1681   - normal = normal + ' bb-bb10-image-list-header-center';
1682   - highlight = highlight + ' bb-bb10-image-list-header-center';
1683   - }
  1695 + if (headerJustify == 'left') {
  1696 + normal = normal + ' bb-bb10-image-list-header-left-'+res;
  1697 + } else if (headerJustify == 'right') {
  1698 + normal = normal + ' bb-bb10-image-list-header-right-'+res;
1684 1699 } else {
1685 1700 normal = normal + ' bb-bb10-image-list-header-center';
1686   - highlight = highlight + ' bb-bb10-image-list-header-center';
1687 1701 }
1688 1702
1689 1703 // Set our styling
1690 1704 innerChildNode.normal = normal;
1691   - innerChildNode.highlight = highlight;
1692 1705 innerChildNode.innerHTML = '<p>'+ description +'</p>';
1693 1706 innerChildNode.setAttribute('class', normal);
1694   - innerChildNode.ontouchstart = function () {
1695   - this.setAttribute('class', this.highlight);
1696   - }
1697   - innerChildNode.ontouchend = function () {
1698   - this.setAttribute('class',this.normal);
1699   - }
1700 1707 }
1701 1708 else if (type == 'item') {
1702 1709 normal = 'bb-bb10-image-list-item bb-bb10-image-list-item-' + bb.screen.listColor + ' bb-bb10-image-list-item-' + res;
@@ -1774,14 +1781,23 @@ bb.imageList = {
1774 1781 // Clean-up
1775 1782 innerChildNode.removeAttribute('data-bb-img');
1776 1783 innerChildNode.removeAttribute('data-bb-title');
  1784 + // Add our highlight overlay
  1785 + overlay = document.createElement('div');
  1786 + overlay.setAttribute('class','bb-bb10-image-list-item-overlay-'+res);
  1787 + innerChildNode.appendChild(overlay);
  1788 +
1777 1789 // Set up our variables
1778 1790 innerChildNode.fingerDown = false;
1779 1791 innerChildNode.contextShown = false;
  1792 + innerChildNode.overlay = overlay;
1780 1793 innerChildNode.contextMenu = contextMenu;
1781 1794 innerChildNode.description = description;
1782 1795 innerChildNode.title = title.innerHTML;
  1796 +
  1797 +
1783 1798 innerChildNode.ontouchstart = function () {
1784   - this.setAttribute('class',this.highlight);
  1799 + //this.setAttribute('class',this.highlight);
  1800 + this.overlay.style['border-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
1785 1801 innerChildNode.fingerDown = true;
1786 1802 innerChildNode.contextShown = false;
1787 1803 if (innerChildNode.contextMenu) {
@@ -1789,7 +1805,8 @@ bb.imageList = {
1789 1805 }
1790 1806 };
1791 1807 innerChildNode.ontouchend = function (event) {
1792   - this.setAttribute('class',this.normal);
  1808 + //this.setAttribute('class',this.normal);
  1809 + this.overlay.style['border-color'] = 'transparent';
1793 1810 innerChildNode.fingerDown = false;
1794 1811 if (innerChildNode.contextShown) {
1795 1812 event.preventDefault();
@@ -1803,6 +1820,23 @@ bb.imageList = {
1803 1820 }
1804 1821 };
1805 1822 innerChildNode.touchTimer = innerChildNode.touchTimer.bind(innerChildNode);
  1823 +
  1824 + // Add our subscription for click events to change highlighting on click
  1825 + innerChildNode.trappedClick = innerChildNode.onclick;
  1826 + innerChildNode.onclick = undefined;
  1827 + innerChildNode.addEventListener('click',function (e) {
  1828 + this.setAttribute('class',this.highlight);
  1829 + if (this.trappedClick) {
  1830 + setTimeout(this.trappedClick, 0);
  1831 + }
  1832 + setTimeout(this.finishHighlight, 250);
  1833 + },false);
  1834 +
  1835 + // Finish the highlight on a delay
  1836 + innerChildNode.finishHighlight = function() {
  1837 + this.setAttribute('class',this.normal);
  1838 + };
  1839 + innerChildNode.finishHighlight = innerChildNode.finishHighlight.bind(innerChildNode);
1806 1840 }
1807 1841 }
1808 1842 }
@@ -1815,6 +1849,7 @@ bb.imageList = {
1815 1849 outEvent,
1816 1850 outerElement = elements[i],
1817 1851 imagePlaceholder,
  1852 + headerJustify,
1818 1853 hideImages = outerElement.hasAttribute('data-bb-images') ? (outerElement.getAttribute('data-bb-images').toLowerCase() == 'none') : false;
1819 1854
1820 1855 if (!hideImages) {
@@ -1833,6 +1868,10 @@ bb.imageList = {
1833 1868 } else {
1834 1869 outerElement.setAttribute('class','bb-lowres-image-list');
1835 1870 }
  1871 +
  1872 + // Get our header justification
  1873 + headerJustify = outerElement.hasAttribute('data-bb-header-justify') ? outerElement.getAttribute('data-bb-header-justify').toLowerCase() : 'center';
  1874 +
1836 1875 // Gather our inner items
1837 1876 var items = outerElement.querySelectorAll('[data-bb-type=item], [data-bb-type=header]'),
1838 1877 innerChildNode,
@@ -1865,17 +1904,12 @@ bb.imageList = {
1865 1904 normal = 'bb-'+res+'-image-list-header';
1866 1905 highlight = 'bb-'+res+'-image-list-header-hover';
1867 1906 // Check for alignment
1868   - if (innerChildNode.hasAttribute('data-bb-justify')) {
1869   - if (innerChildNode.getAttribute('data-bb-justify').toLowerCase() == 'left') {
1870   - normal = normal + ' bb-'+res+'-image-list-header-left';
1871   - highlight = highlight + ' bb-'+res+'-image-list-header-left';
1872   - } else if (innerChildNode.getAttribute('data-bb-justify').toLowerCase() == 'right') {
1873   - normal = normal + ' bb-'+ res+'-image-list-header-right';
1874   - highlight = highlight + ' bb-'+res+'-image-list-header-right';
1875   - } else {
1876   - normal = normal + ' bb-'+res+'-image-list-header-center';
1877   - highlight = highlight + ' bb-'+res+'-image-list-header-center';
1878   - }
  1907 + if (headerJustify == 'left') {
  1908 + normal = normal + ' bb-'+res+'-image-list-header-left';
  1909 + highlight = highlight + ' bb-'+res+'-image-list-header-left';
  1910 + } else if (headerJustify == 'right') {
  1911 + normal = normal + ' bb-'+ res+'-image-list-header-right';
  1912 + highlight = highlight + ' bb-'+res+'-image-list-header-right';
1879 1913 } else {
1880 1914 normal = normal + ' bb-'+res+'-image-list-header-center';
1881 1915 highlight = highlight + ' bb-'+res+'-image-list-header-center';
@@ -1945,12 +1979,15 @@ bb.imageList = {
1945 1979 bb.grid = {
1946 1980 apply: function(elements) {
1947 1981 if (bb.device.isBB10) {
1948   - var res;
1949   - if (bb.device.isPlayBook) {
1950   - res = 'lowres';
1951   - } else {
1952   - res = 'hires';
1953   - }
  1982 + var res = (bb.device.isPlayBook) ? 'lowres' : 'hires',
  1983 + R,G,B,
  1984 + solidHeader = false,
  1985 + headerJustify;
  1986 +
  1987 + // Get our highlight RGB colors
  1988 + R = parseInt((bb.slider.cutHex(bb.options.bb10HighlightColor)).substring(0,2),16)
  1989 + G = parseInt((bb.slider.cutHex(bb.options.bb10HighlightColor)).substring(2,4),16);
  1990 + B = parseInt((bb.slider.cutHex(bb.options.bb10HighlightColor)).substring(4,6),16);
1954 1991 // Apply our transforms to all grids
1955 1992 for (var i = 0; i < elements.length; i++) {
1956 1993 var j,
@@ -1965,6 +2002,11 @@ bb.grid = {
1965 2002 // See if it is square or landscape layout
1966 2003 outerElement.isSquare = (outerElement.hasAttribute('data-bb-style') && outerElement.getAttribute('data-bb-style').toLowerCase() == 'square');
1967 2004
  2005 + // Get our header style
  2006 + solidHeader = outerElement.hasAttribute('data-bb-header-style') ? (outerElement.getAttribute('data-bb-header-style').toLowerCase() == 'solid') : false;
  2007 + // Get our header justification
  2008 + headerJustify = outerElement.hasAttribute('data-bb-header-justify') ? outerElement.getAttribute('data-bb-header-justify').toLowerCase() : 'center';
  2009 +
1968 2010 // Assign our context menu if there is one
1969 2011 if (outerElement.hasAttribute('data-bb-context') && outerElement.getAttribute('data-bb-context').toLowerCase() == 'true') {
1970 2012 contextMenu = bb.screen.contextMenu;
@@ -1979,16 +2021,30 @@ bb.grid = {
1979 2021 type = innerChildNode.getAttribute('data-bb-type').toLowerCase();
1980 2022 if (type == 'group' && innerChildNode.hasAttribute('data-bb-title')) {
1981 2023 title = document.createElement('div');
1982   - title.normal = 'bb-bb10-grid-header-'+res+' bb10Accent';
1983   - title.highlight = 'bb-bb10-grid-header-'+res+' bb10Highlight';
  2024 + title.normal = 'bb-bb10-grid-header-'+res;
1984 2025 title.innerHTML = '<p>'+ innerChildNode.getAttribute('data-bb-title') +'</p>';
  2026 +
  2027 + // Style our header for appearance
  2028 + if (solidHeader) {
  2029 + title.normal = title.normal +' bb10Accent';
  2030 + title.style.color = 'white';
  2031 + title.style['border-bottom-color'] = 'transparent';
  2032 + } else {
  2033 + title.normal = title.normal + ' bb-bb10-grid-header-normal-'+bb.screen.listColor;
  2034 + title.style['border-bottom-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
  2035 + }
  2036 +
  2037 + // Style our header for text justification
  2038 + if (headerJustify == 'left') {
  2039 + title.normal = title.normal + ' bb-bb10-grid-header-left-'+res;
  2040 + } else if (headerJustify == 'right') {
  2041 + title.normal = title.normal + ' bb-bb10-grid-header-right-'+res;
  2042 + } else {
  2043 + title.normal = title.normal + ' bb-bb10-grid-header-center';
  2044 + }
  2045 +
1985 2046 title.setAttribute('class', title.normal);
1986   - title.ontouchstart = function() {
1987   - this.setAttribute('class',this.highlight);
1988   - };
1989   - title.ontouchend = function() {
1990   - this.setAttribute('class',this.normal);
1991   - };
  2047 +
1992 2048 if (innerChildNode.firstChild) {
1993 2049 innerChildNode.insertBefore(title, innerChildNode.firstChild);
1994 2050 } else {
63 src/bbUI.css
@@ -1829,6 +1829,18 @@ a.bb5-button-highlight span {
1829 1829 font-weight: bold;
1830 1830 }
1831 1831
  1832 +.bb-bb10-image-list-header-normal-light {
  1833 + background: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
  1834 + font-weight: normal;
  1835 + color: black;
  1836 +}
  1837 +
  1838 +.bb-bb10-image-list-header-normal-dark {
  1839 + background: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
  1840 + font-weight: normal;
  1841 + color: white;
  1842 +}
  1843 +
1832 1844 .bb-bb10-image-list-header-hires
1833 1845 {
1834 1846 height:44px;
@@ -1837,6 +1849,7 @@ a.bb5-button-highlight span {
1837 1849 padding-top:5px;
1838 1850 border-bottom-width: 3px;
1839 1851 border-bottom-style: solid;
  1852 + margin-bottom: 1px;
1840 1853 }
1841 1854
1842 1855 .bb-bb10-image-list-header-lowres
@@ -1846,6 +1859,7 @@ a.bb5-button-highlight span {
1846 1859 font-size: 16pt;
1847 1860 border-bottom-width: 2px;
1848 1861 border-bottom-style: solid;
  1862 + margin-bottom: 1px;
1849 1863 }
1850 1864
1851 1865 .bb-bb10-image-list-header p
@@ -1896,14 +1910,44 @@ a.bb5-button-highlight span {
1896 1910 padding-left: 5px;
1897 1911 height: 56px;
1898 1912 border-bottom-width: 1px;
  1913 + border-top-width: 1px;
  1914 + border-top-style: solid;
  1915 + border-bottom-style: solid;
1899 1916 }
1900 1917
1901 1918 .bb-bb10-image-list-item-hires
1902 1919 {
1903 1920 padding-top: 6px;
1904 1921 padding-left: 5px;
1905   - height: 113px;
  1922 + height: 111px;
  1923 + border-top-width: 2px;
1906 1924 border-bottom-width: 2px;
  1925 + border-top-style: solid;
  1926 + border-bottom-style: solid;
  1927 +}
  1928 +
  1929 +.bb-bb10-image-list-item-overlay-hires {
  1930 + position:relative;
  1931 + border-width: 4px;
  1932 + border-style: solid;
  1933 + border-color: transparent;
  1934 + background-color: transparent;
  1935 + z-index: 100;
  1936 + margin-top: -118px;
  1937 + margin-left: -5px;
  1938 + height: 109px;
  1939 +}
  1940 +
  1941 +.bb-bb10-image-list-item-overlay-lowres {
  1942 + position:relative;
  1943 + border-width: 2px;
  1944 + border-style: solid;
  1945 + border-color: transparent;
  1946 + background-color: transparent;
  1947 + z-index: 100;
  1948 + margin-top: -61px;
  1949 + margin-left: -5px;
  1950 + height: 55px;
1907 1951 }
1908 1952
1909 1953 .bb-bb10-image-list-item-details-lowres
@@ -1935,15 +1979,15 @@ a.bb5-button-highlight span {
1935 1979 .bb-bb10-image-list-item-dark
1936 1980 {
1937 1981 color:White;
1938   - border-bottom-style: solid;
  1982 + border-bottom-color: #3A3A3A;
1939 1983 border-bottom-color: #3A3A3A;
1940 1984 }
1941 1985
1942 1986 .bb-bb10-image-list-item-light
1943 1987 {
1944 1988 color:Black;
1945   - border-bottom-style: solid;
1946 1989 border-bottom-color: #D9DCDE;
  1990 + border-top-color: #D9DCDE;
1947 1991 }
1948 1992
1949 1993 .bb-bb10-image-list-item-lowres .title
@@ -2957,6 +3001,7 @@ a.bb5-button-highlight span {
2957 3001 padding:0px;
2958 3002 }
2959 3003
  3004 +
2960 3005 .bb-bb10-grid-header-lowres
2961 3006 {
2962 3007 height:28px;
@@ -2979,6 +3024,18 @@ a.bb5-button-highlight span {
2979 3024 font-weight: bold;
2980 3025 }
2981 3026
  3027 +.bb-bb10-grid-header-normal-light {
  3028 + background: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
  3029 + font-weight: normal;
  3030 + color: black;
  3031 +}
  3032 +
  3033 +.bb-bb10-grid-header-normal-dark {
  3034 + background: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
  3035 + font-weight: normal;
  3036 + color: white;
  3037 +}
  3038 +
2982 3039 .bb-bb10-grid-header-lowres p
2983 3040 {
2984 3041 font-size: 16pt;
4 src/plugins/grid.js
@@ -52,9 +52,7 @@ bb.grid = {
52 52 title.style.color = 'white';
53 53 title.style['border-bottom-color'] = 'transparent';
54 54 } else {
55   - title.style.background = '-webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD))';
56   - title.style['font-weight'] = 'normal';
57   - title.style.color = 'black';
  55 + title.normal = title.normal + ' bb-bb10-grid-header-normal-'+bb.screen.listColor;
58 56 title.style['border-bottom-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
59 57 }
60 58
36 src/plugins/imageList.js
@@ -49,6 +49,7 @@ bb.imageList = {
49 49 var type = innerChildNode.getAttribute('data-bb-type').toLowerCase(),
50 50 description = innerChildNode.innerHTML,
51 51 title,
  52 + overlay,
52 53 accentText,
53 54 img,
54 55 details,
@@ -62,9 +63,7 @@ bb.imageList = {
62 63 innerChildNode.style.color = 'white';
63 64 title.style['border-bottom-color'] = 'transparent';
64 65 } else {
65   - innerChildNode.style.background = '-webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD))';
66   - innerChildNode.style['font-weight'] = 'normal';
67   - innerChildNode.style.color = 'black';
  66 + normal = normal + ' bb-bb10-image-list-header-normal-'+bb.screen.listColor;
68 67 innerChildNode.style['border-bottom-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
69 68 }
70 69
@@ -158,14 +157,23 @@ bb.imageList = {
158 157 // Clean-up
159 158 innerChildNode.removeAttribute('data-bb-img');
160 159 innerChildNode.removeAttribute('data-bb-title');
  160 + // Add our highlight overlay
  161 + overlay = document.createElement('div');
  162 + overlay.setAttribute('class','bb-bb10-image-list-item-overlay-'+res);
  163 + innerChildNode.appendChild(overlay);
  164 +
161 165 // Set up our variables
162 166 innerChildNode.fingerDown = false;
163 167 innerChildNode.contextShown = false;
  168 + innerChildNode.overlay = overlay;
164 169 innerChildNode.contextMenu = contextMenu;
165 170 innerChildNode.description = description;
166 171 innerChildNode.title = title.innerHTML;
  172 +
  173 +
167 174 innerChildNode.ontouchstart = function () {
168   - this.setAttribute('class',this.highlight);
  175 + //this.setAttribute('class',this.highlight);
  176 + this.overlay.style['border-color'] = 'rgb('+ (R - 32) +', '+ (G - 32) +', '+ (B - 32) +')';
169 177 innerChildNode.fingerDown = true;
170 178 innerChildNode.contextShown = false;
171 179 if (innerChildNode.contextMenu) {
@@ -173,7 +181,8 @@ bb.imageList = {
173 181 }
174 182 };
175 183 innerChildNode.ontouchend = function (event) {
176   - this.setAttribute('class',this.normal);
  184 + //this.setAttribute('class',this.normal);
  185 + this.overlay.style['border-color'] = 'transparent';
177 186 innerChildNode.fingerDown = false;
178 187 if (innerChildNode.contextShown) {
179 188 event.preventDefault();
@@ -187,6 +196,23 @@ bb.imageList = {
187 196 }
188 197 };
189 198 innerChildNode.touchTimer = innerChildNode.touchTimer.bind(innerChildNode);
  199 +
  200 + // Add our subscription for click events to change highlighting on click
  201 + innerChildNode.trappedClick = innerChildNode.onclick;
  202 + innerChildNode.onclick = undefined;
  203 + innerChildNode.addEventListener('click',function (e) {
  204 + this.setAttribute('class',this.highlight);
  205 + if (this.trappedClick) {
  206 + setTimeout(this.trappedClick, 0);
  207 + }
  208 + setTimeout(this.finishHighlight, 250);
  209 + },false);
  210 +
  211 + // Finish the highlight on a delay
  212 + innerChildNode.finishHighlight = function() {
  213 + this.setAttribute('class',this.normal);
  214 + };
  215 + innerChildNode.finishHighlight = innerChildNode.finishHighlight.bind(innerChildNode);
190 216 }
191 217 }
192 218 }

0 comments on commit 666f9ed

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