10.3 Styling Updates

[tneil]

This is a placeholder issue for the fact that there are various controls that have received a styling update on 10.3. The goal is to handle 10.3 the same way 10.2 changes were handled so that an application running on 10.2 looks correct for the OS and the same app running on 10.3 will look like it belongs on 10.3

These changes will be maintained in a 10.3 branch until they can be merged.

Process will be to make all of the framework changes based on Z10 core. From there I'll test and make the sizing adjustments if need on the other device resolutions.

Z10

• Buttons [Completed]
• DropDowns [Completed]
• Slider [Completed]
• Progress Bar [Completed]
• Radio Buttons [Completed]
• Toggles [Completed]
• TitleBars [Completed]
• ActionBars [Completed]
• Signature Action & Button Rules [Completed]
• Inputs [Completed]
• List Headers [Completed]
• Grid Headers [Completed]
• Round Panel Headers [Completed]
• CheckBoxes [Completed]
• Pill Buttons [Completed]
• TODO: Ensure that 10.2 styling has not been affected [Completed]
• TODO: Double check press and holds for context menu (action bar specifically) [Completed]

  Z30, Z3

• Buttons [Completed]
• DropDowns [Completed]
• Slider [Completed]
• Progress Bar [Completed]
• Radio Buttons [Completed]
• Toggles [Completed]
• TitleBars [Completed]
• ActionBars [Completed]
• Signature Action & Button Rules [Completed]
• Inputs [Completed]
• List Headers [Completed]
• Grid Headers [Completed]
• Round Panel Headers [Completed]
• CheckBoxes [Completed]
• Pill Buttons [Completed]
• TODO: Double check press and holds for context menu (action bar specifically) [Completed]
• TODO: Ensure that 10.2 styling has not been affected [Completed]
• TODO: ListItem Size corrections [Completed]

  BlackBerry Passport (1440x1440)

Device Details here

• Buttons [Completed]
• DropDowns [Completed]
• Slider [Completed]
• Progress Bar [Completed]
• Radio Buttons [Completed]
• Toggles [Completed]
• TitleBars [Completed]
• ActionBars [Completed]
• Signature Action & Button Rules [Completed]
• Inputs [Completed]
• List Headers [Completed]
• Grid Headers [Completed]
• Round Panel Headers [Completed]
• CheckBoxes [Completed]
• Pill Buttons [Completed]
• List Items [Completed]
• Grid List Items [Completed]
• Activity Indicators [Completed]
• Swipe down Menus [Completed]
• Label Control Rows [Completed]
• TODO: Double check press and holds for context menu (action bar specifically) [Completed]

  Q10, Q5

• Buttons [Completed]
• DropDowns [Completed]
• Slider [Completed]
• Progress Bar [Completed]
• Radio Buttons [Completed]
• Toggles [Completed]
• TitleBars [Completed]
• ActionBars [Completed]
• Signature Action & Button Rules [Completed]
• Inputs [Completed]
• List Headers [Completed]
• Grid Headers [Completed]
• Round Panel Headers [Completed]
• CheckBoxes [Completed]
• Pill Buttons [Completed]
• TODO: Ensure that 10.2 styling has not been affected [Completed]
• TODO: Double check press and holds for context menu (action bar specifically) [Completed]

[MerrickZ]

You're great!

[tneil]

Just finishing up the Signature Action capability of the action bar and then I'll work on the sizing updates for the 1440x1440 device :+1:

[T-M-C]

can we test the 10.3 styling on an 10.2.1 os? like "fake" its running 10.3 for bbui? or would it render inaccurately?

[MerrickZ]

@T-M-C tip: see https://github.com/blackberry/bbUI.js/blob/10.3/pkg/bb10/bbui.js line#59 , make it be "true" so you can use 10.3 style on other system versions. have a try.

[T-M-C]

@anphorea thank you, will try :+1:

[tneil]

Yup you will want to change two lines.. line 59 to true and line 60 which is checking for 10.2 where you will want to set it to false to be safe.

[tneil]

