haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(welcome) updated mobile ui styles

This commit is contained in:
Calin Chitu 2022-02-21 16:06:02 +02:00 committed by Calinteodor
parent 85581266e4
commit e8e62a0213
4 changed files with 60 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
react/features/mobile/navigation/screenOptions.js
View File

@ -87,13 +87,14 @@ export const drawerScreenOptions = {
* Drawer content options. * Drawer content options.
*/ */
export const drawerContentOptions = { export const drawerContentOptions = {
drawerActiveBackgroundColor: BaseTheme.palette.ui12, drawerActiveBackgroundColor: BaseTheme.palette.uiBackground,
drawerActiveTintColor: BaseTheme.palette.screen01Header, drawerActiveTintColor: BaseTheme.palette.screen01Header,
drawerInactiveTintColor: BaseTheme.palette.text02,
drawerLabelStyle: { drawerLabelStyle: {
marginLeft: BaseTheme.spacing[2] marginLeft: BaseTheme.spacing[2]
}, },
drawerStyle: { drawerStyle: {
backgroundColor: BaseTheme.palette.ui12, backgroundColor: BaseTheme.palette.uiBackground,
maxWidth: 400, maxWidth: 400,
width: '75%' width: '75%'
} }
@ -106,7 +107,7 @@ export const welcomeScreenOptions = {
...drawerScreenOptions, ...drawerScreenOptions,
drawerIcon: ({ focused }) => ( drawerIcon: ({ focused }) => (
<Icon <Icon
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled } color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
size = { 20 } size = { 20 }
src = { IconHome } /> src = { IconHome } />
), ),
@ -122,7 +123,7 @@ export const settingsScreenOptions = {
...drawerScreenOptions, ...drawerScreenOptions,
drawerIcon: ({ focused }) => ( drawerIcon: ({ focused }) => (
<Icon <Icon
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled } color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
size = { 20 } size = { 20 }
src = { IconSettings } /> src = { IconSettings } />
), ),
@ -138,7 +139,7 @@ export const termsAndPrivacyScreenOptions = {
...drawerScreenOptions, ...drawerScreenOptions,
drawerIcon: ({ focused }) => ( drawerIcon: ({ focused }) => (
<Icon <Icon
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled } color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
size = { 20 } size = { 20 }
src = { IconInfo } /> src = { IconInfo } />
), ),
@ -154,7 +155,7 @@ export const helpScreenOptions = {
...drawerScreenOptions, ...drawerScreenOptions,
drawerIcon: ({ focused }) => ( drawerIcon: ({ focused }) => (
<Icon <Icon
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled } color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
size = { 20 } size = { 20 }
src = { IconHelp } /> src = { IconHelp } />
), ),

8
react/features/welcome/components/native/settings/components/FormSectionAccordion.js
View File

@ -5,6 +5,7 @@ import { List } from 'react-native-paper';
import { translate } from '../../../../../base/i18n'; import { translate } from '../../../../../base/i18n';
import { Icon, IconArrowDown, IconArrowUp } from '../../../../../base/icons'; import { Icon, IconArrowDown, IconArrowUp } from '../../../../../base/icons';
import BaseTheme from '../../../../../base/ui/components/BaseTheme.native';
import styles from './styles'; import styles from './styles';
@ -64,15 +65,14 @@ function FormSectionAccordion({ accordion, children, expandable, label, style, t
accordion && <Icon accordion && <Icon
{ ...props } { ...props }
src = { expandSection ? IconArrowUp : IconArrowDown } src = { expandSection ? IconArrowUp : IconArrowDown }
style = { expandSection ? styles.sectionOpen : styles.sectionClose } /> } style = { styles.section } /> }
rippleColor = { BaseTheme.palette.uiBackground }
style = { [ style = { [
styles.formSectionTitle, styles.formSectionTitle,
style style
] } ] }
title = { t(label) } title = { t(label) }
titleStyle = { titleStyle = { styles.formSectionTitleText }>
expandSection || !expandable
? styles.formSectionTitleActive : styles.formSectionTitleInActive }>
{ children } { children }
</List.Accordion> </List.Accordion>
); );

63
react/features/welcome/components/native/settings/components/SettingsView.js
View File

@ -25,7 +25,11 @@ import { normalizeUserInputURL, isServerURLChangeEnabled } from '../../../../../
import FormRow from './FormRow'; import FormRow from './FormRow';
import FormSectionAccordion from './FormSectionAccordion'; import FormSectionAccordion from './FormSectionAccordion';
import styles, { THUMB_COLOR } from './styles'; import styles, {
DISABLED_TRACK_COLOR,
ENABLED_TRACK_COLOR,
THUMB_COLOR
} from './styles';
/** /**
* Application information module. * Application information module.
@ -184,6 +188,16 @@ class SettingsView extends AbstractSettingsView<Props, State> {
} = this.state; } = this.state;
const { palette } = this.props.theme; const { palette } = this.props.theme;
const textInputTheme = {
colors: {
background: palette.ui01,
placeholder: palette.text01,
primary: palette.screen01Header,
underlineColor: 'transparent',
text: palette.text01
}
};
return ( return (
<JitsiScreen <JitsiScreen
style = { styles.settingsViewContainer }> style = { styles.settingsViewContainer }>
@ -201,12 +215,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
spellCheck = { false } spellCheck = { false }
style = { styles.textInputContainer } style = { styles.textInputContainer }
textContentType = { 'name' } // iOS only textContentType = { 'name' } // iOS only
theme = {{ theme = { textInputTheme }
colors: {
primary: palette.screen01Header,
underlineColor: 'transparent'
}
}}
value = { displayName } /> value = { displayName } />
<Divider style = { styles.fieldSeparator } /> <Divider style = { styles.fieldSeparator } />
<TextInput <TextInput
@ -220,12 +229,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
spellCheck = { false } spellCheck = { false }
style = { styles.textInputContainer } style = { styles.textInputContainer }
textContentType = { 'emailAddress' } // iOS only textContentType = { 'emailAddress' } // iOS only
theme = {{ theme = { textInputTheme }
colors: {
primary: palette.screen01Header,
underlineColor: 'transparent'
}
}}
value = { email } /> value = { email } />
</FormSectionAccordion> </FormSectionAccordion>
<FormSectionAccordion <FormSectionAccordion
@ -245,12 +249,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
spellCheck = { false } spellCheck = { false }
style = { styles.textInputContainer } style = { styles.textInputContainer }
textContentType = { 'URL' } // iOS only textContentType = { 'URL' } // iOS only
theme = {{ theme = { textInputTheme }
colors: {
primary: palette.screen01Header,
underlineColor: 'transparent'
}
}}
value = { serverURL } /> value = { serverURL } />
<Divider style = { styles.fieldSeparator } /> <Divider style = { styles.fieldSeparator } />
<FormRow <FormRow
@ -258,7 +257,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch <Switch
onValueChange = { this._onStartAudioMutedChange } onValueChange = { this._onStartAudioMutedChange }
thumbColor = { THUMB_COLOR } thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }} trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR
}}
value = { startWithAudioMuted } /> value = { startWithAudioMuted } />
</FormRow> </FormRow>
<Divider style = { styles.fieldSeparator } /> <Divider style = { styles.fieldSeparator } />
@ -266,7 +268,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch <Switch
onValueChange = { this._onStartVideoMutedChange } onValueChange = { this._onStartVideoMutedChange }
thumbColor = { THUMB_COLOR } thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }} trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR
}}
value = { startWithVideoMuted } /> value = { startWithVideoMuted } />
</FormRow> </FormRow>
</FormSectionAccordion> </FormSectionAccordion>
@ -276,7 +281,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
label = 'settingsView.buildInfoSection'> label = 'settingsView.buildInfoSection'>
<FormRow <FormRow
label = 'settingsView.version'> label = 'settingsView.version'>
<Text> <Text style = { styles.text }>
{`${AppInfo.version} build ${AppInfo.buildNumber}`} {`${AppInfo.version} build ${AppInfo.buildNumber}`}
</Text> </Text>
</FormRow> </FormRow>
@ -292,7 +297,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch <Switch
onValueChange = { this._onDisableCallIntegration } onValueChange = { this._onDisableCallIntegration }
thumbColor = { THUMB_COLOR } thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }} trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR
}}
value = { disableCallIntegration } /> value = { disableCallIntegration } />
</FormRow> </FormRow>
<Divider style = { styles.fieldSeparator } /> <Divider style = { styles.fieldSeparator } />
@ -303,7 +311,9 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch <Switch
onValueChange = { this._onDisableP2P } onValueChange = { this._onDisableP2P }
thumbColor = { THUMB_COLOR } thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }} trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR }}
value = { disableP2P } /> value = { disableP2P } />
</FormRow> </FormRow>
<Divider style = { styles.fieldSeparator } /> <Divider style = { styles.fieldSeparator } />
@ -314,7 +324,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch <Switch
onValueChange = { this._onDisableCrashReporting } onValueChange = { this._onDisableCrashReporting }
thumbColor = { THUMB_COLOR } thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }} trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR
}}
value = { disableCrashReporting } /> value = { disableCrashReporting } />
</FormRow> </FormRow>
)} )}

28
react/features/welcome/components/native/settings/components/styles.js
View File

@ -1,6 +1,8 @@
import BaseTheme from '../../../../../base/ui/components/BaseTheme'; import BaseTheme from '../../../../../base/ui/components/BaseTheme.native';
export const ANDROID_UNDERLINE_COLOR = 'transparent'; export const ANDROID_UNDERLINE_COLOR = 'transparent';
export const PLACEHOLDER_COLOR = BaseTheme.palette.action02Focus; export const PLACEHOLDER_COLOR = BaseTheme.palette.action02Focus;
export const ENABLED_TRACK_COLOR = BaseTheme.palette.lobbySwitch01Active;
export const DISABLED_TRACK_COLOR = BaseTheme.palette.ui02;
export const THUMB_COLOR = BaseTheme.palette.field02; export const THUMB_COLOR = BaseTheme.palette.field02;
const TEXT_SIZE = 14; const TEXT_SIZE = 14;
@ -14,6 +16,7 @@ export default {
* Style for screen container. * Style for screen container.
*/ */
settingsViewContainer: { settingsViewContainer: {
backgroundColor: BaseTheme.palette.ui01,
flex: 1 flex: 1
}, },
@ -63,7 +66,7 @@ export default {
*/ */
fieldSeparator: { fieldSeparator: {
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: 'rgba(0, 0, 0, 0.1)' borderColor: BaseTheme.palette.border02
}, },
/** /**
@ -82,26 +85,17 @@ export default {
* Style for the form section separator titles. * Style for the form section separator titles.
*/ */
formSectionTitle: { formSectionTitle: {
backgroundColor: BaseTheme.palette.section01, backgroundColor: BaseTheme.palette.ui02,
paddingBottom: 0, paddingBottom: 0,
paddingTop: 0 paddingTop: 0
}, },
formSectionTitleActive: { formSectionTitleText: {
color: BaseTheme.palette.screen01Header color: BaseTheme.palette.text01
}, },
formSectionTitleInActive: { section: {
color: BaseTheme.palette.section01Inactive color: BaseTheme.palette.icon01,
},
sectionClose: {
color: BaseTheme.palette.section01Inactive,
fontSize: 14
},
sectionOpen: {
color: BaseTheme.palette.screen01Header,
fontSize: 14 fontSize: 14
}, },
@ -109,7 +103,7 @@ export default {
* Global {@code Text} color for the components. * Global {@code Text} color for the components.
*/ */
text: { text: {
color: BaseTheme.palette.field01 color: BaseTheme.palette.text02
}, },
/** /**