From 014062258d83f8763ad0ab2b3bccc8ec7d459c75 Mon Sep 17 00:00:00 2001 From: Denis Zakharov Date: Fri, 20 Mar 2020 20:41:13 +0300 Subject: [PATCH 1/5] Add new styleDarkContent (#164) --- README.md | 17 +++++++++++++++++ src/android/StatusBar.java | 13 ++++++++++++- src/browser/StatusBarProxy.js | 1 + src/ios/CDVStatusBar.h | 1 + src/ios/CDVStatusBar.m | 16 ++++++++++------ src/windows/StatusBarProxy.js | 7 +++++++ tests/tests.js | 14 ++++++++++++++ types/index.d.ts | 6 ++++++ www/statusbar.js | 7 ++++++- 9 files changed, 74 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 4b6fc316..5798a9f0 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,7 @@ Although in the global scope, it is not available until after the `deviceready` - StatusBar.overlaysWebView - StatusBar.styleDefault - StatusBar.styleLightContent +- StatusBar.styleDarkContent - StatusBar.styleBlackTranslucent - StatusBar.styleBlackOpaque - StatusBar.backgroundColorByName @@ -168,6 +169,7 @@ StatusBar.styleDefault ================= Use the default statusbar (dark text, for light backgrounds). +For iOS - dark or light text depending on current device theme. StatusBar.styleDefault(); @@ -187,6 +189,21 @@ Use the lightContent statusbar (light text, for dark backgrounds). StatusBar.styleLightContent(); +Supported Platforms +------------------- + +- iOS +- Android 6+ +- Windows + +StatusBar.styleDarkContent +================= + +Use the darkContent statusbar (dark text, for light backgrounds). + + StatusBar.styleDarkContent(); + + Supported Platforms ------------------- diff --git a/src/android/StatusBar.java b/src/android/StatusBar.java index 714c30e8..b998617a 100644 --- a/src/android/StatusBar.java +++ b/src/android/StatusBar.java @@ -183,6 +183,16 @@ public void run() { return true; } + if ("styleDarkContent".equals(action)) { + this.cordova.getActivity().runOnUiThread(new Runnable() { + @Override + public void run() { + setStatusBarStyle("darkcontent"); + } + }); + return true; + } + if ("styleBlackTranslucent".equals(action)) { this.cordova.getActivity().runOnUiThread(new Runnable() { @Override @@ -251,6 +261,7 @@ private void setStatusBarStyle(final String style) { String[] darkContentStyles = { "default", + "darkcontent" }; String[] lightContentStyles = { @@ -269,7 +280,7 @@ private void setStatusBarStyle(final String style) { return; } - LOG.e(TAG, "Invalid style, must be either 'default', 'lightcontent' or the deprecated 'blacktranslucent' and 'blackopaque'"); + LOG.e(TAG, "Invalid style, must be either 'default', 'lightcontent', 'darkcontent' or the deprecated 'blacktranslucent' and 'blackopaque'"); } } } diff --git a/src/browser/StatusBarProxy.js b/src/browser/StatusBarProxy.js index 3290d58c..113c5bd5 100644 --- a/src/browser/StatusBarProxy.js +++ b/src/browser/StatusBarProxy.js @@ -36,6 +36,7 @@ module.exports = { styleBlackTranslucent:notSupported, styleDefault:notSupported, styleLightContent:notSupported, + styleDarkContent: notSupported, styleBlackOpaque:notSupported, overlaysWebView:notSupported, styleLightContect: notSupported, diff --git a/src/ios/CDVStatusBar.h b/src/ios/CDVStatusBar.h index 0be08cc3..ba7b0e80 100644 --- a/src/ios/CDVStatusBar.h +++ b/src/ios/CDVStatusBar.h @@ -36,6 +36,7 @@ - (void) styleDefault:(CDVInvokedUrlCommand*)command; - (void) styleLightContent:(CDVInvokedUrlCommand*)command; +- (void) styleDarkContent:(CDVInvokedUrlCommand*)command; - (void) styleBlackTranslucent:(CDVInvokedUrlCommand*)command; - (void) styleBlackOpaque:(CDVInvokedUrlCommand*)command; diff --git a/src/ios/CDVStatusBar.m b/src/ios/CDVStatusBar.m index 1a426393..6c32a076 100644 --- a/src/ios/CDVStatusBar.m +++ b/src/ios/CDVStatusBar.m @@ -294,12 +294,7 @@ - (void) setStatusBarStyle:(NSString*)statusBarStyle - (void) styleDefault:(CDVInvokedUrlCommand*)command { - if (@available(iOS 13.0, *)) { - // TODO - Replace with UIStatusBarStyleDarkContent once Xcode 10 support is dropped - [self setStyleForStatusBar:3]; - } else { - [self setStyleForStatusBar:UIStatusBarStyleDefault]; - } + [self setStyleForStatusBar:UIStatusBarStyleDefault]; } - (void) styleLightContent:(CDVInvokedUrlCommand*)command @@ -307,6 +302,15 @@ - (void) styleLightContent:(CDVInvokedUrlCommand*)command [self setStyleForStatusBar:UIStatusBarStyleLightContent]; } +- (void) styleDarkContent:(CDVInvokedUrlCommand*)command +{ + if (@available(iOS 13.0, *)) { + [self setStyleForStatusBar:UIStatusBarStyleDarkContent]; + } else { + [self styleDefault: command]; + } +} + - (void) styleBlackTranslucent:(CDVInvokedUrlCommand*)command { [self setStyleForStatusBar:UIStatusBarStyleLightContent]; diff --git a/src/windows/StatusBarProxy.js b/src/windows/StatusBarProxy.js index 3929ff0a..a472b229 100644 --- a/src/windows/StatusBarProxy.js +++ b/src/windows/StatusBarProxy.js @@ -78,6 +78,13 @@ module.exports = { } }, + styleDarkContent: function () { + // dark text ( to be used on a light background ) + if (isSupported()) { + getViewStatusBar().foregroundColor = { a: 0, r: 0, g: 0, b: 0 }; + } + }, + styleBlackTranslucent: function () { // #88000000 ? Apple says to use lightContent instead return module.exports.styleLightContent(); diff --git a/tests/tests.js b/tests/tests.js index 5a8fe396..eea800e1 100644 --- a/tests/tests.js +++ b/tests/tests.js @@ -54,6 +54,9 @@ exports.defineAutoTests = function () { expect(window.StatusBar.styleLightContent).toBeDefined(); expect(typeof window.StatusBar.styleLightContent).toBe("function"); + expect(window.StatusBar.styleDarkContent).toBeDefined(); + expect(typeof window.StatusBar.styleDarkContent).toBe("function"); + expect(window.StatusBar.styleBlackOpaque).toBeDefined(); expect(typeof window.StatusBar.styleBlackOpaque).toBe("function"); @@ -96,6 +99,11 @@ exports.defineManualTests = function (contentEl, createActionButton) { StatusBar.styleDefault(); } + function doColor4() { + log('set style=dark'); + StatusBar.styleDarkContent(); + } + var showOverlay = true; function doOverlay() { showOverlay = !showOverlay; @@ -114,6 +122,8 @@ exports.defineManualTests = function (contentEl, createActionButton) { '

' + 'Expected result: Status bar text will be a light (white) color' + '

' + + 'Expected result: Status bar text will be a dark (black) color
for iOS - a device theme depending (black or white) color' + + '

' + 'Expected result: Status bar text will be a dark (black) color' + '

' + 'Expected result:
Overlay true = status bar will lay on top of web view content
Overlay false = status bar will be separate from web view and will not cover content' + @@ -145,6 +155,10 @@ exports.defineManualTests = function (contentEl, createActionButton) { doColor3(); }, 'action-color3'); + createActionButton("Style=dark", function () { + doColor4(); + }, 'action-color4'); + createActionButton("Toggle Overlays", function () { doOverlay(); }, 'action-overlays'); diff --git a/types/index.d.ts b/types/index.d.ts index 608f989e..0c50729a 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -26,6 +26,7 @@ interface StatusBar { /** * Use the default statusbar (dark text, for light backgrounds). + * For iOS - dark or light text depending on a device configuration. */ styleDefault(): void; @@ -34,6 +35,11 @@ interface StatusBar { */ styleLightContent(): void; + /** + * Use the darkContent statusbar (dark text, for light backgrounds). + */ + styleDarkContent(): void; + /** * Use the blackTranslucent statusbar (light text, for dark backgrounds). */ diff --git a/www/statusbar.js b/www/statusbar.js index d9d0ea59..f787d7ee 100644 --- a/www/statusbar.js +++ b/www/statusbar.js @@ -49,7 +49,7 @@ var StatusBar = { }, styleDefault: function () { - // dark text ( to be used on a light background ) + // dark text ( to be used on a light background and on iOS depending on a device configuration ) exec(null, null, "StatusBar", "styleDefault", []); }, @@ -58,6 +58,11 @@ var StatusBar = { exec(null, null, "StatusBar", "styleLightContent", []); }, + styleDarkContent: function () { + // dark text ( to be used on a light background ) + exec(null, null, "StatusBar", "styleDarkContent", []); + }, + styleBlackTranslucent: function () { // #88000000 ? Apple says to use lightContent instead exec(null, null, "StatusBar", "styleBlackTranslucent", []); From d7dcbc48c50d0004f6d9d1f884c6a4d3cb14f3f8 Mon Sep 17 00:00:00 2001 From: Denis Zakharov Date: Fri, 20 Mar 2020 21:01:36 +0300 Subject: [PATCH 2/5] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5798a9f0..8ed8c53c 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ Preferences -- __StatusBarStyle__ (status bar style, defaults to lightcontent). Set the status bar style (e.g. text color). Available options: default, lightcontent, blacktranslucent, blackopaque. +- __StatusBarStyle__ (status bar style, defaults to lightcontent). Set the status bar style (e.g. text color). Available options: default, lightcontent, darkcontent, blacktranslucent, blackopaque. @@ -169,7 +169,7 @@ StatusBar.styleDefault ================= Use the default statusbar (dark text, for light backgrounds). -For iOS - dark or light text depending on current device theme. +For iOS - dark or light text depending on a device current theme. StatusBar.styleDefault(); From dbcc706f67e6e3786d8cc0efe0d05872ef445d67 Mon Sep 17 00:00:00 2001 From: Denis Zakharov Date: Fri, 20 Mar 2020 21:09:07 +0300 Subject: [PATCH 3/5] Use darkcontent attribute value on iOS (#164) --- src/ios/CDVStatusBar.m | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ios/CDVStatusBar.m b/src/ios/CDVStatusBar.m index 6c32a076..1b2bc2a9 100644 --- a/src/ios/CDVStatusBar.m +++ b/src/ios/CDVStatusBar.m @@ -285,6 +285,8 @@ - (void) setStatusBarStyle:(NSString*)statusBarStyle [self styleDefault:nil]; } else if ([lcStatusBarStyle isEqualToString:@"lightcontent"]) { [self styleLightContent:nil]; + } else if ([lcStatusBarStyle isEqualToString:@"darkcontent"]) { + [self styleDarkContent:nil]; } else if ([lcStatusBarStyle isEqualToString:@"blacktranslucent"]) { [self styleBlackTranslucent:nil]; } else if ([lcStatusBarStyle isEqualToString:@"blackopaque"]) { From 1c5ef463d6854b9aa9f3cf4cf8582574ea25d23b Mon Sep 17 00:00:00 2001 From: Denis Zakharov Date: Fri, 20 Mar 2020 21:38:18 +0300 Subject: [PATCH 4/5] Update logging (#164) --- tests/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/tests.js b/tests/tests.js index eea800e1..81ea54ac 100644 --- a/tests/tests.js +++ b/tests/tests.js @@ -100,7 +100,7 @@ exports.defineManualTests = function (contentEl, createActionButton) { } function doColor4() { - log('set style=dark'); + log('set style=darkcontent'); StatusBar.styleDarkContent(); } From 44b7644a1f64d9a4e39a7d2edb7f10200060e3a3 Mon Sep 17 00:00:00 2001 From: Denis Zakharov Date: Sun, 22 Mar 2020 13:37:41 +0300 Subject: [PATCH 5/5] Fix build error (#164) --- src/ios/CDVStatusBar.m | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ios/CDVStatusBar.m b/src/ios/CDVStatusBar.m index f5fb94f5..903f1adf 100644 --- a/src/ios/CDVStatusBar.m +++ b/src/ios/CDVStatusBar.m @@ -311,7 +311,8 @@ - (void) styleLightContent:(CDVInvokedUrlCommand*)command - (void) styleDarkContent:(CDVInvokedUrlCommand*)command { if (@available(iOS 13.0, *)) { - [self setStyleForStatusBar:UIStatusBarStyleDarkContent]; + // [self setStyleForStatusBar:UIStatusBarStyleDarkContent]; + [self setStyleForStatusBar:3]; } else { [self styleDefault: command]; }