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.
*/
export const drawerContentOptions = {
drawerActiveBackgroundColor: BaseTheme.palette.ui12,
drawerActiveBackgroundColor: BaseTheme.palette.uiBackground,
drawerActiveTintColor: BaseTheme.palette.screen01Header,
drawerInactiveTintColor: BaseTheme.palette.text02,
drawerLabelStyle: {
marginLeft: BaseTheme.spacing[2]
},
drawerStyle: {
backgroundColor: BaseTheme.palette.ui12,
backgroundColor: BaseTheme.palette.uiBackground,
maxWidth: 400,
width: '75%'
}
@ -106,7 +107,7 @@ export const welcomeScreenOptions = {
...drawerScreenOptions,
drawerIcon: ({ focused }) => (
<Icon
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled }
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
size = { 20 }
src = { IconHome } />
),
@ -122,7 +123,7 @@ export const settingsScreenOptions = {
...drawerScreenOptions,
drawerIcon: ({ focused }) => (
<Icon
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled }
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
size = { 20 }
src = { IconSettings } />
),
@ -138,7 +139,7 @@ export const termsAndPrivacyScreenOptions = {
...drawerScreenOptions,
drawerIcon: ({ focused }) => (
<Icon
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled }
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
size = { 20 }
src = { IconInfo } />
),
@ -154,7 +155,7 @@ export const helpScreenOptions = {
...drawerScreenOptions,
drawerIcon: ({ focused }) => (
<Icon
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled }
color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
size = { 20 }
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 { Icon, IconArrowDown, IconArrowUp } from '../../../../../base/icons';
import BaseTheme from '../../../../../base/ui/components/BaseTheme.native';
import styles from './styles';
@ -64,15 +65,14 @@ function FormSectionAccordion({ accordion, children, expandable, label, style, t
accordion && <Icon
{ ...props }
src = { expandSection ? IconArrowUp : IconArrowDown }
style = { expandSection ? styles.sectionOpen : styles.sectionClose } /> }
style = { styles.section } /> }
rippleColor = { BaseTheme.palette.uiBackground }
style = { [
styles.formSectionTitle,
style
] }
title = { t(label) }
titleStyle = {
expandSection || !expandable
? styles.formSectionTitleActive : styles.formSectionTitleInActive }>
titleStyle = { styles.formSectionTitleText }>
{ children }
</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 FormSectionAccordion from './FormSectionAccordion';
import styles, { THUMB_COLOR } from './styles';
import styles, {
DISABLED_TRACK_COLOR,
ENABLED_TRACK_COLOR,
THUMB_COLOR
} from './styles';
/**
* Application information module.
@ -184,6 +188,16 @@ class SettingsView extends AbstractSettingsView<Props, State> {
} = this.state;
const { palette } = this.props.theme;
const textInputTheme = {
colors: {
background: palette.ui01,
placeholder: palette.text01,
primary: palette.screen01Header,
underlineColor: 'transparent',
text: palette.text01
}
};
return (
<JitsiScreen
style = { styles.settingsViewContainer }>
@ -201,12 +215,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
spellCheck = { false }
style = { styles.textInputContainer }
textContentType = { 'name' } // iOS only
theme = {{
colors: {
primary: palette.screen01Header,
underlineColor: 'transparent'
}
}}
theme = { textInputTheme }
value = { displayName } />
<Divider style = { styles.fieldSeparator } />
<TextInput
@ -220,12 +229,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
spellCheck = { false }
style = { styles.textInputContainer }
textContentType = { 'emailAddress' } // iOS only
theme = {{
colors: {
primary: palette.screen01Header,
underlineColor: 'transparent'
}
}}
theme = { textInputTheme }
value = { email } />
</FormSectionAccordion>
<FormSectionAccordion
@ -245,12 +249,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
spellCheck = { false }
style = { styles.textInputContainer }
textContentType = { 'URL' } // iOS only
theme = {{
colors: {
primary: palette.screen01Header,
underlineColor: 'transparent'
}
}}
theme = { textInputTheme }
value = { serverURL } />
<Divider style = { styles.fieldSeparator } />
<FormRow
@ -258,7 +257,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch
onValueChange = { this._onStartAudioMutedChange }
thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }}
trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR
}}
value = { startWithAudioMuted } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
@ -266,7 +268,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch
onValueChange = { this._onStartVideoMutedChange }
thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }}
trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR
}}
value = { startWithVideoMuted } />
</FormRow>
</FormSectionAccordion>
@ -276,7 +281,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
label = 'settingsView.buildInfoSection'>
<FormRow
label = 'settingsView.version'>
<Text>
<Text style = { styles.text }>
{`${AppInfo.version} build ${AppInfo.buildNumber}`}
</Text>
</FormRow>
@ -292,7 +297,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch
onValueChange = { this._onDisableCallIntegration }
thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }}
trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR
}}
value = { disableCallIntegration } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
@ -303,7 +311,9 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch
onValueChange = { this._onDisableP2P }
thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }}
trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR }}
value = { disableP2P } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
@ -314,7 +324,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
<Switch
onValueChange = { this._onDisableCrashReporting }
thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.screen01Header }}
trackColor = {{
false: DISABLED_TRACK_COLOR,
true: ENABLED_TRACK_COLOR
}}
value = { disableCrashReporting } />
</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 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;
const TEXT_SIZE = 14;
@ -14,6 +16,7 @@ export default {
* Style for screen container.
*/
settingsViewContainer: {
backgroundColor: BaseTheme.palette.ui01,
flex: 1
},
@ -63,7 +66,7 @@ export default {
*/
fieldSeparator: {
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.
*/
formSectionTitle: {
backgroundColor: BaseTheme.palette.section01,
backgroundColor: BaseTheme.palette.ui02,
paddingBottom: 0,
paddingTop: 0
},
formSectionTitleActive: {
color: BaseTheme.palette.screen01Header
formSectionTitleText: {
color: BaseTheme.palette.text01
},
formSectionTitleInActive: {
color: BaseTheme.palette.section01Inactive
},
sectionClose: {
color: BaseTheme.palette.section01Inactive,
fontSize: 14
},
sectionOpen: {
color: BaseTheme.palette.screen01Header,
section: {
color: BaseTheme.palette.icon01,
fontSize: 14
},
@ -109,7 +103,7 @@ export default {
* Global {@code Text} color for the components.
*/
text: {
color: BaseTheme.palette.field01
color: BaseTheme.palette.text02
},
/**