forked from vergnet/application-amicale
Replaced native base with react native paper
This commit is contained in:
keplyx
parent
79eaefab88
commit
1f64c734aa
73 changed files with 828 additions and 5683 deletions
32
App.js
32
App.js
|
|
@ -2,18 +2,17 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Platform, StatusBar} from 'react-native';
|
||||
import {Root, StyleProvider} from 'native-base';
|
||||
import LocaleManager from './utils/LocaleManager';
|
||||
import * as Font from 'expo-font';
|
||||
import {clearThemeCache} from 'native-base-shoutem-theme';
|
||||
import AsyncStorageManager from "./utils/AsyncStorageManager";
|
||||
import CustomIntroSlider from "./components/CustomIntroSlider";
|
||||
import {SplashScreen} from 'expo';
|
||||
import ThemeManager from './utils/ThemeManager';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import { createStackNavigator } from '@react-navigation/stack';
|
||||
import {NavigationContainer} from '@react-navigation/native';
|
||||
import {createStackNavigator} from '@react-navigation/stack';
|
||||
import DrawerNavigator from './navigation/DrawerNavigator';
|
||||
import NotificationsManager from "./utils/NotificationsManager";
|
||||
import {Provider as PaperProvider} from 'react-native-paper';
|
||||
|
||||
type Props = {};
|
||||
|
||||
|
|
@ -24,6 +23,17 @@ type State = {
|
|||
currentTheme: ?Object,
|
||||
};
|
||||
|
||||
const MyTheme = {
|
||||
dark: false,
|
||||
colors: {
|
||||
primary: 'rgb(255, 45, 85)',
|
||||
background: 'rgb(242, 242, 242)',
|
||||
card: 'rgb(255, 255, 255)',
|
||||
text: 'rgb(28, 28, 30)',
|
||||
border: 'rgb(199, 199, 204)',
|
||||
},
|
||||
};
|
||||
|
||||
const Stack = createStackNavigator();
|
||||
|
||||
export default class App extends React.Component<Props, State> {
|
||||
|
|
@ -51,7 +61,6 @@ export default class App extends React.Component<Props, State> {
|
|||
currentTheme: ThemeManager.getCurrentTheme()
|
||||
});
|
||||
this.setupStatusBar();
|
||||
clearThemeCache();
|
||||
}
|
||||
|
||||
setupStatusBar() {
|
||||
|
|
@ -84,9 +93,6 @@ export default class App extends React.Component<Props, State> {
|
|||
// Wait for custom fonts to be loaded before showing the app
|
||||
// console.log("loading Fonts");
|
||||
SplashScreen.preventAutoHide();
|
||||
await Font.loadAsync({
|
||||
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
|
||||
});
|
||||
// console.log("loading preferences");
|
||||
await AsyncStorageManager.getInstance().loadPreferences();
|
||||
ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
|
||||
|
|
@ -122,15 +128,13 @@ export default class App extends React.Component<Props, State> {
|
|||
} else {
|
||||
|
||||
return (
|
||||
<Root>
|
||||
<StyleProvider style={this.state.currentTheme}>
|
||||
<NavigationContainer>
|
||||
<PaperProvider theme={this.state.currentTheme}>
|
||||
<NavigationContainer theme={this.state.currentTheme}>
|
||||
<Stack.Navigator headerMode="none">
|
||||
<Stack.Screen name="Root" component={DrawerNavigator} />
|
||||
<Stack.Screen name="Root" component={DrawerNavigator}/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
</StyleProvider>
|
||||
</Root>
|
||||
</PaperProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import * as React from 'react';
|
|||
import {LinearGradient} from "expo-linear-gradient";
|
||||
import {Image, StyleSheet, View} from "react-native";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import {Text} from "native-base";
|
||||
import {Text} from "react-native-paper";
|
||||
import i18n from 'i18n-js';
|
||||
import AppIntroSlider from "react-native-app-intro-slider";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import {View} from "react-native";
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import HTML from "react-native-render-html";
|
||||
import {LinearGradient} from "expo-linear-gradient";
|
||||
import PlatformTouchable from "react-native-platform-touchable";
|
||||
import i18n from "i18n-js";
|
||||
|
||||
const CARD_BORDER_RADIUS = 10;
|
||||
import {Avatar, Card, Text, Title} from 'react-native-paper';
|
||||
|
||||
type Props = {
|
||||
isAvailable: boolean,
|
||||
|
|
@ -72,44 +69,43 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
|
||||
getEventPreviewContainer() {
|
||||
if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) {
|
||||
const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null;
|
||||
return (
|
||||
<Card style={{marginBottom: 10}}>
|
||||
{hasImage ?
|
||||
<Card.Title
|
||||
title={this.props.displayEvent['title']}
|
||||
subtitle={this.getFormattedEventTime(this.props.displayEvent)}
|
||||
left={() =>
|
||||
<Avatar.Image
|
||||
source={{uri: this.props.displayEvent['logo']}}
|
||||
size={60}
|
||||
style={{backgroundColor: 'transparent'}}/>
|
||||
}
|
||||
/> :
|
||||
<Card.Title
|
||||
title={this.props.displayEvent['title']}
|
||||
subtitle={this.getFormattedEventTime(this.props.displayEvent)}
|
||||
/>}
|
||||
<View>
|
||||
<CardItem style={{
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
backgroundColor: 'transparent',
|
||||
}}>
|
||||
<Left>
|
||||
{this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null ?
|
||||
<Thumbnail source={{uri: this.props.displayEvent['logo']}} square/> :
|
||||
<View/>}
|
||||
<Body>
|
||||
<Text>{this.props.displayEvent['title']}</Text>
|
||||
<Text note>{this.getFormattedEventTime(this.props.displayEvent)}</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem style={{
|
||||
borderRadius: CARD_BORDER_RADIUS,
|
||||
backgroundColor: 'transparent',
|
||||
}}>
|
||||
<Body style={{
|
||||
height: this.props.displayEvent['description'].length > 50 ? 70 : 20,
|
||||
<Card.Content style={{
|
||||
height: this.props.displayEvent['description'].length > 70 ? 100 : 50,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<HTML html={"<div>" + this.props.displayEvent['description'] + "</div>"}
|
||||
tagsStyles={{
|
||||
p: {
|
||||
color: ThemeManager.getCurrentThemeVariables().textColor,
|
||||
fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase,
|
||||
color: ThemeManager.getCurrentThemeVariables().text,
|
||||
},
|
||||
div: {color: ThemeManager.getCurrentThemeVariables().textColor},
|
||||
div: {color: ThemeManager.getCurrentThemeVariables().text},
|
||||
}}/>
|
||||
|
||||
</Card.Content>
|
||||
<LinearGradient
|
||||
colors={[
|
||||
// Fix for ios gradient: transparent color must match final color
|
||||
ThemeManager.getNightMode() ? 'rgba(42,42,42,0)' : 'rgba(255,255,255,0)',
|
||||
ThemeManager.getCurrentThemeVariables().cardDefaultBg
|
||||
ThemeManager.getCurrentThemeVariables().card
|
||||
]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 0, y: 0.6}}
|
||||
|
|
@ -134,12 +130,12 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
</Text>
|
||||
<MaterialCommunityIcons
|
||||
name={'chevron-right'}
|
||||
size={26}/>
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().text}/>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</Body>
|
||||
</CardItem>
|
||||
</View>
|
||||
</Card>
|
||||
);
|
||||
} else
|
||||
return <View/>
|
||||
|
|
@ -152,7 +148,7 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
color={
|
||||
this.props.isAvailable ?
|
||||
this.props.color :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabledColor
|
||||
ThemeManager.getCurrentThemeVariables().textDisabled
|
||||
}
|
||||
size={this.props.isSquare ? 50 : 40}/>
|
||||
);
|
||||
|
|
@ -163,19 +159,19 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
<View style={{
|
||||
width: this.props.isSquare ? '100%' : 'auto',
|
||||
}}>
|
||||
<H3 style={{
|
||||
<Title style={{
|
||||
color: this.props.isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor,
|
||||
ThemeManager.getCurrentThemeVariables().text :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabled,
|
||||
textAlign: this.props.isSquare ? 'center' : 'left',
|
||||
width: this.props.isSquare ? '100%' : 'auto',
|
||||
}}>
|
||||
{this.props.title}
|
||||
</H3>
|
||||
</Title>
|
||||
<Text style={{
|
||||
color: this.props.isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabledColor,
|
||||
ThemeManager.getCurrentThemeVariables().text :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabled,
|
||||
textAlign: this.props.isSquare ? 'center' : 'left',
|
||||
width: this.props.isSquare ? '100%' : 'auto',
|
||||
}}>
|
||||
|
|
@ -188,21 +184,12 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
getContent() {
|
||||
if (this.props.isSquare) {
|
||||
return (
|
||||
<Body>
|
||||
<View>
|
||||
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
{this.getIcon()}
|
||||
</View>
|
||||
{this.getText()}
|
||||
</Body>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Left>
|
||||
{this.getIcon()}
|
||||
<Body>
|
||||
{this.getText()}
|
||||
</Body>
|
||||
</Left>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -217,33 +204,41 @@ export default class DashboardItem extends React.Component<Props> {
|
|||
else
|
||||
marginRight = 0
|
||||
}
|
||||
const color = this.props.isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().text :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabled;
|
||||
return (
|
||||
<Card style={{
|
||||
flex: 0,
|
||||
<Card
|
||||
style={{
|
||||
width: this.props.isSquare ? '48%' : 'auto',
|
||||
marginLeft: this.props.isSquare ? 0 : 10,
|
||||
marginRight: marginRight,
|
||||
marginTop: 10,
|
||||
borderRadius: CARD_BORDER_RADIUS,
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<PlatformTouchable
|
||||
onPress={this.props.clickAction}
|
||||
style={{
|
||||
zIndex: 100,
|
||||
minHeight: this.props.isSquare ? 150 : 'auto',
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<CardItem style={{
|
||||
backgroundColor: 'transparent',
|
||||
}}>
|
||||
onPress={this.props.clickAction}>
|
||||
{this.props.isSquare ?
|
||||
<Card.Content>
|
||||
{this.getContent()}
|
||||
</CardItem>
|
||||
</Card.Content>
|
||||
:
|
||||
<View>
|
||||
<Card.Title
|
||||
title={this.props.title}
|
||||
titleStyle={{color: color}}
|
||||
subtitle={this.props.subtitle}
|
||||
subtitleStyle={{color: color}}
|
||||
left={(props) => <Avatar.Icon
|
||||
{...props}
|
||||
icon={this.props.icon}
|
||||
color={this.props.isAvailable ? this.props.color : ThemeManager.getCurrentThemeVariables().textDisabled}
|
||||
size={60}
|
||||
style={{backgroundColor: 'transparent'}}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
{this.getEventPreviewContainer()}
|
||||
</View>
|
||||
</PlatformTouchable>
|
||||
</Card.Content>
|
||||
</View>}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native';
|
||||
import {Container, Left, ListItem, Text} from "native-base";
|
||||
import {Dimensions, FlatList, Image, Platform, StyleSheet, View} from 'react-native';
|
||||
import i18n from "i18n-js";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import * as WebBrowser from 'expo-web-browser';
|
||||
import {List} from 'react-native-paper';
|
||||
import {DrawerItem} from '@react-navigation/drawer';
|
||||
|
||||
const deviceWidth = Dimensions.get("window").width;
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
state: Object,
|
||||
};
|
||||
|
||||
type State = {
|
||||
|
|
@ -142,32 +144,29 @@ export default class SideBar extends React.Component<Props, State> {
|
|||
|
||||
getRenderItem({item}: Object) {
|
||||
const onListItemPress = this.onListItemPress.bind(this, item);
|
||||
// return <View/>;
|
||||
if (item.icon !== undefined) {
|
||||
return (
|
||||
<ListItem
|
||||
button
|
||||
noBorder
|
||||
<DrawerItem
|
||||
label={item.name}
|
||||
focused={false}
|
||||
icon={({color, size}) =>
|
||||
<MaterialCommunityIcons color={color} size={size} name={item.icon}/>}
|
||||
selected={this.state.active === item.route}
|
||||
onPress={onListItemPress}
|
||||
>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={item.icon}
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
|
||||
style={{
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
padding: 0,
|
||||
borderRadius: 0
|
||||
}}
|
||||
/>
|
||||
<Text style={styles.text}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Left>
|
||||
</ListItem>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<ListItem itemDivider>
|
||||
<Text>{item.name}</Text>
|
||||
</ListItem>
|
||||
<List.Item
|
||||
title={item.name}
|
||||
style={{backgroundColor: ThemeManager.getCurrentThemeVariables().dividerBackground}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -176,9 +175,7 @@ export default class SideBar extends React.Component<Props, State> {
|
|||
render() {
|
||||
console.log("rendering SideBar");
|
||||
return (
|
||||
<Container style={{
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
||||
}}>
|
||||
<View style={{height: '100%'}}>
|
||||
<Image source={require("../assets/drawer-cover.png")} style={styles.drawerCover}/>
|
||||
<FlatList
|
||||
data={this.dataSet}
|
||||
|
|
@ -186,7 +183,7 @@ export default class SideBar extends React.Component<Props, State> {
|
|||
keyExtractor={this.listKeyExtractor}
|
||||
renderItem={this.getRenderItem}
|
||||
/>
|
||||
</Container>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {H3, Spinner, View} from "native-base";
|
||||
import ThemeManager from '../utils/ThemeManager';
|
||||
import WebDataManager from "../utils/WebDataManager";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import i18n from "i18n-js";
|
||||
import {RefreshControl, SectionList} from "react-native";
|
||||
import {ActivityIndicator, Subheading} from 'react-native-paper';
|
||||
import {RefreshControl, SectionList, View} from "react-native";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -148,22 +148,25 @@ export default class WebSectionList extends React.Component<Props, State> {
|
|||
marginBottom: 20
|
||||
}}>
|
||||
{this.state.refreshing ?
|
||||
<Spinner/>
|
||||
<ActivityIndicator
|
||||
animating={true}
|
||||
size={'large'}
|
||||
color={ThemeManager.getCurrentThemeVariables().primary}/>
|
||||
:
|
||||
<MaterialCommunityIcons
|
||||
name={item.icon}
|
||||
size={100}
|
||||
color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>}
|
||||
color={ThemeManager.getCurrentThemeVariables().textDisabled}/>}
|
||||
</View>
|
||||
|
||||
<H3 style={{
|
||||
<Subheading style={{
|
||||
textAlign: 'center',
|
||||
marginRight: 20,
|
||||
marginLeft: 20,
|
||||
color: ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText
|
||||
color: ThemeManager.getCurrentThemeVariables().textDisabled
|
||||
}}>
|
||||
{item.text}
|
||||
</H3>
|
||||
</Subheading>
|
||||
</View>);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Platform, View} from 'react-native';
|
||||
import {Container, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base';
|
||||
import {View} from 'react-native';
|
||||
import WebView from "react-native-webview";
|
||||
import Touchable from "react-native-platform-touchable";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import {ActivityIndicator} from 'react-native-paper';
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -62,9 +62,9 @@ export default class WebViewScreen extends React.Component<Props> {
|
|||
style={{padding: 6}}
|
||||
onPress={clickAction}>
|
||||
<MaterialCommunityIcons
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
||||
name={icon}
|
||||
size={26}/>
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().text}/>
|
||||
</Touchable>
|
||||
);
|
||||
}
|
||||
|
|
@ -112,7 +112,7 @@ export default class WebViewScreen extends React.Component<Props> {
|
|||
getRenderLoading() {
|
||||
return (
|
||||
<View style={{
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().background,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
|
|
@ -122,7 +122,10 @@ export default class WebViewScreen extends React.Component<Props> {
|
|||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<Spinner/>
|
||||
<ActivityIndicator
|
||||
animating={true}
|
||||
size={'large'}
|
||||
color={ThemeManager.getCurrentThemeVariables().primary}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
@ -144,50 +147,11 @@ export default class WebViewScreen extends React.Component<Props> {
|
|||
);
|
||||
}
|
||||
|
||||
getTabbedWebview() {
|
||||
let tabbedView = [];
|
||||
for (let i = 0; i < this.props.data.length; i++) {
|
||||
tabbedView.push(
|
||||
<Tab heading={
|
||||
<TabHeading>
|
||||
<MaterialCommunityIcons
|
||||
name={this.props.data[i]['icon']}
|
||||
color={ThemeManager.getCurrentThemeVariables().tabIconColor}
|
||||
size={20}
|
||||
/>
|
||||
<Text>{this.props.data[i]['name']}</Text>
|
||||
</TabHeading>}
|
||||
key={this.props.data[i]['url']}
|
||||
style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||
{this.getWebview(this.props.data[i])}
|
||||
</Tab>);
|
||||
}
|
||||
return tabbedView;
|
||||
}
|
||||
|
||||
render() {
|
||||
// console.log("rendering WebViewScreen");
|
||||
const nav = this.props.navigation;
|
||||
this.webviewArray = [];
|
||||
return (
|
||||
<Container>
|
||||
{this.props.data.length === 1 ?
|
||||
this.getWebview(this.props.data[0]) :
|
||||
<Tabs
|
||||
tabContainerStyle={{
|
||||
elevation: 0, // Fix for android shadow
|
||||
}}
|
||||
locked={true}
|
||||
style={{
|
||||
backgroundColor: Platform.OS === 'ios' ?
|
||||
ThemeManager.getCurrentThemeVariables().tabDefaultBg :
|
||||
ThemeManager.getCurrentThemeVariables().brandPrimary
|
||||
}}
|
||||
|
||||
>
|
||||
{this.getTabbedWebview()}
|
||||
</Tabs>}
|
||||
</Container>
|
||||
this.getWebview(this.props.data[0])
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const badgeTheme = {
|
||||
'.primary': {
|
||||
backgroundColor: variables.buttonPrimaryBg
|
||||
},
|
||||
'.warning': {
|
||||
backgroundColor: variables.buttonWarningBg
|
||||
},
|
||||
'.info': {
|
||||
backgroundColor: variables.buttonInfoBg
|
||||
},
|
||||
'.success': {
|
||||
backgroundColor: variables.buttonSuccessBg
|
||||
},
|
||||
'.danger': {
|
||||
backgroundColor: variables.buttonDangerBg
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
color: variables.badgeColor,
|
||||
fontSize: variables.fontSizeBase,
|
||||
lineHeight: variables.lineHeight - 1,
|
||||
textAlign: 'center',
|
||||
paddingHorizontal: 3
|
||||
},
|
||||
backgroundColor: variables.badgeBg,
|
||||
padding: variables.badgePadding,
|
||||
paddingHorizontal: 6,
|
||||
alignSelf: 'flex-start',
|
||||
justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined,
|
||||
borderRadius: 13.5,
|
||||
height: 27
|
||||
};
|
||||
return badgeTheme;
|
||||
};
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const bodyTheme = {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center'
|
||||
};
|
||||
|
||||
return bodyTheme;
|
||||
};
|
||||
|
|
@ -1,386 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platformStyle = variables.platformStyle;
|
||||
const platform = variables.platform;
|
||||
const darkCommon = {
|
||||
'NativeBase.Text': {
|
||||
color: variables.brandDark
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.brandDark
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.brandDark
|
||||
}
|
||||
};
|
||||
const lightCommon = {
|
||||
'NativeBase.Text': {
|
||||
color: variables.brandLight
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.brandLight
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.brandLight
|
||||
}
|
||||
};
|
||||
const primaryCommon = {
|
||||
'NativeBase.Text': {
|
||||
color: variables.buttonPrimaryBg
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.buttonPrimaryBg
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.buttonPrimaryBg
|
||||
}
|
||||
};
|
||||
const successCommon = {
|
||||
'NativeBase.Text': {
|
||||
color: variables.buttonSuccessBg
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.buttonSuccessBg
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.buttonSuccessBg
|
||||
}
|
||||
};
|
||||
const infoCommon = {
|
||||
'NativeBase.Text': {
|
||||
color: variables.buttonInfoBg
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.buttonInfoBg
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.buttonInfoBg
|
||||
}
|
||||
};
|
||||
const warningCommon = {
|
||||
'NativeBase.Text': {
|
||||
color: variables.buttonWarningBg
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.buttonWarningBg
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.buttonWarningBg
|
||||
}
|
||||
};
|
||||
const dangerCommon = {
|
||||
'NativeBase.Text': {
|
||||
color: variables.buttonDangerBg
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.buttonDangerBg
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.buttonDangerBg
|
||||
}
|
||||
};
|
||||
const buttonTheme = {
|
||||
'.disabled': {
|
||||
'.transparent': {
|
||||
backgroundColor: 'transparent',
|
||||
'NativeBase.Text': {
|
||||
color: variables.buttonDisabledBg
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.buttonDisabledBg
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.buttonDisabledBg
|
||||
}
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.brandLight
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.brandLight
|
||||
},
|
||||
backgroundColor: variables.buttonDisabledBg
|
||||
},
|
||||
'.bordered': {
|
||||
'.dark': {
|
||||
...darkCommon,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: variables.brandDark,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
'.light': {
|
||||
...lightCommon,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: variables.brandLight,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
'.primary': {
|
||||
...primaryCommon,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: variables.buttonPrimaryBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
'.success': {
|
||||
...successCommon,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: variables.buttonSuccessBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
'.info': {
|
||||
...infoCommon,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: variables.buttonInfoBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
'.warning': {
|
||||
...warningCommon,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: variables.buttonWarningBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
'.danger': {
|
||||
...dangerCommon,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: variables.buttonDangerBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
'.disabled': {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: variables.buttonDisabledBg,
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
'NativeBase.Text': {
|
||||
color: variables.buttonDisabledBg
|
||||
}
|
||||
},
|
||||
...primaryCommon,
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
elevation: null,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowOpacity: null,
|
||||
shadowRadius: null,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
|
||||
'.dark': {
|
||||
'.bordered': {
|
||||
...darkCommon
|
||||
},
|
||||
backgroundColor: variables.brandDark
|
||||
},
|
||||
'.light': {
|
||||
'.transparent': {
|
||||
...lightCommon,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
'.bordered': {
|
||||
...lightCommon
|
||||
},
|
||||
...darkCommon,
|
||||
backgroundColor: variables.brandLight
|
||||
},
|
||||
|
||||
'.primary': {
|
||||
'.bordered': {
|
||||
...primaryCommon
|
||||
},
|
||||
backgroundColor: variables.buttonPrimaryBg
|
||||
},
|
||||
|
||||
'.success': {
|
||||
'.bordered': {
|
||||
...successCommon
|
||||
},
|
||||
backgroundColor: variables.buttonSuccessBg
|
||||
},
|
||||
|
||||
'.info': {
|
||||
'.bordered': {
|
||||
...infoCommon
|
||||
},
|
||||
backgroundColor: variables.buttonInfoBg
|
||||
},
|
||||
|
||||
'.warning': {
|
||||
'.bordered': {
|
||||
...warningCommon
|
||||
},
|
||||
backgroundColor: variables.buttonWarningBg
|
||||
},
|
||||
|
||||
'.danger': {
|
||||
'.bordered': {
|
||||
...dangerCommon
|
||||
},
|
||||
backgroundColor: variables.buttonDangerBg
|
||||
},
|
||||
|
||||
'.block': {
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'stretch'
|
||||
},
|
||||
|
||||
'.full': {
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'stretch',
|
||||
borderRadius: 0
|
||||
},
|
||||
|
||||
'.rounded': {
|
||||
borderRadius: variables.borderRadiusLarge
|
||||
},
|
||||
|
||||
'.transparent': {
|
||||
backgroundColor: 'transparent',
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
...primaryCommon,
|
||||
'.dark': {
|
||||
...darkCommon,
|
||||
},
|
||||
'.danger': {
|
||||
...dangerCommon,
|
||||
},
|
||||
'.warning': {
|
||||
...warningCommon,
|
||||
},
|
||||
'.info': {
|
||||
...infoCommon,
|
||||
},
|
||||
'.primary': {
|
||||
...primaryCommon,
|
||||
},
|
||||
'.success': {
|
||||
...successCommon,
|
||||
},
|
||||
'.light': {
|
||||
...lightCommon,
|
||||
},
|
||||
'.disabled': {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: variables.buttonDisabledBg,
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
'NativeBase.Text': {
|
||||
color: variables.buttonDisabledBg
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.buttonDisabledBg
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.buttonDisabledBg
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
'.small': {
|
||||
height: 30,
|
||||
'NativeBase.Text': {
|
||||
fontSize: 14
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
fontSize: 20,
|
||||
paddingTop: 0
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
fontSize: 20,
|
||||
paddingTop: 0
|
||||
}
|
||||
},
|
||||
|
||||
'.large': {
|
||||
height: 60,
|
||||
'NativeBase.Text': {
|
||||
fontSize: 22
|
||||
}
|
||||
},
|
||||
|
||||
'.capitalize': {},
|
||||
|
||||
'.vertical': {
|
||||
flexDirection: 'column',
|
||||
height: null
|
||||
},
|
||||
|
||||
'NativeBase.Text': {
|
||||
fontFamily: variables.buttonFontFamily,
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
color: variables.buttonTextColor,
|
||||
fontSize: variables.buttonTextSize,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
|
||||
'NativeBase.Icon': {
|
||||
color: variables.buttonTextColor,
|
||||
fontSize: 24,
|
||||
marginHorizontal: 16,
|
||||
paddingTop: platform === PLATFORM.IOS ? 2 : undefined
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.buttonTextColor,
|
||||
fontSize: 24,
|
||||
marginHorizontal: 16,
|
||||
paddingTop: platform === PLATFORM.IOS ? 2 : undefined
|
||||
},
|
||||
|
||||
'.iconLeft': {
|
||||
'NativeBase.Text': {
|
||||
marginLeft: 0
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
marginRight: 0,
|
||||
marginLeft: 16
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
marginRight: 0,
|
||||
marginLeft: 16
|
||||
}
|
||||
},
|
||||
'.iconRight': {
|
||||
'NativeBase.Text': {
|
||||
marginRight: 0
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
marginLeft: 0,
|
||||
marginRight: 16
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
marginLeft: 0,
|
||||
marginRight: 16
|
||||
}
|
||||
},
|
||||
'.picker': {
|
||||
'NativeBase.Text': {
|
||||
'.note': {
|
||||
fontSize: 16,
|
||||
lineHeight: null
|
||||
}
|
||||
}
|
||||
},
|
||||
paddingVertical: variables.buttonPadding,
|
||||
backgroundColor: variables.buttonPrimaryBg,
|
||||
borderRadius: variables.borderRadiusBase,
|
||||
borderColor: variables.buttonPrimaryBg,
|
||||
borderWidth: null,
|
||||
height: 45,
|
||||
flexDirection: 'row',
|
||||
elevation: 2,
|
||||
shadowColor:
|
||||
platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
|
||||
shadowOffset:
|
||||
platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
|
||||
shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
|
||||
shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
};
|
||||
return buttonTheme;
|
||||
};
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const cardTheme = {
|
||||
'.transparent': {
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowOpacity: null,
|
||||
shadowRadius: null,
|
||||
elevation: null,
|
||||
backgroundColor: 'transparent',
|
||||
borderWidth: 0
|
||||
},
|
||||
'.noShadow': {
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowOpacity: null,
|
||||
elevation: null
|
||||
},
|
||||
marginVertical: 5,
|
||||
marginHorizontal: 2,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderRadius: variables.cardBorderRadius,
|
||||
borderColor: variables.cardBorderColor,
|
||||
flexWrap: 'nowrap',
|
||||
backgroundColor: variables.cardDefaultBg,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 1.5,
|
||||
elevation: 3
|
||||
};
|
||||
|
||||
return cardTheme;
|
||||
};
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platform = variables.platform;
|
||||
const transparentBtnCommon = {
|
||||
'NativeBase.Text': {
|
||||
fontSize: variables.DefaultFontSize - 3,
|
||||
color: variables.sTabBarActiveTextColor
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
fontSize: variables.iconFontSize - 10,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
marginHorizontal: null
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
fontSize: variables.iconFontSize - 10,
|
||||
color: variables.sTabBarActiveTextColor
|
||||
},
|
||||
paddingVertical: null,
|
||||
paddingHorizontal: null
|
||||
};
|
||||
|
||||
const cardItemTheme = {
|
||||
'NativeBase.Left': {
|
||||
'NativeBase.Body': {
|
||||
'NativeBase.Text': {
|
||||
'.note': {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: '400',
|
||||
marginRight: 20
|
||||
}
|
||||
},
|
||||
flex: 1,
|
||||
marginLeft: 10,
|
||||
alignItems: null
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
fontSize: variables.iconFontSize
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
fontSize: variables.iconFontSize
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
marginLeft: 10,
|
||||
alignSelf: 'center'
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
'.transparent': {
|
||||
...transparentBtnCommon,
|
||||
paddingRight: variables.cardItemPadding + 5
|
||||
}
|
||||
},
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center'
|
||||
},
|
||||
'.content': {
|
||||
'NativeBase.Text': {
|
||||
color: platform === PLATFORM.IOS ? '#555' : '#222',
|
||||
fontSize: variables.DefaultFontSize - 2
|
||||
}
|
||||
},
|
||||
'.cardBody': {
|
||||
padding: -5,
|
||||
'NativeBase.Text': {
|
||||
marginTop: 5
|
||||
}
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
'NativeBase.Text': {
|
||||
'.note': {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: '200',
|
||||
marginRight: 20
|
||||
}
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
'.transparent': {
|
||||
...transparentBtnCommon,
|
||||
paddingRight: variables.cardItemPadding + 5,
|
||||
alignSelf: 'stretch'
|
||||
}
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: 'stretch',
|
||||
alignItems: 'flex-start'
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
'NativeBase.Badge': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
'.transparent': {
|
||||
...transparentBtnCommon
|
||||
},
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
alignSelf: null,
|
||||
fontSize: variables.iconFontSize - 8,
|
||||
color: variables.cardBorderColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
alignSelf: null,
|
||||
fontSize: variables.iconFontSize - 8,
|
||||
color: variables.cardBorderColor
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
fontSize: variables.DefaultFontSize - 1,
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Thumbnail': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Image': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Radio': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Checkbox': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Switch': {
|
||||
alignSelf: null
|
||||
},
|
||||
flex: 0.8
|
||||
},
|
||||
'.header': {
|
||||
'NativeBase.Text': {
|
||||
fontSize: 16,
|
||||
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
|
||||
},
|
||||
'.bordered': {
|
||||
'NativeBase.Text': {
|
||||
color: variables.brandPrimary,
|
||||
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
|
||||
},
|
||||
borderBottomWidth: variables.borderWidth
|
||||
},
|
||||
borderBottomWidth: null,
|
||||
paddingVertical: variables.cardItemPadding + 5
|
||||
},
|
||||
'.footer': {
|
||||
'NativeBase.Text': {
|
||||
fontSize: 16,
|
||||
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
|
||||
},
|
||||
'.bordered': {
|
||||
'NativeBase.Text': {
|
||||
color: variables.brandPrimary,
|
||||
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
|
||||
},
|
||||
borderTopWidth: variables.borderWidth
|
||||
},
|
||||
borderBottomWidth: null
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
'.note': {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: '200'
|
||||
}
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
width: variables.iconFontSize + 5,
|
||||
fontSize: variables.iconFontSize - 2
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
width: variables.iconFontSize + 5,
|
||||
fontSize: variables.iconFontSize - 2
|
||||
},
|
||||
'.bordered': {
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: variables.cardBorderColor
|
||||
},
|
||||
'.first': {
|
||||
borderTopLeftRadius: variables.cardBorderRadius,
|
||||
borderTopRightRadius: variables.cardBorderRadius
|
||||
},
|
||||
'.last': {
|
||||
borderBottomLeftRadius: variables.cardBorderRadius,
|
||||
borderBottomRightRadius: variables.cardBorderRadius
|
||||
},
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: variables.cardBorderRadius,
|
||||
padding: variables.cardItemPadding + 5,
|
||||
paddingVertical: variables.cardItemPadding,
|
||||
backgroundColor: variables.cardDefaultBg
|
||||
};
|
||||
|
||||
return cardItemTheme;
|
||||
};
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const checkBoxTheme = {
|
||||
'.checked': {
|
||||
'NativeBase.Icon': {
|
||||
color: variables.checkboxTickColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.checkboxTickColor
|
||||
}
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: 'transparent',
|
||||
lineHeight: variables.CheckboxIconSize,
|
||||
marginTop: variables.CheckboxIconMarginTop,
|
||||
fontSize: variables.CheckboxFontSize
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: 'transparent',
|
||||
lineHeight: variables.CheckboxIconSize,
|
||||
marginTop: variables.CheckboxIconMarginTop,
|
||||
fontSize: variables.CheckboxFontSize
|
||||
},
|
||||
borderRadius: variables.CheckboxRadius,
|
||||
overflow: 'hidden',
|
||||
width: variables.checkboxSize,
|
||||
height: variables.checkboxSize,
|
||||
borderWidth: variables.CheckboxBorderWidth,
|
||||
paddingLeft: variables.CheckboxPaddingLeft - 1,
|
||||
paddingBottom: variables.CheckboxPaddingBottom,
|
||||
left: 10
|
||||
};
|
||||
|
||||
return checkBoxTheme;
|
||||
};
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { Platform, Dimensions } from 'react-native';
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
const deviceHeight = Dimensions.get('window').height;
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const theme = {
|
||||
flex: 1,
|
||||
height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20,
|
||||
backgroundColor: variables.containerBgColor
|
||||
};
|
||||
|
||||
return theme;
|
||||
};
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const contentTheme = {
|
||||
flex: 1,
|
||||
backgroundColor: 'transparent',
|
||||
'NativeBase.Segment': {
|
||||
borderWidth: 0,
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
};
|
||||
|
||||
return contentTheme;
|
||||
};
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const fabTheme = {
|
||||
'NativeBase.Button': {
|
||||
alignItems: 'center',
|
||||
padding: null,
|
||||
justifyContent: 'center',
|
||||
'NativeBase.Icon': {
|
||||
alignSelf: 'center',
|
||||
fontSize: 20,
|
||||
marginLeft: 0,
|
||||
marginRight: 0
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
alignSelf: 'center',
|
||||
fontSize: 20,
|
||||
marginLeft: 0,
|
||||
marginRight: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return fabTheme;
|
||||
};
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platformStyle = variables.platformStyle;
|
||||
const platform = variables.platform;
|
||||
|
||||
const iconCommon = {
|
||||
'NativeBase.Icon': {
|
||||
color: variables.tabBarActiveTextColor
|
||||
}
|
||||
};
|
||||
const iconNBCommon = {
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.tabBarActiveTextColor
|
||||
}
|
||||
};
|
||||
const textCommon = {
|
||||
'NativeBase.Text': {
|
||||
color: variables.tabBarActiveTextColor
|
||||
}
|
||||
};
|
||||
const footerTheme = {
|
||||
'NativeBase.Left': {
|
||||
'NativeBase.Button': {
|
||||
'.transparent': {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon,
|
||||
...textCommon
|
||||
},
|
||||
alignSelf: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon
|
||||
// ...textCommon
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: 'center',
|
||||
alignItems: 'flex-start'
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
flexDirection: 'row',
|
||||
'NativeBase.Button': {
|
||||
alignSelf: 'center',
|
||||
'.transparent': {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon,
|
||||
...textCommon
|
||||
},
|
||||
'.full': {
|
||||
height: variables.footerHeight,
|
||||
paddingBottom: variables.footerPaddingBottom,
|
||||
flex: 1
|
||||
},
|
||||
...iconCommon,
|
||||
...iconNBCommon
|
||||
// ...textCommon
|
||||
}
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
'NativeBase.Button': {
|
||||
'.transparent': {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon,
|
||||
...textCommon
|
||||
},
|
||||
alignSelf: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon
|
||||
// ...textCommon
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: 'center',
|
||||
alignItems: 'flex-end'
|
||||
},
|
||||
backgroundColor: variables.footerDefaultBg,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
borderTopWidth:
|
||||
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||
? variables.borderWidth
|
||||
: undefined,
|
||||
borderColor:
|
||||
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||
? '#cbcbcb'
|
||||
: undefined,
|
||||
height: variables.footerHeight,
|
||||
paddingBottom: variables.footerPaddingBottom,
|
||||
elevation: 3,
|
||||
left: 0,
|
||||
right: 0
|
||||
};
|
||||
return footerTheme;
|
||||
};
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platform = variables.platform;
|
||||
|
||||
const footerTabTheme = {
|
||||
'NativeBase.Button': {
|
||||
'.active': {
|
||||
'NativeBase.Text': {
|
||||
color: variables.tabBarActiveTextColor,
|
||||
fontSize: variables.tabBarTextSize,
|
||||
lineHeight: 16
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.tabBarActiveTextColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.tabBarActiveTextColor
|
||||
},
|
||||
backgroundColor: variables.tabActiveBgColor
|
||||
},
|
||||
flexDirection: null,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
alignSelf: 'center',
|
||||
flex: 1,
|
||||
height: variables.footerHeight,
|
||||
justifyContent: 'center',
|
||||
'.badge': {
|
||||
'NativeBase.Badge': {
|
||||
'NativeBase.Text': {
|
||||
fontSize: 11,
|
||||
fontWeight: platform === PLATFORM.IOS ? '600' : undefined,
|
||||
lineHeight: 14
|
||||
},
|
||||
top: -3,
|
||||
alignSelf: 'center',
|
||||
left: 10,
|
||||
zIndex: 99,
|
||||
height: 18,
|
||||
padding: 1.7,
|
||||
paddingHorizontal: 3
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
marginTop: -18
|
||||
}
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.tabBarTextColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.tabBarTextColor
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
color: variables.tabBarTextColor,
|
||||
fontSize: variables.tabBarTextSize,
|
||||
lineHeight: 16
|
||||
}
|
||||
},
|
||||
backgroundColor:
|
||||
Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
flex: 1,
|
||||
alignSelf: 'stretch'
|
||||
};
|
||||
|
||||
return footerTabTheme;
|
||||
};
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const theme = {
|
||||
'NativeBase.Item': {
|
||||
'.fixedLabel': {
|
||||
'NativeBase.Label': {
|
||||
paddingLeft: null
|
||||
},
|
||||
marginLeft: 15
|
||||
},
|
||||
'.inlineLabel': {
|
||||
'NativeBase.Label': {
|
||||
paddingLeft: null
|
||||
},
|
||||
marginLeft: 15
|
||||
},
|
||||
'.placeholderLabel': {
|
||||
'NativeBase.Input': {}
|
||||
},
|
||||
'.stackedLabel': {
|
||||
'NativeBase.Label': {
|
||||
top: 5,
|
||||
paddingLeft: null
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
paddingLeft: null,
|
||||
marginLeft: null
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
marginTop: 36
|
||||
},
|
||||
marginLeft: 15
|
||||
},
|
||||
'.floatingLabel': {
|
||||
'NativeBase.Input': {
|
||||
paddingLeft: null,
|
||||
top: 10,
|
||||
marginLeft: null
|
||||
},
|
||||
'NativeBase.Label': {
|
||||
left: 0,
|
||||
top: 6
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
top: 6
|
||||
},
|
||||
marginTop: 15,
|
||||
marginLeft: 15
|
||||
},
|
||||
'.regular': {
|
||||
'NativeBase.Label': {
|
||||
left: 0
|
||||
},
|
||||
marginLeft: 0
|
||||
},
|
||||
'.rounded': {
|
||||
'NativeBase.Label': {
|
||||
left: 0
|
||||
},
|
||||
marginLeft: 0
|
||||
},
|
||||
'.underline': {
|
||||
'NativeBase.Label': {
|
||||
left: 0,
|
||||
top: 0,
|
||||
position: 'relative'
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
left: -15
|
||||
},
|
||||
marginLeft: 15
|
||||
},
|
||||
'.last': {
|
||||
marginLeft: 0,
|
||||
paddingLeft: 15
|
||||
},
|
||||
'NativeBase.Label': {
|
||||
paddingRight: 5
|
||||
},
|
||||
marginLeft: 15
|
||||
}
|
||||
};
|
||||
|
||||
return theme;
|
||||
};
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const h1Theme = {
|
||||
color: variables.textColor,
|
||||
fontSize: variables.fontSizeH1,
|
||||
lineHeight: variables.lineHeightH1
|
||||
};
|
||||
|
||||
return h1Theme;
|
||||
};
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const h2Theme = {
|
||||
color: variables.textColor,
|
||||
fontSize: variables.fontSizeH2,
|
||||
lineHeight: variables.lineHeightH2
|
||||
};
|
||||
|
||||
return h2Theme;
|
||||
};
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const h3Theme = {
|
||||
color: variables.textColor,
|
||||
fontSize: variables.fontSizeH3,
|
||||
lineHeight: variables.lineHeightH3
|
||||
};
|
||||
|
||||
return h3Theme;
|
||||
};
|
||||
|
|
@ -1,419 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { PixelRatio, StatusBar } from 'react-native';
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platformStyle = variables.platformStyle;
|
||||
const platform = variables.platform;
|
||||
|
||||
const headerTheme = {
|
||||
'.span': {
|
||||
height: 128,
|
||||
'NativeBase.Left': {
|
||||
alignSelf: 'flex-start'
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
alignSelf: 'flex-end',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
paddingBottom: 26
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
alignSelf: 'flex-start'
|
||||
}
|
||||
},
|
||||
'.hasSubtitle': {
|
||||
'NativeBase.Body': {
|
||||
'NativeBase.Title': {
|
||||
fontSize: variables.titleFontSize - 2,
|
||||
fontFamily: variables.titleFontfamily,
|
||||
textAlign: 'center',
|
||||
fontWeight: '500',
|
||||
paddingBottom: 3
|
||||
},
|
||||
'NativeBase.Subtitle': {
|
||||
fontSize: variables.subTitleFontSize,
|
||||
fontFamily: variables.titleFontfamily,
|
||||
color: variables.subtitleColor,
|
||||
textAlign: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
'.transparent': {
|
||||
backgroundColor: 'transparent',
|
||||
borderBottomColor: 'transparent',
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
paddingTop:
|
||||
platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
|
||||
height:
|
||||
platform === PLATFORM.ANDROID
|
||||
? variables.toolbarHeight + StatusBar.currentHeight
|
||||
: variables.toolbarHeight
|
||||
},
|
||||
'.noShadow': {
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null
|
||||
},
|
||||
'.hasTabs': {
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
borderBottomWidth: null
|
||||
},
|
||||
'.hasSegment': {
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
borderBottomWidth: null,
|
||||
'NativeBase.Left': {
|
||||
flex: 0.3
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
flex: 0.3
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
flex: 1,
|
||||
'NativeBase.Segment': {
|
||||
marginRight: 0,
|
||||
alignSelf: 'center',
|
||||
'NativeBase.Button': {
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'.noLeft': {
|
||||
'NativeBase.Left': {
|
||||
width: platform === PLATFORM.IOS ? undefined : 0,
|
||||
flex: platform === PLATFORM.IOS ? 1 : 0
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
'NativeBase.Title': {
|
||||
paddingLeft: platform === PLATFORM.IOS ? undefined : 10
|
||||
},
|
||||
'NativeBase.Subtitle': {
|
||||
paddingLeft: platform === PLATFORM.IOS ? undefined : 10
|
||||
}
|
||||
}
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'center',
|
||||
alignItems: 'center',
|
||||
'.transparent': {
|
||||
'NativeBase.Text': {
|
||||
color: variables.toolbarBtnTextColor,
|
||||
fontWeight: '600'
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
paddingHorizontal: variables.buttonPadding
|
||||
},
|
||||
paddingHorizontal: 15
|
||||
},
|
||||
'.searchBar': {
|
||||
'NativeBase.Item': {
|
||||
'NativeBase.Icon': {
|
||||
backgroundColor: 'transparent',
|
||||
color: variables.dropdownLinkColor,
|
||||
fontSize: variables.toolbarSearchIconSize,
|
||||
alignItems: 'center',
|
||||
marginTop: 2,
|
||||
paddingRight: 10,
|
||||
paddingLeft: 10
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
backgroundColor: 'transparent',
|
||||
color: null,
|
||||
alignSelf: 'center'
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
alignSelf: 'center',
|
||||
lineHeight: null,
|
||||
height: variables.searchBarInputHeight
|
||||
},
|
||||
alignSelf: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
flex: 1,
|
||||
height: variables.searchBarHeight,
|
||||
borderColor: 'transparent',
|
||||
backgroundColor: variables.toolbarInputColor
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
'.transparent': {
|
||||
'NativeBase.Text': {
|
||||
fontWeight: '500'
|
||||
},
|
||||
paddingHorizontal: null,
|
||||
paddingLeft: platform === PLATFORM.IOS ? 10 : null
|
||||
},
|
||||
paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
|
||||
width: platform === PLATFORM.IOS ? undefined : 0,
|
||||
height: platform === PLATFORM.IOS ? undefined : 0
|
||||
}
|
||||
},
|
||||
'.rounded': {
|
||||
'NativeBase.Item': {
|
||||
borderRadius:
|
||||
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||
? 25
|
||||
: 3
|
||||
}
|
||||
},
|
||||
'NativeBase.Left': {
|
||||
'NativeBase.Button': {
|
||||
'.hasText': {
|
||||
marginLeft: -10,
|
||||
height: 30,
|
||||
'NativeBase.Icon': {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize,
|
||||
marginTop: 2,
|
||||
marginRight: 5,
|
||||
marginLeft: 2
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
color: variables.toolbarBtnTextColor,
|
||||
fontSize: platform === PLATFORM.IOS ? 17 : 0,
|
||||
marginLeft: 7,
|
||||
lineHeight: 19.5
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize,
|
||||
marginTop: 2,
|
||||
marginRight: 5,
|
||||
marginLeft: 2
|
||||
}
|
||||
},
|
||||
'.transparent': {
|
||||
marginLeft:
|
||||
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||
? -3
|
||||
: 0,
|
||||
'NativeBase.Icon': {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize:
|
||||
platform === PLATFORM.IOS &&
|
||||
variables.platformStyle !== PLATFORM.MATERIAL
|
||||
? variables.iconHeaderSize + 1
|
||||
: variables.iconHeaderSize,
|
||||
marginTop: 0,
|
||||
marginRight: 2,
|
||||
marginLeft: 1,
|
||||
paddingTop: 1
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize:
|
||||
platform === PLATFORM.IOS &&
|
||||
variables.platformStyle !== PLATFORM.MATERIAL
|
||||
? variables.iconHeaderSize + 1
|
||||
: variables.iconHeaderSize - 2,
|
||||
marginTop: 0,
|
||||
marginRight: 2,
|
||||
marginLeft: 1,
|
||||
paddingTop: 1
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
color: variables.toolbarBtnTextColor,
|
||||
fontSize: platform === PLATFORM.IOS ? 17 : 0,
|
||||
top: platform === PLATFORM.IOS ? 1 : -1.5,
|
||||
paddingLeft:
|
||||
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||
? 2
|
||||
: 5,
|
||||
paddingRight:
|
||||
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||
? undefined
|
||||
: 10
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
alignSelf: null,
|
||||
paddingRight: variables.buttonPadding,
|
||||
paddingLeft:
|
||||
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||
? 4
|
||||
: 8
|
||||
},
|
||||
flex:
|
||||
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||
? 1
|
||||
: 0.4,
|
||||
alignSelf: 'center',
|
||||
alignItems: 'flex-start'
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
flex: 1,
|
||||
alignItems:
|
||||
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||
? 'center'
|
||||
: 'flex-start',
|
||||
alignSelf: 'center',
|
||||
'NativeBase.Segment': {
|
||||
borderWidth: 0,
|
||||
alignSelf: 'flex-end',
|
||||
marginRight: platform === PLATFORM.IOS ? -40 : -55
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
alignSelf: 'center',
|
||||
'.transparent': {
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
color: variables.inverseTextColor,
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
'NativeBase.Button': {
|
||||
'.hasText': {
|
||||
height: 30,
|
||||
'NativeBase.Icon': {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize - 2,
|
||||
marginTop: 2,
|
||||
marginRight: 2,
|
||||
marginLeft: 5
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
color: variables.toolbarBtnTextColor,
|
||||
fontSize: platform === PLATFORM.IOS ? 17 : 14,
|
||||
lineHeight: 19.5
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize - 2,
|
||||
marginTop: 2,
|
||||
marginRight: 2,
|
||||
marginLeft: 5
|
||||
}
|
||||
},
|
||||
'.transparent': {
|
||||
marginRight: platform === PLATFORM.IOS ? -9 : -5,
|
||||
paddingLeft: 15,
|
||||
paddingRight: 12,
|
||||
paddingHorizontal: 15,
|
||||
borderRadius: 50,
|
||||
'NativeBase.Icon': {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize - 2,
|
||||
marginTop: 0,
|
||||
marginLeft: 2,
|
||||
marginRight: 0
|
||||
// paddingTop: 0
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize - 2,
|
||||
marginTop: 0,
|
||||
marginLeft: 2,
|
||||
marginRight: 0
|
||||
// paddingTop: 0
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
color: variables.toolbarBtnTextColor,
|
||||
fontSize: platform === PLATFORM.IOS ? 17 : 14,
|
||||
top: platform === PLATFORM.IOS ? 1 : -1.5,
|
||||
paddingRight:
|
||||
platform === PLATFORM.IOS &&
|
||||
variables.platformStyle !== PLATFORM.MATERIAL
|
||||
? 0
|
||||
: undefined
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
alignSelf: null,
|
||||
paddingHorizontal: variables.buttonPadding
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: 'center',
|
||||
alignItems: 'flex-end',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end'
|
||||
},
|
||||
backgroundColor: variables.toolbarDefaultBg,
|
||||
flexDirection: 'row',
|
||||
// paddingHorizontal: 10,
|
||||
paddingLeft:
|
||||
platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
|
||||
? 6
|
||||
: 10,
|
||||
paddingRight: 10,
|
||||
justifyContent: 'center',
|
||||
paddingTop: platform === PLATFORM.IOS ? 18 : 0,
|
||||
borderBottomWidth:
|
||||
platform === PLATFORM.IOS
|
||||
? 1 / PixelRatio.getPixelSizeForLayoutSize(1)
|
||||
: 0,
|
||||
borderBottomColor: variables.toolbarDefaultBorder,
|
||||
height:
|
||||
variables.platform === PLATFORM.IOS &&
|
||||
variables.platformStyle === PLATFORM.MATERIAL
|
||||
? variables.toolbarHeight + 10
|
||||
: variables.toolbarHeight,
|
||||
elevation: 3,
|
||||
shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
|
||||
shadowOffset:
|
||||
platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
|
||||
shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
|
||||
shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0
|
||||
};
|
||||
|
||||
return headerTheme;
|
||||
};
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const iconTheme = {
|
||||
fontSize: variables.iconFontSize,
|
||||
color: variable.textColor
|
||||
};
|
||||
|
||||
return iconTheme;
|
||||
};
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const inputTheme = {
|
||||
'.multiline': {
|
||||
height: null
|
||||
},
|
||||
height: variables.inputHeightBase,
|
||||
color: variables.inputColor,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
flex: 1,
|
||||
fontSize: variables.inputFontSize
|
||||
};
|
||||
|
||||
return inputTheme;
|
||||
};
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const inputGroupTheme = {
|
||||
'NativeBase.Icon': {
|
||||
fontSize: 24,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
paddingHorizontal: 5
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
fontSize: 24,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
paddingHorizontal: 5
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
height: variables.inputHeightBase,
|
||||
color: variables.inputColor,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
flex: 1,
|
||||
fontSize: variables.inputFontSize,
|
||||
lineHeight: variables.inputLineHeight
|
||||
},
|
||||
'.underline': {
|
||||
'.success': {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.error': {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
paddingLeft: 5,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
'.regular': {
|
||||
'.success': {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.error': {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
paddingLeft: 5,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
'.rounded': {
|
||||
'.success': {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.error': {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
paddingLeft: 5,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderRadius: variables.inputGroupRoundedBorderRadius,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
|
||||
'.success': {
|
||||
'NativeBase.Icon': {
|
||||
color: variables.inputSuccessBorderColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.rounded': {
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.regular': {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.underline': {
|
||||
borderWidth: variables.borderWidth,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
|
||||
'.error': {
|
||||
'NativeBase.Icon': {
|
||||
color: variables.inputErrorBorderColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.inputErrorBorderColor
|
||||
},
|
||||
'.rounded': {
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
'.regular': {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
'.underline': {
|
||||
borderWidth: variables.borderWidth,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
'.disabled': {
|
||||
'NativeBase.Icon': {
|
||||
color: '#384850'
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: '#384850'
|
||||
}
|
||||
},
|
||||
|
||||
paddingLeft: 5,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputBorderColor,
|
||||
backgroundColor: 'transparent',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center'
|
||||
};
|
||||
|
||||
return inputGroupTheme;
|
||||
};
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const itemTheme = {
|
||||
'.floatingLabel': {
|
||||
'NativeBase.Input': {
|
||||
height: 50,
|
||||
top: 8,
|
||||
paddingTop: 3,
|
||||
paddingBottom: 7,
|
||||
'.multiline': {
|
||||
minHeight: variables.inputHeightBase,
|
||||
paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
|
||||
paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10
|
||||
}
|
||||
},
|
||||
'NativeBase.Label': {
|
||||
paddingTop: 5
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
top: 6,
|
||||
paddingTop: 8
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
top: 6,
|
||||
paddingTop: 8
|
||||
}
|
||||
},
|
||||
'.fixedLabel': {
|
||||
'NativeBase.Label': {
|
||||
position: null,
|
||||
top: null,
|
||||
left: null,
|
||||
right: null,
|
||||
flex: 1,
|
||||
height: null,
|
||||
width: null,
|
||||
fontSize: variables.inputFontSize
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
flex: 2,
|
||||
fontSize: variables.inputFontSize
|
||||
}
|
||||
},
|
||||
'.stackedLabel': {
|
||||
'NativeBase.Label': {
|
||||
position: null,
|
||||
top: null,
|
||||
left: null,
|
||||
right: null,
|
||||
paddingTop: 5,
|
||||
alignSelf: 'flex-start',
|
||||
fontSize: variables.inputFontSize - 2
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
marginTop: 36
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start',
|
||||
flex: 1,
|
||||
width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
|
||||
fontSize: variables.inputFontSize,
|
||||
lineHeight: variables.inputLineHeight - 6,
|
||||
'.secureTextEntry': {
|
||||
fontSize: variables.inputFontSize
|
||||
},
|
||||
'.multiline': {
|
||||
paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
|
||||
paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined
|
||||
}
|
||||
},
|
||||
flexDirection: null,
|
||||
minHeight: variables.inputHeightBase + 15
|
||||
},
|
||||
'.inlineLabel': {
|
||||
'NativeBase.Label': {
|
||||
position: null,
|
||||
top: null,
|
||||
left: null,
|
||||
right: null,
|
||||
paddingRight: 20,
|
||||
height: null,
|
||||
width: null,
|
||||
fontSize: variables.inputFontSize
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
paddingLeft: 5,
|
||||
fontSize: variables.inputFontSize
|
||||
},
|
||||
flexDirection: 'row'
|
||||
},
|
||||
'NativeBase.Label': {
|
||||
fontSize: variables.inputFontSize,
|
||||
color: variables.inputColorPlaceholder,
|
||||
paddingRight: 5
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
fontSize: 24,
|
||||
paddingRight: 8
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
fontSize: 24,
|
||||
paddingRight: 8
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
'.multiline': {
|
||||
height: null
|
||||
},
|
||||
height: variables.inputHeightBase,
|
||||
color: variables.inputColor,
|
||||
flex: 1,
|
||||
top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined,
|
||||
fontSize: variables.inputFontSize
|
||||
},
|
||||
'.underline': {
|
||||
'NativeBase.Input': {
|
||||
paddingLeft: 15
|
||||
},
|
||||
'.success': {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.error': {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
'.regular': {
|
||||
'NativeBase.Input': {
|
||||
paddingLeft: 8
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
paddingLeft: 10
|
||||
},
|
||||
'.success': {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.error': {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
'.rounded': {
|
||||
'NativeBase.Input': {
|
||||
paddingLeft: 8
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
paddingLeft: 10
|
||||
},
|
||||
'.success': {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.error': {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
|
||||
'.success': {
|
||||
'NativeBase.Icon': {
|
||||
color: variables.inputSuccessBorderColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.rounded': {
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.regular': {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
'.underline': {
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
|
||||
'.error': {
|
||||
'NativeBase.Icon': {
|
||||
color: variables.inputErrorBorderColor
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.inputErrorBorderColor
|
||||
},
|
||||
'.rounded': {
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
'.regular': {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
'.underline': {
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
'.disabled': {
|
||||
'NativeBase.Icon': {
|
||||
color: '#384850'
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: '#384850'
|
||||
}
|
||||
},
|
||||
'.picker': {
|
||||
marginLeft: 0
|
||||
},
|
||||
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputBorderColor,
|
||||
backgroundColor: 'transparent',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginLeft: 2
|
||||
};
|
||||
|
||||
return itemTheme;
|
||||
};
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const labelTheme = {
|
||||
'.focused': {
|
||||
width: 0
|
||||
},
|
||||
fontSize: 17
|
||||
};
|
||||
|
||||
return labelTheme;
|
||||
};
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const leftTheme = {
|
||||
flex: 1,
|
||||
alignSelf: 'center',
|
||||
alignItems: 'flex-start'
|
||||
};
|
||||
|
||||
return leftTheme;
|
||||
};
|
||||
|
|
@ -1,446 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { Platform, PixelRatio } from 'react-native';
|
||||
|
||||
import pickerTheme from './Picker';
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platform = variables.platform;
|
||||
const selectedStyle = {
|
||||
'NativeBase.Text': {
|
||||
color: variables.listItemSelected
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.listItemSelected
|
||||
}
|
||||
};
|
||||
|
||||
const listItemTheme = {
|
||||
'NativeBase.InputGroup': {
|
||||
'NativeBase.Icon': {
|
||||
paddingRight: 5
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
paddingRight: 5
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
paddingHorizontal: 5
|
||||
},
|
||||
flex: 1,
|
||||
borderWidth: null,
|
||||
margin: -10,
|
||||
borderBottomColor: 'transparent'
|
||||
},
|
||||
'.searchBar': {
|
||||
'NativeBase.Item': {
|
||||
'NativeBase.Icon': {
|
||||
backgroundColor: 'transparent',
|
||||
color: variables.dropdownLinkColor,
|
||||
fontSize:
|
||||
platform === PLATFORM.IOS
|
||||
? variables.iconFontSize - 10
|
||||
: variables.iconFontSize - 5,
|
||||
alignItems: 'center',
|
||||
marginTop: 2,
|
||||
paddingRight: 8
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
backgroundColor: 'transparent',
|
||||
color: null,
|
||||
alignSelf: 'center'
|
||||
},
|
||||
'NativeBase.Input': {
|
||||
alignSelf: 'center'
|
||||
},
|
||||
alignSelf: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
flex: 1,
|
||||
height: platform === PLATFORM.IOS ? 30 : 40,
|
||||
borderColor: 'transparent',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 5
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
'.transparent': {
|
||||
'NativeBase.Text': {
|
||||
fontWeight: '500'
|
||||
},
|
||||
paddingHorizontal: null,
|
||||
paddingLeft: platform === PLATFORM.IOS ? 10 : null
|
||||
},
|
||||
paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
|
||||
width: platform === PLATFORM.IOS ? undefined : 0,
|
||||
height: platform === PLATFORM.IOS ? undefined : 0
|
||||
},
|
||||
backgroundColor: variables.toolbarInputColor,
|
||||
padding: 10,
|
||||
marginLeft: null
|
||||
},
|
||||
'NativeBase.CheckBox': {
|
||||
marginLeft: -10,
|
||||
marginRight: 10
|
||||
},
|
||||
'.first': {
|
||||
'.itemHeader': {
|
||||
paddingTop: variables.listItemPadding + 3
|
||||
}
|
||||
},
|
||||
'.itemHeader': {
|
||||
'.first': {
|
||||
paddingTop: variables.listItemPadding + 3
|
||||
},
|
||||
borderBottomWidth:
|
||||
platform === PLATFORM.IOS ? variables.borderWidth : null,
|
||||
marginLeft: null,
|
||||
padding: variables.listItemPadding,
|
||||
paddingLeft: variables.listItemPadding + 5,
|
||||
paddingTop:
|
||||
platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined,
|
||||
paddingBottom:
|
||||
platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined,
|
||||
flexDirection: 'row',
|
||||
borderColor: variables.listBorderColor,
|
||||
'NativeBase.Text': {
|
||||
fontSize: 14,
|
||||
color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor
|
||||
}
|
||||
},
|
||||
'.itemDivider': {
|
||||
borderBottomWidth: null,
|
||||
marginLeft: null,
|
||||
padding: variables.listItemPadding,
|
||||
paddingLeft: variables.listItemPadding + 5,
|
||||
backgroundColor: variables.listDividerBg,
|
||||
flexDirection: 'row',
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
'.selected': {
|
||||
'NativeBase.Left': {
|
||||
...selectedStyle
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
...selectedStyle
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
...selectedStyle
|
||||
},
|
||||
...selectedStyle
|
||||
},
|
||||
'NativeBase.Left': {
|
||||
'NativeBase.Body': {
|
||||
'NativeBase.Text': {
|
||||
'.note': {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: '200'
|
||||
},
|
||||
fontWeight: '600'
|
||||
},
|
||||
marginLeft: 10,
|
||||
alignItems: null,
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
width: variables.iconFontSize - 10,
|
||||
fontSize: variables.iconFontSize - 10
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
width: variables.iconFontSize - 10,
|
||||
fontSize: variables.iconFontSize - 10
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
alignSelf: 'center'
|
||||
},
|
||||
flexDirection: 'row'
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
'NativeBase.Text': {
|
||||
marginHorizontal: variables.listItemPadding,
|
||||
'.note': {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: '200'
|
||||
}
|
||||
},
|
||||
alignSelf: null,
|
||||
alignItems: null
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
'NativeBase.Badge': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.PickerNB': {
|
||||
'NativeBase.Button': {
|
||||
marginRight: -15,
|
||||
'NativeBase.Text': {
|
||||
color: variables.topTabBarActiveTextColor
|
||||
}
|
||||
}
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
alignSelf: null,
|
||||
'.transparent': {
|
||||
'NativeBase.Text': {
|
||||
color: variables.topTabBarActiveTextColor
|
||||
}
|
||||
}
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
alignSelf: null,
|
||||
fontSize: variables.iconFontSize - 8,
|
||||
color: '#c9c8cd'
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
alignSelf: null,
|
||||
fontSize: variables.iconFontSize - 8,
|
||||
color: '#c9c8cd'
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
'.note': {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: '200'
|
||||
},
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Thumbnail': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Image': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Radio': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Checkbox': {
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.Switch': {
|
||||
alignSelf: null
|
||||
},
|
||||
padding: null,
|
||||
flex: 0.28
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
'.note': {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: '200'
|
||||
},
|
||||
alignSelf: 'center'
|
||||
},
|
||||
'.last': {
|
||||
marginLeft: -(variables.listItemPadding + 5),
|
||||
paddingLeft: (variables.listItemPadding + 5) * 2,
|
||||
top: 1
|
||||
},
|
||||
'.avatar': {
|
||||
'NativeBase.Left': {
|
||||
flex: 0,
|
||||
alignSelf: 'flex-start',
|
||||
paddingTop: 14
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
'NativeBase.Text': {
|
||||
marginLeft: null
|
||||
},
|
||||
flex: 1,
|
||||
paddingVertical: variables.listItemPadding,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor,
|
||||
marginLeft: variables.listItemPadding + 5
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
'NativeBase.Text': {
|
||||
'.note': {
|
||||
fontSize: variables.noteFontSize - 2
|
||||
}
|
||||
},
|
||||
flex: 0,
|
||||
paddingRight: variables.listItemPadding + 5,
|
||||
alignSelf: 'stretch',
|
||||
paddingVertical: variables.listItemPadding,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
'.noBorder': {
|
||||
'NativeBase.Body': {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
borderBottomWidth: null
|
||||
}
|
||||
},
|
||||
borderBottomWidth: null,
|
||||
paddingVertical: null,
|
||||
paddingRight: null
|
||||
},
|
||||
'.thumbnail': {
|
||||
'NativeBase.Left': {
|
||||
flex: 0
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
'NativeBase.Text': {
|
||||
marginLeft: null
|
||||
},
|
||||
flex: 1,
|
||||
paddingVertical: variables.listItemPadding + 8,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor,
|
||||
marginLeft: variables.listItemPadding + 5
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
'NativeBase.Button': {
|
||||
'.transparent': {
|
||||
'NativeBase.Text': {
|
||||
fontSize: variables.listNoteSize,
|
||||
color: variables.sTabBarActiveTextColor
|
||||
}
|
||||
},
|
||||
height: null
|
||||
},
|
||||
flex: 0,
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'stretch',
|
||||
paddingRight: variables.listItemPadding + 5,
|
||||
paddingVertical: variables.listItemPadding + 5,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
'.noBorder': {
|
||||
'NativeBase.Body': {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
borderBottomWidth: null
|
||||
}
|
||||
},
|
||||
borderBottomWidth: null,
|
||||
paddingVertical: null,
|
||||
paddingRight: null
|
||||
},
|
||||
'.icon': {
|
||||
'.last': {
|
||||
'NativeBase.Body': {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
'NativeBase.Left': {
|
||||
'NativeBase.Button': {
|
||||
'NativeBase.IconNB': {
|
||||
marginHorizontal: null,
|
||||
fontSize: variables.iconFontSize - 5
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
marginHorizontal: null,
|
||||
fontSize: variables.iconFontSize - 8
|
||||
},
|
||||
alignSelf: 'center',
|
||||
height: 29,
|
||||
width: 29,
|
||||
borderRadius: 6,
|
||||
paddingVertical: null,
|
||||
paddingHorizontal: null,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
width: variables.iconFontSize - 5,
|
||||
fontSize: variables.iconFontSize - 2
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
width: variables.iconFontSize - 5,
|
||||
fontSize: variables.iconFontSize - 2
|
||||
},
|
||||
paddingRight: variables.listItemPadding + 5,
|
||||
flex: 0,
|
||||
height: 44,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
'NativeBase.Text': {
|
||||
marginLeft: null,
|
||||
fontSize: 17
|
||||
},
|
||||
flex: 1,
|
||||
height: 44,
|
||||
justifyContent: 'center',
|
||||
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
'NativeBase.Text': {
|
||||
textAlign: 'center',
|
||||
color: '#8F8E95',
|
||||
fontSize: 17
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: '#C8C7CC',
|
||||
fontSize: variables.iconFontSize - 10,
|
||||
alignSelf: 'center',
|
||||
paddingLeft: 10,
|
||||
paddingTop: 3
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: '#C8C7CC',
|
||||
fontSize: variables.iconFontSize - 10,
|
||||
alignSelf: 'center',
|
||||
paddingLeft: 10,
|
||||
paddingTop: 3
|
||||
},
|
||||
'NativeBase.Switch': {
|
||||
marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5,
|
||||
alignSelf: null
|
||||
},
|
||||
'NativeBase.PickerNB': {
|
||||
...pickerTheme()
|
||||
},
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 0,
|
||||
alignSelf: 'stretch',
|
||||
height: 44,
|
||||
justifyContent: 'flex-end',
|
||||
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
borderColor: variables.listBorderColor,
|
||||
paddingRight: variables.listItemPadding + 5
|
||||
},
|
||||
'.noBorder': {
|
||||
'NativeBase.Body': {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
borderBottomWidth: null
|
||||
}
|
||||
},
|
||||
borderBottomWidth: null,
|
||||
paddingVertical: null,
|
||||
paddingRight: null,
|
||||
height: 44,
|
||||
justifyContent: 'center'
|
||||
},
|
||||
'.noBorder': {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
'.noIndent': {
|
||||
marginLeft: null,
|
||||
padding: variables.listItemPadding,
|
||||
paddingLeft: variables.listItemPadding + 6
|
||||
},
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
paddingRight: variables.listItemPadding + 6,
|
||||
paddingVertical: variables.listItemPadding + 3,
|
||||
marginLeft: variables.listItemPadding + 6,
|
||||
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
backgroundColor: variables.listBg,
|
||||
borderColor: variables.listBorderColor
|
||||
};
|
||||
|
||||
return listItemTheme;
|
||||
};
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const pickerTheme = {
|
||||
'.note': {
|
||||
color: '#8F8E95'
|
||||
},
|
||||
// width: 90,
|
||||
marginRight: -4,
|
||||
flexGrow: 1
|
||||
};
|
||||
|
||||
return pickerTheme;
|
||||
};
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const pickerTheme = {};
|
||||
|
||||
return pickerTheme;
|
||||
};
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const pickerTheme = {
|
||||
'.note': {
|
||||
color: '#8F8E95'
|
||||
},
|
||||
// width: 90,
|
||||
marginRight: -4,
|
||||
flexGrow: 1
|
||||
};
|
||||
|
||||
return pickerTheme;
|
||||
};
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const radioTheme = {
|
||||
'.selected': {
|
||||
'NativeBase.IconNB': {
|
||||
color:
|
||||
Platform.OS === PLATFORM.IOS
|
||||
? variables.radioColor
|
||||
: variables.radioSelectedColorAndroid,
|
||||
lineHeight:
|
||||
Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
|
||||
height: Platform.OS === PLATFORM.IOS ? 20 : undefined
|
||||
}
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined,
|
||||
lineHeight:
|
||||
Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight,
|
||||
fontSize:
|
||||
Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize
|
||||
}
|
||||
};
|
||||
|
||||
return radioTheme;
|
||||
};
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const rightTheme = {
|
||||
'NativeBase.Button': {
|
||||
alignSelf: null
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: 'center',
|
||||
alignItems: 'flex-end'
|
||||
};
|
||||
|
||||
return rightTheme;
|
||||
};
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platform = variables.platform;
|
||||
|
||||
const segmentTheme = {
|
||||
height: 45,
|
||||
borderColor: variables.segmentBorderColorMain,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: variables.segmentBackgroundColor,
|
||||
'NativeBase.Button': {
|
||||
alignSelf: 'center',
|
||||
borderRadius: 0,
|
||||
paddingTop: 3,
|
||||
paddingBottom: 3,
|
||||
height: 30,
|
||||
backgroundColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.segmentBorderColor,
|
||||
elevation: 0,
|
||||
'.active': {
|
||||
backgroundColor: variables.segmentActiveBackgroundColor,
|
||||
'NativeBase.Text': {
|
||||
color: variables.segmentActiveTextColor
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.segmentActiveTextColor
|
||||
}
|
||||
},
|
||||
'.first': {
|
||||
borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
|
||||
borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
|
||||
borderLeftWidth: 1
|
||||
},
|
||||
'.last': {
|
||||
borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
|
||||
borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
color: variables.segmentTextColor,
|
||||
fontSize: 14
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
fontSize: 22,
|
||||
paddingTop: 0,
|
||||
color: variables.segmentTextColor
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return segmentTheme;
|
||||
};
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const theme = {
|
||||
'.group': {
|
||||
height: 50,
|
||||
paddingVertical: variables.listItemPadding - 8,
|
||||
paddingTop: variables.listItemPadding + 12,
|
||||
'.bordered': {
|
||||
height: 50,
|
||||
paddingVertical: variables.listItemPadding - 8,
|
||||
paddingTop: variables.listItemPadding + 12
|
||||
}
|
||||
},
|
||||
'.bordered': {
|
||||
'.noTopBorder': {
|
||||
borderTopWidth: 0
|
||||
},
|
||||
'.noBottomBorder': {
|
||||
borderBottomWidth: 0
|
||||
},
|
||||
height: 35,
|
||||
paddingTop: variables.listItemPadding + 2,
|
||||
paddingBottom: variables.listItemPadding,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderTopWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
fontSize: variables.tabBarTextSize - 2,
|
||||
color: '#777'
|
||||
},
|
||||
'.noTopBorder': {
|
||||
borderTopWidth: 0
|
||||
},
|
||||
'.noBottomBorder': {
|
||||
borderBottomWidth: 0
|
||||
},
|
||||
height: 38,
|
||||
backgroundColor: '#F0EFF5',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
paddingLeft: variables.listItemPadding + 5
|
||||
};
|
||||
|
||||
return theme;
|
||||
};
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const spinnerTheme = {
|
||||
height: 80
|
||||
};
|
||||
|
||||
return spinnerTheme;
|
||||
};
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const subtitleTheme = {
|
||||
fontSize: variables.subTitleFontSize,
|
||||
fontFamily: variables.titleFontfamily,
|
||||
color: variables.subtitleColor,
|
||||
textAlign: 'center',
|
||||
paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
|
||||
marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3
|
||||
};
|
||||
|
||||
return subtitleTheme;
|
||||
};
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const swipeRowTheme = {
|
||||
'NativeBase.ListItem': {
|
||||
'.list': {
|
||||
backgroundColor: '#FFF'
|
||||
},
|
||||
marginLeft: 0
|
||||
},
|
||||
'NativeBase.Left': {
|
||||
flex: 0,
|
||||
alignSelf: null,
|
||||
alignItems: null,
|
||||
'NativeBase.Button': {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'stretch',
|
||||
borderRadius: 0
|
||||
}
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
flex: 0,
|
||||
alignSelf: null,
|
||||
alignItems: null,
|
||||
'NativeBase.Button': {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'stretch',
|
||||
borderRadius: 0
|
||||
}
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
flex: 1,
|
||||
height: null,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignSelf: 'stretch',
|
||||
borderRadius: 0
|
||||
}
|
||||
};
|
||||
|
||||
return swipeRowTheme;
|
||||
};
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const switchTheme = {
|
||||
marginVertical: -5
|
||||
};
|
||||
|
||||
return switchTheme;
|
||||
};
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const tabTheme = {
|
||||
flex: 1,
|
||||
backgroundColor: '#FFF'
|
||||
};
|
||||
|
||||
return tabTheme;
|
||||
};
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const tabBarTheme = {
|
||||
'.tabIcon': {
|
||||
height: undefined
|
||||
},
|
||||
'.vertical': {
|
||||
height: 60
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
'.transparent': {
|
||||
'NativeBase.Text': {
|
||||
fontSize: variables.tabFontSize,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
fontWeight: '400'
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.sTabBarActiveTextColor
|
||||
}
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
color: variables.sTabBarActiveTextColor
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
fontSize: variables.tabFontSize,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
fontWeight: '400'
|
||||
},
|
||||
'.isTabActive': {
|
||||
'NativeBase.Text': {
|
||||
fontWeight: '900'
|
||||
}
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: 'stretch',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: null,
|
||||
borderBottomColor: 'transparent',
|
||||
backgroundColor: variables.tabBgColor
|
||||
},
|
||||
height: 45,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
borderWidth: 1,
|
||||
borderTopWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderBottomColor: '#ccc',
|
||||
backgroundColor: variables.tabBgColor
|
||||
};
|
||||
|
||||
return tabBarTheme;
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platformStyle = variables.platformStyle;
|
||||
|
||||
const tabContainerTheme = {
|
||||
elevation: 3,
|
||||
height: 50,
|
||||
flexDirection: 'row',
|
||||
shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
|
||||
shadowOffset:
|
||||
platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
|
||||
shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
|
||||
shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
|
||||
justifyContent: 'space-around',
|
||||
borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
|
||||
borderColor: variables.topTabBarBorderColor
|
||||
};
|
||||
|
||||
return tabContainerTheme;
|
||||
};
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platform = variables.platform;
|
||||
|
||||
const tabHeadingTheme = {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: variables.tabDefaultBg,
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
'.scrollable': {
|
||||
paddingHorizontal: 20,
|
||||
flex: platform === PLATFORM.ANDROID ? 0 : 1,
|
||||
minWidth: platform === PLATFORM.ANDROID ? undefined : 60
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
color: variables.topTabBarTextColor,
|
||||
marginHorizontal: 7
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.topTabBarTextColor,
|
||||
fontSize: platform === PLATFORM.IOS ? 26 : undefined
|
||||
},
|
||||
'.active': {
|
||||
'NativeBase.Text': {
|
||||
color: variables.topTabBarActiveTextColor,
|
||||
fontWeight: '600'
|
||||
},
|
||||
'NativeBase.Icon': {
|
||||
color: variables.topTabBarActiveTextColor
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return tabHeadingTheme;
|
||||
};
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const textTheme = {
|
||||
fontSize: variables.DefaultFontSize,
|
||||
fontFamily: variables.fontFamily,
|
||||
color: variables.textColor,
|
||||
'.note': {
|
||||
color: '#a7a7a7',
|
||||
fontSize: variables.noteFontSize
|
||||
}
|
||||
};
|
||||
|
||||
return textTheme;
|
||||
};
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const textAreaTheme = {
|
||||
'.underline': {
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
marginTop: 5,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
'.bordered': {
|
||||
borderWidth: 1,
|
||||
marginTop: 5,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
color: variables.textColor,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 5,
|
||||
fontSize: 15,
|
||||
textAlignVertical: 'top'
|
||||
};
|
||||
|
||||
return textAreaTheme;
|
||||
};
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
// @flow
|
||||
|
||||
export default () => {
|
||||
const thumbnailTheme = {
|
||||
'.square': {
|
||||
borderRadius: 0,
|
||||
'.small': {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 0
|
||||
},
|
||||
'.large': {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 0
|
||||
}
|
||||
},
|
||||
'.small': {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
'.square': {
|
||||
borderRadius: 0
|
||||
}
|
||||
},
|
||||
'.large': {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
'.square': {
|
||||
borderRadius: 0
|
||||
}
|
||||
},
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28
|
||||
};
|
||||
|
||||
return thumbnailTheme;
|
||||
};
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const titleTheme = {
|
||||
fontSize: variables.titleFontSize,
|
||||
fontFamily: variables.titleFontfamily,
|
||||
color: variables.titleFontColor,
|
||||
fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
|
||||
textAlign: 'center',
|
||||
paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
|
||||
marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
|
||||
paddingTop: 1
|
||||
};
|
||||
|
||||
return titleTheme;
|
||||
};
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
import { PLATFORM } from './../variables/commonColor';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const platform = variables.platform;
|
||||
|
||||
const toastTheme = {
|
||||
'.danger': {
|
||||
backgroundColor: variables.brandDanger
|
||||
},
|
||||
'.warning': {
|
||||
backgroundColor: variables.brandWarning
|
||||
},
|
||||
'.success': {
|
||||
backgroundColor: variables.brandSuccess
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
borderRadius: platform === PLATFORM.IOS ? 5 : 0,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 10,
|
||||
minHeight: 50,
|
||||
'NativeBase.Text': {
|
||||
color: '#fff',
|
||||
flex: 1
|
||||
},
|
||||
'NativeBase.Button': {
|
||||
backgroundColor: 'transparent',
|
||||
height: 30,
|
||||
elevation: 0,
|
||||
'NativeBase.Text': {
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return toastTheme;
|
||||
};
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const viewTheme = {
|
||||
'.padder': {
|
||||
padding: variables.contentPadding
|
||||
}
|
||||
};
|
||||
|
||||
return viewTheme;
|
||||
};
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
/* eslint-disable no-param-reassign */
|
||||
// @flow
|
||||
|
||||
import _ from 'lodash';
|
||||
|
||||
import bodyTheme from './Body';
|
||||
import leftTheme from './Left';
|
||||
import rightTheme from './Right';
|
||||
import headerTheme from './Header';
|
||||
import switchTheme from './Switch';
|
||||
import thumbnailTheme from './Thumbnail';
|
||||
import containerTheme from './Container';
|
||||
import contentTheme from './Content';
|
||||
import buttonTheme from './Button';
|
||||
import titleTheme from './Title';
|
||||
import subtitleTheme from './Subtitle';
|
||||
import inputGroupTheme from './InputGroup';
|
||||
import badgeTheme from './Badge';
|
||||
import checkBoxTheme from './CheckBox';
|
||||
import cardTheme from './Card';
|
||||
import radioTheme from './Radio';
|
||||
import h3Theme from './H3';
|
||||
import h2Theme from './H2';
|
||||
import h1Theme from './H1';
|
||||
import footerTheme from './Footer';
|
||||
import footerTabTheme from './FooterTab';
|
||||
import fabTheme from './Fab';
|
||||
import itemTheme from './Item';
|
||||
import labelTheme from './Label';
|
||||
import textAreaTheme from './Textarea';
|
||||
import textTheme from './Text';
|
||||
import toastTheme from './Toast';
|
||||
import tabTheme from './Tab';
|
||||
import tabBarTheme from './TabBar';
|
||||
import tabContainerTheme from './TabContainer';
|
||||
import viewTheme from './View';
|
||||
import tabHeadingTheme from './TabHeading';
|
||||
import iconTheme from './Icon';
|
||||
import inputTheme from './Input';
|
||||
import swipeRowTheme from './SwipeRow';
|
||||
import segmentTheme from './Segment';
|
||||
import spinnerTheme from './Spinner';
|
||||
import cardItemTheme from './CardItem';
|
||||
import listItemTheme from './ListItem';
|
||||
import formTheme from './Form';
|
||||
import separatorTheme from './Separator';
|
||||
import pickerTheme from './Picker';
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /* : * */ = variable) => {
|
||||
const theme = {
|
||||
variables,
|
||||
'NativeBase.Left': {
|
||||
...leftTheme(variables)
|
||||
},
|
||||
'NativeBase.Right': {
|
||||
...rightTheme(variables)
|
||||
},
|
||||
'NativeBase.Body': {
|
||||
...bodyTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Header': {
|
||||
...headerTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Button': {
|
||||
...buttonTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Title': {
|
||||
...titleTheme(variables)
|
||||
},
|
||||
'NativeBase.Subtitle': {
|
||||
...subtitleTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.InputGroup': {
|
||||
...inputGroupTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Input': {
|
||||
...inputTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Badge': {
|
||||
...badgeTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.CheckBox': {
|
||||
...checkBoxTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Radio': {
|
||||
...radioTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Card': {
|
||||
...cardTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.CardItem': {
|
||||
...cardItemTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Toast': {
|
||||
...toastTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.H1': {
|
||||
...h1Theme(variables)
|
||||
},
|
||||
'NativeBase.H2': {
|
||||
...h2Theme(variables)
|
||||
},
|
||||
'NativeBase.H3': {
|
||||
...h3Theme(variables)
|
||||
},
|
||||
'NativeBase.Form': {
|
||||
...formTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Container': {
|
||||
...containerTheme(variables)
|
||||
},
|
||||
'NativeBase.Content': {
|
||||
...contentTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Footer': {
|
||||
...footerTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Tabs': {
|
||||
flex: 1
|
||||
},
|
||||
|
||||
'NativeBase.FooterTab': {
|
||||
...footerTabTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.ListItem': {
|
||||
...listItemTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.ListItem1': {
|
||||
...listItemTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Icon': {
|
||||
...iconTheme(variables)
|
||||
},
|
||||
'NativeBase.IconNB': {
|
||||
...iconTheme(variables)
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
...textTheme(variables)
|
||||
},
|
||||
'NativeBase.Spinner': {
|
||||
...spinnerTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Fab': {
|
||||
...fabTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Item': {
|
||||
...itemTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Label': {
|
||||
...labelTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Textarea': {
|
||||
...textAreaTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.PickerNB': {
|
||||
...pickerTheme(variables),
|
||||
'NativeBase.Button': {
|
||||
'NativeBase.Text': {}
|
||||
}
|
||||
},
|
||||
|
||||
'NativeBase.Tab': {
|
||||
...tabTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.Segment': {
|
||||
...segmentTheme(variables)
|
||||
},
|
||||
|
||||
'NativeBase.TabBar': {
|
||||
...tabBarTheme(variables)
|
||||
},
|
||||
'NativeBase.ViewNB': {
|
||||
...viewTheme(variables)
|
||||
},
|
||||
'NativeBase.TabHeading': {
|
||||
...tabHeadingTheme(variables)
|
||||
},
|
||||
'NativeBase.TabContainer': {
|
||||
...tabContainerTheme(variables)
|
||||
},
|
||||
'NativeBase.Switch': {
|
||||
...switchTheme(variables)
|
||||
},
|
||||
'NativeBase.Separator': {
|
||||
...separatorTheme(variables)
|
||||
},
|
||||
'NativeBase.SwipeRow': {
|
||||
...swipeRowTheme(variables)
|
||||
},
|
||||
'NativeBase.Thumbnail': {
|
||||
...thumbnailTheme(variables)
|
||||
}
|
||||
};
|
||||
|
||||
const cssifyTheme = (grandparent, parent, parentKey) => {
|
||||
_.forEach(parent, (style, styleName) => {
|
||||
if (
|
||||
styleName.indexOf('.') === 0 &&
|
||||
parentKey &&
|
||||
parentKey.indexOf('.') === 0
|
||||
) {
|
||||
if (grandparent) {
|
||||
if (!grandparent[styleName]) {
|
||||
grandparent[styleName] = {};
|
||||
} else {
|
||||
grandparent[styleName][parentKey] = style;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (
|
||||
style &&
|
||||
typeof style === 'object' &&
|
||||
styleName !== 'fontVariant' &&
|
||||
styleName !== 'transform'
|
||||
) {
|
||||
cssifyTheme(parent, style, styleName);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
cssifyTheme(null, theme, null);
|
||||
|
||||
return theme;
|
||||
};
|
||||
|
|
@ -1,311 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import color from 'color';
|
||||
import { Platform, Dimensions, PixelRatio } from 'react-native';
|
||||
|
||||
export const PLATFORM = {
|
||||
ANDROID: 'android',
|
||||
IOS: 'ios',
|
||||
MATERIAL: 'material',
|
||||
WEB: 'web'
|
||||
};
|
||||
|
||||
const deviceHeight = Dimensions.get('window').height;
|
||||
const deviceWidth = Dimensions.get('window').width;
|
||||
const platform = Platform.OS;
|
||||
const platformStyle = undefined;
|
||||
const isIphoneX =
|
||||
platform === PLATFORM.IOS &&
|
||||
(deviceHeight === 812 ||
|
||||
deviceWidth === 812 ||
|
||||
deviceHeight === 896 ||
|
||||
deviceWidth === 896);
|
||||
|
||||
export default {
|
||||
platformStyle,
|
||||
platform,
|
||||
|
||||
// Accordion
|
||||
headerStyle: '#edebed',
|
||||
iconStyle: '#000',
|
||||
contentStyle: '#f5f4f5',
|
||||
expandedIconStyle: '#000',
|
||||
accordionBorderColor: '#d3d3d3',
|
||||
|
||||
// ActionSheet
|
||||
elevation: 4,
|
||||
containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
|
||||
innerTouchableBackgroundColor: '#fff',
|
||||
listItemHeight: 50,
|
||||
listItemBorderColor: 'transparent',
|
||||
marginHorizontal: -15,
|
||||
marginLeft: 14,
|
||||
marginTop: 15,
|
||||
minHeight: 56,
|
||||
padding: 15,
|
||||
touchableTextColor: '#757575',
|
||||
|
||||
// Android
|
||||
androidRipple: true,
|
||||
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
|
||||
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
|
||||
buttonUppercaseAndroidText: true,
|
||||
|
||||
// Badge
|
||||
badgeBg: '#ED1727',
|
||||
badgeColor: '#fff',
|
||||
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
|
||||
|
||||
// Button
|
||||
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||
buttonDisabledBg: '#b5b5b5',
|
||||
buttonPadding: 6,
|
||||
get buttonPrimaryBg() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
get buttonPrimaryColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonInfoBg() {
|
||||
return this.brandInfo;
|
||||
},
|
||||
get buttonInfoColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonSuccessBg() {
|
||||
return this.brandSuccess;
|
||||
},
|
||||
get buttonSuccessColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonDangerBg() {
|
||||
return this.brandDanger;
|
||||
},
|
||||
get buttonDangerColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonWarningBg() {
|
||||
return this.brandWarning;
|
||||
},
|
||||
get buttonWarningColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonTextSize() {
|
||||
return platform === PLATFORM.IOS
|
||||
? this.fontSizeBase * 1.1
|
||||
: this.fontSizeBase - 1;
|
||||
},
|
||||
get buttonTextSizeLarge() {
|
||||
return this.fontSizeBase * 1.5;
|
||||
},
|
||||
get buttonTextSizeSmall() {
|
||||
return this.fontSizeBase * 0.8;
|
||||
},
|
||||
get borderRadiusLarge() {
|
||||
return this.fontSizeBase * 3.8;
|
||||
},
|
||||
get iconSizeLarge() {
|
||||
return this.iconFontSize * 1.5;
|
||||
},
|
||||
get iconSizeSmall() {
|
||||
return this.iconFontSize * 0.6;
|
||||
},
|
||||
|
||||
// Card
|
||||
cardDefaultBg: '#fff',
|
||||
cardBorderColor: '#ccc',
|
||||
cardBorderRadius: 2,
|
||||
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||
|
||||
// CheckBox
|
||||
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
|
||||
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
|
||||
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
|
||||
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
|
||||
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
|
||||
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
|
||||
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
|
||||
checkboxBgColor: '#039BE5',
|
||||
checkboxSize: 20,
|
||||
checkboxTickColor: '#fff',
|
||||
|
||||
// Color
|
||||
brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
|
||||
brandInfo: '#62B1F6',
|
||||
brandSuccess: '#5cb85c',
|
||||
brandDanger: '#d9534f',
|
||||
brandWarning: '#f0ad4e',
|
||||
brandDark: '#000',
|
||||
brandLight: '#f4f4f4',
|
||||
|
||||
// Container
|
||||
containerBgColor: '#fff',
|
||||
|
||||
// Date Picker
|
||||
datePickerTextColor: '#000',
|
||||
datePickerBg: 'transparent',
|
||||
|
||||
// FAB
|
||||
fabWidth: 56,
|
||||
|
||||
// Font
|
||||
DefaultFontSize: 16,
|
||||
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
|
||||
fontSizeBase: 15,
|
||||
get fontSizeH1() {
|
||||
return this.fontSizeBase * 1.8;
|
||||
},
|
||||
get fontSizeH2() {
|
||||
return this.fontSizeBase * 1.6;
|
||||
},
|
||||
get fontSizeH3() {
|
||||
return this.fontSizeBase * 1.4;
|
||||
},
|
||||
|
||||
// Footer
|
||||
footerHeight: 55,
|
||||
footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||
footerPaddingBottom: 0,
|
||||
|
||||
// FooterTab
|
||||
tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea',
|
||||
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
|
||||
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
sTabBarActiveTextColor: '#007aff',
|
||||
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff',
|
||||
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
|
||||
|
||||
// Header
|
||||
toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
|
||||
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
|
||||
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
|
||||
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
|
||||
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
|
||||
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
iosStatusbar: 'dark-content',
|
||||
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
|
||||
get statusBarColor() {
|
||||
return color(this.toolbarDefaultBg)
|
||||
.darken(0.2)
|
||||
.hex();
|
||||
},
|
||||
get darkenHeader() {
|
||||
return color(this.tabBgColor)
|
||||
.darken(0.03)
|
||||
.hex();
|
||||
},
|
||||
|
||||
// Icon
|
||||
iconFamily: 'Ionicons',
|
||||
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
|
||||
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
|
||||
|
||||
// InputGroup
|
||||
inputFontSize: 17,
|
||||
inputBorderColor: '#D9D5DC',
|
||||
inputSuccessBorderColor: '#2b8339',
|
||||
inputErrorBorderColor: '#ed2f2f',
|
||||
inputHeightBase: 50,
|
||||
get inputColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get inputColorPlaceholder() {
|
||||
return '#575757';
|
||||
},
|
||||
|
||||
// Line Height
|
||||
buttonLineHeight: 19,
|
||||
lineHeightH1: 32,
|
||||
lineHeightH2: 27,
|
||||
lineHeightH3: 22,
|
||||
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
|
||||
|
||||
// List
|
||||
listBg: 'transparent',
|
||||
listBorderColor: '#c9c9c9',
|
||||
listDividerBg: '#f4f4f4',
|
||||
listBtnUnderlayColor: '#DDD',
|
||||
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||
listNoteColor: '#808080',
|
||||
listNoteSize: 13,
|
||||
listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
|
||||
|
||||
// Progress Bar
|
||||
defaultProgressColor: '#E4202D',
|
||||
inverseProgressColor: '#1A191B',
|
||||
|
||||
// Radio Button
|
||||
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
|
||||
radioSelectedColorAndroid: '#3F51B5',
|
||||
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
|
||||
get radioColor() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
|
||||
// Segment
|
||||
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
|
||||
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
|
||||
|
||||
// Spinner
|
||||
defaultSpinnerColor: '#45D56E',
|
||||
inverseSpinnerColor: '#1A191B',
|
||||
|
||||
// Tab
|
||||
tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
|
||||
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
|
||||
// Tabs
|
||||
tabBgColor: '#F8F8F8',
|
||||
tabFontSize: 15,
|
||||
|
||||
// Text
|
||||
textColor: '#000',
|
||||
inverseTextColor: '#fff',
|
||||
noteFontSize: 14,
|
||||
get defaultTextColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
|
||||
// Title
|
||||
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
|
||||
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
|
||||
subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff',
|
||||
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff',
|
||||
|
||||
// Other
|
||||
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
|
||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
contentPadding: 10,
|
||||
dropdownLinkColor: '#414142',
|
||||
inputLineHeight: 24,
|
||||
deviceWidth,
|
||||
deviceHeight,
|
||||
isIphoneX,
|
||||
inputGroupRoundedBorderRadius: 30,
|
||||
|
||||
// iPhoneX SafeArea
|
||||
Inset: {
|
||||
portrait: {
|
||||
topInset: 24,
|
||||
leftInset: 0,
|
||||
rightInset: 0,
|
||||
bottomInset: 34
|
||||
},
|
||||
landscape: {
|
||||
topInset: 0,
|
||||
leftInset: 44,
|
||||
rightInset: 44,
|
||||
bottomInset: 21
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,304 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import color from 'color';
|
||||
import { Platform, Dimensions, PixelRatio } from 'react-native';
|
||||
|
||||
import { PLATFORM } from './commonColor';
|
||||
|
||||
const deviceHeight = Dimensions.get('window').height;
|
||||
const deviceWidth = Dimensions.get('window').width;
|
||||
const platform = Platform.OS;
|
||||
const platformStyle = PLATFORM.MATERIAL;
|
||||
const isIphoneX =
|
||||
platform === PLATFORM.IOS &&
|
||||
(deviceHeight === 812 ||
|
||||
deviceWidth === 812 ||
|
||||
deviceHeight === 896 ||
|
||||
deviceWidth === 896);
|
||||
|
||||
export default {
|
||||
platformStyle,
|
||||
platform,
|
||||
|
||||
// Accordion
|
||||
headerStyle: '#edebed',
|
||||
iconStyle: '#000',
|
||||
contentStyle: '#f5f4f5',
|
||||
expandedIconStyle: '#000',
|
||||
accordionBorderColor: '#d3d3d3',
|
||||
|
||||
// ActionSheet
|
||||
elevation: 4,
|
||||
containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
|
||||
innerTouchableBackgroundColor: '#fff',
|
||||
listItemHeight: 50,
|
||||
listItemBorderColor: 'transparent',
|
||||
marginHorizontal: -15,
|
||||
marginLeft: 14,
|
||||
marginTop: 15,
|
||||
minHeight: 56,
|
||||
padding: 15,
|
||||
touchableTextColor: '#757575',
|
||||
|
||||
// Android
|
||||
androidRipple: true,
|
||||
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
|
||||
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
|
||||
buttonUppercaseAndroidText: true,
|
||||
|
||||
// Badge
|
||||
badgeBg: '#ED1727',
|
||||
badgeColor: '#fff',
|
||||
badgePadding: 0,
|
||||
|
||||
// Button
|
||||
buttonFontFamily: 'Roboto',
|
||||
buttonDisabledBg: '#b5b5b5',
|
||||
buttonPadding: 6,
|
||||
get buttonPrimaryBg() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
get buttonPrimaryColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonInfoBg() {
|
||||
return this.brandInfo;
|
||||
},
|
||||
get buttonInfoColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonSuccessBg() {
|
||||
return this.brandSuccess;
|
||||
},
|
||||
get buttonSuccessColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonDangerBg() {
|
||||
return this.brandDanger;
|
||||
},
|
||||
get buttonDangerColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonWarningBg() {
|
||||
return this.brandWarning;
|
||||
},
|
||||
get buttonWarningColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonTextSize() {
|
||||
return this.fontSizeBase - 1;
|
||||
},
|
||||
get buttonTextSizeLarge() {
|
||||
return this.fontSizeBase * 1.5;
|
||||
},
|
||||
get buttonTextSizeSmall() {
|
||||
return this.fontSizeBase * 0.8;
|
||||
},
|
||||
get borderRadiusLarge() {
|
||||
return this.fontSizeBase * 3.8;
|
||||
},
|
||||
get iconSizeLarge() {
|
||||
return this.iconFontSize * 1.5;
|
||||
},
|
||||
get iconSizeSmall() {
|
||||
return this.iconFontSize * 0.6;
|
||||
},
|
||||
|
||||
// Card
|
||||
cardDefaultBg: '#fff',
|
||||
cardBorderColor: '#ccc',
|
||||
cardBorderRadius: 2,
|
||||
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||
|
||||
// CheckBox
|
||||
CheckboxRadius: 0,
|
||||
CheckboxBorderWidth: 2,
|
||||
CheckboxPaddingLeft: 2,
|
||||
CheckboxPaddingBottom: 5,
|
||||
CheckboxIconSize: 16,
|
||||
CheckboxIconMarginTop: 1,
|
||||
CheckboxFontSize: 17,
|
||||
checkboxBgColor: '#039BE5',
|
||||
checkboxSize: 20,
|
||||
checkboxTickColor: '#fff',
|
||||
|
||||
// Color
|
||||
brandPrimary: '#3F51B5',
|
||||
brandInfo: '#62B1F6',
|
||||
brandSuccess: '#5cb85c',
|
||||
brandDanger: '#d9534f',
|
||||
brandWarning: '#f0ad4e',
|
||||
brandDark: '#000',
|
||||
brandLight: '#f4f4f4',
|
||||
|
||||
// Container
|
||||
containerBgColor: '#fff',
|
||||
|
||||
// Date Picker
|
||||
datePickerTextColor: '#000',
|
||||
datePickerBg: 'transparent',
|
||||
|
||||
// FAB
|
||||
fabWidth: 56,
|
||||
|
||||
// Font
|
||||
DefaultFontSize: 16,
|
||||
fontFamily: 'Roboto',
|
||||
fontSizeBase: 15,
|
||||
get fontSizeH1() {
|
||||
return this.fontSizeBase * 1.8;
|
||||
},
|
||||
get fontSizeH2() {
|
||||
return this.fontSizeBase * 1.6;
|
||||
},
|
||||
get fontSizeH3() {
|
||||
return this.fontSizeBase * 1.4;
|
||||
},
|
||||
|
||||
// Footer
|
||||
footerHeight: 55,
|
||||
footerDefaultBg: '#3F51B5',
|
||||
footerPaddingBottom: 0,
|
||||
|
||||
// FooterTab
|
||||
tabBarTextColor: '#bfc6ea',
|
||||
tabBarTextSize: 11,
|
||||
activeTab: '#fff',
|
||||
sTabBarActiveTextColor: '#007aff',
|
||||
tabBarActiveTextColor: '#fff',
|
||||
tabActiveBgColor: '#3F51B5',
|
||||
|
||||
// Header
|
||||
toolbarBtnColor: '#fff',
|
||||
toolbarDefaultBg: '#3F51B5',
|
||||
toolbarHeight: 56,
|
||||
toolbarSearchIconSize: 23,
|
||||
toolbarInputColor: '#fff',
|
||||
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
|
||||
searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
|
||||
toolbarBtnTextColor: '#fff',
|
||||
toolbarDefaultBorder: '#3F51B5',
|
||||
iosStatusbar: 'light-content',
|
||||
get statusBarColor() {
|
||||
return color(this.toolbarDefaultBg)
|
||||
.darken(0.2)
|
||||
.hex();
|
||||
},
|
||||
get darkenHeader() {
|
||||
return color(this.tabBgColor)
|
||||
.darken(0.03)
|
||||
.hex();
|
||||
},
|
||||
|
||||
// Icon
|
||||
iconFamily: 'Ionicons',
|
||||
iconFontSize: 28,
|
||||
iconHeaderSize: 24,
|
||||
|
||||
// InputGroup
|
||||
inputFontSize: 17,
|
||||
inputBorderColor: '#D9D5DC',
|
||||
inputSuccessBorderColor: '#2b8339',
|
||||
inputErrorBorderColor: '#ed2f2f',
|
||||
inputHeightBase: 50,
|
||||
get inputColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get inputColorPlaceholder() {
|
||||
return '#575757';
|
||||
},
|
||||
|
||||
// Line Height
|
||||
buttonLineHeight: 19,
|
||||
lineHeightH1: 32,
|
||||
lineHeightH2: 27,
|
||||
lineHeightH3: 22,
|
||||
lineHeight: 24,
|
||||
|
||||
// List
|
||||
listBg: 'transparent',
|
||||
listBorderColor: '#c9c9c9',
|
||||
listDividerBg: '#f4f4f4',
|
||||
listBtnUnderlayColor: '#DDD',
|
||||
listItemPadding: 12,
|
||||
listNoteColor: '#808080',
|
||||
listNoteSize: 13,
|
||||
listItemSelected: '#3F51B5',
|
||||
|
||||
// Progress Bar
|
||||
defaultProgressColor: '#E4202D',
|
||||
inverseProgressColor: '#1A191B',
|
||||
|
||||
// Radio Button
|
||||
radioBtnSize: 23,
|
||||
radioSelectedColorAndroid: '#3F51B5',
|
||||
radioBtnLineHeight: 24,
|
||||
get radioColor() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
|
||||
// Segment
|
||||
segmentBackgroundColor: '#3F51B5',
|
||||
segmentActiveBackgroundColor: '#fff',
|
||||
segmentTextColor: '#fff',
|
||||
segmentActiveTextColor: '#3F51B5',
|
||||
segmentBorderColor: '#fff',
|
||||
segmentBorderColorMain: '#3F51B5',
|
||||
|
||||
// Spinner
|
||||
defaultSpinnerColor: '#45D56E',
|
||||
inverseSpinnerColor: '#1A191B',
|
||||
|
||||
// Tab
|
||||
tabDefaultBg: '#3F51B5',
|
||||
topTabBarTextColor: '#b3c7f9',
|
||||
topTabBarActiveTextColor: '#fff',
|
||||
topTabBarBorderColor: '#fff',
|
||||
topTabBarActiveBorderColor: '#fff',
|
||||
|
||||
// Tabs
|
||||
tabBgColor: '#F8F8F8',
|
||||
tabFontSize: 15,
|
||||
|
||||
// Text
|
||||
textColor: '#000',
|
||||
inverseTextColor: '#fff',
|
||||
noteFontSize: 14,
|
||||
get defaultTextColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
|
||||
// Title
|
||||
titleFontfamily: 'Roboto',
|
||||
titleFontSize: 19,
|
||||
subTitleFontSize: 14,
|
||||
subtitleColor: '#FFF',
|
||||
titleFontColor: '#FFF',
|
||||
|
||||
// Other
|
||||
borderRadiusBase: 2,
|
||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
contentPadding: 10,
|
||||
dropdownLinkColor: '#414142',
|
||||
inputLineHeight: 24,
|
||||
deviceWidth,
|
||||
deviceHeight,
|
||||
isIphoneX,
|
||||
inputGroupRoundedBorderRadius: 30,
|
||||
|
||||
// iPhoneX SafeArea
|
||||
Inset: {
|
||||
portrait: {
|
||||
topInset: 24,
|
||||
leftInset: 0,
|
||||
rightInset: 0,
|
||||
bottomInset: 34
|
||||
},
|
||||
landscape: {
|
||||
topInset: 0,
|
||||
leftInset: 44,
|
||||
rightInset: 44,
|
||||
bottomInset: 21
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,362 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import color from 'color';
|
||||
import { Platform, Dimensions, PixelRatio } from 'react-native';
|
||||
|
||||
import { PLATFORM } from './commonColor';
|
||||
|
||||
const deviceHeight = Dimensions.get('window').height;
|
||||
const deviceWidth = Dimensions.get('window').width;
|
||||
const platform = Platform.OS;
|
||||
const platformStyle = undefined;
|
||||
const isIphoneX =
|
||||
platform === PLATFORM.IOS &&
|
||||
(deviceHeight === 812 ||
|
||||
deviceWidth === 812 ||
|
||||
deviceHeight === 896 ||
|
||||
deviceWidth === 896);
|
||||
|
||||
export default {
|
||||
platformStyle,
|
||||
platform,
|
||||
|
||||
// Accordion
|
||||
accordionBorderColor: '#d3d3d3',
|
||||
accordionContentPadding: 10,
|
||||
accordionIconFontSize: 18,
|
||||
contentStyle: '#f5f4f5',
|
||||
expandedIconStyle: '#000',
|
||||
headerStyle: '#edebed',
|
||||
iconStyle: '#000',
|
||||
|
||||
// ActionSheet
|
||||
elevation: 4,
|
||||
containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
|
||||
innerTouchableBackgroundColor: '#fff',
|
||||
listItemHeight: 50,
|
||||
listItemBorderColor: 'transparent',
|
||||
marginHorizontal: -15,
|
||||
marginLeft: 14,
|
||||
marginTop: 15,
|
||||
minHeight: 56,
|
||||
padding: 15,
|
||||
touchableTextColor: '#757575',
|
||||
|
||||
// Android
|
||||
androidRipple: true,
|
||||
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
|
||||
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
|
||||
buttonUppercaseAndroidText: true,
|
||||
|
||||
// Badge
|
||||
badgeBg: '#ED1727',
|
||||
badgeColor: '#fff',
|
||||
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
|
||||
|
||||
// Button
|
||||
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||
buttonTextColor: '#fff',
|
||||
buttonDisabledBg: '#b5b5b5',
|
||||
buttonPadding: 6,
|
||||
buttonDefaultActiveOpacity: 0.5,
|
||||
buttonDefaultFlex: 1,
|
||||
buttonDefaultBorderRadius: 2,
|
||||
buttonDefaultBorderWidth: 1,
|
||||
get buttonPrimaryBg() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
get buttonPrimaryColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonInfoBg() {
|
||||
return this.brandInfo;
|
||||
},
|
||||
get buttonInfoColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonSuccessBg() {
|
||||
return this.brandSuccess;
|
||||
},
|
||||
get buttonSuccessColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonDangerBg() {
|
||||
return this.brandDanger;
|
||||
},
|
||||
get buttonDangerColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonWarningBg() {
|
||||
return this.brandWarning;
|
||||
},
|
||||
get buttonWarningColor() {
|
||||
return this.inverseTextColor;
|
||||
},
|
||||
get buttonTextSize() {
|
||||
return platform === PLATFORM.IOS
|
||||
? this.fontSizeBase * 1.1
|
||||
: this.fontSizeBase - 1;
|
||||
},
|
||||
get buttonTextSizeLarge() {
|
||||
return this.fontSizeBase * 1.5;
|
||||
},
|
||||
get buttonTextSizeSmall() {
|
||||
return this.fontSizeBase * 0.8;
|
||||
},
|
||||
get borderRadiusLarge() {
|
||||
return this.fontSizeBase * 3.8;
|
||||
},
|
||||
get iconSizeLarge() {
|
||||
return this.iconFontSize * 1.5;
|
||||
},
|
||||
get iconSizeSmall() {
|
||||
return this.iconFontSize * 0.6;
|
||||
},
|
||||
|
||||
// Card
|
||||
cardDefaultBg: '#fff',
|
||||
cardBorderColor: '#ccc',
|
||||
cardBorderRadius: 2,
|
||||
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||
|
||||
// CheckBox
|
||||
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
|
||||
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
|
||||
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
|
||||
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
|
||||
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
|
||||
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
|
||||
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
|
||||
checkboxBgColor: '#be1522',
|
||||
checkboxSize: 20,
|
||||
checkboxTickColor: '#fff',
|
||||
checkboxDefaultColor: 'transparent',
|
||||
checkboxTextShadowRadius: 0,
|
||||
|
||||
// Color
|
||||
brandPrimary: '#be1522',
|
||||
brandInfo: '#62B1F6',
|
||||
brandSuccess: '#5cb85c',
|
||||
brandDanger: '#d9534f',
|
||||
brandWarning: '#f0ad4e',
|
||||
brandDark: '#000',
|
||||
brandLight: '#f4f4f4',
|
||||
|
||||
// Container
|
||||
containerBgColor: '#fff',
|
||||
sideMenuBgColor: "#f2f2f2",
|
||||
|
||||
// Date Picker
|
||||
datePickerFlex: 1,
|
||||
datePickerPadding: 10,
|
||||
datePickerTextColor: '#000',
|
||||
datePickerBg: 'transparent',
|
||||
|
||||
// FAB
|
||||
fabBackgroundColor: 'blue',
|
||||
fabBorderRadius: 28,
|
||||
fabBottom: 0,
|
||||
fabButtonBorderRadius: 20,
|
||||
fabButtonHeight: 40,
|
||||
fabButtonLeft: 7,
|
||||
fabButtonMarginBottom: 10,
|
||||
fabContainerBottom: 20,
|
||||
fabDefaultPosition: 20,
|
||||
fabElevation: 4,
|
||||
fabIconColor: '#fff',
|
||||
fabIconSize: 24,
|
||||
fabShadowColor: '#000',
|
||||
fabShadowOffsetHeight: 2,
|
||||
fabShadowOffsetWidth: 0,
|
||||
fabShadowOpacity: 0.4,
|
||||
fabShadowRadius: 2,
|
||||
fabWidth: 56,
|
||||
|
||||
// Font
|
||||
DefaultFontSize: 16,
|
||||
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
|
||||
fontSizeBase: 15,
|
||||
get fontSizeH1() {
|
||||
return this.fontSizeBase * 1.8;
|
||||
},
|
||||
get fontSizeH2() {
|
||||
return this.fontSizeBase * 1.6;
|
||||
},
|
||||
get fontSizeH3() {
|
||||
return this.fontSizeBase * 1.4;
|
||||
},
|
||||
|
||||
// Footer
|
||||
footerHeight: 55,
|
||||
footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
|
||||
footerPaddingBottom: 0,
|
||||
|
||||
// FooterTab
|
||||
tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
|
||||
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
sTabBarActiveTextColor: '#007aff',
|
||||
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
|
||||
|
||||
// Header
|
||||
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||
toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
|
||||
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
|
||||
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
|
||||
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
|
||||
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
|
||||
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
|
||||
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522',
|
||||
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
|
||||
toolbarTextColor: platform === PLATFORM.IOS ? '#000000' : '#ffffff',
|
||||
get statusBarColor() {
|
||||
return color(this.toolbarDefaultBg)
|
||||
.darken(0.2)
|
||||
.hex();
|
||||
},
|
||||
get darkenHeader() {
|
||||
return color(this.tabBgColor)
|
||||
.darken(0.03)
|
||||
.hex();
|
||||
},
|
||||
|
||||
// Icon
|
||||
iconFamily: 'Ionicons',
|
||||
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
|
||||
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
|
||||
|
||||
// InputGroup
|
||||
inputFontSize: 17,
|
||||
inputBorderColor: '#D9D5DC',
|
||||
inputSuccessBorderColor: '#2b8339',
|
||||
inputErrorBorderColor: '#ed2f2f',
|
||||
inputHeightBase: 50,
|
||||
get inputColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get inputColorPlaceholder() {
|
||||
return '#575757';
|
||||
},
|
||||
|
||||
// Line Height
|
||||
buttonLineHeight: 19,
|
||||
lineHeightH1: 32,
|
||||
lineHeightH2: 27,
|
||||
lineHeightH3: 22,
|
||||
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
|
||||
listItemSelected: '#be1522',
|
||||
|
||||
// List
|
||||
listBg: 'transparent',
|
||||
listBorderColor: '#c9c9c9',
|
||||
listDividerBg: '#e2e2e2',
|
||||
listBtnUnderlayColor: '#DDD',
|
||||
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||
listNoteColor: '#808080',
|
||||
listNoteSize: 13,
|
||||
|
||||
// Progress Bar
|
||||
defaultProgressColor: '#E4202D',
|
||||
inverseProgressColor: '#1A191B',
|
||||
|
||||
// Radio Button
|
||||
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
|
||||
radioSelectedColorAndroid: '#be1522',
|
||||
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
|
||||
get radioColor() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
|
||||
// Segment
|
||||
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
|
||||
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
|
||||
|
||||
// Spinner
|
||||
defaultSpinnerColor: '#be1522',
|
||||
inverseSpinnerColor: '#1A191B',
|
||||
|
||||
// Tab
|
||||
tabBarDisabledTextColor: '#BDBDBD',
|
||||
tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
|
||||
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||
topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
|
||||
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||
|
||||
// Tabs
|
||||
tabBgColor: '#F8F8F8',
|
||||
tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
|
||||
tabFontSize: 15,
|
||||
|
||||
// Text
|
||||
textColor: '#000',
|
||||
textDisabledColor: "#c1c1c1",
|
||||
inverseTextColor: '#fff',
|
||||
noteFontSize: 14,
|
||||
get defaultTextColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
|
||||
// Title
|
||||
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
|
||||
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
|
||||
subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
|
||||
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
|
||||
|
||||
// CUSTOM
|
||||
customMaterialIconColor: "#5d5d5d",
|
||||
fetchedDataSectionListErrorText: "#898989",
|
||||
|
||||
// Calendar/Agenda
|
||||
agendaBackgroundColor: '#f3f3f4',
|
||||
agendaEmptyLine: '#dbdbdc',
|
||||
|
||||
// PROXIWASH
|
||||
proxiwashFinishedColor: "rgba(54,165,22,0.31)",
|
||||
proxiwashReadyColor: "transparent",
|
||||
proxiwashRunningColor: "rgba(94,104,241,0.3)",
|
||||
proxiwashBrokenColor: "rgba(162,162,162,0.31)",
|
||||
proxiwashErrorColor: "rgba(204,7,0,0.31)",
|
||||
|
||||
// Screens
|
||||
planningColor: '#d9b10a',
|
||||
proximoColor: '#ec5904',
|
||||
proxiwashColor: '#1fa5ee',
|
||||
menuColor: '#e91314',
|
||||
tutorinsaColor: '#f93943',
|
||||
|
||||
|
||||
// Other
|
||||
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
|
||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
contentPadding: 10,
|
||||
dropdownLinkColor: '#414142',
|
||||
inputLineHeight: 24,
|
||||
deviceWidth,
|
||||
deviceHeight,
|
||||
isIphoneX,
|
||||
inputGroupRoundedBorderRadius: 30,
|
||||
|
||||
// iPhoneX SafeArea
|
||||
Inset: {
|
||||
portrait: {
|
||||
topInset: 24,
|
||||
leftInset: 0,
|
||||
rightInset: 0,
|
||||
bottomInset: 34
|
||||
},
|
||||
landscape: {
|
||||
topInset: 0,
|
||||
leftInset: 44,
|
||||
rightInset: 44,
|
||||
bottomInset: 21
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,362 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import color from 'color';
|
||||
import { Platform, Dimensions, PixelRatio } from 'react-native';
|
||||
|
||||
import { PLATFORM } from './commonColor';
|
||||
|
||||
const deviceHeight = Dimensions.get('window').height;
|
||||
const deviceWidth = Dimensions.get('window').width;
|
||||
const platform = Platform.OS;
|
||||
const platformStyle = undefined;
|
||||
const isIphoneX =
|
||||
platform === PLATFORM.IOS &&
|
||||
(deviceHeight === 812 ||
|
||||
deviceWidth === 812 ||
|
||||
deviceHeight === 896 ||
|
||||
deviceWidth === 896);
|
||||
|
||||
export default {
|
||||
platformStyle,
|
||||
platform,
|
||||
|
||||
// Accordion
|
||||
accordionBorderColor: '#d3d3d3',
|
||||
accordionContentPadding: 10,
|
||||
accordionIconFontSize: 18,
|
||||
contentStyle: '#f5f4f5',
|
||||
expandedIconStyle: '#000',
|
||||
headerStyle: '#edebed',
|
||||
iconStyle: '#000',
|
||||
|
||||
// ActionSheet
|
||||
elevation: 4,
|
||||
containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
|
||||
innerTouchableBackgroundColor: '#fff',
|
||||
listItemHeight: 50,
|
||||
listItemBorderColor: 'transparent',
|
||||
marginHorizontal: -15,
|
||||
marginLeft: 14,
|
||||
marginTop: 15,
|
||||
minHeight: 56,
|
||||
padding: 15,
|
||||
touchableTextColor: '#757575',
|
||||
|
||||
// Android
|
||||
androidRipple: true,
|
||||
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
|
||||
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
|
||||
buttonUppercaseAndroidText: true,
|
||||
|
||||
// Badge
|
||||
badgeBg: '#ED1727',
|
||||
badgeColor: '#fff',
|
||||
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
|
||||
|
||||
// Button
|
||||
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||
buttonTextColor: '#fff',
|
||||
buttonDisabledBg: '#b5b5b5',
|
||||
buttonPadding: 6,
|
||||
buttonDefaultActiveOpacity: 0.5,
|
||||
buttonDefaultFlex: 1,
|
||||
buttonDefaultBorderRadius: 2,
|
||||
buttonDefaultBorderWidth: 1,
|
||||
get buttonPrimaryBg() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
get buttonPrimaryColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get buttonInfoBg() {
|
||||
return this.brandInfo;
|
||||
},
|
||||
get buttonInfoColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get buttonSuccessBg() {
|
||||
return this.brandSuccess;
|
||||
},
|
||||
get buttonSuccessColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get buttonDangerBg() {
|
||||
return this.brandDanger;
|
||||
},
|
||||
get buttonDangerColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get buttonWarningBg() {
|
||||
return this.brandWarning;
|
||||
},
|
||||
get buttonWarningColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get buttonTextSize() {
|
||||
return platform === PLATFORM.IOS
|
||||
? this.fontSizeBase * 1.1
|
||||
: this.fontSizeBase - 1;
|
||||
},
|
||||
get buttonTextSizeLarge() {
|
||||
return this.fontSizeBase * 1.5;
|
||||
},
|
||||
get buttonTextSizeSmall() {
|
||||
return this.fontSizeBase * 0.8;
|
||||
},
|
||||
get borderRadiusLarge() {
|
||||
return this.fontSizeBase * 3.8;
|
||||
},
|
||||
get iconSizeLarge() {
|
||||
return this.iconFontSize * 1.5;
|
||||
},
|
||||
get iconSizeSmall() {
|
||||
return this.iconFontSize * 0.6;
|
||||
},
|
||||
|
||||
// Card
|
||||
cardDefaultBg: '#2A2A2A',
|
||||
cardBorderColor: '#1a1a1a',
|
||||
cardBorderRadius: 2,
|
||||
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||
|
||||
// CheckBox
|
||||
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
|
||||
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
|
||||
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
|
||||
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
|
||||
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
|
||||
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
|
||||
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
|
||||
checkboxBgColor: '#be1522',
|
||||
checkboxSize: 20,
|
||||
checkboxTickColor: '#fff',
|
||||
checkboxDefaultColor: 'transparent',
|
||||
checkboxTextShadowRadius: 0,
|
||||
|
||||
// Color
|
||||
brandPrimary: '#be1522',
|
||||
brandInfo: '#62B1F6',
|
||||
brandSuccess: '#5cb85c',
|
||||
brandDanger: '#d9534f',
|
||||
brandWarning: '#f0ad4e',
|
||||
brandDark: '#000',
|
||||
brandLight: '#f4f4f4',
|
||||
|
||||
// Container
|
||||
containerBgColor: '#222222',
|
||||
sideMenuBgColor: "#1c1c1c",
|
||||
|
||||
// Date Picker
|
||||
datePickerFlex: 1,
|
||||
datePickerPadding: 10,
|
||||
datePickerTextColor: '#fff',
|
||||
datePickerBg: 'transparent',
|
||||
|
||||
// FAB
|
||||
fabBackgroundColor: 'blue',
|
||||
fabBorderRadius: 28,
|
||||
fabBottom: 0,
|
||||
fabButtonBorderRadius: 20,
|
||||
fabButtonHeight: 40,
|
||||
fabButtonLeft: 7,
|
||||
fabButtonMarginBottom: 10,
|
||||
fabContainerBottom: 20,
|
||||
fabDefaultPosition: 20,
|
||||
fabElevation: 4,
|
||||
fabIconColor: '#fff',
|
||||
fabIconSize: 24,
|
||||
fabShadowColor: '#000',
|
||||
fabShadowOffsetHeight: 2,
|
||||
fabShadowOffsetWidth: 0,
|
||||
fabShadowOpacity: 0.4,
|
||||
fabShadowRadius: 2,
|
||||
fabWidth: 56,
|
||||
|
||||
// Font
|
||||
DefaultFontSize: 16,
|
||||
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
|
||||
fontSizeBase: 15,
|
||||
get fontSizeH1() {
|
||||
return this.fontSizeBase * 1.8;
|
||||
},
|
||||
get fontSizeH2() {
|
||||
return this.fontSizeBase * 1.6;
|
||||
},
|
||||
get fontSizeH3() {
|
||||
return this.fontSizeBase * 1.4;
|
||||
},
|
||||
|
||||
// Footer
|
||||
footerHeight: 55,
|
||||
footerDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
|
||||
footerPaddingBottom: 0,
|
||||
|
||||
// FooterTab
|
||||
tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
|
||||
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
sTabBarActiveTextColor: '#007aff',
|
||||
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
|
||||
|
||||
// Header
|
||||
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||
toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
|
||||
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
|
||||
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
|
||||
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
|
||||
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
|
||||
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
|
||||
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522',
|
||||
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
|
||||
toolbarTextColor: '#ffffff',
|
||||
get statusBarColor() {
|
||||
return color(this.toolbarDefaultBg)
|
||||
.darken(0.2)
|
||||
.hex();
|
||||
},
|
||||
get darkenHeader() {
|
||||
return color(this.tabBgColor)
|
||||
.darken(0.03)
|
||||
.hex();
|
||||
},
|
||||
|
||||
// Icon
|
||||
iconFamily: 'Ionicons',
|
||||
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
|
||||
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
|
||||
|
||||
// InputGroup
|
||||
inputFontSize: 17,
|
||||
inputBorderColor: '#D9D5DC',
|
||||
inputSuccessBorderColor: '#2b8339',
|
||||
inputErrorBorderColor: '#ed2f2f',
|
||||
inputHeightBase: 50,
|
||||
get inputColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get inputColorPlaceholder() {
|
||||
return '#575757';
|
||||
},
|
||||
|
||||
// Line Height
|
||||
buttonLineHeight: 19,
|
||||
lineHeightH1: 32,
|
||||
lineHeightH2: 27,
|
||||
lineHeightH3: 22,
|
||||
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
|
||||
listItemSelected: '#be1522',
|
||||
|
||||
// List
|
||||
listBg: 'transparent',
|
||||
listBorderColor: '#3e3e3e',
|
||||
listDividerBg: '#222222',
|
||||
listBtnUnderlayColor: '#3a3a3a',
|
||||
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||
listNoteColor: '#acacac',
|
||||
listNoteSize: 13,
|
||||
|
||||
// Progress Bar
|
||||
defaultProgressColor: '#E4202D',
|
||||
inverseProgressColor: '#1A191B',
|
||||
|
||||
// Radio Button
|
||||
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
|
||||
radioSelectedColorAndroid: '#be1522',
|
||||
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
|
||||
get radioColor() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
|
||||
// Segment
|
||||
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
|
||||
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
|
||||
|
||||
// Spinner
|
||||
defaultSpinnerColor: '#be1522',
|
||||
inverseSpinnerColor: '#1A191B',
|
||||
|
||||
// Tab
|
||||
tabBarDisabledTextColor: '#BDBDBD',
|
||||
tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
|
||||
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||
topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff',
|
||||
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||
|
||||
// Tabs
|
||||
tabBgColor: '#2b2b2b',
|
||||
tabIconColor: "#fff",
|
||||
tabFontSize: 15,
|
||||
|
||||
// Text
|
||||
textColor: '#ebebeb',
|
||||
textDisabledColor: "#5b5b5b",
|
||||
inverseTextColor: '#000',
|
||||
noteFontSize: 14,
|
||||
get defaultTextColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
|
||||
// Title
|
||||
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
|
||||
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
|
||||
subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
|
||||
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
|
||||
|
||||
// CUSTOM
|
||||
customMaterialIconColor: "#b3b3b3",
|
||||
fetchedDataSectionListErrorText: "#acacac",
|
||||
|
||||
// Calendar/Agenda
|
||||
agendaBackgroundColor: '#373737',
|
||||
agendaEmptyLine: '#464646',
|
||||
|
||||
// PROXIWASH
|
||||
proxiwashFinishedColor: "rgba(17,149,32,0.53)",
|
||||
proxiwashReadyColor: "transparent",
|
||||
proxiwashRunningColor: "rgba(29,59,175,0.65)",
|
||||
proxiwashBrokenColor: "#000000",
|
||||
proxiwashErrorColor: "rgba(213,8,0,0.57)",
|
||||
|
||||
// Screens
|
||||
planningColor: '#d99e09',
|
||||
proximoColor: '#ec5904',
|
||||
proxiwashColor: '#1fa5ee',
|
||||
menuColor: '#b81213',
|
||||
tutorinsaColor: '#f93943',
|
||||
|
||||
|
||||
// Other
|
||||
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
|
||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
contentPadding: 10,
|
||||
dropdownLinkColor: '#414142',
|
||||
inputLineHeight: 24,
|
||||
deviceWidth,
|
||||
deviceHeight,
|
||||
isIphoneX,
|
||||
inputGroupRoundedBorderRadius: 30,
|
||||
|
||||
// iPhoneX SafeArea
|
||||
Inset: {
|
||||
portrait: {
|
||||
topInset: 24,
|
||||
leftInset: 0,
|
||||
rightInset: 0,
|
||||
bottomInset: 34
|
||||
},
|
||||
landscape: {
|
||||
topInset: 0,
|
||||
leftInset: 44,
|
||||
rightInset: 44,
|
||||
bottomInset: 21
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -12,25 +12,12 @@ import BibScreen from "../screens/Websites/BibScreen";
|
|||
import DebugScreen from '../screens/DebugScreen';
|
||||
import Sidebar from "../components/Sidebar";
|
||||
import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
|
||||
import PerfHomeScreen from '../screens/PerfHomeScreen';
|
||||
import {Platform, StyleSheet, View} from "react-native";
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import {View} from "react-native";
|
||||
import Touchable from "react-native-platform-touchable";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
},
|
||||
headerTitle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
});
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
|
||||
const defaultScreenOptions = {
|
||||
headerTintColor: 'white',
|
||||
headerStyle: styles.header,
|
||||
gestureEnabled: true,
|
||||
cardOverlayEnabled: true,
|
||||
...TransitionPresets.SlideFromRightIOS,
|
||||
|
|
@ -49,7 +36,7 @@ function getDrawerButton(navigation: Object) {
|
|||
<MaterialCommunityIcons
|
||||
name="menu"
|
||||
size={26}
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
|
||||
color={ThemeManager.getCurrentThemeVariables().text}/>
|
||||
</Touchable>
|
||||
</View>
|
||||
);
|
||||
|
|
@ -191,8 +178,8 @@ function BibStackComponent() {
|
|||
|
||||
const Drawer = createDrawerNavigator();
|
||||
|
||||
function getDrawerContent(nav) {
|
||||
return <Sidebar navigation={nav}/>
|
||||
function getDrawerContent(props) {
|
||||
return <Sidebar {...props}/>
|
||||
}
|
||||
|
||||
export default function DrawerNavigator() {
|
||||
|
|
@ -201,8 +188,8 @@ export default function DrawerNavigator() {
|
|||
initialRouteName={'Main'}
|
||||
headerMode={'float'}
|
||||
backBehavior={'initialRoute'}
|
||||
drawerType={'back'}
|
||||
drawerContent={props => getDrawerContent(props.navigation)}
|
||||
drawerType={'front'}
|
||||
drawerContent={(props) => getDrawerContent(props)}
|
||||
screenOptions={defaultScreenOptions}
|
||||
>
|
||||
<Drawer.Screen
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import PlanexScreen from '../screens/Websites/PlanexScreen';
|
|||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import AsyncStorageManager from "../utils/AsyncStorageManager";
|
||||
import {Platform, StyleSheet, View} from "react-native";
|
||||
import {View} from "react-native";
|
||||
import Touchable from "react-native-platform-touchable";
|
||||
|
||||
const TAB_ICONS = {
|
||||
|
|
@ -25,18 +25,7 @@ const TAB_ICONS = {
|
|||
Planex: 'timetable',
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
},
|
||||
headerTitle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
});
|
||||
|
||||
const defaultScreenOptions = {
|
||||
headerTintColor: 'white',
|
||||
headerStyle: styles.header,
|
||||
gestureEnabled: true,
|
||||
cardOverlayEnabled: true,
|
||||
...TransitionPresets.SlideFromRightIOS,
|
||||
|
|
@ -55,7 +44,7 @@ function getDrawerButton(navigation: Object) {
|
|||
<MaterialCommunityIcons
|
||||
name="menu"
|
||||
size={26}
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
|
||||
color={ThemeManager.getCurrentThemeVariables().text}/>
|
||||
</Touchable>
|
||||
</View>
|
||||
);
|
||||
|
|
@ -226,7 +215,7 @@ export default function TabNavigator() {
|
|||
return (
|
||||
<Tab.Navigator
|
||||
initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen.current}
|
||||
barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary}}
|
||||
barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().primary}}
|
||||
screenOptions={({route}) => ({
|
||||
tabBarIcon: ({focused, color, size}) => {
|
||||
let icon = TAB_ICONS[route.name];
|
||||
|
|
|
|||
|
|
@ -22,8 +22,6 @@
|
|||
"expo-permissions": "~8.0.0",
|
||||
"expo-web-browser": "~8.0.0",
|
||||
"i18n-js": "^3.3.0",
|
||||
"native-base": "^2.12.1",
|
||||
"native-base-shoutem-theme": "^0.3.1",
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0",
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
|
||||
|
|
@ -31,9 +29,8 @@
|
|||
"react-native-autolink": "^1.8.1",
|
||||
"react-native-calendars": "^1.260.0",
|
||||
"react-native-gesture-handler": "~1.5.0",
|
||||
"react-native-material-menu": "^1.0.0",
|
||||
"react-native-modalize": "^1.3.6",
|
||||
"react-native-paper": "^3.5.1",
|
||||
"react-native-paper": "^3.6.0",
|
||||
"react-native-platform-touchable": "^1.1.1",
|
||||
"react-native-reanimated": "~1.4.0",
|
||||
"react-native-render-html": "^4.1.2",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Body, ListItem, Text} from 'native-base';
|
||||
import {FlatList} from "react-native";
|
||||
import packageJson from '../../package';
|
||||
import {List} from 'react-native-paper';
|
||||
|
||||
function generateListFromObject(object) {
|
||||
let list = [];
|
||||
|
|
@ -33,16 +33,10 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
|
|||
keyExtractor={(item) => item.name}
|
||||
style={{minHeight: 300, width: '100%'}}
|
||||
renderItem={({item}) =>
|
||||
<ListItem>
|
||||
<Body>
|
||||
<Text>
|
||||
{item.name}
|
||||
</Text>
|
||||
<Text note>
|
||||
{item.version.replace('^', '')}
|
||||
</Text>
|
||||
</Body>
|
||||
</ListItem>}
|
||||
<List.Item
|
||||
title={item.name}
|
||||
description={item.version.replace('^', '').replace('~', '')}
|
||||
/>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,12 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {FlatList, Linking, Platform, View} from 'react-native';
|
||||
import {Body, Button, Card, CardItem, Content, H1, Left, Right, Text, Thumbnail} from 'native-base';
|
||||
import i18n from "i18n-js";
|
||||
import appJson from '../../app';
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import AsyncStorageManager from "../../utils/AsyncStorageManager";
|
||||
import {Modalize} from "react-native-modalize";
|
||||
import ThemeManager from "../../utils/ThemeManager";
|
||||
import {Avatar, Card, Text, Title, List, Button} from 'react-native-paper';
|
||||
|
||||
const links = {
|
||||
appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
|
||||
|
|
@ -197,18 +196,12 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
|
||||
getAppCard() {
|
||||
return (
|
||||
<Card>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<Thumbnail square source={require('../../assets/android.icon.png')}/>
|
||||
<Body>
|
||||
<H1>{appJson.expo.name}</H1>
|
||||
<Text note>
|
||||
v.{appJson.expo.version}
|
||||
</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<Card style={{marginBottom: 10}}>
|
||||
<Card.Title
|
||||
title={appJson.expo.name}
|
||||
subtitle={appJson.expo.version}
|
||||
left={(props) => <Avatar.Image {...props} source={require('../../assets/android.icon.png')}/>}/>
|
||||
<Card.Content>
|
||||
<FlatList
|
||||
data={this.appData}
|
||||
extraData={this.state}
|
||||
|
|
@ -216,27 +209,19 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
listKey={"app"}
|
||||
renderItem={this.getCardItem}
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
getTeamCard() {
|
||||
return (
|
||||
<Card>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name='account-multiple'
|
||||
size={40}
|
||||
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
|
||||
<Body>
|
||||
<H1>{i18n.t('aboutScreen.team')}</H1>
|
||||
</Body>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem header>
|
||||
<Text>{i18n.t('aboutScreen.author')}</Text>
|
||||
</CardItem>
|
||||
<Card style={{marginBottom: 10}}>
|
||||
<Card.Title
|
||||
title={i18n.t('aboutScreen.team')}
|
||||
left={(props) => <Avatar.Icon {...props} icon={'account-multiple'}/>}/>
|
||||
<Card.Content>
|
||||
<Title>{i18n.t('aboutScreen.author')}</Title>
|
||||
<FlatList
|
||||
data={this.authorData}
|
||||
extraData={this.state}
|
||||
|
|
@ -244,9 +229,7 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
listKey={"team1"}
|
||||
renderItem={this.getCardItem}
|
||||
/>
|
||||
<CardItem header>
|
||||
<Text>{i18n.t('aboutScreen.additionalDev')}</Text>
|
||||
</CardItem>
|
||||
<Title>{i18n.t('aboutScreen.additionalDev')}</Title>
|
||||
<FlatList
|
||||
data={this.additionalDevData}
|
||||
extraData={this.state}
|
||||
|
|
@ -254,16 +237,16 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
listKey={"team2"}
|
||||
renderItem={this.getCardItem}
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
getTechnoCard() {
|
||||
return (
|
||||
<Card>
|
||||
<CardItem header>
|
||||
<Text>{i18n.t('aboutScreen.technologies')}</Text>
|
||||
</CardItem>
|
||||
<Card style={{marginBottom: 10}}>
|
||||
<Card.Content>
|
||||
<Title>{i18n.t('aboutScreen.technologies')}</Title>
|
||||
<FlatList
|
||||
data={this.technoData}
|
||||
extraData={this.state}
|
||||
|
|
@ -271,6 +254,7 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
listKey={"techno"}
|
||||
renderItem={this.getCardItem}
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -282,31 +266,29 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
*/
|
||||
getCardItem({item}: Object) {
|
||||
let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked);
|
||||
console.log(item.text);
|
||||
if (shouldShow) {
|
||||
if (item.showChevron) {
|
||||
return (
|
||||
<CardItem button
|
||||
onPress={item.onPressCallback}>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={item.icon}
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
|
||||
<Text>{item.text}</Text>
|
||||
</Left>
|
||||
{item.showChevron ?
|
||||
<Right>
|
||||
<MaterialCommunityIcons
|
||||
name={'chevron-right'}
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
|
||||
</Right>
|
||||
:
|
||||
<Right/>
|
||||
}
|
||||
</CardItem>)
|
||||
;
|
||||
<List.Item
|
||||
title={item.text}
|
||||
left={props => <List.Icon {...props} icon={item.icon} />}
|
||||
right={props => <List.Icon {...props} icon={'chevron-right'} />}
|
||||
onPress={item.onPressCallback}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return <View/>
|
||||
return (
|
||||
<List.Item
|
||||
title={item.text}
|
||||
left={props => <List.Icon {...props} icon={item.icon} />}
|
||||
onPress={item.onPressCallback}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -330,39 +312,39 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
return (
|
||||
<Modalize ref={this.modalRef}
|
||||
adjustToContentHeight
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
|
||||
<View style={{
|
||||
flex: 1,
|
||||
padding: 20
|
||||
}}>
|
||||
<H1>{i18n.t('aboutScreen.bugs')}</H1>
|
||||
<Title>{i18n.t('aboutScreen.bugs')}</Title>
|
||||
<Text>
|
||||
{i18n.t('aboutScreen.bugsDescription')}
|
||||
</Text>
|
||||
<Button
|
||||
icon="email"
|
||||
mode="contained"
|
||||
dark={true}
|
||||
color={ThemeManager.getCurrentThemeVariables().primary}
|
||||
style={{
|
||||
marginTop: 20,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
onPress={onPressMail}>
|
||||
<MaterialCommunityIcons
|
||||
name={'email'}
|
||||
size={26}
|
||||
color={'#fff'}/>
|
||||
<Text>{i18n.t('aboutScreen.bugsMail')}</Text>
|
||||
</Button>
|
||||
<Button
|
||||
icon="git"
|
||||
mode="contained"
|
||||
dark={true}
|
||||
color={ThemeManager.getCurrentThemeVariables().primary}
|
||||
style={{
|
||||
marginTop: 20,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
onPress={onPressGit}>
|
||||
<MaterialCommunityIcons
|
||||
name={'git'}
|
||||
size={26}
|
||||
color={'#fff'}/>
|
||||
<Text>{i18n.t('aboutScreen.bugsGit')}</Text>
|
||||
</Button>
|
||||
</View>
|
||||
|
|
@ -390,7 +372,7 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Content padder>
|
||||
<View style={{padding: 5}}>
|
||||
{this.getBugReportModal()}
|
||||
<FlatList
|
||||
style={{padding: 5}}
|
||||
|
|
@ -399,7 +381,7 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
keyExtractor={(item) => item.id}
|
||||
renderItem={this.getMainCard}
|
||||
/>
|
||||
</Content>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Body,
|
||||
Button,
|
||||
Card,
|
||||
CardItem,
|
||||
Container,
|
||||
Content,
|
||||
Form,
|
||||
H1,
|
||||
H3,
|
||||
Input,
|
||||
Item,
|
||||
Label,
|
||||
Left,
|
||||
List,
|
||||
ListItem,
|
||||
Right,
|
||||
Text
|
||||
} from "native-base";
|
||||
import ThemeManager from '../utils/ThemeManager';
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import {Alert, Clipboard, View} from "react-native";
|
||||
import {Alert, Clipboard, ScrollView, View} from "react-native";
|
||||
import AsyncStorageManager from "../utils/AsyncStorageManager";
|
||||
import NotificationsManager from "../utils/NotificationsManager";
|
||||
import {Modalize} from "react-native-modalize";
|
||||
import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper';
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -54,29 +35,24 @@ export default class DebugScreen extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
|
||||
if (icon !== undefined) {
|
||||
return (
|
||||
<ListItem
|
||||
button
|
||||
thumbnail
|
||||
<List.Item
|
||||
title={title}
|
||||
description={subtitle}
|
||||
left={() => <List.Icon icon={icon}/>}
|
||||
onPress={onPressCallback}
|
||||
>
|
||||
{icon !== undefined ?
|
||||
<Left>
|
||||
<MaterialCommunityIcons name={icon} size={26}/>
|
||||
</Left>
|
||||
: <View/>
|
||||
}
|
||||
<Body>
|
||||
<Text>
|
||||
{title}
|
||||
</Text>
|
||||
<Text note>
|
||||
{subtitle}
|
||||
</Text>
|
||||
</Body>
|
||||
<Right/>
|
||||
</ListItem>
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<List.Item
|
||||
title={title}
|
||||
description={subtitle}
|
||||
onPress={onPressCallback}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
alertCurrentExpoToken() {
|
||||
|
|
@ -111,26 +87,30 @@ export default class DebugScreen extends React.Component<Props, State> {
|
|||
flex: 1,
|
||||
padding: 20
|
||||
}}>
|
||||
<H1>{this.state.modalCurrentDisplayItem.key}</H1>
|
||||
<H3>Default: {this.state.modalCurrentDisplayItem.default}</H3>
|
||||
<H3>Current: {this.state.modalCurrentDisplayItem.current}</H3>
|
||||
<Form>
|
||||
<Item floatingLabel>
|
||||
<Label>New Value</Label>
|
||||
<Input onChangeText={(text) => this.modalInputValue = text}/>
|
||||
</Item>
|
||||
</Form>
|
||||
<Title>{this.state.modalCurrentDisplayItem.key}</Title>
|
||||
<Subheading>Default: {this.state.modalCurrentDisplayItem.default}</Subheading>
|
||||
<Subheading>Current: {this.state.modalCurrentDisplayItem.current}</Subheading>
|
||||
<TextInput
|
||||
label='New Value'
|
||||
onChangeText={(text) => this.modalInputValue = text}
|
||||
/>
|
||||
<View style={{
|
||||
flexDirection: 'row',
|
||||
marginTop: 10,
|
||||
}}>
|
||||
<Button success
|
||||
<Button
|
||||
mode="contained"
|
||||
dark={true}
|
||||
color={ThemeManager.getCurrentThemeVariables().success}
|
||||
onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}>
|
||||
<Text>Save new value</Text>
|
||||
Save new value
|
||||
</Button>
|
||||
<Button
|
||||
mode="contained"
|
||||
dark={true}
|
||||
color={ThemeManager.getCurrentThemeVariables().danger}
|
||||
onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.state.modalCurrentDisplayItem.default)}>
|
||||
<Text>Reset to default</Text>
|
||||
Reset to default
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
|
|
@ -149,42 +129,37 @@ export default class DebugScreen extends React.Component<Props, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<View>
|
||||
<Modalize
|
||||
ref={this.modalRef}
|
||||
adjustToContentHeight
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
|
||||
{this.getModalContent()}
|
||||
</Modalize>
|
||||
<Content padder>
|
||||
<Card>
|
||||
<CardItem header>
|
||||
<Text>
|
||||
Notifications
|
||||
</Text>
|
||||
</CardItem>
|
||||
<List>
|
||||
<ScrollView style={{padding: 5}}>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={'Notifications'}
|
||||
/>
|
||||
<Card.Content>
|
||||
{DebugScreen.getGeneralItem(() => this.alertCurrentExpoToken(), 'bell', 'Get current Expo Token', '')}
|
||||
{DebugScreen.getGeneralItem(() => this.forceExpoTokenUpdate(), 'bell-ring', 'Force Expo token update', '')}
|
||||
</List>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardItem header>
|
||||
<Text>
|
||||
Preferences
|
||||
</Text>
|
||||
</CardItem>
|
||||
<List>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={'Preferences'}
|
||||
/>
|
||||
<Card.Content>
|
||||
{Object.values(this.state.currentPreferences).map((object) =>
|
||||
<View>
|
||||
{DebugScreen.getGeneralItem(() => this.showEditModal(object), undefined, object.key, 'Click to edit')}
|
||||
</View>
|
||||
)}
|
||||
</List>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</Content>
|
||||
</Container>
|
||||
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Image, TouchableOpacity, View} from 'react-native';
|
||||
import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base';
|
||||
import {TouchableOpacity, View} from 'react-native';
|
||||
import i18n from "i18n-js";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import Autolink from 'react-native-autolink';
|
||||
|
|
@ -10,6 +9,8 @@ import ThemeManager from "../utils/ThemeManager";
|
|||
import DashboardItem from "../components/DashboardItem";
|
||||
import * as WebBrowser from 'expo-web-browser';
|
||||
import WebSectionList from "../components/WebSectionList";
|
||||
import PlatformTouchable from "react-native-platform-touchable";
|
||||
import {Avatar, Card, Text} from 'react-native-paper';
|
||||
// import DATA from "../dashboard_data.json";
|
||||
|
||||
|
||||
|
|
@ -405,11 +406,11 @@ export default class HomeScreen extends React.Component<Props> {
|
|||
let proxiwashIsAvailable = parseInt(proxiwashData['dryers']) > 0 || parseInt(proxiwashData['washers']) > 0;
|
||||
let proxiwashSubtitle;
|
||||
let dryerColor = parseInt(proxiwashData['dryers']) > 0 ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor;
|
||||
ThemeManager.getCurrentThemeVariables().text :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabled;
|
||||
let washerColor = parseInt(proxiwashData['washers']) > 0 ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor;
|
||||
ThemeManager.getCurrentThemeVariables().text :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabled;
|
||||
let availableDryers = proxiwashData['dryers'];
|
||||
let availableWashers = proxiwashData['washers'];
|
||||
if (proxiwashIsAvailable) {
|
||||
|
|
@ -505,59 +506,35 @@ export default class HomeScreen extends React.Component<Props> {
|
|||
const onImagePress = this.openLink.bind(this, item.full_picture);
|
||||
const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
|
||||
return (
|
||||
<Card style={{
|
||||
flex: 0,
|
||||
marginLeft: 10,
|
||||
marginRight: 10,
|
||||
borderRadius: CARD_BORDER_RADIUS,
|
||||
}}>
|
||||
<CardItem style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}>
|
||||
<Left>
|
||||
<Thumbnail source={ICON_AMICALE} square/>
|
||||
<Body>
|
||||
<Text>{NAME_AMICALE}</Text>
|
||||
<Text note>{HomeScreen.getFormattedDate(item.created_time)}</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}>
|
||||
<Body>
|
||||
{item.full_picture !== '' && item.full_picture !== undefined ?
|
||||
<TouchableOpacity onPress={onImagePress}
|
||||
style={{width: '100%', height: 250, marginBottom: 5}}>
|
||||
<Image source={{uri: item.full_picture}}
|
||||
style={{flex: 1, resizeMode: "contain"}}
|
||||
resizeMode="contain"
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={NAME_AMICALE}
|
||||
subtitle={HomeScreen.getFormattedDate(item.created_time)}
|
||||
left={props => <Avatar.Image size={48} source={ICON_AMICALE}
|
||||
style={{backgroundColor: 'transparent'}}/>}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
: <View/>}
|
||||
{item.full_picture !== '' && item.full_picture !== undefined ?
|
||||
<TouchableOpacity onPress={onImagePress}>
|
||||
<Card.Cover source={{uri: item.full_picture}}/>
|
||||
</TouchableOpacity> : <View/>}
|
||||
<Card.Content>
|
||||
{item.message !== undefined ?
|
||||
<Autolink
|
||||
text={item.message}
|
||||
hashtag="facebook"
|
||||
style={{color: ThemeManager.getCurrentThemeVariables().textColor}}
|
||||
style={{color: ThemeManager.getCurrentThemeVariables().text}}
|
||||
/> : <View/>
|
||||
}
|
||||
</Body>
|
||||
</CardItem>
|
||||
<CardItem style={{
|
||||
backgroundColor: 'transparent'
|
||||
}}>
|
||||
<Left>
|
||||
<Button transparent
|
||||
onPress={onOutLinkPress}>
|
||||
<PlatformTouchable onPress={onOutLinkPress}>
|
||||
<View style={{flexDirection: 'row', marginTop: 5}}>
|
||||
<MaterialCommunityIcons
|
||||
name="facebook"
|
||||
color="#57aeff"
|
||||
size={26}/>
|
||||
<Text>En savoir plus</Text>
|
||||
</Button>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<Text style={{color: "#57aeff"}}>En savoir plus</Text>
|
||||
</View>
|
||||
</PlatformTouchable>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Image} from 'react-native';
|
||||
import {Container, Content, H1, H3, View} from 'native-base';
|
||||
import {Image, ScrollView, View} from 'react-native';
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import HTML from "react-native-render-html";
|
||||
import {Linking} from "expo";
|
||||
import PlanningEventManager from '../utils/PlanningEventManager';
|
||||
import {Subheading, Title} from 'react-native-paper';
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -27,17 +27,13 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
|
|||
render() {
|
||||
// console.log("rendering planningDisplayScreen");
|
||||
return (
|
||||
<Container>
|
||||
<Content padder>
|
||||
<H1>
|
||||
<ScrollView style={{padding: 5}}>
|
||||
<Title>
|
||||
{this.displayData.title}
|
||||
</H1>
|
||||
<H3 style={{
|
||||
marginTop: 10,
|
||||
color: ThemeManager.getCurrentThemeVariables().listNoteColor
|
||||
}}>
|
||||
</Title>
|
||||
<Subheading style={{marginTop: 10,}}>
|
||||
{PlanningEventManager.getFormattedTime(this.displayData)}
|
||||
</H3>
|
||||
</Subheading>
|
||||
{this.displayData.logo !== null ?
|
||||
<View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}>
|
||||
<Image style={{flex: 1, resizeMode: "contain"}}
|
||||
|
|
@ -50,15 +46,13 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
|
|||
<HTML html={"<div>" + this.displayData.description + "</div>"}
|
||||
tagsStyles={{
|
||||
p: {
|
||||
color: ThemeManager.getCurrentThemeVariables().textColor,
|
||||
fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase
|
||||
color: ThemeManager.getCurrentThemeVariables().text,
|
||||
},
|
||||
div: {color: ThemeManager.getCurrentThemeVariables().textColor}
|
||||
div: {color: ThemeManager.getCurrentThemeVariables().text}
|
||||
}}
|
||||
onLinkPress={openWebLink}/>
|
||||
: <View/>}
|
||||
</Content>
|
||||
</Container>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {BackHandler, Image} from 'react-native';
|
||||
import {H3, Text, View} from 'native-base';
|
||||
import {BackHandler, Image, View} from 'react-native';
|
||||
import i18n from "i18n-js";
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import {Agenda, LocaleConfig} from 'react-native-calendars';
|
||||
import Touchable from 'react-native-platform-touchable';
|
||||
import WebDataManager from "../utils/WebDataManager";
|
||||
import PlanningEventManager from '../utils/PlanningEventManager';
|
||||
import {Text, Title, List, Avatar, Divider} from 'react-native-paper';
|
||||
|
||||
LocaleConfig.locales['fr'] = {
|
||||
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
|
||||
|
|
@ -87,12 +86,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
|||
this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
|
||||
return nextState.refreshing === false && this.state.refreshing === true ||
|
||||
nextState.agendaItems !== this.state.agendaItems ||
|
||||
nextState.calendarShowing !== this.state.calendarShowing;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.onRefresh();
|
||||
this.willBlurSubscription = this.props.navigation.addListener(
|
||||
|
|
@ -114,11 +107,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
|||
}
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
this.didFocusSubscription && this.didFocusSubscription.remove();
|
||||
this.willBlurSubscription && this.willBlurSubscription.remove();
|
||||
}
|
||||
|
||||
getCurrentDate() {
|
||||
let today = new Date();
|
||||
return this.getFormattedDate(today);
|
||||
|
|
@ -141,63 +129,36 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
getRenderItem(item: Object) {
|
||||
const onPress = this.props.navigation.navigate.bind(this, 'PlanningDisplayScreen', {data: item});
|
||||
if (item.logo !== null) {
|
||||
return (
|
||||
<Touchable
|
||||
style={{
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
|
||||
borderRadius: 10,
|
||||
marginRight: 10,
|
||||
marginTop: 17,
|
||||
}}
|
||||
onPress={() => this.props.navigation.navigate('PlanningDisplayScreen', {data: item})}>
|
||||
<View style={{
|
||||
padding: 10,
|
||||
flex: 1,
|
||||
flexDirection: 'row'
|
||||
}}>
|
||||
<View style={{
|
||||
width: item.logo !== null ? '70%' : '100%',
|
||||
}}>
|
||||
<Text style={{
|
||||
color: ThemeManager.getCurrentThemeVariables().listNoteColor,
|
||||
marginTop: 5,
|
||||
marginBottom: 10
|
||||
}}>
|
||||
{PlanningEventManager.getFormattedTime(item)}
|
||||
</Text>
|
||||
<H3 style={{marginBottom: 10}}>{item.title}</H3>
|
||||
<View>
|
||||
<Divider/>
|
||||
<List.Item
|
||||
title={item.title}
|
||||
description={PlanningEventManager.getFormattedTime(item)}
|
||||
left={props => <Avatar.Image source={{uri: item.logo}} />}
|
||||
onPress={onPress}
|
||||
/>
|
||||
</View>
|
||||
<View style={{
|
||||
width: item.logo !== null ? '30%' : 0,
|
||||
height: 80
|
||||
}}>
|
||||
{item.logo !== null ?
|
||||
<Image source={{uri: item.logo}}
|
||||
style={{
|
||||
flex: 1,
|
||||
resizeMode: "contain"
|
||||
}}/>
|
||||
: <View/>}
|
||||
</View>
|
||||
</View>
|
||||
</Touchable>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<View>
|
||||
<Divider/>
|
||||
<List.Item
|
||||
title={item.title}
|
||||
description={PlanningEventManager.getFormattedTime(item)}
|
||||
onPress={onPress}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
getRenderEmptyDate() {
|
||||
return (
|
||||
<View style={{
|
||||
padding: 10,
|
||||
flex: 1,
|
||||
}}>
|
||||
<View style={{
|
||||
width: '100%',
|
||||
height: 1,
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaEmptyLine,
|
||||
marginTop: 'auto',
|
||||
marginBottom: 'auto',
|
||||
}}/>
|
||||
</View>
|
||||
<Divider/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -303,28 +264,28 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
|||
// agenda theme
|
||||
theme={{
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
|
||||
calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor,
|
||||
textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
|
||||
selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
calendarBackground: ThemeManager.getCurrentThemeVariables().background,
|
||||
textSectionTitleColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
|
||||
selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().primary,
|
||||
selectedDayTextColor: '#ffffff',
|
||||
todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
dayTextColor: ThemeManager.getCurrentThemeVariables().textColor,
|
||||
textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor,
|
||||
dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
todayTextColor: ThemeManager.getCurrentThemeVariables().primary,
|
||||
dayTextColor: ThemeManager.getCurrentThemeVariables().text,
|
||||
textDisabledColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
|
||||
dotColor: ThemeManager.getCurrentThemeVariables().primary,
|
||||
selectedDotColor: '#ffffff',
|
||||
arrowColor: 'orange',
|
||||
monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
monthTextColor: ThemeManager.getCurrentThemeVariables().primary,
|
||||
indicatorColor: ThemeManager.getCurrentThemeVariables().primary,
|
||||
textDayFontWeight: '300',
|
||||
textMonthFontWeight: 'bold',
|
||||
textDayHeaderFontWeight: '300',
|
||||
textDayFontSize: 16,
|
||||
textMonthFontSize: 16,
|
||||
textDayHeaderFontSize: 16,
|
||||
agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
|
||||
agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
|
||||
agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
agendaDayTextColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
|
||||
agendaDayNumColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
|
||||
agendaTodayColor: ThemeManager.getCurrentThemeVariables().primary,
|
||||
agendaKnobColor: ThemeManager.getCurrentThemeVariables().primary,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Image, View} from 'react-native';
|
||||
import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base';
|
||||
import {Image, ScrollView, View} from 'react-native';
|
||||
import i18n from "i18n-js";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import {Text, Card, List, Paragraph} from 'react-native-paper';
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -16,10 +15,8 @@ type Props = {
|
|||
export default class ProximoAboutScreen extends React.Component<Props> {
|
||||
|
||||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<Container>
|
||||
<Content padder>
|
||||
<ScrollView style={{padding: 5}}>
|
||||
<View style={{
|
||||
width: '100%',
|
||||
height: 100,
|
||||
|
|
@ -34,34 +31,25 @@ export default class ProximoAboutScreen extends React.Component<Props> {
|
|||
resizeMode="contain"/>
|
||||
</View>
|
||||
<Text>{i18n.t('proximoScreen.description')}</Text>
|
||||
<Card>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={'clock-outline'}
|
||||
size={30}/>
|
||||
<H2>{i18n.t('proximoScreen.openingHours')}</H2>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
<Text>18h30 - 19h30</Text>
|
||||
</CardItem>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('proximoScreen.openingHours')}
|
||||
left={props => <List.Icon {...props} icon={'clock-outline'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>18h30 - 19h30</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={'cash'}
|
||||
size={30}/>
|
||||
<H2>{i18n.t('proximoScreen.paymentMethods')}</H2>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
<Text>{i18n.t('proximoScreen.paymentMethodsDescription')}</Text>
|
||||
</CardItem>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('proximoScreen.paymentMethods')}
|
||||
left={props => <List.Icon {...props} icon={'cash'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>18{i18n.t('proximoScreen.paymentMethodsDescription')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</Content>
|
||||
</Container>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
|
||||
import {FlatList, Image, Platform, View} from "react-native";
|
||||
import Touchable from 'react-native-platform-touchable';
|
||||
import Menu, {MenuItem} from 'react-native-material-menu';
|
||||
import {FlatList, Image, ScrollView, View} from "react-native";
|
||||
import i18n from "i18n-js";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import ThemeManager from "../../utils/ThemeManager";
|
||||
import {Modalize} from 'react-native-modalize';
|
||||
import {Avatar, Divider, IconButton, List, Menu, Searchbar, Subheading, Text, Title} from "react-native-paper";
|
||||
|
||||
const sortMode = {
|
||||
price: "0",
|
||||
|
|
@ -51,6 +49,7 @@ type State = {
|
|||
sortNameIcon: React.Node,
|
||||
modalCurrentDisplayItem: Object,
|
||||
currentlyDisplayedData: Array<Object>,
|
||||
menuVisible: boolean,
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -62,13 +61,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
originalData: Array<Object>;
|
||||
shouldFocusSearchBar: boolean;
|
||||
|
||||
sortMenuRef: Menu;
|
||||
|
||||
onMenuRef: Function;
|
||||
onSearchStringChange: Function;
|
||||
onSelectSortModeName: Function;
|
||||
onSelectSortModePrice: Function;
|
||||
onSortMenuPress: Function;
|
||||
onSortMenuDismiss: Function;
|
||||
renderItem: Function;
|
||||
|
||||
constructor(props: any) {
|
||||
|
|
@ -83,24 +80,17 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
sortPriceIcon: '',
|
||||
sortNameIcon: '',
|
||||
modalCurrentDisplayItem: {},
|
||||
menuVisible: false,
|
||||
};
|
||||
|
||||
this.onMenuRef = this.onMenuRef.bind(this);
|
||||
this.onSearchStringChange = this.onSearchStringChange.bind(this);
|
||||
this.onSelectSortModeName = this.onSelectSortModeName.bind(this);
|
||||
this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this);
|
||||
this.onSortMenuPress = this.onSortMenuPress.bind(this);
|
||||
this.onSortMenuDismiss = this.onSortMenuPress.bind(this);
|
||||
this.renderItem = this.renderItem.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves the reference to the sort menu for later use
|
||||
*
|
||||
* @param ref The menu reference
|
||||
*/
|
||||
onMenuRef(ref: Menu) {
|
||||
this.sortMenuRef = ref;
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the sort mode based on the one selected.
|
||||
|
|
@ -146,8 +136,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
break;
|
||||
}
|
||||
this.setupSortIcons(mode, isReverse);
|
||||
if (this.sortMenuRef !== undefined)
|
||||
this.sortMenuRef.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -165,23 +153,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
|
||||
getSearchBar() {
|
||||
return (
|
||||
<Body style={{width: '100%'}}>
|
||||
<Item
|
||||
style={{
|
||||
width: '100%',
|
||||
marginBottom: 7
|
||||
}}>
|
||||
<MaterialCommunityIcons
|
||||
name={'magnify'}
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
|
||||
<Input
|
||||
ref="searchInput"
|
||||
<Searchbar
|
||||
placeholder={i18n.t('proximoScreen.search')}
|
||||
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
|
||||
onChangeText={this.onSearchStringChange}/>
|
||||
</Item>
|
||||
</Body>
|
||||
onChangeText={this.onSearchStringChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -194,11 +169,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
getStockColor(availableStock: number) {
|
||||
let color: string;
|
||||
if (availableStock > 3)
|
||||
color = ThemeManager.getCurrentThemeVariables().brandSuccess;
|
||||
color = ThemeManager.getCurrentThemeVariables().success;
|
||||
else if (availableStock > 0)
|
||||
color = ThemeManager.getCurrentThemeVariables().brandWarning;
|
||||
color = ThemeManager.getCurrentThemeVariables().warning;
|
||||
else
|
||||
color = ThemeManager.getCurrentThemeVariables().brandDanger;
|
||||
color = ThemeManager.getCurrentThemeVariables().danger;
|
||||
return color;
|
||||
}
|
||||
|
||||
|
|
@ -212,12 +187,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
const downSortIcon =
|
||||
<MaterialCommunityIcons
|
||||
name={'sort-descending'}
|
||||
color={'#000'}
|
||||
size={26}/>;
|
||||
const upSortIcon =
|
||||
<MaterialCommunityIcons
|
||||
name={'sort-ascending'}
|
||||
color={'#000'}
|
||||
size={26}/>;
|
||||
switch (mode) {
|
||||
case sortMode.price:
|
||||
|
|
@ -274,27 +247,27 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
flex: 1,
|
||||
padding: 20
|
||||
}}>
|
||||
<H1>{this.state.modalCurrentDisplayItem.name}</H1>
|
||||
<Title>{this.state.modalCurrentDisplayItem.name}</Title>
|
||||
<View style={{
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
marginTop: 10,
|
||||
}}>
|
||||
<H3 style={{
|
||||
<Subheading style={{
|
||||
color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
|
||||
}}>
|
||||
{this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
|
||||
</H3>
|
||||
<H3 style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</H3>
|
||||
</Subheading>
|
||||
<Subheading style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</Subheading>
|
||||
</View>
|
||||
|
||||
<Content>
|
||||
<ScrollView>
|
||||
<View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
|
||||
<Image style={{flex: 1, resizeMode: "contain"}}
|
||||
source={{uri: this.state.modalCurrentDisplayItem.image}}/>
|
||||
</View>
|
||||
<Text>{this.state.modalCurrentDisplayItem.description}</Text>
|
||||
</Content>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
@ -317,65 +290,50 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
onSortMenuPress() {
|
||||
this.sortMenuRef.show();
|
||||
this.setState({menuVisible: true});
|
||||
console.log('pressed');
|
||||
}
|
||||
|
||||
onSortMenuDismiss() {
|
||||
this.setState({menuVisible: false});
|
||||
}
|
||||
|
||||
getSortMenu() {
|
||||
return (
|
||||
<Menu
|
||||
ref={this.onMenuRef}
|
||||
button={
|
||||
<Touchable
|
||||
style={{padding: 6, marginRight: 10}}
|
||||
onPress={this.onSortMenuPress}>
|
||||
<MaterialCommunityIcons
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
||||
name={'sort'}
|
||||
size={26}/>
|
||||
</Touchable>
|
||||
visible={this.state.menuVisible}
|
||||
onDismiss={this.onSortMenuDismiss}
|
||||
anchor={
|
||||
<IconButton
|
||||
icon="sort"
|
||||
color={ThemeManager.getCurrentThemeVariables().text}
|
||||
size={26}
|
||||
onPress={this.onSortMenuPress}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<MenuItem
|
||||
onPress={this.onSelectSortModeName}>
|
||||
{this.state.sortNameIcon}
|
||||
{i18n.t('proximoScreen.sortName')}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onPress={this.onSelectSortModePrice}>
|
||||
{this.state.sortPriceIcon}
|
||||
{i18n.t('proximoScreen.sortPrice')}
|
||||
</MenuItem>
|
||||
<Menu.Item onPress={this.onSelectSortModeName} title={i18n.t('proximoScreen.sortName')}/>
|
||||
<Divider/>
|
||||
<Menu.Item onPress={this.onSelectSortModePrice} title={i18n.t('proximoScreen.sortPrice')}/>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
renderItem({item}: Object) {
|
||||
const onListItemPress = this.onListItemPress.bind(this, item);
|
||||
return (<ListItem
|
||||
thumbnail
|
||||
onPress={onListItemPress}
|
||||
>
|
||||
<Left>
|
||||
<Thumbnail square source={{uri: item.image}}/>
|
||||
</Left>
|
||||
<Body>
|
||||
<Text style={{marginLeft: 20}}>
|
||||
{item.name}
|
||||
</Text>
|
||||
<Text note style={{
|
||||
marginLeft: 20,
|
||||
color: this.getStockColor(parseInt(item.quantity))
|
||||
}}>
|
||||
{item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
|
||||
</Text>
|
||||
</Body>
|
||||
<Right>
|
||||
const onPress = this.onListItemPress.bind(this, item);
|
||||
return (
|
||||
<List.Item
|
||||
title={item.name}
|
||||
description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
|
||||
descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
|
||||
onPress={onPress}
|
||||
left={props => <Avatar.Image size={64} source={{uri: item.image}}/>}
|
||||
right={props =>
|
||||
<Text style={{fontWeight: "bold"}}>
|
||||
{item.price}€
|
||||
</Text>
|
||||
</Right>
|
||||
</ListItem>);
|
||||
</Text>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
keyExtractor(item: Object) {
|
||||
|
|
@ -384,12 +342,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
|
||||
render() {
|
||||
// console.log("rendering ProximoListScreen");
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<View>
|
||||
<Modalize ref={this.modalRef}
|
||||
adjustToContentHeight
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}>
|
||||
{this.getModalContent()}
|
||||
</Modalize>
|
||||
<FlatList
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Platform, View} from 'react-native'
|
||||
import {Body, Left, ListItem, Right, Text} from 'native-base';
|
||||
import {View} from 'react-native'
|
||||
import i18n from "i18n-js";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import ThemeManager from "../../utils/ThemeManager";
|
||||
import Touchable from "react-native-platform-touchable";
|
||||
import WebSectionList from "../../components/WebSectionList";
|
||||
import {IconButton, List} from 'react-native-paper';
|
||||
|
||||
const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
|
||||
|
||||
|
|
@ -157,24 +155,19 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
|
|||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
marginRight: 10,
|
||||
}}>
|
||||
<Touchable
|
||||
style={{padding: 6}}
|
||||
onPress={this.onPressSearchBtn}>
|
||||
<MaterialCommunityIcons
|
||||
name="magnify"
|
||||
<IconButton
|
||||
icon="magnify"
|
||||
size={26}
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
|
||||
</Touchable>
|
||||
<Touchable
|
||||
style={{padding: 6}}
|
||||
onPress={this.onPressAboutBtn}>
|
||||
<MaterialCommunityIcons
|
||||
name="information"
|
||||
color={ThemeManager.getCurrentThemeVariables().text}
|
||||
onPress={this.onPressSearchBtn}
|
||||
/>
|
||||
<IconButton
|
||||
icon="information"
|
||||
size={26}
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
|
||||
</Touchable>
|
||||
color={ThemeManager.getCurrentThemeVariables().text}
|
||||
onPress={this.onPressAboutBtn}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
@ -185,36 +178,20 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
|
|||
shouldFocusSearchBar: false,
|
||||
data: item,
|
||||
};
|
||||
const subtitle = item.data.length + " " + (item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article'));
|
||||
const onPress = this.props.navigation.navigate.bind(this, 'ProximoListScreen', dataToSend);
|
||||
if (item.data.length > 0) {
|
||||
return (
|
||||
<ListItem
|
||||
button
|
||||
thumbnail
|
||||
<List.Item
|
||||
title={item.type.name}
|
||||
description={subtitle}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={item.type.icon}
|
||||
size={30}
|
||||
color={ThemeManager.getCurrentThemeVariables().brandPrimary}
|
||||
left={props => <List.Icon
|
||||
{...props}
|
||||
icon={item.type.icon}
|
||||
color={ThemeManager.getCurrentThemeVariables().primary}/>}
|
||||
right={props => <List.Icon {...props} icon={'chevron-right'}/>}
|
||||
/>
|
||||
</Left>
|
||||
<Body>
|
||||
<Text>
|
||||
{item.type.name}
|
||||
</Text>
|
||||
<Text note>
|
||||
{item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
|
||||
</Text>
|
||||
</Body>
|
||||
<Right>
|
||||
<MaterialCommunityIcons
|
||||
icon="chevron-right"
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
|
||||
</Right>
|
||||
</ListItem>
|
||||
);
|
||||
} else
|
||||
return <View/>;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Image, View} from 'react-native';
|
||||
import {Body, Card, CardItem, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
|
||||
import {Image, View, ScrollView} from 'react-native';
|
||||
import i18n from "i18n-js";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import ThemeManager from "../../utils/ThemeManager";
|
||||
import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -18,21 +16,7 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Tabs>
|
||||
<Tab
|
||||
heading={
|
||||
<TabHeading>
|
||||
<MaterialCommunityIcons
|
||||
name={'information'}
|
||||
color={ThemeManager.getCurrentThemeVariables().tabIconColor}
|
||||
size={20}
|
||||
/>
|
||||
<Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
|
||||
</TabHeading>
|
||||
}
|
||||
key={1}
|
||||
style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||
<Content padder>
|
||||
<ScrollView style={{padding: 5}}>
|
||||
<View style={{
|
||||
width: '100%',
|
||||
height: 100,
|
||||
|
|
@ -47,100 +31,52 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
|
|||
resizeMode="contain"/>
|
||||
</View>
|
||||
<Text>{i18n.t('proxiwashScreen.description')}</Text>
|
||||
<Card>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={'tumble-dryer'}
|
||||
size={26}/>
|
||||
<H2>{i18n.t('proxiwashScreen.dryer')}</H2>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
<Body>
|
||||
<H3>{i18n.t('proxiwashScreen.procedure')}</H3>
|
||||
<Text>{i18n.t('proxiwashScreen.dryerProcedure')}</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
<Body>
|
||||
<H3>{i18n.t('proxiwashScreen.tips')}</H3>
|
||||
<Text>{i18n.t('proxiwashScreen.dryerTips')}</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={'washing-machine'}
|
||||
size={26}/>
|
||||
<H2>{i18n.t('proxiwashScreen.washer')}</H2>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
<Body>
|
||||
<H3>{i18n.t('proxiwashScreen.procedure')}</H3>
|
||||
<Text>{i18n.t('proxiwashScreen.washerProcedure')}</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
<Body>
|
||||
<H3>{i18n.t('proxiwashScreen.tips')}</H3>
|
||||
<Text>{i18n.t('proxiwashScreen.washerTips')}</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
</Card>
|
||||
</Content>
|
||||
</Tab>
|
||||
<Tab
|
||||
heading={
|
||||
<TabHeading>
|
||||
<MaterialCommunityIcons
|
||||
name={'cash'}
|
||||
color={ThemeManager.getCurrentThemeVariables().tabIconColor}
|
||||
size={20}
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('proxiwashScreen.dryer')}
|
||||
left={props => <List.Icon {...props} icon={'tumble-dryer'}/>}
|
||||
/>
|
||||
<Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
|
||||
</TabHeading>
|
||||
}
|
||||
key={2}
|
||||
style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||
<Content padder>
|
||||
<Card>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={'coins'}
|
||||
size={26}/>
|
||||
<H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
<Body>
|
||||
<Text>{i18n.t('proxiwashScreen.washersTariff')}</Text>
|
||||
<Text>{i18n.t('proxiwashScreen.dryersTariff')}</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
<Card.Content>
|
||||
<Title>{i18n.t('proxiwashScreen.procedure')}</Title>
|
||||
<Paragraph>{i18n.t('proxiwashScreen.dryerProcedure')}</Paragraph>
|
||||
<Title>{i18n.t('proxiwashScreen.tips')}</Title>
|
||||
<Paragraph>{i18n.t('proxiwashScreen.dryerTips')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={'cash'}
|
||||
size={26}/>
|
||||
<H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
<Body>
|
||||
<Text>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('proxiwashScreen.washer')}
|
||||
left={props => <List.Icon {...props} icon={'washing-machine'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Title>{i18n.t('proxiwashScreen.procedure')}</Title>
|
||||
<Paragraph>{i18n.t('proxiwashScreen.washerProcedure')}</Paragraph>
|
||||
<Title>{i18n.t('proxiwashScreen.tips')}</Title>
|
||||
<Paragraph>{i18n.t('proxiwashScreen.washerTips')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</Content>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('proxiwashScreen.tariffs')}
|
||||
left={props => <List.Icon {...props} icon={'coins'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>{i18n.t('proxiwashScreen.washersTariff')}</Paragraph>
|
||||
<Paragraph>{i18n.t('proxiwashScreen.dryersTariff')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('proxiwashScreen.paymentMethods')}
|
||||
left={props => <List.Icon {...props} icon={'cash'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,13 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Alert, Platform, View} from 'react-native';
|
||||
import {Body, Card, CardItem, Left, Right, Text} from 'native-base';
|
||||
import ThemeManager from '../../utils/ThemeManager';
|
||||
import i18n from "i18n-js";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import WebSectionList from "../../components/WebSectionList";
|
||||
import NotificationsManager from "../../utils/NotificationsManager";
|
||||
import PlatformTouchable from "react-native-platform-touchable";
|
||||
import Touchable from "react-native-platform-touchable";
|
||||
import AsyncStorageManager from "../../utils/AsyncStorageManager";
|
||||
import * as Expo from "expo";
|
||||
import {Divider, IconButton, List, Text} from 'react-native-paper';
|
||||
|
||||
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
|
||||
|
||||
|
|
@ -288,17 +285,12 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
|
|||
|
||||
getRightButton() {
|
||||
return (
|
||||
<Touchable
|
||||
style={{
|
||||
padding: 6,
|
||||
marginRight: 10
|
||||
}}
|
||||
onPress={this.onAboutPress}>
|
||||
<MaterialCommunityIcons
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
||||
name="information"
|
||||
size={26}/>
|
||||
</Touchable>
|
||||
<IconButton
|
||||
icon="information"
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().text}
|
||||
onPress={this.onAboutPress}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -327,75 +319,52 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
|
|||
let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
|
||||
let isDryer = section.title === i18n.t('proxiwashScreen.dryers');
|
||||
const onPress = this.showAlert.bind(this, machineName, item, isDryer);
|
||||
let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0;
|
||||
if (MACHINE_STATES[item.state] === '0')
|
||||
width = '100%';
|
||||
return (
|
||||
<Card style={{
|
||||
flex: 0,
|
||||
height: 64,
|
||||
marginLeft: 10,
|
||||
marginRight: 10
|
||||
}}>
|
||||
|
||||
<CardItem
|
||||
style={{
|
||||
backgroundColor: stateColors[MACHINE_STATES[item.state]],
|
||||
paddingRight: 0,
|
||||
paddingLeft: 0,
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<View style={{
|
||||
height: 64,
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor
|
||||
left: 0,
|
||||
width: width,
|
||||
backgroundColor: stateColors[MACHINE_STATES[item.state]]
|
||||
}}/>
|
||||
<PlatformTouchable
|
||||
<List.Item
|
||||
title={machineName}
|
||||
description={isMachineRunning ? item.startTime + '/' + item.endTime : ''}
|
||||
onPress={onPress}
|
||||
style={{
|
||||
height: 64,
|
||||
position: 'absolute',
|
||||
zIndex: 10, // Make sure the button is above the text
|
||||
right: 0,
|
||||
width: '100%'
|
||||
backgroundColor: 'transparent',
|
||||
height: 64
|
||||
}}
|
||||
>
|
||||
<View/>
|
||||
</PlatformTouchable>
|
||||
<Left style={{marginLeft: 10}}>
|
||||
<MaterialCommunityIcons
|
||||
name={isDryer ? 'tumble-dryer' : 'washing-machine'}
|
||||
size={30}
|
||||
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
|
||||
/>
|
||||
<Body>
|
||||
<Text>
|
||||
{machineName + ' '}
|
||||
{this.isMachineWatched(item.number) ?
|
||||
<MaterialCommunityIcons
|
||||
name='bell-ring'
|
||||
color={ThemeManager.getCurrentThemeVariables().brandPrimary}
|
||||
size={20}
|
||||
/> : ''}
|
||||
</Text>
|
||||
<Text note>
|
||||
{isMachineRunning ? item.startTime + '/' + item.endTime : ''}
|
||||
</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
<Right style={{marginRight: 10}}>
|
||||
<Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
|
||||
{fontWeight: 'bold'} : {}}
|
||||
left={props => this.isMachineWatched(item.number) ?
|
||||
<List.Icon {...props} icon={'bell-ring'}
|
||||
color={ThemeManager.getCurrentThemeVariables().primary}/> :
|
||||
<List.Icon {...props} icon={isDryer ? 'tumble-dryer' : 'washing-machine'}/>}
|
||||
right={props => (
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<View style={{
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<Text style={
|
||||
MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
|
||||
{fontWeight: 'bold',} : {}}
|
||||
>
|
||||
{stateStrings[MACHINE_STATES[item.state]]}
|
||||
</Text>
|
||||
<MaterialCommunityIcons
|
||||
name={stateIcons[MACHINE_STATES[item.state]]}
|
||||
size={25}
|
||||
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
|
||||
</View>
|
||||
|
||||
<List.Icon
|
||||
{...props}
|
||||
color={ThemeManager.getCurrentThemeVariables().text}
|
||||
icon={stateIcons[MACHINE_STATES[item.state]]}
|
||||
/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
</Card>);
|
||||
</View>)}
|
||||
/>
|
||||
<Divider/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {View} from 'react-native';
|
||||
import {Card, CardItem, H2, H3, Text} from 'native-base';
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import i18n from "i18n-js";
|
||||
import WebSectionList from "../components/WebSectionList";
|
||||
import {Card, Text, Title} from 'react-native-paper';
|
||||
|
||||
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
|
||||
|
||||
|
|
@ -102,11 +102,11 @@ export default class SelfMenuScreen extends React.Component<Props> {
|
|||
marginBottom: 10,
|
||||
borderRadius: 50
|
||||
}}>
|
||||
<H2 style={{
|
||||
<Title style={{
|
||||
textAlign: 'center',
|
||||
marginTop: 10,
|
||||
marginBottom: 10
|
||||
}}>{section.title}</H2>
|
||||
}}>{section.title}</Title>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -115,42 +115,32 @@ export default class SelfMenuScreen extends React.Component<Props> {
|
|||
return (
|
||||
<Card style={{
|
||||
flex: 0,
|
||||
marginLeft: 20,
|
||||
marginRight: 20
|
||||
margin: 10,
|
||||
}}>
|
||||
<CardItem style={{
|
||||
paddingBottom: 0,
|
||||
flexDirection: 'column'
|
||||
}}>
|
||||
<H3 style={{
|
||||
marginTop: 10,
|
||||
marginBottom: 0,
|
||||
color: ThemeManager.getCurrentThemeVariables().listNoteColor
|
||||
}}>{item.name}</H3>
|
||||
<Card.Title
|
||||
title={item.name}
|
||||
titleStyle={{textAlign: 'center'}}/>
|
||||
<View style={{
|
||||
width: '80%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: ThemeManager.getCurrentThemeVariables().listBorderColor,
|
||||
borderBottomColor: ThemeManager.getCurrentThemeVariables().primary,
|
||||
marginTop: 10,
|
||||
marginBottom: 5,
|
||||
}}/>
|
||||
</CardItem>
|
||||
<CardItem style={{
|
||||
flexDirection: 'column',
|
||||
paddingTop: 0,
|
||||
}}>
|
||||
<Card.Content>
|
||||
{item.dishes.map((object) =>
|
||||
<View>
|
||||
{object.name !== "" ?
|
||||
<Text style={{
|
||||
marginTop: 5,
|
||||
marginBottom: 5
|
||||
marginBottom: 5,
|
||||
textAlign: 'center'
|
||||
}}>{this.formatName(object.name)}</Text>
|
||||
: <View/>}
|
||||
</View>)}
|
||||
</CardItem>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Body, Card, CardItem, CheckBox, Content, Left, List, ListItem, Picker, Right, Text,} from "native-base";
|
||||
import {ScrollView, View} from "react-native";
|
||||
import ThemeManager from '../utils/ThemeManager';
|
||||
import i18n from "i18n-js";
|
||||
import {NavigationActions, StackActions} from "@react-navigation/native";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import AsyncStorageManager from "../utils/AsyncStorageManager";
|
||||
import NotificationsManager from "../utils/NotificationsManager";
|
||||
import {Card, List, Switch, RadioButton, Text, TouchableRipple} from 'react-native-paper';
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -51,28 +50,25 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
|||
*/
|
||||
static getGeneralItem(control: React.Node, icon: string, title: string, subtitle: string) {
|
||||
return (
|
||||
<ListItem
|
||||
thumbnail
|
||||
>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={icon}
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
|
||||
</Left>
|
||||
<Body>
|
||||
<Text>
|
||||
{title}
|
||||
</Text>
|
||||
<Text note>
|
||||
{subtitle}
|
||||
</Text>
|
||||
</Body>
|
||||
<List.Item
|
||||
title={title}
|
||||
description={subtitle}
|
||||
left={props => <List.Icon {...props} icon={icon}/>}
|
||||
right={props => control}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
<Right>
|
||||
{control}
|
||||
</Right>
|
||||
</ListItem>
|
||||
getRadioButton(onPress: Function, value: string, label: string) {
|
||||
return (
|
||||
<TouchableRipple
|
||||
onPress={onPress}
|
||||
>
|
||||
<View pointerEvents="none">
|
||||
<Text>{label}</Text>
|
||||
<RadioButton value={value} />
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -113,19 +109,16 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
|||
*/
|
||||
getProxiwashNotifPicker() {
|
||||
return (
|
||||
<Picker
|
||||
note
|
||||
mode="dropdown"
|
||||
style={{width: 120}}
|
||||
selectedValue={this.state.proxiwashNotifPickerSelected}
|
||||
<RadioButton.Group
|
||||
onValueChange={this.onProxiwashNotifPickerValueChange}
|
||||
value={this.state.proxiwashNotifPickerSelected}
|
||||
>
|
||||
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.never')} value="never"/>
|
||||
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.5')} value="5"/>
|
||||
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.10')} value="10"/>
|
||||
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.20')} value="20"/>
|
||||
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.30')} value="30"/>
|
||||
</Picker>
|
||||
<RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.never')} value="never"/>
|
||||
<RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.5')} value="5"/>
|
||||
<RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.10')} value="10"/>
|
||||
<RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.20')} value="20"/>
|
||||
<RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.30')} value="30"/>
|
||||
</RadioButton.Group>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -136,19 +129,16 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
|||
*/
|
||||
getStartScreenPicker() {
|
||||
return (
|
||||
<Picker
|
||||
note
|
||||
mode="dropdown"
|
||||
style={{width: 120}}
|
||||
selectedValue={this.state.startScreenPickerSelected}
|
||||
<RadioButton.Group
|
||||
onValueChange={this.onStartScreenPickerValueChange}
|
||||
value={this.state.startScreenPickerSelected}
|
||||
>
|
||||
<Picker.Item label={i18n.t('screens.home')} value="Home"/>
|
||||
<Picker.Item label={i18n.t('screens.planning')} value="Planning"/>
|
||||
<Picker.Item label={i18n.t('screens.proxiwash')} value="Proxiwash"/>
|
||||
<Picker.Item label={i18n.t('screens.proximo')} value="Proximo"/>
|
||||
<Picker.Item label={'Planex'} value="Planex"/>
|
||||
</Picker>
|
||||
<RadioButton.Item label={i18n.t('screens.home')} value="Home" style={{color: "#fff"}}/>
|
||||
<RadioButton.Item label={i18n.t('screens.planning')} value="Planning"/>
|
||||
<RadioButton.Item label={i18n.t('screens.proxiwash')} value="Proxiwash"/>
|
||||
<RadioButton.Item label={i18n.t('screens.proximo')} value="Proximo"/>
|
||||
<RadioButton.Item label={'Planex'} value="Planex"/>
|
||||
</RadioButton.Group>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -158,19 +148,6 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
|||
onToggleNightMode() {
|
||||
ThemeManager.getInstance().setNightMode(!this.state.nightMode);
|
||||
this.setState({nightMode: !this.state.nightMode});
|
||||
this.resetStack();
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset react navigation stack to allow for a theme reset
|
||||
*/
|
||||
resetStack() {
|
||||
const resetAction = StackActions.reset({
|
||||
index: 0,
|
||||
key: null,
|
||||
actions: [NavigationActions.navigate({routeName: 'Main'})],
|
||||
});
|
||||
this.props.navigation.dispatch(resetAction);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -184,57 +161,47 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
|||
*/
|
||||
getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) {
|
||||
return (
|
||||
<ListItem
|
||||
button
|
||||
thumbnail
|
||||
onPress={onPressCallback}
|
||||
>
|
||||
<Left>
|
||||
<MaterialCommunityIcons
|
||||
name={icon}
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
|
||||
</Left>
|
||||
<Body>
|
||||
<Text>
|
||||
{title}
|
||||
</Text>
|
||||
<Text note>
|
||||
{subtitle}
|
||||
</Text>
|
||||
</Body>
|
||||
<Right>
|
||||
<CheckBox
|
||||
checked={this.state.nightMode}
|
||||
onPress={onPressCallback}
|
||||
style={{marginRight: 20}}/>
|
||||
</Right>
|
||||
</ListItem>
|
||||
<List.Item
|
||||
title={title}
|
||||
description={subtitle}
|
||||
left={props => <List.Icon {...props} icon={icon}/>}
|
||||
right={props =>
|
||||
<Switch
|
||||
value={this.state.nightMode}
|
||||
onValueChange={onPressCallback}
|
||||
/>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Content padder>
|
||||
<Card>
|
||||
<CardItem header>
|
||||
<Text>{i18n.t('settingsScreen.generalCard')}</Text>
|
||||
</CardItem>
|
||||
<List>
|
||||
<ScrollView>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title title={i18n.t('settingsScreen.generalCard')}/>
|
||||
<List.Section>
|
||||
{this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
|
||||
{SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
|
||||
</List>
|
||||
<List.Accordion
|
||||
title={i18n.t('settingsScreen.startScreen')}
|
||||
description={i18n.t('settingsScreen.startScreenSub')}
|
||||
left={props => <List.Icon {...props} icon="power" />}
|
||||
>
|
||||
{this.getStartScreenPicker()}
|
||||
</List.Accordion>
|
||||
</List.Section>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardItem header>
|
||||
<Text>Proxiwash</Text>
|
||||
</CardItem>
|
||||
<List>
|
||||
{SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))}
|
||||
</List>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title title="Proxiwash"/>
|
||||
<List.Accordion
|
||||
title={i18n.t('settingsScreen.proxiwashNotifReminder')}
|
||||
description={i18n.t('settingsScreen.proxiwashNotifReminderSub')}
|
||||
left={props => <List.Icon {...props} icon="washing-machine" />}
|
||||
>
|
||||
{this.getProxiwashNotifPicker()}
|
||||
</List.Accordion>
|
||||
</Card>
|
||||
</Content>
|
||||
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
// @flow
|
||||
|
||||
import platform from '../native-base-theme/variables/platform';
|
||||
import platformDark from '../native-base-theme/variables/platformDark';
|
||||
import getTheme from '../native-base-theme/components';
|
||||
import AsyncStorageManager from "./AsyncStorageManager";
|
||||
|
||||
// import {DarkTheme as NavDarkTheme, DefaultTheme as NavDefaultTheme} from '@react-navigation/native';
|
||||
import {DarkTheme, DefaultTheme} from 'react-native-paper';
|
||||
/**
|
||||
* Singleton class used to manage themes
|
||||
*/
|
||||
|
|
@ -17,6 +15,78 @@ export default class ThemeManager {
|
|||
this.updateThemeCallback = null;
|
||||
}
|
||||
|
||||
static getWhiteTheme() {
|
||||
return {
|
||||
...DefaultTheme,
|
||||
colors: {
|
||||
...DefaultTheme.colors,
|
||||
primary: '#be1522',
|
||||
accent: '#be1522',
|
||||
card: "rgb(255, 255, 255)",
|
||||
dividerBackground: '#e2e2e2',
|
||||
textDisabled: '#c1c1c1',
|
||||
icon: '#5d5d5d',
|
||||
success: "#5cb85c",
|
||||
warning: "#f0ad4e",
|
||||
danger: "#d9534f",
|
||||
|
||||
// Calendar/Agenda
|
||||
agendaBackgroundColor: '#f3f3f4',
|
||||
agendaDayTextColor: '#636363',
|
||||
|
||||
// PROXIWASH
|
||||
proxiwashFinishedColor: "rgba(54,165,22,0.31)",
|
||||
proxiwashReadyColor: "transparent",
|
||||
proxiwashRunningColor: "rgba(94,104,241,0.3)",
|
||||
proxiwashBrokenColor: "rgba(162,162,162,0.31)",
|
||||
proxiwashErrorColor: "rgba(204,7,0,0.31)",
|
||||
|
||||
// Screens
|
||||
planningColor: '#d9b10a',
|
||||
proximoColor: '#ec5904',
|
||||
proxiwashColor: '#1fa5ee',
|
||||
menuColor: '#e91314',
|
||||
tutorinsaColor: '#f93943',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
static getDarkTheme() {
|
||||
return {
|
||||
...DarkTheme,
|
||||
colors: {
|
||||
...DarkTheme.colors,
|
||||
primary: '#be1522',
|
||||
accent: '#be1522',
|
||||
card: "rgb(18, 18, 18)",
|
||||
dividerBackground: '#222222',
|
||||
textDisabled: '#5b5b5b',
|
||||
icon: '#b3b3b3',
|
||||
success: "#5cb85c",
|
||||
warning: "#f0ad4e",
|
||||
danger: "#d9534f",
|
||||
|
||||
// Calendar/Agenda
|
||||
agendaBackgroundColor: '#171717',
|
||||
agendaDayTextColor: '#6d6d6d',
|
||||
|
||||
// PROXIWASH
|
||||
proxiwashFinishedColor: "rgba(17,149,32,0.53)",
|
||||
proxiwashReadyColor: "transparent",
|
||||
proxiwashRunningColor: "rgba(29,59,175,0.65)",
|
||||
proxiwashBrokenColor: "#000000",
|
||||
proxiwashErrorColor: "rgba(213,8,0,0.57)",
|
||||
|
||||
// Screens
|
||||
planningColor: '#d99e09',
|
||||
proximoColor: '#ec5904',
|
||||
proxiwashColor: '#1fa5ee',
|
||||
menuColor: '#b81213',
|
||||
tutorinsaColor: '#f93943',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get this class instance or create one if none is found
|
||||
* @returns {ThemeManager}
|
||||
|
|
@ -27,6 +97,32 @@ export default class ThemeManager {
|
|||
ThemeManager.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {boolean} Night mode state
|
||||
*/
|
||||
static getNightMode(): boolean {
|
||||
return AsyncStorageManager.getInstance().preferences.nightMode.current === '1';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current theme based on night mode
|
||||
* @returns {Object}
|
||||
*/
|
||||
static getCurrentTheme(): Object {
|
||||
if (ThemeManager.getNightMode())
|
||||
return ThemeManager.getDarkTheme();
|
||||
else
|
||||
return ThemeManager.getWhiteTheme();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the variables contained in the current theme
|
||||
* @returns {Object}
|
||||
*/
|
||||
static getCurrentThemeVariables(): Object {
|
||||
return ThemeManager.getCurrentTheme().colors;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the function to be called when the theme is changed (allows for general reload of the app)
|
||||
* @param callback Function to call after theme change
|
||||
|
|
@ -47,30 +143,4 @@ export default class ThemeManager {
|
|||
this.updateThemeCallback();
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {boolean} Night mode state
|
||||
*/
|
||||
static getNightMode(): boolean {
|
||||
return AsyncStorageManager.getInstance().preferences.nightMode.current === '1';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current theme based on night mode
|
||||
* @returns {Object}
|
||||
*/
|
||||
static getCurrentTheme(): Object {
|
||||
if (ThemeManager.getNightMode())
|
||||
return getTheme(platformDark);
|
||||
else
|
||||
return getTheme(platform);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the variables contained in the current theme
|
||||
* @returns {Object}
|
||||
*/
|
||||
static getCurrentThemeVariables(): Object {
|
||||
return ThemeManager.getCurrentTheme().variables;
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import {Toast} from "native-base";
|
||||
|
||||
/**
|
||||
* Class used to get json data from the web
|
||||
|
|
@ -48,15 +47,15 @@ export default class WebDataManager {
|
|||
* @param errorString
|
||||
*/
|
||||
showUpdateToast(errorString) {
|
||||
let isSuccess = this.isDataObjectValid();
|
||||
if (!isSuccess) {
|
||||
Toast.show({
|
||||
text: errorString,
|
||||
buttonText: 'OK',
|
||||
type: isSuccess ? "success" : "danger",
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
// let isSuccess = this.isDataObjectValid();
|
||||
// if (!isSuccess) {
|
||||
// Toast.show({
|
||||
// text: errorString,
|
||||
// buttonText: 'OK',
|
||||
// type: isSuccess ? "success" : "danger",
|
||||
// duration: 2000
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue