From 5085a747deff41d2437c330d812f5d7731ab246b Mon Sep 17 00:00:00 2001 From: Luis Silva Date: Fri, 9 Dec 2022 13:46:02 +0000 Subject: [PATCH] feat: add support for the new Dark Content style --- README.md | 19 ++++++++++++++++++- src/android/StatusBar.java | 15 +++++++++++++-- src/browser/StatusBarProxy.js | 11 ++++++----- src/ios/CDVStatusBar.h | 1 + src/ios/CDVStatusBar.m | 18 ++++++++++++------ src/windows/StatusBarProxy.js | 7 +++++++ tests/tests.js | 20 +++++++++++++++++++- types/index.d.ts | 6 ++++++ www/statusbar.js | 9 +++++++-- 9 files changed, 89 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index e704624d..89c4e8a3 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ Preferences -- __StatusBarStyle__ (status bar style, defaults to lightcontent). Set the status bar style (e.g. text color). Available options: `default`, `lightcontent`. `blacktranslucent` and `blackopaque` are also available, but __deprecated__, will be removed in next major release, use `lightcontent` instead. +- __StatusBarStyle__ (status bar style, defaults to lightcontent). Set the status bar style (e.g. text color). Available options: `default`, `lightcontent` and `darkcontent`. `blacktranslucent` and `blackopaque` are also available, but __deprecated__, will be removed in next major release, use `lightcontent` instead. @@ -118,6 +118,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 @@ -164,6 +165,7 @@ StatusBar.styleDefault ================= Use the default statusbar (dark text, for light backgrounds). +For iOS - dark or light text depending on a device current theme. StatusBar.styleDefault(); @@ -183,6 +185,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 2e40eb03..ee9388c0 100644 --- a/src/android/StatusBar.java +++ b/src/android/StatusBar.java @@ -261,6 +261,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 @@ -347,7 +357,8 @@ private void setStatusBarStyle(final String style) { int uiOptions = decorView.getSystemUiVisibility(); String[] darkContentStyles = { - "default", + "default", + "darkcontent" }; String[] lightContentStyles = { @@ -366,7 +377,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 1ac1ac94..dd78fbdc 100644 --- a/src/browser/StatusBarProxy.js +++ b/src/browser/StatusBarProxy.js @@ -33,11 +33,12 @@ function notSupported (win, fail) { module.exports = { isVisible: false, - styleBlackTranslucent: notSupported, - styleDefault: notSupported, - styleLightContent: notSupported, - styleBlackOpaque: notSupported, - overlaysWebView: notSupported, + styleBlackTranslucent:notSupported, + styleDefault:notSupported, + styleLightContent:notSupported, + styleDarkContent: notSupported, + styleBlackOpaque:notSupported, + overlaysWebView:notSupported, styleLightContect: notSupported, backgroundColorByName: notSupported, backgroundColorByHexString: notSupported, diff --git a/src/ios/CDVStatusBar.h b/src/ios/CDVStatusBar.h index 93650b1e..17e18551 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 ce87653b..dee4fe7d 100644 --- a/src/ios/CDVStatusBar.m +++ b/src/ios/CDVStatusBar.m @@ -316,6 +316,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"]) { @@ -325,12 +327,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 @@ -338,6 +335,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 57e7fb0d..bb3bd286 100644 --- a/src/windows/StatusBarProxy.js +++ b/src/windows/StatusBarProxy.js @@ -80,6 +80,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 dee2eb1b..23d6d6d3 100644 --- a/tests/tests.js +++ b/tests/tests.js @@ -53,6 +53,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'); @@ -95,6 +98,11 @@ exports.defineManualTests = function (contentEl, createActionButton) { StatusBar.styleDefault(); } + function doColor4() { + log('set style=darkcontent'); + 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' + @@ -169,11 +179,19 @@ exports.defineManualTests = function (contentEl, createActionButton) { '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 4654f657..12701d80 100644 --- a/www/statusbar.js +++ b/www/statusbar.js @@ -53,8 +53,8 @@ var StatusBar = { }, styleDefault: function () { - // dark text ( to be used on a light background ) - exec(null, null, 'StatusBar', 'styleDefault', []); + // dark text ( to be used on a light background and on iOS depending on a device configuration ) + exec(null, null, "StatusBar", "styleDefault", []); }, styleLightContent: function () { @@ -62,6 +62,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 () { console.warn('styleBlackTranslucent is deprecated and will be removed in next major release, use styleLightContent'); exec(null, null, 'StatusBar', 'styleBlackTranslucent', []);