Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Issue #513: Add support for the BB10 show password "eye" icon #729

Closed
wants to merge 10 commits into from

2 participants

@dmkc
Collaborator

Had to muck about with event handling a bit to mimic the behaviour of Cascades.

@dmkc
Collaborator

It appears that 1ap1 has implemented the same fix...

@tneil
Owner

It looks like you have the getCaptin and getImage for buttons on this pull request. Can you possibly remove them so that this pull request is reduced to just the password "eye"?

I also noticed that the eye that is being used is only in blue. We would want to make the eye available in the the highlight color theme specified in the init().

Maybe there's a color mask that could be applied through canvas, or draw the eye from scratch in canvas. There's an example of how I do this for activity indicators that you can look at

@dmkc
Collaborator

Thanks for pointing out the getCaption code seeping into this issue. I'll see what I can do about the icon.

dmkc added some commits
@dmkc dmkc Remove conflict 0811793
@dmkc dmkc Remove getCaption acf251e
@dmkc dmkc Fix password eye icon to support highlightColor
* use -webkit-image-mask to change color
* refactor textInput code a bit
0d94f2c
@dmkc
Collaborator

Instead of canvas, I used -webkit-image-mask. Here's the result:

webkit-image-mask used to render the password icon

This relies on a bitmap but seems like a good tradeoff: it's trivial to change the colour of the icon by changing the icon's background-color; it's also AFAICT computationally lighter than drawing on a canvas (albeit not as fun). The eye icon is not of the highest quality at the moment since I hastily added transparency into the original screenshot icon by hand, but I'll redraw the whole thing in vector later tonight to make it pixel sharp.

@dmkc
Collaborator

I've redrawn the icon in Inkscape. The resulting PNG is much leaner, hooray. Here's the SVG file if you need it for some reason. Let me know if this works. Do I need to perform another pull request or can you merge the head of the 513_showpasswd branch from here?

@tneil
Owner

I see a commit 4aee7bc that shows "Replace eye icon with a sharper one".. does that contain everything you need?

@dmkc
Collaborator

Yeah. That's the PNG mask that I use to carve out the button.

@tneil
Owner

Cool.. I'm out on vacation for March Break, I'll look at merging it in after that

@tneil tneil closed this
@dmkc dmkc deleted the branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 5, 2013
  1. @dmkc
  2. @dmkc

    Add CSS and JS to show the eye icon for passwords

    dmkc authored
    TODO: handle focus blurring when hitting the eye.
  3. @dmkc

    Kill swp files

    dmkc authored
Commits on Feb 25, 2013
  1. @dmkc
  2. @dmkc

    Merge remote-tracking branch 'upstream/master' into 513_showpasswd

    dmkc authored
    Conflicts:
    	src/plugins/_bb10_button.js
    	src/plugins/_bb10_textInput.js
Commits on Mar 4, 2013
  1. @dmkc

    Remove conflict

    dmkc authored
  2. @dmkc

    Remove getCaption

    dmkc authored
  3. @dmkc

    Fix password eye icon to support highlightColor

    dmkc authored
    * use -webkit-image-mask to change color
    * refactor textInput code a bit
Commits on Mar 5, 2013
  1. @dmkc
  2. @dmkc
