nativeBars - status bar visibility and color

ggendre commented 8 years ago

Enable cobalt app developper to custom the status bar visibility and colors.

Guidelines :

On Android the background color should be dark. and darken than bars. because text color is always white.

On iOS the text color can be white or black. The background color is transparent if no bars are set and corresponds to the bars background color if bars are set.

What we could do :

Add a statusBar object in each cobalt.conf controller configuration.

statusBar : {
    visible : true/false,
    lightText : true/false
}

Default would be : visible:true, black ios text color and black android backgroud color.

The default android background color could be calculated to be darker than the specified bars color.

can be set from javascript too

As for native bars, this feature should be available from the JS side too with a function like this :

    cobalt.statusBar.set({ visible: true, lightText : false});

This is sending this message to the native side {type: "ui", control: "statusBar", data: {action: "set", bar: { visible: true, lightText : false}}}

can be set from navigation calls too

As for native bars, this feature should be available on push, replace, modal navigation calls

    cobalt.navigation.push({
       page : 'myPage.html',
       controller : 'myController',
       statusBar: {visible: true, lightText : false}
    });

Progress

[x] Web : add in navigation call
[x] Web : add javascript method
[x] Web : add sample in catalog
[x] Web add JS method and nav stuff in documentation wiki
[x] Android : remove backgroundcolor
[x] Android : use bars backgroundColor or webview backgroundColor + make it darker.
[x] Android : add lightText support for android api>23
[ ] Android : handle on navigation
[ ] Android : handle from javascript event
[ ] Android update documentation wiki (add android<5 note and key for bg color to change in styles)
[x] iOS : rename iosLightText to lightText
[x] iOS : move webview down if no nativeBars
[ ] iOS : animate this change
[ ] iOS : handle on navigation
[ ] iOS : handle from javascript event
[ ] iOS check documentation wiki (default background color etc)
[ ] create a blog post
[ ] check it still works for the dark page link in catalog sample after #92 is done

Doc1faux commented 8 years ago

On iOS, default values:

visible: true,
iosLightText: false

ggendre commented 8 years ago

TO BE DISCUSSED : The current statusbar is over the webview on iOS. should we be able to reproduce this as well ?

proposed API in the issue does not allow this for the moment.

Doc1faux commented 8 years ago

We can't propose this feature while having the WebView background visible under the status bar

Myrdhinn commented 8 years ago

androidBackgroundColor is accessible only for android 5.0 Under you must change the AppTheme, https://developer.android.com/training/material/theme.html#ColorPalette

ggendre commented 8 years ago

@Doc1faux : what we could do is :

renaming androidBackgroundColor to backgroundColor and use it on iOS too to define the background color of the viewController (if defined. if not : do nothing jon snow).
if statusBar is visible, push down the webview so that it is shown below (vertically) of the statusBar.

ggendre commented 8 years ago

@Myrdhinn : rename key androidBackgroundColor to backgroundColor because we will be able to use it on iOS aswell.

Doc1faux commented 8 years ago

@ggendre Mmhhhh NO! The "WebView background color" will be defined by the backgroundColor attribute of the controller defined in the cobalt.confconfiguration file as explained in issue #106. You should not have a status bar color different from the navigation bar one or the view one on iOS!

So, if the navigation bar is not present, the "WebView background" (in fact, the root view one), it should be, in this order:

the backgroundColor of the controller defined in the cobalt.conf file if present (issue #106),
else, the default defined by the xib file or programmatically. In this case, we apply a top margin to the WebView to avoid it being under the status bar.

If navigation bar is present, the status bar color will be the navigation bar background one.

ggendre commented 8 years ago

You are going to hate me but we need to make it possible to configure this from the JS side and in navigation calls. Added tasks for this. it could be done in a second time if needed.

cobaltians / Cobalt