toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix navigation theming (#6946)

Browse source
This commit is contained in:
Elias Nahum 2023-01-11 09:53:09 +02:00 committed by GitHub
parent 252dc1e3c8
commit e6a6e25799
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/constants/screens.ts
View file

@ -142,20 +142,23 @@ export const MODAL_SCREENS_WITHOUT_BACK = new Set<string>([
EDIT_POST,
EDIT_PROFILE,
EDIT_SERVER,
EMOJI_PICKER,
FIND_CHANNELS,
GALLERY,
PERMALINK,
REACTIONS,
]);
export const SCREENS_WITH_TRANSPARENT_BACKGROUND = new Set<string>([
PERMALINK,
REVIEW_APP,
SNACK_BAR,
]);
export const SCREENS_AS_BOTTOM_SHEET = new Set<string>([
BOTTOM_SHEET,
EMOJI_PICKER,
POST_OPTIONS,
THREAD_OPTIONS,
PERMALINK,
REACTIONS,
SNACK_BAR,
USER_PROFILE,
]);

6
app/screens/navigation.ts
View file

@ -219,11 +219,7 @@ Appearance.addChangeListener(() => {
});
export function getThemeFromState(): Theme {
if (EphemeralStore.theme) {
return EphemeralStore.theme;
}
return getDefaultThemeByAppearance();
return EphemeralStore.theme || getDefaultThemeByAppearance();
}
// This is a temporary helper function to avoid

23
app/utils/theme/index.ts
View file

@ -1,12 +1,13 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import deepEqual from 'deep-equal';
import merge from 'deepmerge';
import {StatusBar, StyleSheet} from 'react-native';
import tinyColor from 'tinycolor2';
import {Preferences} from '@constants';
import {MODAL_SCREENS_WITHOUT_BACK, SCREENS_WITH_TRANSPARENT_BACKGROUND} from '@constants/screens';
import {MODAL_SCREENS_WITHOUT_BACK, SCREENS_AS_BOTTOM_SHEET, SCREENS_WITH_TRANSPARENT_BACKGROUND} from '@constants/screens';
import EphemeralStore from '@store/ephemeral_store';
import NavigationStore from '@store/navigation_store';
import {NamedStyles} from '@typings/global/styles';
@ -99,13 +100,25 @@ export function setNavigatorStyles(componentId: string, theme: Theme, additional
},
};
if (!SCREENS_WITH_TRANSPARENT_BACKGROUND.has(componentId)) {
if (SCREENS_AS_BOTTOM_SHEET.has(componentId)) {
options.topBar = {
leftButtonColor: changeOpacity(theme.centerChannelColor, 0.56),
background: {
color: theme.centerChannelBg,
},
title: {
color: theme.centerChannelColor,
},
};
}
if (!SCREENS_WITH_TRANSPARENT_BACKGROUND.has(componentId) && !SCREENS_AS_BOTTOM_SHEET.has(componentId)) {
options.layout = {
componentBackgroundColor: theme.centerChannelBg,
};
}
if (!MODAL_SCREENS_WITHOUT_BACK.has(componentId) && options.topBar) {
if (!MODAL_SCREENS_WITHOUT_BACK.has(componentId) && !SCREENS_AS_BOTTOM_SHEET.has(componentId) && options.topBar) {
options.topBar.backButton = {
color: theme.sidebarHeaderTextColor,
};
@ -263,8 +276,8 @@ export function setThemeDefaults(theme: ExtendedTheme): Theme {
}
export const updateThemeIfNeeded = (theme: Theme, force = false) => {
if (theme !== EphemeralStore.theme || force) {
EphemeralStore.theme = theme;
const storedTheme = EphemeralStore.theme;
if (!deepEqual(theme, storedTheme) || force) {
requestAnimationFrame(() => {
setNavigationStackStyles(theme);
});