EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3935 core: Allow changing IAB toolbar colors

main
Dani Palou 2021-11-22 11:22:00 +01:00
parent 4fa1d72a2b
commit 87246e40d3
6 changed files with 79 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@ -44,7 +44,7 @@
"@ionic-native/zip": "^5.33.0",
"@ionic/angular": "^5.6.6",
"@moodlehq/cordova-plugin-file-transfer": "1.7.1-moodle.2",
"@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.2",
"@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.3",
"@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.1",
"@moodlehq/cordova-plugin-local-notification": "0.9.0-moodle.3",
"@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.2",
@ -5126,9 +5126,10 @@
}
},
"node_modules/@moodlehq/cordova-plugin-inappbrowser": {
"version": "5.0.0-moodle.2",
"resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.2.tgz",
"integrity": "sha512-0JOLHUFEJC3fv4OQuyr2kwNyrb7oeyjmfFLQ+LcKO41e6UOnNy/du0hU7Yz9Rh8B2zGcebvSwMrN+cRSCqlipQ==",
"version": "5.0.0-moodle.3",
"resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.3.tgz",
"integrity": "sha512-BDW53W8BzHIJY6lqV3IyYIO9Rh3qi/nA3qkwZjvJiw7iohlQMeR67LV+bXjM4I8N1PTGoBSXiS5BmaS9NFi/1A==",
"dev": true,
"engines": {
"cordovaDependencies": {
"0.2.3": {
@ -35196,9 +35197,10 @@
"integrity": "sha512-nvddQelAwPXmvjv0YJJwuf2xFNi78ZmTa47BgtHGebOvdKpmcbphkOQAVN7KMheL4J3KNE9DbMBHwEHkGGkH4g=="
},
"@moodlehq/cordova-plugin-inappbrowser": {
"version": "5.0.0-moodle.2",
"resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.2.tgz",
"integrity": "sha512-0JOLHUFEJC3fv4OQuyr2kwNyrb7oeyjmfFLQ+LcKO41e6UOnNy/du0hU7Yz9Rh8B2zGcebvSwMrN+cRSCqlipQ=="
"version": "5.0.0-moodle.3",
"resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.3.tgz",
"integrity": "sha512-BDW53W8BzHIJY6lqV3IyYIO9Rh3qi/nA3qkwZjvJiw7iohlQMeR67LV+bXjM4I8N1PTGoBSXiS5BmaS9NFi/1A==",
"dev": true
},
"@moodlehq/cordova-plugin-ionic-webview": {
"version": "5.0.0-moodle.1",

2
package.json
View File

@ -73,7 +73,7 @@
"@ionic-native/zip": "^5.33.0",
"@ionic/angular": "^5.6.6",
"@moodlehq/cordova-plugin-file-transfer": "1.7.1-moodle.2",
"@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.2",
"@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.3",
"@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.1",
"@moodlehq/cordova-plugin-local-notification": "0.9.0-moodle.3",
"@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.2",

10
src/core/services/app.ts
View File

@ -638,15 +638,7 @@ export class CoreAppProvider {
if (!color) {
// Get the default color to change it.
const element = document.querySelector('ion-header ion-toolbar');
if (element) {
color = getComputedStyle(element).getPropertyValue('--background').trim();
} else {
// Fallback, it won't always work.
color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim();
}
color = CoreColors.getColorHex(color);
color = CoreColors.getToolbarBackgroundColor();
}
// Make darker on Android, except white.

56
src/core/services/utils/utils.ts
View File

@ -33,6 +33,7 @@ import { CoreCanceledError } from '@classes/errors/cancelederror';
import { CoreFileEntry } from '@services/file-helper';
import { CoreConstants } from '@/core/constants';
import { CoreWindow } from '@singletons/window';
import { CoreColors } from '@singletons/colors';
type TreeNode<T> = T & { children: TreeNode<T>[] };
@ -981,14 +982,8 @@ export class CoreUtilsProvider {
options = options || {};
options.usewkwebview = 'yes'; // Force WKWebView in iOS.
if (!options.enableViewPortScale) {
options.enableViewPortScale = 'yes'; // Enable zoom on iOS.
}
if (!options.allowInlineMediaPlayback) {
options.allowInlineMediaPlayback = 'yes'; // Allow playing inline videos in iOS.
}
options.enableViewPortScale = options.enableViewPortScale ?? 'yes'; // Enable zoom on iOS by default.
options.allowInlineMediaPlayback = options.allowInlineMediaPlayback ?? 'yes'; // Allow playing inline videos in iOS.
if (!options.location && CoreApp.isIOS() && url.indexOf('file://') === 0) {
// The URL uses file protocol, don't show it on iOS.
@ -996,6 +991,8 @@ export class CoreUtilsProvider {
options.location = 'no';
}
this.setInAppBrowserToolbarColors(options);
this.iabInstance = InAppBrowser.create(url, '_blank', options);
if (CoreApp.isMobile()) {
@ -1043,6 +1040,49 @@ export class CoreUtilsProvider {
return this.iabInstance;
}
/**
* Given some IAB options, set the toolbar colors properties to the right values.
*
* @param options Options to change.
* @return Changed options.
*/
protected setInAppBrowserToolbarColors(options: InAppBrowserOptions): InAppBrowserOptions {
if (options.toolbarcolor) {
// Color already set.
return options;
}
// Color not set. Check if it needs to be changed automatically.
let bgColor: string | undefined;
let textColor: string | undefined;
if (CoreConstants.CONFIG.iabToolbarColors === 'auto') {
bgColor = CoreColors.getToolbarBackgroundColor();
} else if (CoreConstants.CONFIG.iabToolbarColors && typeof CoreConstants.CONFIG.iabToolbarColors === 'object') {
bgColor = CoreConstants.CONFIG.iabToolbarColors.background;
textColor = CoreConstants.CONFIG.iabToolbarColors.text;
}
if (!bgColor) {
// Use default color. In iOS, use black background color since the default is transparent and doesn't look good.
options.locationcolor = '#000000';
return options;
}
if (!textColor) {
textColor = CoreColors.isWhiteContrastingBetter(bgColor) ? '#ffffff' : '#000000';
}
options.toolbarcolor = bgColor;
options.closebuttoncolor = textColor;
options.navigationbuttoncolor = textColor;
options.locationcolor = bgColor;
options.locationtextcolor = textColor;
return options;
}
/**
* Open a URL using a browser.
* Do not use for files, refer to {@link openFile}.

19
src/core/singletons/colors.ts
View File

@ -140,4 +140,23 @@ export class CoreColors {
return ('0' + c.toString(16)).slice(-2);
}
/**
* Get the toolbar's current background color.
*
* @return Color in hex format.
*/
static getToolbarBackgroundColor(): string {
const element = document.querySelector('ion-header ion-toolbar');
let color: string;
if (element) {
color = getComputedStyle(element).getPropertyValue('--background').trim();
} else {
// Fallback, it won't always work.
color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim();
}
return CoreColors.getColorHex(color);
}
}

1
src/types/config.d.ts vendored
View File

@ -57,4 +57,5 @@ export interface EnvironmentConfig {
customMainMenuItems?: CoreMainMenuLocalizedCustomItem[];
feedbackFormUrl?: string | false;
a11yStatement?: string | false;
iabToolbarColors?: 'auto' | { background: string; text?: string } | null;
}