I just checked-in the ability to use a signature action for Z10. Sizing for other devices will be coming along soon. The wiki will be updated when the 10.3 branch gets merged down into the master branch.

To use a signature action, simply create a regular action of data-bb-style="button" and add the data-bb-signature="true" attribute on the action.

<div data-bb-type="action" data-bb-style="button" data-bb-signature="true" data-bb-img="white_cog.png">My Label</div>

Some of the rules for a signature action are:

• They can only be used on an action bar with tabs IF all the tabs are marked as data-bb-overflow="true". If there are visible tabs on the action bar the signature action will not be displayed.
• There can only be 3 visible actions shown on the action bar (not including the tab overflow and action overflow buttons)
• The signature action will always be centered no matter which order it is placed in the DOM.
• If there are two actions the signature action will be placed first in the center of the action bar and the second action will be placed to the right of the signature action

[tneil]

Starting to work on Passport resolution... I'll be starting with Lists first

[tneil]

All done! Merging this one over into the master branch

[rtholmes]

Great work getting this together! The signature action does not seem to be centering correctly for me (on a z10, forcing 10.3 styling); is my markup incorrect?

    <div data-bb-type="action-bar" data-bb-back-caption="Back">
        <div id='tabEdit'   data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/ic_edit.png"     onclick="editId(window.viewId);"    data-bb-accent-text="Edit Track"   >Edit</div>      
        <div id='tabShare'  data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/ic_share.png"    onclick="shareId(window.viewId);"   data-bb-accent-text="Share Track"  data-bb-signature="true">Share</div>     
        <div id='tabDelete' data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/ic_delete.png"   onclick="viewDelete();"             data-bb-accent-text="Delete Track" >Delete</div>
    </div>

[tneil]

Looks like I didn't test the signature action on a bar with the back button. My testing was just with the tab overflow and action overflow.

I'll start looking into this now

[T-M-C]

@tneil nope, happens for me without back button...

[tneil]

it should be centered when you have a tab overflow and action overflow

[T-M-C]

always centered would be great :dancers:

[tneil]

That's the plan.... There's so many bloody cases with the action-bar that I missed the signature action without the tab & action overflow

[tneil]

Test cases that I'm now looking into:

• Tab Overflow, Action Overflow: Works fine and signature action centers
• No Back, No Tab Overflow, No Action Overflow: Works fine and signature action centers
• Tab Overflow, No Action Overflow: Buttons are not aligned properly
• No Back, No Tab Overflow, Action Overflow: Buttons are not aligned properly
• Back, No Action Overflow: Buttons are not aligned properly
• Back, Action Overflow: Buttons are not aligned properly

[rtholmes]

Another problem that might be related:

TypeError: 'undefined' is not an object (evaluating 'action.actionBar.tabOverflowBtn.tabInner') bbui.js:2957

Can be solved by changing:

        if (action.tabInner) {

to:

        if (action.tabInner && action.actionBar && action.actionBar.tabOverflowBtn) {

[tneil]

Can you specify which line/file you are referring to?

[rtholmes]

Sorry, this is from /bbUI.js/pkg/bb10/bbui.js. The second line below // Now highlight this action was giving me the undefined error. Once I added the additional guards the page loaded, but the tab indicator pushed the label partially off the bottom of the screen.

[tneil]

I'm still not clear on what the issue is.. Can you open up a new issue specifically for the OS you are running, device you are using, are you forcing 10.3 styling etc?

[tneil]

Ok.. I just checked in the fix for the centering of the buttons... It should be working now :+1:

[rtholmes]

Thanks, looks great! (just a head's up: the bb.device.is10dot3 && bb.device.is10dot2 guards are forcing 10.3 in the committed version).

[tneil]

Crap! thanks for the heads up :)

[tneil]

Ok.. those have now been fixed and committed :+1:

[gabmontes]

@rtholmes did you finally solve the issue you had with the if (action.tabInner) following // Now highlight this action?

[rtholmes]

Yes, that was what I did, but in the end I just committed to the 10.3 style and moved away from tabs altogether.