This page is out of date. Refresh to see the latest.
View
24 src/bbUI.css
@@ -1067,6 +1067,7 @@ body, html {
BB10 Input Box for 1280x768 and 1280x720
=================================================*/
+
.bb-bb10-input-container-1280x768-1280x720 {
height:82px;
border-radius:4px;
@@ -1074,6 +1075,24 @@ body, html {
padding: 2px;
}
+.bb-bb10-input-button-passwd-1280x768-1280x720.button-state-default
+{
+ background: black !important;
+}
+
+.bb-bb10-input-button-passwd-1280x768-1280x720
+{
+ position: absolute;
+ /* background color assigned through JS */
+ height: 46px;
+ width: 46px;
+ top: 15px;
+ right: 5px;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAYAAABXuSs3AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAATmSURBVGiB1dlriFVVFAfw3500NY3ELKeZpEgsKiUUkgqUHmQRSVBCD8Ie+qEHJlloSRDRm6AHI01FhFEQQU8qkgj7UEkPFOlB04PMzEmtMEuzTOf04Zxr++45595z78wUblhw7tl7rf//7LP2epxbSZLE/jja/m8CrY79lviwwTBSqVRGYgYmogOdGI0t2IRefJEkyVeDgQeSJGlJMBaX40XsQFJCenAfTmkVdx9+C4TH4Hb8VpJskXyMM/4T4rgue/31CPVhK77F7yUe4E0cOyTEMQrPFwBvwZOYI/XtYTm6k3ED3sGeHBvbcd6gEseRWJMD9iXmoq3Jt9aOR/F3ZG8vbh4U4jgCGyOA33FtvLMtnJXJeC1nQ+4eEHGMxIeR0fWYOhDCEUYFd+aQv2wgxJ+NjH2I8YNFOsKaF7nOLpzcNHFcGpH+HhOGgnSAuTDC/AbDSxPHgVkoqxrYiWlDSTrAfioiv7AZ4osi5aX/BekMe1QUDLbi4IbEMTxbXFX8AaOaAB4urVdOwVmYgvGoNGHjimjjbi1DfHaktKAEUEfmn29jd06EqJ6Rbpxbwl4bPgl015Yh3h0o/IGD6gCMwLLsDDRK66G8i5MakF8a6RxVSFwaU3uDxa/UMXwevm6ScPg29qALYwvsHxfpLqpHfFK0+MoCow9G6z7DT9l1lzSUfplD/Bcsjx5gPY4pwOkJ1r1Qj/isCGh6jrGHgvlfpYXTRdnvTbJDiAUFu34VTsCq4N5GTM7BCou61fWIx0nnyMjQ/cHcV5iY3b8ru7cX06SR5ZkC4ssDe8uC+704OsJ7OJjfUI/4TRHIiGBubnC/Bx3B3L3BXF/2Jor8vDsid0sw91GEGc7tFoXUsFk+MLjuk9YO1XFjcP1+kiS9we81wXUFhygea6LfL0vbPpieSXX8FVwPEzf2wRNeqXZ3Dgvm2tUelq5gbpzapFUk29EZ6E3EhmD+qjquubmeq8TJ58TI0BFqo0WXrAjy7wGtJ/MDW534IphbknM4nw7m+yWhcOGUCOj8HGMd0oMZhsKZ2dwl+Llgp+cHueIatefggYJw+F6w5vV6xEeqzYKPFRjsxKfBuj5pVTcBh0tD3nJpFl5QdQ9MlWbN8KG65NQxOFRtb3pPIfFM4aVg8Y8K+klpyFsmLQuq6//GSizGxTgH83EP1kWEv8XZebYLztuMRsTnRQpnFhnP1h+TkW3k31XZK828oxvYfSPQ2ZfY6hEfp7aF6pexCoBOkyaMuLGuyue4DZNK2Do10u3OXZej+ESkeGEZ8oH+GByPmdJOfmST+qsj9zuuLPEOtYf0GxzSDHirgqujTcsNELnEMwN3RwbeMsDvKCVd5M8AcwfamyU+Rm2CSPD4EJKepP83yevr6jQwFieU5zTRg5YkPdO/9XxDF2lIPDN6uv595Fo59XMLhNtwvbSYCu2vKuOWZQDm6P8tfDcewaEtkp6ttiGuysqygaAs0BS1H4mqsh0rcEEjF8pC4xJ8kGMnkXZXB5R9+Gqr1XBUKpXx0ppkTsGSndIDvVlaLuyU1i/tOEqaZfPGNixOkmRFKSLV0cJrnqU2SbQqu6Q1d26nPyiuUvAA50u/6G5rkvA63CHqaZuV0q5SNCqVynBp9DlT+u9F0d+FPXg1SZLvBgRYxR0o8f9r7Lf/LO+3xP8BKYEM+znHFnEAAAAASUVORK5CYII=");
+}
+
+
.bb-bb10-input-container-focused-1280x768-1280x720
{
color: black;
@@ -1084,6 +1103,7 @@ body, html {
padding: 0px;
}
+
.bb-bb10-input-1280x768-1280x720 {
font-size: 30pt;
height:79px;
@@ -4110,7 +4130,7 @@ a.bb5-button-highlight span {
.bb-pb-image-list-header-default
{
background-image: -webkit-gradient(linear, center top, center bottom, from(#D5D6D7), to(#9E9F9F));
- color: black;
+ color: #4e4e4e;
}
.bb-pb-image-list-header-solid
@@ -6313,4 +6333,4 @@ a.bb5-button-highlight span {
border: none;
padding-top: 0px;
width: 10px;
-}
+}
View
2  src/plugins/_bb10_button.js
@@ -229,4 +229,4 @@ _bb10_button = {
return outerElement;
}
-};
+};
View
141 src/plugins/_bb10_textInput.js
@@ -1,5 +1,5 @@
_bb10_textInput = {
- apply: function(elements) {
+ apply: function(elements) {
for (var i = 0; i < elements.length; i++) {
bb.textInput.style(elements[i]);
}
@@ -8,7 +8,8 @@ _bb10_textInput = {
style: function(outerElement) {
var res = '1280x768-1280x720',
css = '',
- container = document.createElement('div');
+ container = document.createElement('div'),
+ inputBtn = document.createElement('div');
// Set our 'res' for known resolutions, otherwise use the default
if (bb.device.is1024x600) {
@@ -31,11 +32,28 @@ _bb10_textInput = {
container.appendChild(outerElement);
container.input = outerElement;
container.setAttribute('data-bb-type','input');
- container.normal = 'bb-bb10-input-container bb-bb10-input-container-'+ res;
+ container.css = {
+ normal: ' bb-bb10-input-container bb-bb10-input-container-'+res,
+ focused: ' bb-bb10-input-container-focused-'+res,
+ disabled: ' bb-bb10-input-container-disabled',
+ // The cancel button is set via a background image
+ cancelBtn: ' bb-bb10-input-cancel-button'
+ };
+ container.passwdIsShown = false;
+ container.disableBlur = false;
+
+ // Set properties for the password show button
+ inputBtn.css = {
+ 'defaultState': 'button-state-default'
+ }
+ inputBtn.classList.add('bb-bb10-input-button-passwd-1280x768-1280x720');
+ inputBtn.classList.add(inputBtn.css.defaultState);
+ inputBtn.style['background-color'] = bb.options.highlightColor;
// Set our input styling
outerElement.normal = css + ' bb-bb10-input bb-bb10-input-'+res;
outerElement.focused = css + ' bb-bb10-input bb-bb10-input-focused-'+res;
+
if (outerElement.disabled) {
outerElement.setAttribute('class', outerElement.normal + ' bb-bb10-input-disabled');
} else {
@@ -46,6 +64,8 @@ _bb10_textInput = {
outerElement.container = container;
outerElement.clearBtn = outerElement.getAttribute('data-bb-clear') != 'none';
outerElement.hasClearBtn = false;
+ outerElement.showPasswdBtn = outerElement.getAttribute('data-bb-show-password') != 'none';
+ outerElement.hasShowPasswdBtn = false;
// Don't show the clear button on some input types
if (outerElement.type) {
@@ -57,39 +77,73 @@ _bb10_textInput = {
// Set our container class
if (outerElement.disabled) {
- container.setAttribute('class',container.normal + ' bb-bb10-input-container-disabled');
+ container.setAttribute('class',container.css.normal + container.css.disabled);
} else {
- container.setAttribute('class',container.normal);
+ container.setAttribute('class',container.css.normal);
}
outerElement.doFocus = function() {
- if(this.readOnly == false) {
- this.container.setAttribute('class',this.container.normal + ' bb-bb10-input-cancel-button bb-bb10-input-container-focused-'+res);
- if (this.clearBtn && this.value) {
- this.setAttribute('class', this.focused);
- this.hasClearBtn = true;
- } else {
- this.setAttribute('class', this.normal);
- this.hasClearBtn = false;
- }
- this.container.style['border-color'] = bb.options.highlightColor;
- this.isFocused = true;
- this.clickCount = 0;
- bb.screen.focusedInput = this;
- }
- };
+ if(this.readOnly != false) return;
+
+ // non-password inputs show the clear button
+ if(outerElement.type.toLowerCase() != "password" && !this.hasShowPasswdBtn) {
+ this.container.setAttribute('class',
+ this.container.css.normal + this.container.css.focused +
+ this.container.css.cancelBtn );
+
+ if (this.clearBtn && this.value) {
+ this.setAttribute('class', this.focused);
+ this.hasClearBtn = true;
+ } else {
+ this.setAttribute('class', this.normal);
+ this.hasClearBtn = false;
+ }
+
+ // password fields have the show/hide password button
+ } else {
+ this.container.setAttribute('class',
+ this.container.css.normal + this.container.css.focused);
+ this.container.appendChild(inputBtn);
+
+ this.setAttribute('class', this.focused);
+
+ if (this.showPasswdBtn && this.value) {
+ this.hasShowPasswdBtn = true;
+ } else {
+
+ this.hasShowPasswdBtn = false;
+ }
+ }
+ this.container.style['border-color'] = bb.options.highlightColor;
+ this.isFocused = true;
+ this.clickCount = 0;
+
+ bb.screen.focusedInput = this;
+ };
+
outerElement.doFocus = outerElement.doFocus.bind(outerElement);
outerElement.addEventListener('focus', outerElement.doFocus, false);
- outerElement.doBlur = function() {
- this.container.setAttribute('class',this.container.normal);
- if (this.clearBtn) {
- this.setAttribute('class',this.normal);
- }
- this.container.style['border-color'] = '';
- this.isFocused = false;
- bb.screen.focusedInput = null;
- };
+ outerElement.doBlur = function(e) {
+ // Retain focus on input if we clicked on its control
+ // e.g. the password button
+ if (this.container.disableBlur) {
+ this.container.disableBlur = false;
+ this.focus();
+ return;
+ }
+
+ this.container.setAttribute('class',this.container.css.normal);
+ if (this.clearBtn) {
+ this.setAttribute('class',this.normal);
+ }
+ this.container.style['border-color'] = '';
+ if (outerElement.hasShowPasswdBtn) {
+ this.container.removeChild(inputBtn);
+ }
+ this.isFocused = false;
+ bb.screen.focusedInput = null;
+ };
outerElement.doBlur = outerElement.doBlur.bind(outerElement);
outerElement.addEventListener('blur', outerElement.doBlur, false);
@@ -114,6 +168,27 @@ _bb10_textInput = {
}
};
}
+
+ // Behaviour for revealing value of password
+ if (outerElement.showPasswdBtn) {
+ inputBtn.addEventListener('touchstart', function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ container.passwdIsShown = !container.passwdIsShown;
+ var inputType = (container.passwdIsShown) ? 'text' : 'password';
+ outerElement.setAttribute('type', inputType);
+
+ if (container.passwdIsShown) {
+ inputBtn.classList.remove(inputBtn.css.defaultState);
+ } else {
+ inputBtn.classList.add(inputBtn.css.defaultState);
+ }
+
+ container.disableBlur = true;
+ return false;
+ });
+ }
// Add our Show funtion
outerElement.show = function() {
@@ -139,7 +214,7 @@ _bb10_textInput = {
outerElement.enable = function() {
if (!this.disabled) return;
this.disabled = false;
- this.container.setAttribute('class',this.container.normal);
+ this.container.setAttribute('class',this.container.css.normal);
this.setAttribute('class', this.normal);
};
outerElement.enable = outerElement.enable.bind(outerElement);
@@ -148,11 +223,11 @@ _bb10_textInput = {
outerElement.disable = function() {
if (this.disabled) return;
this.disabled = true;
- this.container.setAttribute('class',this.container.normal + ' bb-bb10-input-container-disabled');
+ this.container.setAttribute('class',this.container.css.normal + this.container.css.disabled);
this.setAttribute('class', this.normal + ' bb-bb10-input-disabled');
};
outerElement.disable = outerElement.disable.bind(outerElement);
return container;
- }
-};
+ }
+};
Something went wrong with that request. Please try again.