Opened 8 years ago

Closed 8 years ago

#12805 closed enhancement (fixed)

add badge support for dojox.mobile.TabBarButton

Reported by: scheid Owned by: ykami
Priority: high Milestone: 1.8
Component: DojoX Mobile Version: 1.6.0
Keywords: badge tab button 1.8-mobile Cc:
Blocked By: Blocking:

Description

On one of our mobile web projects, we recently had a need to put a badge indicator on a dojox.mobile.TabBarButton?, similar to how iOS shows badges on icons, etc.

I took a look in TabBar?.js in dojox.mobile, and experimented a bit. I arrived at (what I feel) is a pretty good solution and thought I would share it as a possible enhancement, as I'm sure others could use these badges too.

I have attached my modified/hacked TabBar?.js file that will hopefully be helpful. look for comments starting with TME to see what I have added.

As a declarative example, here is example html for how a badge would be specified on a TabBarButton?:

<li dojoType="dojox.mobile.TabBarButton" showBadge="true" badgeColorType="red" badgeText="2"  iconPos1="0,72,24,24" iconPos2="0,168,24,24"  moveTo="view1" selected="true">Problems</li>

badge text can be changed at any time using the 'setBadgeText' method.

I have also attached a screen shot of how the badge is rendered on iOS.

below are css classes to add to iphone.css and android.css:




.mblTabBarButtonBadge_red {
  font-family: Helvetica, Tahoma, Arial, sans-serif;
  font-size: 11pt;
  font-weight: bolder;
  width: 20px;
  padding: 0;
  line-height: 20px;
  text-align: center;
  -webkit-border-radius:20px;
  border: 2px solid white;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff6262), to(#ff0000));
  color: white;
  margin-top: -27px;
  z-index: 999;
  position: absolute;
}

.mblTabBarButtonBadge_green {
  font-family: Helvetica, Tahoma, Arial, sans-serif;
  font-size: 11pt;
  font-weight: bolder;
  width: 20px;
  padding: 0;
  line-height: 20px;
  text-align: center;
  -webkit-border-radius:20px;
  border: 2px solid white;
  background: -webkit-gradient(linear, left top, left bottom, from(#5ad65d), to(#249d25));
  color: white;
  margin-top: -27px;
  z-index: 999;
  position: absolute;
}

I had to include a z-index in the mblTabBarButtonIcon class:

.mblTabBarButtonIcon {
	position: absolute;
	left: 0px;
	top: 2px;
	z-index: 998;   /*TME; set so badge will appear on top of icon*/
}

Attachments (2)

photo.PNG (14.4 KB) - added by scheid 8 years ago.
TabBar.js (7.0 KB) - added by scheid 8 years ago.

Download all attachments as: .zip

Change History (9)

Changed 8 years ago by scheid

Attachment: photo.PNG added

Changed 8 years ago by scheid

Attachment: TabBar.js added

comment:1 Changed 8 years ago by Chris Mitchell

Keywords: 1.7-mobile added
Owner: changed from ykami to Chris Mitchell

Hi scheid,

Thanks for these enhancements.

Quick question, can you confirm that you've signed a CCLA or ICLA with Dojo Foundation (eg. it's on file)? This will definitely help expedite integration of this capability. Otherwise, we have to plan in for 1.8 and do the dev without your patches.

Thanks, Chris

comment:2 Changed 8 years ago by Chris Mitchell

Owner: changed from Chris Mitchell to ykami

comment:3 Changed 8 years ago by Chris Mitchell

consider Badge class to use consistently wherever badge indicators needed, lists, tabs, iconcontainer, etc.

comment:4 Changed 8 years ago by scheid

Hi Chris,

Ah, good point. No, I haven't done a CLA with dojo. I'll check on how to do that asap

Todd

comment:5 Changed 8 years ago by scheid

Hi Chris,

I just got word that I'm covered under the IBM CCLA; hopefully that helps.

Todd

comment:6 Changed 8 years ago by Chris Mitchell

Keywords: 1.8-mobile added; 1.7-mobile removed
Milestone: tbd1.8

comment:7 Changed 8 years ago by ykami

Resolution: fixed
Status: newclosed

In [27635]:

Fixes #12805 !strict Added badge support for TabBar? using DOM Button.

Note: See TracTickets for help on using tickets.