feat: add support for the new Dark Content style

OutSystems · Dec 9, 2022 · d82eff1 · d82eff1
1 parent a3138ac
commit d82eff1
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ Preferences
 
         <preference name="StatusBarBackgroundColor" value="#000000" />
 
-- __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.
 
         <preference name="StatusBarStyle" value="lightcontent" />
 
@@ -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
@@ -266,6 +266,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
@@ -352,7 +362,8 @@ private void setStatusBarStyle(final String style) {
                 int uiOptions = decorView.getSystemUiVisibility();
 
                 String[] darkContentStyles = {
-                        "default",
+                    "default",
+                    "darkcontent"
                 };
 
                 String[] lightContentStyles = {
@@ -371,7 +382,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
@@ -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
@@ -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
@@ -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,19 +327,23 @@ - (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
 {
     [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
@@ -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
@@ -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) {
         '</p> <div id="action-color2"></div>' +
         'Expected result: Status bar text will be a light (white) color' +
         '</p> <div id="action-color3"></div>' +
+        'Expected result: Status bar text will be a dark (black) color<br>for iOS - a device theme depending (black or white) color' +
+        '</p> <div id="action-color4"></div>' +
         'Expected result: Status bar text will be a dark (black) color' +
         '</p> <div id="action-overlays"></div>' +
         'Expected result:<br>Overlay true = status bar will lay on top of web view content<br>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
@@ -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
@@ -53,15 +53,20 @@ 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 () {
         // light text ( to be used on a dark background )
         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', []);