rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sync android status bar bg with theme bg color (#1727)

Browse Source
This commit is contained in:
Aman Harwara
2022-10-01 00:58:16 +05:30
committed by GitHub
parent 88e29fe1b6
commit 47106fdf83
3 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/mobile/src/Lib/Interface.ts
View File

@@ -78,6 +78,7 @@ export class MobileDevice implements MobileDeviceInterface {
platform: SNPlatform.Ios | SNPlatform.Android = Platform.OS === 'ios' ? SNPlatform.Ios : SNPlatform.Android platform: SNPlatform.Ios | SNPlatform.Android = Platform.OS === 'ios' ? SNPlatform.Ios : SNPlatform.Android
private eventObservers: MobileDeviceEventHandler[] = [] private eventObservers: MobileDeviceEventHandler[] = []
public isDarkMode = false public isDarkMode = false
public statusBarBgColor: string | undefined
constructor( constructor(
private stateObserverService?: AppStateObserverService, private stateObserverService?: AppStateObserverService,
@@ -450,13 +451,17 @@ export class MobileDevice implements MobileDeviceInterface {
} }
} }
handleThemeSchemeChange(isDark: boolean): void { handleThemeSchemeChange(isDark: boolean, bgColor: string): void {
this.isDarkMode = isDark this.isDarkMode = isDark
this.statusBarBgColor = bgColor
this.reloadStatusBarStyle() this.reloadStatusBarStyle()
} }
reloadStatusBarStyle(animated = true) { reloadStatusBarStyle(animated = true) {
if (this.statusBarBgColor) {
StatusBar.setBackgroundColor(this.statusBarBgColor, animated)
}
StatusBar.setBarStyle(this.isDarkMode ? 'light-content' : 'dark-content', animated) StatusBar.setBarStyle(this.isDarkMode ? 'light-content' : 'dark-content', animated)
} }

2
packages/services/src/Domain/Device/MobileDeviceInterface.ts
View File

@@ -12,7 +12,7 @@ export interface MobileDeviceInterface extends DeviceInterface {
hideMobileInterfaceFromScreenshots(): void hideMobileInterfaceFromScreenshots(): void
stopHidingMobileInterfaceFromScreenshots(): void stopHidingMobileInterfaceFromScreenshots(): void
consoleLog(...args: any[]): void consoleLog(...args: any[]): void
handleThemeSchemeChange(isDark: boolean): void handleThemeSchemeChange(isDark: boolean, bgColor: string): void
shareBase64AsFile(base64: string, filename: string): Promise<void> shareBase64AsFile(base64: string, filename: string): Promise<void>
downloadBase64AsFile(base64: string, filename: string, saveInTempLocation?: boolean): Promise<string | undefined> downloadBase64AsFile(base64: string, filename: string, saveInTempLocation?: boolean): Promise<string | undefined>
confirmAndExit(): void confirmAndExit(): void

25
packages/ui-services/src/Theme/ThemeManager.ts
View File

@@ -288,12 +288,24 @@ export class ThemeManager extends AbstractService {
link.rel = 'stylesheet' link.rel = 'stylesheet'
link.media = 'screen,print' link.media = 'screen,print'
link.id = theme.uuid link.id = theme.uuid
link.onload = this.syncThemeColorMetadata link.onload = () => {
document.getElementsByTagName('head')[0].appendChild(link) this.syncThemeColorMetadata()
if (this.application.isNativeMobileWeb()) { if (this.application.isNativeMobileWeb()) {
this.application.mobileDevice.handleThemeSchemeChange(theme.package_info.isDark ?? false) setTimeout(() => {
this.application.mobileDevice.handleThemeSchemeChange(
theme.package_info.isDark ?? false,
this.getBackgroundColor(),
)
})
}
} }
document.getElementsByTagName('head')[0].appendChild(link)
}
private getBackgroundColor() {
const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--sn-stylekit-background-color').trim()
return bgColor.length ? bgColor : '#ffffff'
} }
/** /**
@@ -306,8 +318,7 @@ export class ThemeManager extends AbstractService {
return return
} }
const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--sn-stylekit-background-color') themeColorMetaElement.setAttribute('content', this.getBackgroundColor())
themeColorMetaElement.setAttribute('content', bgColor ? bgColor.trim() : '#ffffff')
} }
private deactivateTheme(uuid: string) { private deactivateTheme(uuid: string) {
@@ -324,7 +335,7 @@ export class ThemeManager extends AbstractService {
removeFromArray(this.activeThemes, uuid) removeFromArray(this.activeThemes, uuid)
if (this.activeThemes.length === 0 && this.application.isNativeMobileWeb()) { if (this.activeThemes.length === 0 && this.application.isNativeMobileWeb()) {
this.application.mobileDevice.handleThemeSchemeChange(false) this.application.mobileDevice.handleThemeSchemeChange(false, '#ffffff')
} }
} }