From 06eba3fb9cffcae93abf1c43a4b6d564452c6108 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 10 Nov 2019 18:10:24 +0100 Subject: [PATCH 01/28] Forced planex items background to be opaque --- screens/PlanexScreen.js | 40 +++++++++++++++++++++++++++++++++++----- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/screens/PlanexScreen.js b/screens/PlanexScreen.js index 5131b7c..a0e29a5 100644 --- a/screens/PlanexScreen.js +++ b/screens/PlanexScreen.js @@ -15,6 +15,27 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/'; const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile2.css'; const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css'; +// Remove transparency to planex items to prevent invisible items +const REMOVE_ALPHA_FUNCTION_INJECTED = + 'function removeAlpha() {' + + ' $(".fc-event-container .fc-event").each(function(index) {' + + ' let bg = $(this).css("background-color");' + + ' if (bg.match("^rgba")) {' + + ' let a = bg.slice(5).split(\',\');' + + ' let newBg = \'rgb(\' + a[0] + \',\' + parseInt(a[1]) + \',\' + parseInt(a[2]) + \')\';' + + ' $(this).css("background-color", newBg);' + + ' };' + + ' });' + + '}'; + +// Watch for changes in the calendar and call the remove alpha function +const OBSERVE_MUTATIONS_INJECTED = + 'let observer = new MutationObserver(function(mutations) {' + + ' removeAlpha();' + + '});' + + 'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});'; + + /** * Class defining the app's planex screen. * This screen uses a webview to render the planex page @@ -26,12 +47,21 @@ export default class PlanexScreen extends React.Component { constructor() { super(); this.customInjectedJS = - 'document.querySelector(\'head\').innerHTML += \'\';' + - 'document.querySelector(\'head\').innerHTML += \'\';' + - '$(".fc-toolbar .fc-center").append(\'

' + i18n.t("planexScreen.rotateToLandscape") + '

\');' + - '$(".fc-toolbar .fc-center").append(\'

' + i18n.t("planexScreen.rotateToPortrait") + '

\');true;'; + '$(document).ready(function() {' + + REMOVE_ALPHA_FUNCTION_INJECTED + + OBSERVE_MUTATIONS_INJECTED + + '$("head").append(\'\');' + + '$("head").append(\'\');'; + if (ThemeManager.getNightMode()) - this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'\';'; + this.customInjectedJS += '$("head").append(\'\');'; + + this.customInjectedJS += + '$(".fc-toolbar .fc-center").append(\'

' + i18n.t("planexScreen.rotateToLandscape") + '

\');' + + '$(".fc-toolbar .fc-center").append(\'

' + i18n.t("planexScreen.rotateToPortrait") + '

\');' + + 'removeAlpha();' + + '});true;'; // Prevent crash on ios + } render() { From eb72ea6040a2e3482a689881d42753569f493d13 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 12 Nov 2019 18:04:13 +0100 Subject: [PATCH 02/28] Made event title take the while width if no image available --- screens/PlanningScreen.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index ca62215..cff459f 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -165,7 +165,9 @@ export default class PlanningScreen extends React.Component { flex: 1, flexDirection: 'row' }}> - + {

{item.title}

 {item.logo !== null ? From 9f4018a0de2a897c1df92a2806c39b9fda69bd8e Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Wed, 13 Nov 2019 21:30:39 +0100 Subject: [PATCH 03/28] Added a search feature in the Proximo articles + fixed typos in translations --- components/SearchHeader.js | 92 ++++++++++++++++++++ navigation/AppNavigator.js | 4 +- screens/Proximo/ProximoMainScreen.js | 26 ++++-- screens/Proximo/ProximoSearchScreen.js | 111 +++++++++++++++++++++++++ translations/en.json | 7 +- translations/fr.json | 25 +++--- 6 files changed, 242 insertions(+), 23 deletions(-) create mode 100644 components/SearchHeader.js create mode 100644 screens/Proximo/ProximoSearchScreen.js diff --git a/components/SearchHeader.js b/components/SearchHeader.js new file mode 100644 index 0000000..eb4ce6b --- /dev/null +++ b/components/SearchHeader.js @@ -0,0 +1,92 @@ +// @flow + +import * as React from "react"; +import {Header} from "native-base"; +import {Platform, StyleSheet} from "react-native"; +import {getStatusBarHeight} from "react-native-status-bar-height"; +import Touchable from 'react-native-platform-touchable'; +import ThemeManager from "../utils/ThemeManager"; +import CustomMaterialIcon from "./CustomMaterialIcon"; +import {TextInput} from "react-native-paper"; +import i18n from "i18n-js"; + + +type Props = { + navigation: Object, + searchFunction: Function +}; + +type State = { + searchString: string +} + + +/** + * Custom component defining a search header using native base + */ +export default class SearchHeader extends React.Component { + state = { + searchString: "Test", + }; + + render() { + /* TODO: + - hard coded color (not theme-specific), + - bugs with placeHolder and underlineColorAndroid (do not work), + - subtle offset of the text to fix in the inputText + - not tested on iOS + */ + return ( +
+ this.props.navigation.goBack()}> + + + + this.setState({searchString: text})} + onSubmitEditing={text => { + this.setState({searchString: text}); + this.props.searchFunction(this.state.searchString); + }} + /> + + this.props.searchFunction(this.state.searchString)}> + + +
+ ); + } +}; + + +// Fix header in status bar on Android +const styles = StyleSheet.create({ + header: { + paddingTop: getStatusBarHeight(), + height: 54 + getStatusBarHeight(), + }, +}); diff --git a/navigation/AppNavigator.js b/navigation/AppNavigator.js index f9fb664..b8072aa 100644 --- a/navigation/AppNavigator.js +++ b/navigation/AppNavigator.js @@ -5,6 +5,7 @@ import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigat import SettingsScreen from '../screens/SettingsScreen'; import AboutScreen from '../screens/About/AboutScreen'; import ProximoListScreen from '../screens/Proximo/ProximoListScreen'; +import ProximoSearchScreen from "../screens/Proximo/ProximoSearchScreen"; import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen'; import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen'; @@ -26,6 +27,7 @@ function createAppContainerWithInitialRoute(initialRoute: string) { Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute), // Drawer: MainDrawerNavigator, ProximoListScreen: {screen: ProximoListScreen}, + ProximoSearchScreen: {screen: ProximoSearchScreen}, SettingsScreen: {screen: SettingsScreen}, AboutScreen: {screen: AboutScreen}, AboutDependenciesScreen: {screen: AboutDependenciesScreen}, @@ -42,7 +44,7 @@ function createAppContainerWithInitialRoute(initialRoute: string) { initialRouteName: "Main", mode: 'card', headerMode: "none", - transitionConfig: () => fromRight(), + // transitionConfig: () => fromRight(), }) ); } diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index de8ec2f..a33ca01 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -79,13 +79,25 @@ export default class ProximoMainScreen extends FetchedDataSectionList { getRightButton() { return ( - this.props.navigation.navigate('ProximoAboutScreen')}> - - + + this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}> + + + this.props.navigation.navigate('ProximoAboutScreen')}> + + + ); } diff --git a/screens/Proximo/ProximoSearchScreen.js b/screens/Proximo/ProximoSearchScreen.js new file mode 100644 index 0000000..0f37c58 --- /dev/null +++ b/screens/Proximo/ProximoSearchScreen.js @@ -0,0 +1,111 @@ +// @flow + +import * as React from 'react'; +import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail,} from 'native-base'; +import {FlatList} from "react-native"; +import i18n from "i18n-js"; +import ThemeManager from "../../utils/ThemeManager"; +import SearchHeader from "../../components/SearchHeader"; + +type Props = { + navigation: Object, +}; + +type State = { + filteredData: Array, +}; + +/** + * Class defining proximo's article list of a certain category. + */ +export default class ProximoSearchScreen extends React.Component { + state = { + filteredData: this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles, + }; + + + /** + * get color depending on quantity available + * + * @param availableStock + * @return + */ + getStockColor(availableStock: number) { + let color: string; + if (availableStock > 3) + color = ThemeManager.getCurrentThemeVariables().brandSuccess; + else if (availableStock > 0) + color = ThemeManager.getCurrentThemeVariables().brandWarning; + else + color = ThemeManager.getCurrentThemeVariables().brandDanger; + return color; + } + + + showItemDetails(item: Object) { + //TODO: implement onClick function (copy-paste from ProximoListScreen) + } + + /** + * Returns only the articles whose name contains str. Case and accents insensitive. + * @param str + * @returns {[]} + */ + filterData(str: string) { + let filteredData = []; + const testStr: String = str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); + const articles: Object = this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles; + for (const article: Object of articles) { + const name: String = String(article.name.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")); + if (name.includes(testStr)) { + filteredData.push(article) + } + } + return filteredData; + } + + search(str: string) { + this.setState({ + filteredData: this.filterData(str) + }) + } + + render() { + return ( + + + + item.name + item.code} + style={{minHeight: 300, width: '100%'}} + renderItem={({item}) => + {this.showItemDetails(item);}} > + + + + + + {item.name} + + + {item.quantity + ' ' + i18n.t('proximoScreen.inStock')} + + + + + {item.price}€ + + + } + /> + + + ); + } +} diff --git a/translations/en.json b/translations/en.json index e417f0d..b5a4bb7 100644 --- a/translations/en.json +++ b/translations/en.json @@ -25,7 +25,7 @@ }, "slide4": { "title": "Proximo", - "text": "Are you short on pasta? Or you maybe you feel a little peckish, then look up your INSA shop's stock in real time" + "text": "Are you short on pasta? Or maybe you feel a little peckish, then look up your INSA shop's stock in real time" }, "slide5": { "title": "Planex", @@ -129,7 +129,8 @@ "description": "The Proximo is your small grocery store maintained by students directly on the campus. Open every day from 18h30 to 19h30, we welcome you when you are short on pastas or sodas ! Different products for different problems, everything at cost price. You can pay by Lydia or cash.", "openingHours": "Openning Hours", "paymentMethods": "Payment Methods", - "paymentMethodsDescription": "Cash or Lydia" + "paymentMethodsDescription": "Cash or Lydia", + "search": "Search" }, "proxiwashScreen": { "dryer": "Dryer", @@ -141,7 +142,7 @@ "listUpdateFail": "Error while updating machines state", "error": "Could not update machines state. Pull down to retry.", "loading": "Loading...", - "description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay b credit card or cash.", + "description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay by credit card or cash.", "informationTab": "Information", "paymentTab": "Payment", "tariffs": "Tariffs", diff --git a/translations/fr.json b/translations/fr.json index b9ddb8b..31efb95 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -21,11 +21,11 @@ }, "slide3": { "title": "N'oubliez plus votre linge !", - "text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifiés lorsque la vôtre se termine bientôt !" + "text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifié lorsque la vôtre se termine bientôt !" }, "slide4": { "title": "Proximo", - "text": "Il vous manque des pâtes ? Ou un petit creux au gouter, regardez les stocks de votre supérette insaienne en temps réel" + "text": "Il vous manque des pâtes ? Ou un petit creux au goûter, regardez les stocks de votre supérette insaienne en temps réel" }, "slide5": { "title": "Planex", @@ -75,7 +75,7 @@ "dashboard": { "seeMore": "Cliquez pour plus d'infos", "todayEventsTitle": "Événements aujourd'hui", - "todayEventsSubtitleNA": "Pas d'événements", + "todayEventsSubtitleNA": "Pas d'événement", "todayEventsSubtitle": " événement aujourd'hui", "todayEventsSubtitlePlural": " événements aujourd'hui", "proximoTitle": "Proximo", @@ -126,10 +126,11 @@ "listUpdateFail": "Erreur lors de la mise à jour de la list d'articles", "loading": "Chargement...", "inStock": "en stock", - "description": "Le Proximo c’est ta petite épicerie étudiante tenu par les étudiants directement sur le campus. Ouvert tous les jours de 18h30 à 19h30, nous t’accueillons et te souvent quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galère, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.", + "description": "Le Proximo c’est ta petite épicerie étudiante tenue par les étudiants directement sur le campus. Ouverte tous les jours de 18h30 à 19h30, nous t’accueillons et te sauvons quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galères, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.", "openingHours": "Horaires d'ouverture", "paymentMethods" : "Moyens de Paiement", - "paymentMethodsDescription" : "Espèce ou Lydia" + "paymentMethodsDescription" : "Espèce ou Lydia", + "search": "Rechercher" }, "proxiwashScreen": { "dryer": "Sèche-Linge", @@ -137,9 +138,9 @@ "washer": "Lave-Linge", "washers": "Lave-Linges", "min": "min", - "listUpdated": "Etat des machines mis à jour", - "listUpdateFail": "Erreur lors de la mise à jour del'état des machines", - "error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour reessayer.", + "listUpdated": "État des machines mis à jour", + "listUpdateFail": "Erreur lors de la mise à jour de l'état des machines", + "error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour réessayer.", "loading": "Chargement...", "description": "C'est le service de laverie proposé par promologis pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines est ouvert 7J/7 24h/24 ! Ici tu peux vérifier leur disponibilité ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement). Tu peux payer par CB ou espèces.", "informationTab": "Informations", @@ -152,7 +153,7 @@ "washerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.\n\nDès que le programme est terminé, l’afficheur indique 'Programme terminé', appuyer sur le bouton jaune d’ouverture du hublot pour récupérer le linge.", "washerTips": "Programme blanc/couleur : 6kg de linge sec (textiles en coton, lin, linge de corps, draps, jeans,serviettes de toilettes).\n\nProgramme nonrepassable : 3,5 kg de linge sec (textiles en fibres synthétiques, cotonet polyester mélangés).\n\nProgramme fin 30°C : 2,5 kg de linge sec (textiles délicats en fibres synthétiques, rayonne).\n\nProgramme laine 30°C : 2,5 kg de linge sec (textiles en laine et lainages lavables).", "dryerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.", - "dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le seche-linge n'est pas chargé.", + "dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le sèche-linge n'est pas chargé.", "procedure": "Procédure", "tips": "Conseils", @@ -161,7 +162,7 @@ "disableNotifications": "Désactiver les notifications", "ok": "OK", "cancel": "Annuler", - "finished": "Cette machine est terminée. Si vous l'avez l'avez démarée, vous pouvez récupérer votre linge.", + "finished": "Cette machine est terminée. Si vous l'avez démarrée, vous pouvez récupérer votre linge.", "ready": "Cette machine est vide et prête à être utilisée.", "running": "Cette machine a démarré à %{start} et terminera à %{end}.\nTemps restant : %{remaining} min", "broken": "Cette machine est hors service. Merci pour votre compréhension.", @@ -171,7 +172,7 @@ }, "states": { - "finished": "TERMINE", + "finished": "TERMINÉ", "ready": "DISPONIBLE", "running": "EN COURS", "broken": "HORS SERVICE", @@ -195,7 +196,7 @@ }, "general": { "loading": "Chargement...", - "networkError": "Impossible de contacter les serveurs. Assurez vous d'être connecté à internet." + "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet." }, "date": { "daysOfWeek": { From 61d413b074b80a4a87047b2c35ceae6f7d9f0f6d Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Thu, 14 Nov 2019 00:55:17 +0100 Subject: [PATCH 04/28] Improved planning screen: back button now close the calendar if opened + translated day and month names --- screens/PlanningScreen.js | 53 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index cff459f..8ae87b7 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -1,6 +1,7 @@ // @flow import * as React from 'react'; +import { BackHandler } from 'react-native'; import {Content, H1, H2, H3, Text, Button} from 'native-base'; import i18n from "i18n-js"; import {View, Image} from "react-native"; @@ -8,12 +9,21 @@ import ThemeManager from "../utils/ThemeManager"; import {Linking} from "expo"; import BaseContainer from "../components/BaseContainer"; import {Agenda} from 'react-native-calendars'; +import {LocaleConfig} from 'react-native-calendars'; import HTML from 'react-native-render-html'; import Touchable from 'react-native-platform-touchable'; import Modalize from 'react-native-modalize'; import WebDataManager from "../utils/WebDataManager"; import CustomMaterialIcon from "../components/CustomMaterialIcon"; +LocaleConfig.locales['fr'] = { + monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'], + monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'], + dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'], + dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'], + today: 'Aujourd\'hui' +}; + type Props = { navigation: Object, @@ -23,6 +33,7 @@ type State = { modalCurrentDisplayItem: Object, refreshing: boolean, agendaItems: Object, + calendarShowing: boolean, }; const FETCH_URL = "https://amicale-insat.fr/event/json/list"; @@ -48,20 +59,56 @@ export default class PlanningScreen extends React.Component { lastRefresh: Date; minTimeBetweenRefresh = 60; + _agenda: Agenda; + constructor(props: any) { super(props); this.modalRef = React.createRef(); this.webDataManager = new WebDataManager(FETCH_URL); + this._didFocusSubscription = props.navigation.addListener( + 'didFocus', + payload => + BackHandler.addEventListener( + 'hardwareBackPress', + this.onBackButtonPressAndroid + ) + ); + if (i18n.currentLocale().startsWith("fr")) { + LocaleConfig.defaultLocale = 'fr'; + } } componentDidMount() { this._onRefresh(); + this._willBlurSubscription = this.props.navigation.addListener( + 'willBlur', + payload => + BackHandler.removeEventListener( + 'hardwareBackPress', + this.onBackButtonPressAndroid + ) + ); + } + + onBackButtonPressAndroid = () => { + if (this.state.calendarShowing) { + this._agenda.chooseDay(this._agenda.state.selectedDay); + return true; + } else { + return false; + } + }; + + componentWillUnmount() { + this._didFocusSubscription && this._didFocusSubscription.remove(); + this._willBlurSubscription && this._willBlurSubscription.remove(); } state = { modalCurrentDisplayItem: {}, refreshing: false, agendaItems: {}, + calendarShowing: false, }; getCurrentDate() { @@ -347,11 +394,17 @@ export default class PlanningScreen extends React.Component { futureScrollRange={AGENDA_MONTH_SPAN} // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly. onRefresh={() => this._onRefresh()} + // callback that fires when the calendar is opened or closed + onCalendarToggled={(calendarOpened) => {this.setState({calendarShowing: calendarOpened})}} // Set this true while waiting for new data from a refresh refreshing={this.state.refreshing} renderItem={(item) => this.getRenderItem(item)} renderEmptyDate={() => this.getRenderEmptyDate()} rowHasChanged={() => this.rowHasChanged()} + // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. + firstDay={1} + // ref to this agenda in order to handle back button event + ref={(ref) => this._agenda = ref} // agenda theme theme={{ backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor, From 83dc2dce341a991cb7d33662eef14be3795d5e73 Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 14 Nov 2019 15:23:25 +0100 Subject: [PATCH 05/28] Fixed flow errors --- screens/PlanningScreen.js | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index 8ae87b7..132ad97 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -1,15 +1,14 @@ // @flow import * as React from 'react'; -import { BackHandler } from 'react-native'; -import {Content, H1, H2, H3, Text, Button} from 'native-base'; +import {BackHandler} from 'react-native'; +import {Content, H1, H3, Text, Button} from 'native-base'; import i18n from "i18n-js"; import {View, Image} from "react-native"; import ThemeManager from "../utils/ThemeManager"; import {Linking} from "expo"; import BaseContainer from "../components/BaseContainer"; -import {Agenda} from 'react-native-calendars'; -import {LocaleConfig} from 'react-native-calendars'; +import {Agenda, LocaleConfig} from 'react-native-calendars'; import HTML from 'react-native-render-html'; import Touchable from 'react-native-platform-touchable'; import Modalize from 'react-native-modalize'; @@ -17,10 +16,10 @@ import WebDataManager from "../utils/WebDataManager"; import CustomMaterialIcon from "../components/CustomMaterialIcon"; LocaleConfig.locales['fr'] = { - monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'], - monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'], - dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'], - dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'], + monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], + monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'], + dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'], + dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'], today: 'Aujourd\'hui' }; @@ -53,19 +52,21 @@ function openWebLink(link) { */ export default class PlanningScreen extends React.Component { - modalRef: { current: null | Modalize }; + modalRef: Modalize; + agendaRef: Agenda; webDataManager: WebDataManager; lastRefresh: Date; minTimeBetweenRefresh = 60; - _agenda: Agenda; + didFocusSubscription: Function; + willBlurSubscription: Function; constructor(props: any) { super(props); this.modalRef = React.createRef(); this.webDataManager = new WebDataManager(FETCH_URL); - this._didFocusSubscription = props.navigation.addListener( + this.didFocusSubscription = props.navigation.addListener( 'didFocus', payload => BackHandler.addEventListener( @@ -80,7 +81,7 @@ export default class PlanningScreen extends React.Component { componentDidMount() { this._onRefresh(); - this._willBlurSubscription = this.props.navigation.addListener( + this.willBlurSubscription = this.props.navigation.addListener( 'willBlur', payload => BackHandler.removeEventListener( @@ -92,7 +93,7 @@ export default class PlanningScreen extends React.Component { onBackButtonPressAndroid = () => { if (this.state.calendarShowing) { - this._agenda.chooseDay(this._agenda.state.selectedDay); + this.agendaRef.chooseDay(this.agendaRef.state.selectedDay); return true; } else { return false; @@ -100,8 +101,8 @@ export default class PlanningScreen extends React.Component { }; componentWillUnmount() { - this._didFocusSubscription && this._didFocusSubscription.remove(); - this._willBlurSubscription && this._willBlurSubscription.remove(); + this.didFocusSubscription && this.didFocusSubscription.remove(); + this.willBlurSubscription && this.willBlurSubscription.remove(); } state = { @@ -395,7 +396,9 @@ export default class PlanningScreen extends React.Component { // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly. onRefresh={() => this._onRefresh()} // callback that fires when the calendar is opened or closed - onCalendarToggled={(calendarOpened) => {this.setState({calendarShowing: calendarOpened})}} + onCalendarToggled={(calendarOpened) => { + this.setState({calendarShowing: calendarOpened}) + }} // Set this true while waiting for new data from a refresh refreshing={this.state.refreshing} renderItem={(item) => this.getRenderItem(item)} @@ -404,7 +407,7 @@ export default class PlanningScreen extends React.Component { // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. firstDay={1} // ref to this agenda in order to handle back button event - ref={(ref) => this._agenda = ref} + ref={(ref) => this.agendaRef = ref} // agenda theme theme={{ backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor, From e3bc2f7e8e3a98b0bf31a542409918a726ce5603 Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 14 Nov 2019 16:20:06 +0100 Subject: [PATCH 06/28] Added "all articles" category + use native base for search input --- components/SearchHeader.js | 89 +++++++++++++++----------- screens/Proximo/ProximoMainScreen.js | 41 +++++++++--- screens/Proximo/ProximoSearchScreen.js | 2 +- translations/en.json | 3 +- translations/fr.json | 3 +- 5 files changed, 87 insertions(+), 51 deletions(-) diff --git a/components/SearchHeader.js b/components/SearchHeader.js index eb4ce6b..2e393c3 100644 --- a/components/SearchHeader.js +++ b/components/SearchHeader.js @@ -1,13 +1,12 @@ // @flow import * as React from "react"; -import {Header} from "native-base"; +import {Header, Item, Input, Left, Right, Body} from "native-base"; import {Platform, StyleSheet} from "react-native"; import {getStatusBarHeight} from "react-native-status-bar-height"; import Touchable from 'react-native-platform-touchable'; import ThemeManager from "../utils/ThemeManager"; import CustomMaterialIcon from "./CustomMaterialIcon"; -import {TextInput} from "react-native-paper"; import i18n from "i18n-js"; @@ -38,45 +37,57 @@ export default class SearchHeader extends React.Component { */ return (
- + this.props.navigation.goBack()}> + + + + + this.props.navigation.goBack()}> - - + width: '100%', + marginBottom: 7 + }}> + + - this.setState({searchString: text})} - onSubmitEditing={text => { - this.setState({searchString: text}); - this.props.searchFunction(this.state.searchString); - }} - /> - - this.props.searchFunction(this.state.searchString)}> - - + {/* this.setState({searchString: text})}*/} + {/* onSubmitEditing={text => {*/} + {/* this.setState({searchString: text});*/} + {/* this.props.searchFunction(this.state.searchString);*/} + {/* }}*/} + {/*/>*/} + + + this.props.searchFunction(this.state.searchString)}> + + +
); } diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index a33ca01..586e7b9 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -2,7 +2,7 @@ import * as React from 'react'; import {Platform, View} from 'react-native' -import {Badge, Body, H2, Left, ListItem, Right, Text} from 'native-base'; +import {Badge, Body, Left, ListItem, Right, Text} from 'native-base'; import i18n from "i18n-js"; import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import FetchedDataSectionList from "../../components/FetchedDataSectionList"; @@ -57,22 +57,45 @@ export default class ProximoMainScreen extends FetchedDataSectionList { if (fetchedData.types !== undefined && fetchedData.articles !== undefined) { let types = fetchedData.types; let articles = fetchedData.articles; + finalData.push({ + type: { + id: "0", + name: i18n.t('proximoScreen.all'), + icon: 'star' + }, + data: this.getAvailableArticles(articles, undefined) + }); for (let i = 0; i < types.length; i++) { finalData.push({ type: types[i], - data: [] + data: this.getAvailableArticles(articles, types[i]) }); - for (let k = 0; k < articles.length; k++) { - if (articles[k]['type'].includes(types[i].id) && parseInt(articles[k]['quantity']) > 0) { - finalData[i].data.push(articles[k]); - } - } + } } finalData.sort(ProximoMainScreen.sortFinalData); return finalData; } + /** + * Get an array of available articles (in stock) of the given type + * + * @param articles The list of all articles + * @param type The type of articles to find (undefined for any type) + * @return {Array} The array of available articles + */ + static getAvailableArticles(articles: Array, type: ?Object) { + let availableArticles = []; + for (let k = 0; k < articles.length; k++) { + if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id']) + || type === undefined) + && parseInt(articles[k]['quantity']) > 0) { + availableArticles.push(articles[k]); + } + } + return availableArticles; + } + static sortFinalData(a: Object, b: Object) { return a.type.id - b.type.id; } @@ -81,14 +104,14 @@ export default class ProximoMainScreen extends FetchedDataSectionList { return ( this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}> + icon="magnify"/> { + state = { filteredData: this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles, }; - /** * get color depending on quantity available * diff --git a/translations/en.json b/translations/en.json index b5a4bb7..cff5cba 100644 --- a/translations/en.json +++ b/translations/en.json @@ -130,7 +130,8 @@ "openingHours": "Openning Hours", "paymentMethods": "Payment Methods", "paymentMethodsDescription": "Cash or Lydia", - "search": "Search" + "search": "Search", + "all": "All" }, "proxiwashScreen": { "dryer": "Dryer", diff --git a/translations/fr.json b/translations/fr.json index 31efb95..78c47a9 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -130,7 +130,8 @@ "openingHours": "Horaires d'ouverture", "paymentMethods" : "Moyens de Paiement", "paymentMethodsDescription" : "Espèce ou Lydia", - "search": "Rechercher" + "search": "Rechercher", + "all": "Tout" }, "proxiwashScreen": { "dryer": "Sèche-Linge", From dd11fcc2c763c7e06c64d3bd02539420af4a4dbe Mon Sep 17 00:00:00 2001 From: keplyx Date: Fri, 15 Nov 2019 15:58:05 +0100 Subject: [PATCH 07/28] Moved search header into custom header + search on key press --- components/CustomHeader.js | 25 +++++- components/SearchHeader.js | 103 ------------------------- screens/Proximo/ProximoListScreen.js | 65 +++++++++------- screens/Proximo/ProximoSearchScreen.js | 8 +- 4 files changed, 66 insertions(+), 135 deletions(-) delete mode 100644 components/SearchHeader.js diff --git a/components/CustomHeader.js b/components/CustomHeader.js index eefc355..b966c1e 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -1,15 +1,18 @@ // @flow import * as React from "react"; -import {Body, Header, Left, Right, Title} from "native-base"; +import {Body, Header, Input, Item, Left, Right, Title} from "native-base"; import {Platform, StyleSheet, View} from "react-native"; import {getStatusBarHeight} from "react-native-status-bar-height"; import Touchable from 'react-native-platform-touchable'; import ThemeManager from "../utils/ThemeManager"; import CustomMaterialIcon from "./CustomMaterialIcon"; +import i18n from "i18n-js"; type Props = { hasBackButton: boolean, + hasSearchField: boolean, + searchCallback: Function, leftButton: React.Node, rightButton: React.Node, title: string, @@ -29,11 +32,27 @@ export default class CustomHeader extends React.Component { static defaultProps = { hasBackButton: false, + hasSearchField: false, + searchCallback: () => null, + title: '', leftButton: , rightButton: , hasTabs: false, }; + getSearchBar() { + return ( + + this.props.searchCallback(text)}/> + + ); + } + render() { let button; // Does the app have a back button or a burger menu ? @@ -56,7 +75,9 @@ export default class CustomHeader extends React.Component { {button} - {this.props.title} + {this.props.hasSearchField ? + this.getSearchBar() : + {this.props.title}} {this.props.rightButton} diff --git a/components/SearchHeader.js b/components/SearchHeader.js deleted file mode 100644 index 2e393c3..0000000 --- a/components/SearchHeader.js +++ /dev/null @@ -1,103 +0,0 @@ -// @flow - -import * as React from "react"; -import {Header, Item, Input, Left, Right, Body} from "native-base"; -import {Platform, StyleSheet} from "react-native"; -import {getStatusBarHeight} from "react-native-status-bar-height"; -import Touchable from 'react-native-platform-touchable'; -import ThemeManager from "../utils/ThemeManager"; -import CustomMaterialIcon from "./CustomMaterialIcon"; -import i18n from "i18n-js"; - - -type Props = { - navigation: Object, - searchFunction: Function -}; - -type State = { - searchString: string -} - - -/** - * Custom component defining a search header using native base - */ -export default class SearchHeader extends React.Component { - state = { - searchString: "Test", - }; - - render() { - /* TODO: - - hard coded color (not theme-specific), - - bugs with placeHolder and underlineColorAndroid (do not work), - - subtle offset of the text to fix in the inputText - - not tested on iOS - */ - return ( -
- - this.props.navigation.goBack()}> - - - - - - - - - {/* this.setState({searchString: text})}*/} - {/* onSubmitEditing={text => {*/} - {/* this.setState({searchString: text});*/} - {/* this.props.searchFunction(this.state.searchString);*/} - {/* }}*/} - {/*/>*/} - - - this.props.searchFunction(this.state.searchString)}> - - - -
- ); - } -}; - - -// Fix header in status bar on Android -const styles = StyleSheet.create({ - header: { - paddingTop: getStatusBarHeight(), - height: 54 + getStatusBarHeight(), - }, -}); diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 7c70a1b..8e367c2 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -58,7 +58,7 @@ type State = { */ export default class ProximoListScreen extends React.Component { - modalRef: { current: null | Modalize }; + modalRef: { current: null | Modalize }; constructor(props: any) { super(props); @@ -232,6 +232,36 @@ export default class ProximoListScreen extends React.Component { } } + getSortMenu() { + return ( + + this._menu.show() + }> + + + } + > + this.sortModeSelected(sortMode.name)}> + {this.state.sortNameIcon} + {i18n.t('proximoScreen.sortName')} + + this.sortModeSelected(sortMode.price)}> + {this.state.sortPriceIcon} + {i18n.t('proximoScreen.sortPrice')} + + + ); + } + render() { const nav = this.props.navigation; const navType = nav.getParam('type', '{name: "Error"}'); @@ -243,33 +273,12 @@ export default class ProximoListScreen extends React.Component { modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> {this.getModalContent()} - - this._menu.show() - }> - - - } - > - this.sortModeSelected(sortMode.name)}> - {this.state.sortNameIcon} - {i18n.t('proximoScreen.sortName')} - - this.sortModeSelected(sortMode.price)}> - {this.state.sortPriceIcon} - {i18n.t('proximoScreen.sortPrice')} - - - }/> + console.log(text)} + rightButton={this.getSortMenu()}/> { render() { return ( - + this.search(text)}/> Date: Fri, 15 Nov 2019 16:44:10 +0100 Subject: [PATCH 08/28] Improved headers search bar design --- components/CustomHeader.js | 13 +++++++++---- native-base-theme/variables/platform.js | 1 + native-base-theme/variables/platformDark.js | 1 + 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/components/CustomHeader.js b/components/CustomHeader.js index b966c1e..583324a 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -47,8 +47,13 @@ export default class CustomHeader extends React.Component { width: '100%', marginBottom: 7 }}> - this.props.searchCallback(text)}/> + + this.props.searchCallback(text)}/> ); } @@ -71,7 +76,7 @@ export default class CustomHeader extends React.Component { return (
- + {button} @@ -79,7 +84,7 @@ export default class CustomHeader extends React.Component { this.getSearchBar() : {this.props.title}} - + {this.props.rightButton} {this.props.hasBackButton ? : Date: Fri, 15 Nov 2019 18:08:47 +0100 Subject: [PATCH 09/28] Implemented search into each category instead of its own screen --- navigation/AppNavigator.js | 4 +- screens/Proximo/ProximoListScreen.js | 44 ++++++++-- screens/Proximo/ProximoMainScreen.js | 31 +++---- screens/Proximo/ProximoSearchScreen.js | 115 ------------------------- 4 files changed, 49 insertions(+), 145 deletions(-) delete mode 100644 screens/Proximo/ProximoSearchScreen.js diff --git a/navigation/AppNavigator.js b/navigation/AppNavigator.js index b8072aa..f9fb664 100644 --- a/navigation/AppNavigator.js +++ b/navigation/AppNavigator.js @@ -5,7 +5,6 @@ import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigat import SettingsScreen from '../screens/SettingsScreen'; import AboutScreen from '../screens/About/AboutScreen'; import ProximoListScreen from '../screens/Proximo/ProximoListScreen'; -import ProximoSearchScreen from "../screens/Proximo/ProximoSearchScreen"; import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen'; import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen'; @@ -27,7 +26,6 @@ function createAppContainerWithInitialRoute(initialRoute: string) { Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute), // Drawer: MainDrawerNavigator, ProximoListScreen: {screen: ProximoListScreen}, - ProximoSearchScreen: {screen: ProximoSearchScreen}, SettingsScreen: {screen: SettingsScreen}, AboutScreen: {screen: AboutScreen}, AboutDependenciesScreen: {screen: AboutDependenciesScreen}, @@ -44,7 +42,7 @@ function createAppContainerWithInitialRoute(initialRoute: string) { initialRouteName: "Main", mode: 'card', headerMode: "none", - // transitionConfig: () => fromRight(), + transitionConfig: () => fromRight(), }) ); } diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 8e367c2..3280582 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -51,6 +51,7 @@ type State = { sortPriceIcon: React.Node, sortNameIcon: React.Node, modalCurrentDisplayItem: Object, + currentlyDisplayedData: Array, }; /** @@ -59,19 +60,21 @@ type State = { export default class ProximoListScreen extends React.Component { modalRef: { current: null | Modalize }; + originalData: Array; constructor(props: any) { super(props); this.modalRef = React.createRef(); + this.originalData = this.props.navigation.getParam('data', []); } state = { - navData: this.props.navigation.getParam('data', []).sort(sortPrice), + currentlyDisplayedData: this.props.navigation.getParam('data', []).sort(sortPrice), currentSortMode: sortMode.price, isSortReversed: false, sortPriceIcon: '', sortNameIcon: '', - modalCurrentDisplayItem: {} + modalCurrentDisplayItem: {}, }; _menu: Menu; @@ -111,7 +114,7 @@ export default class ProximoListScreen extends React.Component { currentSortMode: mode, isSortReversed: isReverse }); - let data = this.state.navData; + let data = this.state.currentlyDisplayedData; switch (mode) { case sortMode.price: if (isReverse) { @@ -192,6 +195,35 @@ export default class ProximoListScreen extends React.Component { } } + + sanitizeString(str: string) { + return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); + } + + /** + * Returns only the articles whose name contains str. Case and accents insensitive. + * @param str + * @returns {[]} + */ + filterData(str: string) { + let filteredData = []; + const testStr = this.sanitizeString(str); + const articles = this.originalData; + for (const article of articles) { + const name = this.sanitizeString(article.name); + if (name.includes(testStr)) { + filteredData.push(article) + } + } + return filteredData; + } + + search(str: string) { + this.setState({ + currentlyDisplayedData: this.filterData(str) + }) + } + getModalContent() { return ( { hasBackButton={true} navigation={nav} hasSearchField={true} - searchCallback={(text) => console.log(text)} + searchCallback={(text) => this.search(text)} rightButton={this.getSortMenu()}/> item.name + item.code} style={{minHeight: 300, width: '100%'}} renderItem={({item}) => diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index 586e7b9..f04044f 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -102,25 +102,13 @@ export default class ProximoMainScreen extends FetchedDataSectionList { getRightButton() { return ( - - this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}> - - - this.props.navigation.navigate('ProximoAboutScreen')}> - - - + this.props.navigation.navigate('ProximoAboutScreen')}> + + ); } @@ -138,15 +126,16 @@ export default class ProximoMainScreen extends FetchedDataSectionList { {item.type.name} - + {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')} - + diff --git a/screens/Proximo/ProximoSearchScreen.js b/screens/Proximo/ProximoSearchScreen.js deleted file mode 100644 index a03e7e6..0000000 --- a/screens/Proximo/ProximoSearchScreen.js +++ /dev/null @@ -1,115 +0,0 @@ -// @flow - -import * as React from 'react'; -import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail,} from 'native-base'; -import {FlatList} from "react-native"; -import i18n from "i18n-js"; -import ThemeManager from "../../utils/ThemeManager"; -import CustomHeader from "../../components/CustomHeader"; - -type Props = { - navigation: Object, -}; - -type State = { - filteredData: Array, -}; - -/** - * Class defining proximo's article list of a certain category. - */ -export default class ProximoSearchScreen extends React.Component { - - state = { - filteredData: this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles, - }; - - /** - * get color depending on quantity available - * - * @param availableStock - * @return - */ - getStockColor(availableStock: number) { - let color: string; - if (availableStock > 3) - color = ThemeManager.getCurrentThemeVariables().brandSuccess; - else if (availableStock > 0) - color = ThemeManager.getCurrentThemeVariables().brandWarning; - else - color = ThemeManager.getCurrentThemeVariables().brandDanger; - return color; - } - - - showItemDetails(item: Object) { - //TODO: implement onClick function (copy-paste from ProximoListScreen) - } - - /** - * Returns only the articles whose name contains str. Case and accents insensitive. - * @param str - * @returns {[]} - */ - filterData(str: string) { - let filteredData = []; - const testStr: String = str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); - const articles: Object = this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles; - for (const article: Object of articles) { - const name: String = String(article.name.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")); - if (name.includes(testStr)) { - filteredData.push(article) - } - } - return filteredData; - } - - search(str: string) { - this.setState({ - filteredData: this.filterData(str) - }) - } - - render() { - return ( - - this.search(text)}/> - - item.name + item.code} - style={{minHeight: 300, width: '100%'}} - renderItem={({item}) => - {this.showItemDetails(item);}} > - - - - - - {item.name} - - - {item.quantity + ' ' + i18n.t('proximoScreen.inStock')} - - - - - {item.price}€ - - - } - /> - - - ); - } -} From fd7567568120462d1a3ad6c663fb7cbc4d3905a9 Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Fri, 15 Nov 2019 18:41:25 +0100 Subject: [PATCH 10/28] Auto focus search bar when clicking the search icon --- components/CustomHeader.js | 10 +++++++ screens/Proximo/ProximoListScreen.js | 8 +++-- screens/Proximo/ProximoMainScreen.js | 45 +++++++++++++++++++++++----- 3 files changed, 53 insertions(+), 10 deletions(-) diff --git a/components/CustomHeader.js b/components/CustomHeader.js index 583324a..0a6e4f9 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -13,6 +13,7 @@ type Props = { hasBackButton: boolean, hasSearchField: boolean, searchCallback: Function, + shouldFocusSearchBar: boolean, leftButton: React.Node, rightButton: React.Node, title: string, @@ -34,12 +35,20 @@ export default class CustomHeader extends React.Component { hasBackButton: false, hasSearchField: false, searchCallback: () => null, + shouldFocusSearchBar: false, title: '', leftButton: , rightButton: , hasTabs: false, }; + searchBarRef: Input; + + componentDidMount() { + if (this.searchBarRef !== undefined && this.props.shouldFocusSearchBar) + this.searchBarRef.focus(); + } + getSearchBar() { return ( { icon={'magnify'} color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/> this.searchBarRef = ref} placeholder={i18n.t('proximoScreen.search')} placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor} onChangeText={(text) => this.props.searchCallback(text)}/> diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 3280582..cea1dae 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -61,15 +61,18 @@ export default class ProximoListScreen extends React.Component { modalRef: { current: null | Modalize }; originalData: Array; + navData = this.props.navigation.getParam('data', []); + shouldFocusSearchBar = this.navData['shouldFocusSearchBar']; constructor(props: any) { super(props); this.modalRef = React.createRef(); - this.originalData = this.props.navigation.getParam('data', []); + this.originalData = this.navData['data']; + } state = { - currentlyDisplayedData: this.props.navigation.getParam('data', []).sort(sortPrice), + currentlyDisplayedData: this.navData['data'].sort(sortPrice), currentSortMode: sortMode.price, isSortReversed: false, sortPriceIcon: '', @@ -310,6 +313,7 @@ export default class ProximoListScreen extends React.Component { navigation={nav} hasSearchField={true} searchCallback={(text) => this.search(text)} + shouldFocusSearchBar={this.shouldFocusSearchBar} rightButton={this.getSortMenu()}/> diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index f04044f..6108348 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -101,25 +101,54 @@ export default class ProximoMainScreen extends FetchedDataSectionList { } getRightButton() { + let searchScreenData = { + shouldFocusSearchBar: true, + data: { + type: { + id: "0", + name: i18n.t('proximoScreen.all'), + icon: 'star' + }, + data: this.getAvailableArticles(this.state.fetchedData.articles, undefined) + }, + }; + + return ( - this.props.navigation.navigate('ProximoAboutScreen')}> - - + + this.props.navigation.navigate('ProximoListScreen', searchScreenData)}> + + + this.props.navigation.navigate('ProximoAboutScreen')}> + + + ); } getRenderItem(item: Object, section: Object, data: Object) { + let dataToSend = { + shouldFocusSearchBar: false, + data: item, + }; if (item.data.length > 0) { return ( { - this.props.navigation.navigate('ProximoListScreen', item); + this.props.navigation.navigate('ProximoListScreen', dataToSend); }} > From ab7e8f92fc9a8932b02e153e8f748a18a6859d14 Mon Sep 17 00:00:00 2001 From: keplyx Date: Fri, 15 Nov 2019 19:29:25 +0100 Subject: [PATCH 11/28] Fixed focusing on search bar not working --- components/CustomHeader.js | 14 ++++++++------ screens/Proximo/ProximoListScreen.js | 5 +---- screens/Proximo/ProximoMainScreen.js | 9 +++++---- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/components/CustomHeader.js b/components/CustomHeader.js index 0a6e4f9..837e8d6 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -1,7 +1,7 @@ // @flow import * as React from "react"; -import {Body, Header, Input, Item, Left, Right, Title} from "native-base"; +import {Body, Header, Input, Item, Left, Right, Title, Form} from "native-base"; import {Platform, StyleSheet, View} from "react-native"; import {getStatusBarHeight} from "react-native-status-bar-height"; import Touchable from 'react-native-platform-touchable'; @@ -42,15 +42,16 @@ export default class CustomHeader extends React.Component { hasTabs: false, }; - searchBarRef: Input; - componentDidMount() { - if (this.searchBarRef !== undefined && this.props.shouldFocusSearchBar) - this.searchBarRef.focus(); + if (this.refs.searchInput !== undefined && this.props.shouldFocusSearchBar) { + // does not work if called to early for some reason... + setInterval(() => this.refs.searchInput._root.focus(), 500); + } } getSearchBar() { return ( +
{ icon={'magnify'} color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/> this.searchBarRef = ref} + ref="searchInput" placeholder={i18n.t('proximoScreen.search')} placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor} onChangeText={(text) => this.props.searchCallback(text)}/> +
); } diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index cea1dae..7575f8c 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -45,7 +45,6 @@ type Props = { } type State = { - navData: Array, currentSortMode: string, isSortReversed: boolean, sortPriceIcon: React.Node, @@ -62,13 +61,12 @@ export default class ProximoListScreen extends React.Component { modalRef: { current: null | Modalize }; originalData: Array; navData = this.props.navigation.getParam('data', []); - shouldFocusSearchBar = this.navData['shouldFocusSearchBar']; + shouldFocusSearchBar = this.props.navigation.getParam('shouldFocusSearchBar', false); constructor(props: any) { super(props); this.modalRef = React.createRef(); this.originalData = this.navData['data']; - } state = { @@ -300,7 +298,6 @@ export default class ProximoListScreen extends React.Component { render() { const nav = this.props.navigation; const navType = nav.getParam('type', '{name: "Error"}'); - return ( , type: ?Object) { + getAvailableArticles(articles: Array, type: ?Object) { let availableArticles = []; for (let k = 0; k < articles.length; k++) { if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id']) @@ -109,7 +109,8 @@ export default class ProximoMainScreen extends FetchedDataSectionList { name: i18n.t('proximoScreen.all'), icon: 'star' }, - data: this.getAvailableArticles(this.state.fetchedData.articles, undefined) + data: this.state.fetchedData.articles !== undefined ? + this.getAvailableArticles(this.state.fetchedData.articles, undefined) : [] }, }; From 4cb0d2f8b5f8922e2d28ded1e3ecfe19a2e33dce Mon Sep 17 00:00:00 2001 From: keplyx Date: Fri, 15 Nov 2019 19:38:43 +0100 Subject: [PATCH 12/28] fixed focus repeating every 500ms --- components/CustomHeader.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/CustomHeader.js b/components/CustomHeader.js index 837e8d6..9ca3104 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -43,9 +43,9 @@ export default class CustomHeader extends React.Component { }; componentDidMount() { - if (this.refs.searchInput !== undefined && this.props.shouldFocusSearchBar) { + if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) { // does not work if called to early for some reason... - setInterval(() => this.refs.searchInput._root.focus(), 500); + setTimeout(() => this.refs.searchInput._root.focus(), 500); } } From 52729bee5348ec1bc33d76ca71842b68e90ac162 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sat, 16 Nov 2019 12:35:33 +0100 Subject: [PATCH 13/28] Fixed padding issues in header --- components/CustomHeader.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/CustomHeader.js b/components/CustomHeader.js index 9ca3104..7bf9669 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -51,7 +51,6 @@ export default class CustomHeader extends React.Component { getSearchBar() { return ( -
{ placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor} onChangeText={(text) => this.props.searchCallback(text)}/> -
); } @@ -94,7 +92,9 @@ export default class CustomHeader extends React.Component { {this.props.hasSearchField ? this.getSearchBar() : - {this.props.title}} + {this.props.title}} {this.props.rightButton} From 4780b838ab9ef929a5a8ce6dbfcf888d4846bccc Mon Sep 17 00:00:00 2001 From: keplyx Date: Sat, 16 Nov 2019 12:55:47 +0100 Subject: [PATCH 14/28] Added Yohan to dev list --- screens/About/AboutScreen.js | 64 +++++++++++++++++++++++++++++++----- screens/SettingsScreen.js | 1 - translations/en.json | 4 ++- translations/fr.json | 4 ++- 4 files changed, 61 insertions(+), 12 deletions(-) diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 1b5c08d..5163271 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -28,13 +28,18 @@ const links = { bugsGit: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/issues', changelog: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md', license: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE', - mail: "mailto:vergnet@etud.insa-toulouse.fr?" + + authorMail: "mailto:vergnet@etud.insa-toulouse.fr?" + "subject=" + "Application Amicale INSA Toulouse" + "&body=" + "Coucou !\n\n", - linkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/', - facebook: 'https://www.facebook.com/arnaud.vergnet', + authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/', + yohanMail: "mailto:TODO@etud.insa-toulouse.fr?" + // TODO set real email + "subject=" + + "Application Amicale INSA Toulouse" + + "&body=" + + "Coucou !\n\n", + yohanLinkedin: 'https://www.linkedin.com/in/', // TODO set real link react: 'https://facebook.github.io/react-native/', }; @@ -125,21 +130,39 @@ export default class AboutScreen extends React.Component { showChevron: false }, { - onPressCallback: () => openWebLink(links.mail), + onPressCallback: () => openWebLink(links.authorMail), icon: 'email', - text: i18n.t('aboutScreen.mail'), + text: i18n.t('aboutScreen.authorMail'), showChevron: true }, { - onPressCallback: () => openWebLink(links.linkedin), + onPressCallback: () => openWebLink(links.authorLinkedin), icon: 'linkedin', text: 'Linkedin', showChevron: true }, + ]; + + /** + * Data to be displayed in the additional developer card + */ + additionalDevData: Array = [ { - onPressCallback: () => openWebLink(links.facebook), - icon: 'facebook', - text: 'Facebook', + onPressCallback: () => console.log('Meme this'), + icon: 'account', + text: 'Yohan SIMARD', + showChevron: false + }, + { + onPressCallback: () => openWebLink(links.yohanMail), + icon: 'email', + text: i18n.t('aboutScreen.authorMail'), + showChevron: true + }, + { + onPressCallback: () => openWebLink(links.yohanLinkedin), + icon: 'linkedin', + text: 'Linkedin', showChevron: true }, ]; @@ -291,6 +314,18 @@ export default class AboutScreen extends React.Component { + + + + +

{i18n.t('aboutScreen.team')}

+ + + {i18n.t('aboutScreen.author')} @@ -302,6 +337,17 @@ export default class AboutScreen extends React.Component { this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug) } /> + + {i18n.t('aboutScreen.additionalDev')} + + item.icon} + renderItem={({item}) => + this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug) + } + /> diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 87b4949..89e9a12 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -140,7 +140,6 @@ export default class SettingsScreen extends React.Component { actions: [NavigationActions.navigate({routeName: 'Main'})], }); this.props.navigation.dispatch(resetAction); - // this.props.navigation.navigate('SettingsScreen'); } /** diff --git a/translations/en.json b/translations/en.json index cff5cba..406b29a 100644 --- a/translations/en.json +++ b/translations/en.json @@ -110,8 +110,10 @@ "changelog": "Changelog", "license": "License", "debug": "Debug", + "team": "Team", "author": "Author", - "mail": "Send an email", + "authorMail": "Send an email", + "additionalDev": "Additional developer", "technologies": "Technologies", "reactNative": "Made with React Native", "libs": "Libraries used" diff --git a/translations/fr.json b/translations/fr.json index 78c47a9..44a5868 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -110,8 +110,10 @@ "changelog": "Historique des modifications", "license": "Licence", "debug": "Debug", + "team": "Équipe", "author": "Auteur", - "mail": "Envoyer un mail", + "authorMail": "Envoyer un mail", + "additionalDev": "Développeur additionnel", "technologies": "Technologies", "reactNative": "Créé avec React Native", "libs": "Librairies utilisées" From e6e4e9f8224c94c8f0f6eaa61aa750f34aa320d7 Mon Sep 17 00:00:00 2001 From: Yohan Simard Date: Sat, 16 Nov 2019 13:19:28 +0100 Subject: [PATCH 15/28] Added email and linkedin --- screens/About/AboutScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 5163271..701bc9a 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -34,12 +34,12 @@ const links = { "&body=" + "Coucou !\n\n", authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/', - yohanMail: "mailto:TODO@etud.insa-toulouse.fr?" + // TODO set real email + yohanMail: "mailto:ysimard@etud.insa-toulouse.fr?" + "subject=" + "Application Amicale INSA Toulouse" + "&body=" + "Coucou !\n\n", - yohanLinkedin: 'https://www.linkedin.com/in/', // TODO set real link + yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard', // TODO set real link react: 'https://facebook.github.io/react-native/', }; From a1a0e0b7f01e6760247a74bba1621deade613801 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 26 Jan 2020 17:51:15 +0100 Subject: [PATCH 16/28] Updated expo and other libs to newer version --- App.js | 9 ++++---- app.json | 2 +- clear-node-cache.sh | 1 + navigation/MainTabNavigator.js | 12 ++++++---- package.json | 34 +++++++++++++++------------- screens/About/AboutScreen.js | 2 +- screens/DebugScreen.js | 2 +- screens/PlanningScreen.js | 2 +- screens/Proximo/ProximoListScreen.js | 2 +- 9 files changed, 35 insertions(+), 31 deletions(-) create mode 100755 clear-node-cache.sh diff --git a/App.js b/App.js index 7942001..9644f2d 100644 --- a/App.js +++ b/App.js @@ -1,15 +1,12 @@ // @flow import * as React from 'react'; -import {StatusBar, Platform } from 'react-native'; +import {StatusBar, Platform} from 'react-native'; import {Root, StyleProvider} from 'native-base'; import {createAppContainerWithInitialRoute} from './navigation/AppNavigator'; import ThemeManager from './utils/ThemeManager'; import LocaleManager from './utils/LocaleManager'; import * as Font from 'expo-font'; -// edited native-base-shoutem-theme according to -// https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422 -// to allow for dynamic theme switching import {clearThemeCache} from 'native-base-shoutem-theme'; import AsyncStorageManager from "./utils/AsyncStorageManager"; import CustomIntroSlider from "./components/CustomIntroSlider"; @@ -81,6 +78,7 @@ export default class App extends React.Component { await Font.loadAsync({ 'Roboto': require('native-base/Fonts/Roboto.ttf'), 'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'), + 'material-community': require('native-base/Fonts/MaterialCommunityIcons.ttf'), }); await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); @@ -118,7 +116,8 @@ export default class App extends React.Component { ); } if (this.state.showIntro || this.state.showUpdate) { - return this.onIntroDone()} isUpdate={this.state.showUpdate && !this.state.showIntro}/>; + return this.onIntroDone()} + isUpdate={this.state.showUpdate && !this.state.showIntro}/>; } else { const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current); return ( diff --git a/app.json b/app.json index c7402a8..ff728d8 100644 --- a/app.json +++ b/app.json @@ -4,7 +4,7 @@ "description": "Application mobile compatible Android et iOS pour l'Amicale INSA Toulouse. Grâce à cette application, vous avez facilement accès aux news du campus, aux emplois du temps, à l'état de la laverie, et bien d'autres services ! Ceci est une version Beta, Toutes les fonctionnalités ne sont pas encore implémentées, et il est possible de rencontrer quelques bugs.", "slug": "application-amicale", "privacy": "public", - "sdkVersion": "33.0.0", + "sdkVersion": "36.0.0", "platforms": [ "ios", "android", diff --git a/clear-node-cache.sh b/clear-node-cache.sh new file mode 100755 index 0000000..c9bd8af --- /dev/null +++ b/clear-node-cache.sh @@ -0,0 +1 @@ +rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index 04f725f..33ec229 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -26,18 +26,20 @@ function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string) Proximo: {screen: ProximoMainScreen,}, Planex: { screen: PlanexScreen, - navigationOptions: ({ navigation }) => { + navigationOptions: ({navigation}) => { const showTabBar = navigation.state && navigation.state.params ? navigation.state.params.showTabBar : true; return { tabBarVisible: showTabBar, }; - },}, + }, + }, }, { defaultNavigationOptions: ({navigation}) => ({ - tabBarIcon: ({focused, horizontal, tintColor}) => { + tabBarIcon: ({focused, tintColor}) => { let icon = TAB_ICONS[navigation.state.routeName]; - - return ; + // tintColor is ignoring activeColor et inactiveColor for some reason + let color = focused ? "#f0edf6" : "#4e1108"; + return ; }, tabBarVisible: true, }), diff --git a/package.json b/package.json index 2122e9e..07f21c2 100644 --- a/package.json +++ b/package.json @@ -8,38 +8,40 @@ "eject": "expo eject" }, "dependencies": { - "@expo/vector-icons": "^10.0.2", + "@expo/vector-icons": "^10.0.0", "@react-native-community/status-bar": "^1.0.3", "@shoutem/theme": "^0.11.3", - "expo": "^33.0.7", - "expo-font": "^5.0.1", - "expo-linear-gradient": "^5.0.1", - "expo-localization": "^5.0.1", - "expo-permissions": "^5.0.1", + "expo": "^36.0.0", + "expo-font": "~8.0.0", + "expo-linear-gradient": "~8.0.0", + "expo-localization": "~8.0.0", + "expo-permissions": "~8.0.0", "i18n-js": "^3.3.0", "native-base": "^2.12.1", - "native-base-shoutem-theme": "^0.2.3", - "react": "^16.8.6", - "react-dom": "^16.8.6", - "react-native": "^0.59.9", + "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", "react-native-app-intro-slider": "^3.0.0", "react-native-autolink": "^1.8.1", "react-native-calendars": "^1.212.0", + "react-native-gesture-handler": "~1.5.0", + "react-native-material-menu": "^0.6.7", "react-native-modal": "^11.3.1", - "react-native-modalize": "^1.2.1", + "react-native-modalize": "^1.3.6", "react-native-paper": "^2.16.0", "react-native-platform-touchable": "^1.1.1", + "react-native-reanimated": "~1.4.0", "react-native-render-html": "^4.1.2", "react-native-side-menu": "^1.1.3", "react-native-status-bar-height": "^2.3.1", - "react-native-webview": "^5.8.1", - "react-navigation": "^3.11.0", - "react-navigation-material-bottom-tabs": "^1.0.0", + "react-native-webview": "7.4.3", + "react-navigation": "^3.13.0", + "react-navigation-material-bottom-tabs": "^1.1.1", "react-navigation-transitions": "^1.0.12" }, "devDependencies": { - "babel-preset-expo": "^5.1.1", - "react-native-material-menu": "^0.6.3" + "babel-preset-expo": "^8.0.0" }, "private": true } diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 701bc9a..0c361ca 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -9,7 +9,7 @@ import appJson from '../../app'; import packageJson from '../../package'; import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; -import Modalize from "react-native-modalize"; +import {Modalize} from "react-native-modalize"; import ThemeManager from "../../utils/ThemeManager"; const links = { diff --git a/screens/DebugScreen.js b/screens/DebugScreen.js index 0e73ba7..f5c1347 100644 --- a/screens/DebugScreen.js +++ b/screens/DebugScreen.js @@ -28,7 +28,7 @@ import Touchable from "react-native-platform-touchable"; import {Alert, View, Clipboard, Image} from "react-native"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; -import Modalize from "react-native-modalize"; +import {Modalize} from "react-native-modalize"; type Props = { navigation: Object, diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index 132ad97..3d936f5 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -11,7 +11,7 @@ import BaseContainer from "../components/BaseContainer"; import {Agenda, LocaleConfig} from 'react-native-calendars'; import HTML from 'react-native-render-html'; import Touchable from 'react-native-platform-touchable'; -import Modalize from 'react-native-modalize'; +import {Modalize} from 'react-native-modalize'; import WebDataManager from "../utils/WebDataManager"; import CustomMaterialIcon from "../components/CustomMaterialIcon"; diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 7575f8c..09918a6 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -9,7 +9,7 @@ import Menu, {MenuItem} from 'react-native-material-menu'; import i18n from "i18n-js"; import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import ThemeManager from "../../utils/ThemeManager"; -import Modalize from 'react-native-modalize'; +import {Modalize} from 'react-native-modalize'; const sortMode = { price: "0", From de5beb4b86ea12e894d9017a22a009bc0456b408 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 26 Jan 2020 19:27:20 +0100 Subject: [PATCH 17/28] Fixed warnings and removed unnecessary dependencies --- components/Sidebar.js | 5 -- package.json | 4 -- screens/Proximo/ProximoListScreen.js | 71 ++++++++++++++-------------- 3 files changed, 35 insertions(+), 45 deletions(-) diff --git a/components/Sidebar.js b/components/Sidebar.js index b0cd428..c7036dd 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -79,10 +79,6 @@ export default class SideBar extends React.Component { render() { return ( - { } } /> - ); } diff --git a/package.json b/package.json index 07f21c2..e9e01c3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "dependencies": { "@expo/vector-icons": "^10.0.0", "@react-native-community/status-bar": "^1.0.3", - "@shoutem/theme": "^0.11.3", "expo": "^36.0.0", "expo-font": "~8.0.0", "expo-linear-gradient": "~8.0.0", @@ -27,11 +26,8 @@ "react-native-calendars": "^1.212.0", "react-native-gesture-handler": "~1.5.0", "react-native-material-menu": "^0.6.7", - "react-native-modal": "^11.3.1", "react-native-modalize": "^1.3.6", - "react-native-paper": "^2.16.0", "react-native-platform-touchable": "^1.1.1", - "react-native-reanimated": "~1.4.0", "react-native-render-html": "^4.1.2", "react-native-side-menu": "^1.1.3", "react-native-status-bar-height": "^2.3.1", diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 09918a6..e505c76 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -311,43 +311,42 @@ export default class ProximoListScreen extends React.Component { hasSearchField={true} searchCallback={(text) => this.search(text)} shouldFocusSearchBar={this.shouldFocusSearchBar} - rightButton={this.getSortMenu()}/> + rightButton={this.getSortMenu()} + /> - - item.name + item.code} - style={{minHeight: 300, width: '100%'}} - renderItem={({item}) => - { - this.showItemDetails(item); - }} - > - - - - - - {item.name} - - - {item.quantity + ' ' + i18n.t('proximoScreen.inStock')} - - - - - {item.price}€ - - - } - /> - + item.name + item.code} + style={{minHeight: 300, width: '100%'}} + renderItem={({item}) => + { + this.showItemDetails(item); + }} + > + + + + + + {item.name} + + + {item.quantity + ' ' + i18n.t('proximoScreen.inStock')} + + + + + {item.price}€ + + + } + /> ); } From 3916d2d2d19277c5ab4cf864b4192f97764d5fe4 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 26 Jan 2020 23:04:07 +0100 Subject: [PATCH 18/28] Increased version number --- app.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.json b/app.json index ff728d8..422034d 100644 --- a/app.json +++ b/app.json @@ -10,7 +10,7 @@ "android", "web" ], - "version": "1.3.1", + "version": "1.3.2", "orientation": "portrait", "primaryColor": "#be1522", "icon": "./assets/android.icon.png", From a3f01a483f49fd5a986510940910748288abaa9b Mon Sep 17 00:00:00 2001 From: keplyx Date: Mon, 27 Jan 2020 22:45:22 +0100 Subject: [PATCH 19/28] Improved injected css --- screens/PlanexScreen.js | 52 ++++++++++++++++++++++++++--------------- 1 file changed, 33 insertions(+), 19 deletions(-) diff --git a/screens/PlanexScreen.js b/screens/PlanexScreen.js index a0e29a5..434e1d9 100644 --- a/screens/PlanexScreen.js +++ b/screens/PlanexScreen.js @@ -15,27 +15,42 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/'; const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile2.css'; const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css'; -// Remove transparency to planex items to prevent invisible items -const REMOVE_ALPHA_FUNCTION_INJECTED = - 'function removeAlpha() {' + - ' $(".fc-event-container .fc-event").each(function(index) {' + - ' let bg = $(this).css("background-color");' + - ' if (bg.match("^rgba")) {' + - ' let a = bg.slice(5).split(\',\');' + - ' let newBg = \'rgb(\' + a[0] + \',\' + parseInt(a[1]) + \',\' + parseInt(a[2]) + \')\';' + - ' $(this).css("background-color", newBg);' + - ' };' + - ' });' + - '}'; +// JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing +// function removeAlpha(node) { +// console.log(node); +// let bg = node.css("background-color"); +// if (bg.match("^rgba")) { +// let a = bg.slice(5).split(','); +// let newBg ='rgb(' + a[0] + ',' + parseInt(a[1]) + ',' + parseInt(a[2]) + ')'; +// node.css("background-color", newBg); +// } +// } +// let observer = new MutationObserver(function(mutations) { +// for (let i = 0; i < mutations.length; i++) { +// if (mutations[i]['addedNodes'].length > 0 && $(mutations[i]['addedNodes'][0]).hasClass("fc-event")) +// removeAlpha($(mutations[i]['addedNodes'][0])) +// } +// }); +// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true}); // Watch for changes in the calendar and call the remove alpha function const OBSERVE_MUTATIONS_INJECTED = - 'let observer = new MutationObserver(function(mutations) {' + - ' removeAlpha();' + - '});' + - 'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});'; - - + 'function removeAlpha(node) {\n' + + ' console.log(node);\n' + + ' let bg = node.css("background-color");\n' + + ' if (bg.match("^rgba")) {\n' + + ' let a = bg.slice(5).split(\',\');\n' + + ' let newBg =\'rgb(\' + a[0] + \',\' + parseInt(a[1]) + \',\' + parseInt(a[2]) + \')\';\n' + + ' node.css("background-color", newBg);\n' + + ' }\n' + + '}' + + 'let observer = new MutationObserver(function(mutations) {\n' + + ' for (let i = 0; i < mutations.length; i++) {\n' + + ' if (mutations[i][\'addedNodes\'].length > 0 && $(mutations[i][\'addedNodes\'][0]).hasClass("fc-event"))\n' + + ' removeAlpha($(mutations[i][\'addedNodes\'][0]))\n' + + ' }\n' + + '});\n' + + 'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n'; /** * Class defining the app's planex screen. * This screen uses a webview to render the planex page @@ -48,7 +63,6 @@ export default class PlanexScreen extends React.Component { super(); this.customInjectedJS = '$(document).ready(function() {' + - REMOVE_ALPHA_FUNCTION_INJECTED + OBSERVE_MUTATIONS_INJECTED + '$("head").append(\'\');' + '$("head").append(\'\');'; From 35acbff1cf4655cbbbd4050a67691365e23fe250 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 28 Jan 2020 10:43:11 +0100 Subject: [PATCH 20/28] Fixed injected css not working when injected too late --- screens/PlanexScreen.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/screens/PlanexScreen.js b/screens/PlanexScreen.js index 434e1d9..227e006 100644 --- a/screens/PlanexScreen.js +++ b/screens/PlanexScreen.js @@ -15,7 +15,8 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/'; const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile2.css'; const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css'; -// JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing +// // JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing +// // Remove alpha from given Jquery node // function removeAlpha(node) { // console.log(node); // let bg = node.css("background-color"); @@ -25,6 +26,7 @@ const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_ // node.css("background-color", newBg); // } // } +// // Observe for planning DOM changes // let observer = new MutationObserver(function(mutations) { // for (let i = 0; i < mutations.length; i++) { // if (mutations[i]['addedNodes'].length > 0 && $(mutations[i]['addedNodes'][0]).hasClass("fc-event")) @@ -32,6 +34,10 @@ const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_ // } // }); // observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true}); +// // Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded. +// $(".fc-event-container .fc-event").each(function(index) { +// removeAlpha($(this)); +// }); // Watch for changes in the calendar and call the remove alpha function const OBSERVE_MUTATIONS_INJECTED = @@ -50,7 +56,10 @@ const OBSERVE_MUTATIONS_INJECTED = ' removeAlpha($(mutations[i][\'addedNodes\'][0]))\n' + ' }\n' + '});\n' + - 'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n'; + 'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' + + '$(".fc-event-container .fc-event").each(function(index) {\n' + + ' removeAlpha($(this));\n' + + '});'; /** * Class defining the app's planex screen. * This screen uses a webview to render the planex page From 5ba63da3d4b2b15701b6302b7760978cef15d966 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 28 Jan 2020 20:07:21 +0100 Subject: [PATCH 21/28] Updated native base theme --- native-base-theme/components/Badge.js | 33 +- native-base-theme/components/Body.js | 6 +- native-base-theme/components/Button.js | 340 +++++----- native-base-theme/components/Card.js | 14 +- native-base-theme/components/CardItem.js | 136 ++-- native-base-theme/components/CheckBox.js | 20 +- native-base-theme/components/Container.js | 11 +- native-base-theme/components/Content.js | 10 +- native-base-theme/components/Fab.js | 28 +- native-base-theme/components/Footer.js | 69 +- native-base-theme/components/FooterTab.js | 52 +- native-base-theme/components/Form.js | 56 +- native-base-theme/components/H1.js | 6 +- native-base-theme/components/H2.js | 6 +- native-base-theme/components/H3.js | 4 +- native-base-theme/components/Header.js | 323 +++++---- native-base-theme/components/Icon.js | 6 +- native-base-theme/components/Input.js | 4 +- native-base-theme/components/InputGroup.js | 68 +- native-base-theme/components/Item.js | 143 ++-- native-base-theme/components/Label.js | 6 +- native-base-theme/components/Left.js | 6 +- native-base-theme/components/ListItem.js | 324 ++++----- .../components/Picker.android.js | 8 +- native-base-theme/components/Picker.ios.js | 4 +- native-base-theme/components/Picker.js | 8 +- native-base-theme/components/Radio.js | 35 +- native-base-theme/components/Right.js | 8 +- native-base-theme/components/Segment.js | 37 +- native-base-theme/components/Separator.js | 20 +- native-base-theme/components/Spinner.js | 4 +- native-base-theme/components/Subtitle.js | 13 +- native-base-theme/components/SwipeRow.js | 52 +- native-base-theme/components/Switch.js | 6 +- native-base-theme/components/Tab.js | 6 +- native-base-theme/components/TabBar.js | 44 +- native-base-theme/components/TabContainer.js | 26 +- native-base-theme/components/TabHeading.js | 31 +- native-base-theme/components/Text.js | 8 +- native-base-theme/components/Textarea.js | 10 +- native-base-theme/components/Thumbnail.js | 20 +- native-base-theme/components/Title.js | 15 +- native-base-theme/components/Toast.js | 31 +- native-base-theme/components/View.js | 6 +- native-base-theme/components/index.js | 197 +++--- native-base-theme/variables/commonColor.js | 270 ++++---- native-base-theme/variables/material.js | 221 +++--- native-base-theme/variables/platform.js | 640 ++++++++++-------- native-base-theme/variables/platformDark.js | 640 ++++++++++-------- 49 files changed, 2092 insertions(+), 1939 deletions(-) diff --git a/native-base-theme/components/Badge.js b/native-base-theme/components/Badge.js index b164a6c..8a38fc0 100644 --- a/native-base-theme/components/Badge.js +++ b/native-base-theme/components/Badge.js @@ -1,36 +1,37 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const badgeTheme = { - ".primary": { - backgroundColor: variables.btnPrimaryBg + '.primary': { + backgroundColor: variables.buttonPrimaryBg }, - ".warning": { - backgroundColor: variables.btnWarningBg + '.warning': { + backgroundColor: variables.buttonWarningBg }, - ".info": { - backgroundColor: variables.btnInfoBg + '.info': { + backgroundColor: variables.buttonInfoBg }, - ".success": { - backgroundColor: variables.btnSuccessBg + '.success': { + backgroundColor: variables.buttonSuccessBg }, - ".danger": { - backgroundColor: variables.btnDangerBg + '.danger': { + backgroundColor: variables.buttonDangerBg }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.badgeColor, fontSize: variables.fontSizeBase, lineHeight: variables.lineHeight - 1, - textAlign: "center", + textAlign: 'center', paddingHorizontal: 3 }, backgroundColor: variables.badgeBg, padding: variables.badgePadding, paddingHorizontal: 6, - alignSelf: "flex-start", - justifyContent: variables.platform === "ios" ? "center" : undefined, + alignSelf: 'flex-start', + justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined, borderRadius: 13.5, height: 27 }; diff --git a/native-base-theme/components/Body.js b/native-base-theme/components/Body.js index 0f85f4a..6de0c88 100644 --- a/native-base-theme/components/Body.js +++ b/native-base-theme/components/Body.js @@ -1,12 +1,10 @@ // @flow -import variable from './../variables/platform'; - -export default (variables /*: * */ = variable) => { +export default () => { const bodyTheme = { flex: 1, alignItems: 'center', - alignSelf: 'center', + alignSelf: 'center' }; return bodyTheme; diff --git a/native-base-theme/components/Button.js b/native-base-theme/components/Button.js index c373fdc..507b6ec 100644 --- a/native-base-theme/components/Button.js +++ b/native-base-theme/components/Button.js @@ -1,158 +1,159 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const platformStyle = variables.platformStyle; const platform = variables.platform; const darkCommon = { - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.brandDark }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.brandDark }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.brandDark } }; const lightCommon = { - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.brandLight }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.brandLight }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.brandLight } }; const primaryCommon = { - "NativeBase.Text": { - color: variables.btnPrimaryBg + 'NativeBase.Text': { + color: variables.buttonPrimaryBg }, - "NativeBase.Icon": { - color: variables.btnPrimaryBg + 'NativeBase.Icon': { + color: variables.buttonPrimaryBg }, - "NativeBase.IconNB": { - color: variables.btnPrimaryBg + 'NativeBase.IconNB': { + color: variables.buttonPrimaryBg } }; const successCommon = { - "NativeBase.Text": { - color: variables.btnSuccessBg + 'NativeBase.Text': { + color: variables.buttonSuccessBg }, - "NativeBase.Icon": { - color: variables.btnSuccessBg + 'NativeBase.Icon': { + color: variables.buttonSuccessBg }, - "NativeBase.IconNB": { - color: variables.btnSuccessBg + 'NativeBase.IconNB': { + color: variables.buttonSuccessBg } }; const infoCommon = { - "NativeBase.Text": { - color: variables.btnInfoBg + 'NativeBase.Text': { + color: variables.buttonInfoBg }, - "NativeBase.Icon": { - color: variables.btnInfoBg + 'NativeBase.Icon': { + color: variables.buttonInfoBg }, - "NativeBase.IconNB": { - color: variables.btnInfoBg + 'NativeBase.IconNB': { + color: variables.buttonInfoBg } }; const warningCommon = { - "NativeBase.Text": { - color: variables.btnWarningBg + 'NativeBase.Text': { + color: variables.buttonWarningBg }, - "NativeBase.Icon": { - color: variables.btnWarningBg + 'NativeBase.Icon': { + color: variables.buttonWarningBg }, - "NativeBase.IconNB": { - color: variables.btnWarningBg + 'NativeBase.IconNB': { + color: variables.buttonWarningBg } }; const dangerCommon = { - "NativeBase.Text": { - color: variables.btnDangerBg + 'NativeBase.Text': { + color: variables.buttonDangerBg }, - "NativeBase.Icon": { - color: variables.btnDangerBg + 'NativeBase.Icon': { + color: variables.buttonDangerBg }, - "NativeBase.IconNB": { - color: variables.btnDangerBg + 'NativeBase.IconNB': { + color: variables.buttonDangerBg } }; const buttonTheme = { - ".disabled": { - ".transparent": { - backgroundColor: null, - "NativeBase.Text": { - color: variables.btnDisabledBg + '.disabled': { + '.transparent': { + backgroundColor: 'transparent', + 'NativeBase.Text': { + color: variables.buttonDisabledBg }, - "NativeBase.Icon": { - color: variables.btnDisabledBg + 'NativeBase.Icon': { + color: variables.buttonDisabledBg }, - "NativeBase.IconNB": { - color: variables.btnDisabledBg + 'NativeBase.IconNB': { + color: variables.buttonDisabledBg } }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.brandLight }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.brandLight }, - backgroundColor: variables.btnDisabledBg + backgroundColor: variables.buttonDisabledBg }, - ".bordered": { - ".dark": { + '.bordered': { + '.dark': { ...darkCommon, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: variables.brandDark, borderWidth: variables.borderWidth * 2 }, - ".light": { + '.light': { ...lightCommon, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: variables.brandLight, borderWidth: variables.borderWidth * 2 }, - ".primary": { + '.primary': { ...primaryCommon, - backgroundColor: "transparent", - borderColor: variables.btnPrimaryBg, + backgroundColor: 'transparent', + borderColor: variables.buttonPrimaryBg, borderWidth: variables.borderWidth * 2 }, - ".success": { + '.success': { ...successCommon, - backgroundColor: "transparent", - borderColor: variables.btnSuccessBg, + backgroundColor: 'transparent', + borderColor: variables.buttonSuccessBg, borderWidth: variables.borderWidth * 2 }, - ".info": { + '.info': { ...infoCommon, - backgroundColor: "transparent", - borderColor: variables.btnInfoBg, + backgroundColor: 'transparent', + borderColor: variables.buttonInfoBg, borderWidth: variables.borderWidth * 2 }, - ".warning": { + '.warning': { ...warningCommon, - backgroundColor: "transparent", - borderColor: variables.btnWarningBg, + backgroundColor: 'transparent', + borderColor: variables.buttonWarningBg, borderWidth: variables.borderWidth * 2 }, - ".danger": { + '.danger': { ...dangerCommon, - backgroundColor: "transparent", - borderColor: variables.btnDangerBg, + backgroundColor: 'transparent', + borderColor: variables.buttonDangerBg, borderWidth: variables.borderWidth * 2 }, - ".disabled": { - backgroundColor: null, - borderColor: variables.btnDisabledBg, + '.disabled': { + backgroundColor: 'transparent', + borderColor: variables.buttonDisabledBg, borderWidth: variables.borderWidth * 2, - "NativeBase.Text": { - color: variables.btnDisabledBg + 'NativeBase.Text': { + color: variables.buttonDisabledBg } }, ...primaryCommon, @@ -162,235 +163,224 @@ export default (variables /*: * */ = variable) => { shadowOffset: null, shadowOpacity: null, shadowRadius: null, - backgroundColor: "transparent" + backgroundColor: 'transparent' }, - ".dark": { - ".bordered": { + '.dark': { + '.bordered': { ...darkCommon }, backgroundColor: variables.brandDark }, - ".light": { - ".transparent": { + '.light': { + '.transparent': { ...lightCommon, - backgroundColor: null + backgroundColor: 'transparent' }, - ".bordered": { + '.bordered': { ...lightCommon }, ...darkCommon, backgroundColor: variables.brandLight }, - ".primary": { - ".bordered": { + '.primary': { + '.bordered': { ...primaryCommon }, - backgroundColor: variables.btnPrimaryBg + backgroundColor: variables.buttonPrimaryBg }, - ".success": { - ".bordered": { + '.success': { + '.bordered': { ...successCommon }, - backgroundColor: variables.btnSuccessBg + backgroundColor: variables.buttonSuccessBg }, - ".info": { - ".bordered": { + '.info': { + '.bordered': { ...infoCommon }, - backgroundColor: variables.btnInfoBg + backgroundColor: variables.buttonInfoBg }, - ".warning": { - ".bordered": { + '.warning': { + '.bordered': { ...warningCommon }, - backgroundColor: variables.btnWarningBg + backgroundColor: variables.buttonWarningBg }, - ".danger": { - ".bordered": { + '.danger': { + '.bordered': { ...dangerCommon }, - backgroundColor: variables.btnDangerBg + backgroundColor: variables.buttonDangerBg }, - ".block": { - justifyContent: "center", - alignSelf: "stretch" + '.block': { + justifyContent: 'center', + alignSelf: 'stretch' }, - ".full": { - justifyContent: "center", - alignSelf: "stretch", + '.full': { + justifyContent: 'center', + alignSelf: 'stretch', borderRadius: 0 }, - ".rounded": { - // paddingHorizontal: variables.buttonPadding + 20, + '.rounded': { borderRadius: variables.borderRadiusLarge }, - ".transparent": { - backgroundColor: "transparent", + '.transparent': { + backgroundColor: 'transparent', elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null, ...primaryCommon, - ".dark": { + '.dark': { ...darkCommon, - backgroundColor: null }, - ".danger": { + '.danger': { ...dangerCommon, - backgroundColor: null }, - ".warning": { + '.warning': { ...warningCommon, - backgroundColor: null }, - ".info": { + '.info': { ...infoCommon, - backgroundColor: null }, - ".primary": { + '.primary': { ...primaryCommon, - backgroundColor: null }, - ".success": { + '.success': { ...successCommon, - backgroundColor: null }, - ".light": { + '.light': { ...lightCommon, - backgroundColor: null }, - ".disabled": { - backgroundColor: "transparent", - borderColor: variables.btnDisabledBg, + '.disabled': { + backgroundColor: 'transparent', + borderColor: variables.buttonDisabledBg, borderWidth: variables.borderWidth * 2, - "NativeBase.Text": { - color: variables.btnDisabledBg + 'NativeBase.Text': { + color: variables.buttonDisabledBg }, - "NativeBase.Icon": { - color: variables.btnDisabledBg + 'NativeBase.Icon': { + color: variables.buttonDisabledBg }, - "NativeBase.IconNB": { - color: variables.btnDisabledBg + 'NativeBase.IconNB': { + color: variables.buttonDisabledBg } } }, - ".small": { + '.small': { height: 30, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: 14 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: 20, paddingTop: 0 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: 20, paddingTop: 0 } }, - ".large": { + '.large': { height: 60, - "NativeBase.Text": { - fontSize: 22, + 'NativeBase.Text': { + fontSize: 22 } }, - ".capitalize": {}, + '.capitalize': {}, - ".vertical": { - flexDirection: "column", + '.vertical': { + flexDirection: 'column', height: null }, - "NativeBase.Text": { - fontFamily: variables.btnFontFamily, + 'NativeBase.Text': { + fontFamily: variables.buttonFontFamily, marginLeft: 0, marginRight: 0, - color: variables.btnTextColor, - fontSize: variables.btnTextSize, + color: variables.buttonTextColor, + fontSize: variables.buttonTextSize, paddingHorizontal: 16, - backgroundColor: "transparent" - // childPosition: 1 + backgroundColor: 'transparent' }, - "NativeBase.Icon": { - color: variables.btnTextColor, + 'NativeBase.Icon': { + color: variables.buttonTextColor, fontSize: 24, marginHorizontal: 16, - paddingTop: platform === "ios" ? 2 : undefined + paddingTop: platform === PLATFORM.IOS ? 2 : undefined }, - "NativeBase.IconNB": { - color: variables.btnTextColor, + 'NativeBase.IconNB': { + color: variables.buttonTextColor, fontSize: 24, marginHorizontal: 16, - paddingTop: platform === "ios" ? 2 : undefined + paddingTop: platform === PLATFORM.IOS ? 2 : undefined }, - ".iconLeft": { - "NativeBase.Text": { + '.iconLeft': { + 'NativeBase.Text': { marginLeft: 0 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { marginRight: 0, marginLeft: 16 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginRight: 0, marginLeft: 16 } }, - ".iconRight": { - "NativeBase.Text": { + '.iconRight': { + 'NativeBase.Text': { marginRight: 0 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { marginLeft: 0, marginRight: 16 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginLeft: 0, marginRight: 16 } }, - ".picker": { - "NativeBase.Text": { - ".note": { + '.picker': { + 'NativeBase.Text': { + '.note': { fontSize: 16, lineHeight: null } } }, - paddingVertical: variables.buttonPadding, - // paddingHorizontal: variables.buttonPadding + 10, - backgroundColor: variables.btnPrimaryBg, + backgroundColor: variables.buttonPrimaryBg, borderRadius: variables.borderRadiusBase, - borderColor: variables.btnPrimaryBg, + borderColor: variables.buttonPrimaryBg, borderWidth: null, height: 45, - alignSelf: "flex-start", - flexDirection: "row", + flexDirection: 'row', elevation: 2, - shadowColor: platformStyle === "material" ? variables.brandDark : undefined, + shadowColor: + platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined, shadowOffset: - platformStyle === "material" ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === "material" ? 0.2 : undefined, - shadowRadius: platformStyle === "material" ? 1.2 : undefined, - alignItems: "center", - justifyContent: "space-between" + 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; }; diff --git a/native-base-theme/components/Card.js b/native-base-theme/components/Card.js index f917e20..de4f9f4 100644 --- a/native-base-theme/components/Card.js +++ b/native-base-theme/components/Card.js @@ -1,19 +1,19 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const cardTheme = { - ".transparent": { + '.transparent': { shadowColor: null, shadowOffset: null, shadowOpacity: null, shadowRadius: null, elevation: null, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderWidth: 0 }, - ".noShadow": { + '.noShadow': { shadowColor: null, shadowOffset: null, shadowOpacity: null, @@ -24,9 +24,9 @@ export default (variables /*: * */ = variable) => { borderWidth: variables.borderWidth, borderRadius: variables.cardBorderRadius, borderColor: variables.cardBorderColor, - flexWrap: "nowrap", + flexWrap: 'nowrap', backgroundColor: variables.cardDefaultBg, - shadowColor: "#000", + shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 1.5, diff --git a/native-base-theme/components/CardItem.js b/native-base-theme/components/CardItem.js index 57724ac..bfb1757 100644 --- a/native-base-theme/components/CardItem.js +++ b/native-base-theme/components/CardItem.js @@ -1,21 +1,23 @@ // @flow -import { StyleSheet } from "react-native"; -import variable from "./../variables/platform"; +import { StyleSheet } from 'react-native'; -export default (variables /*: * */ = variable) => { +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { const platform = variables.platform; const transparentBtnCommon = { - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: variables.DefaultFontSize - 3, color: variables.sTabBarActiveTextColor }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: variables.iconFontSize - 10, color: variables.sTabBarActiveTextColor, marginHorizontal: null }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: variables.iconFontSize - 10, color: variables.sTabBarActiveTextColor }, @@ -24,12 +26,12 @@ export default (variables /*: * */ = variable) => { }; const cardItemTheme = { - "NativeBase.Left": { - "NativeBase.Body": { - "NativeBase.Text": { - ".note": { + 'NativeBase.Left': { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "400", + fontWeight: '400', marginRight: 20 } }, @@ -37,155 +39,155 @@ export default (variables /*: * */ = variable) => { marginLeft: 10, alignItems: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: variables.iconFontSize }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: variables.iconFontSize }, - "NativeBase.Text": { + 'NativeBase.Text': { marginLeft: 10, - alignSelf: "center" + alignSelf: 'center' }, - "NativeBase.Button": { - ".transparent": { + 'NativeBase.Button': { + '.transparent': { ...transparentBtnCommon, paddingRight: variables.cardItemPadding + 5 } }, flex: 1, - flexDirection: "row", - alignItems: "center" + flexDirection: 'row', + alignItems: 'center' }, - ".content": { - "NativeBase.Text": { - color: platform === "ios" ? "#555" : "#222", + '.content': { + 'NativeBase.Text': { + color: platform === PLATFORM.IOS ? '#555' : '#222', fontSize: variables.DefaultFontSize - 2 } }, - ".cardBody": { + '.cardBody': { padding: -5, - "NativeBase.Text": { + 'NativeBase.Text': { marginTop: 5 } }, - "NativeBase.Body": { - "NativeBase.Text": { - ".note": { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200", + fontWeight: '200', marginRight: 20 } }, - "NativeBase.Button": { - ".transparent": { + 'NativeBase.Button': { + '.transparent': { ...transparentBtnCommon, paddingRight: variables.cardItemPadding + 5, - alignSelf: "stretch" + alignSelf: 'stretch' } }, flex: 1, - alignSelf: "stretch", - alignItems: "flex-start" + alignSelf: 'stretch', + alignItems: 'flex-start' }, - "NativeBase.Right": { - "NativeBase.Badge": { + 'NativeBase.Right': { + 'NativeBase.Badge': { alignSelf: null }, - "NativeBase.Button": { - ".transparent": { + 'NativeBase.Button': { + '.transparent': { ...transparentBtnCommon }, alignSelf: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { alignSelf: null, fontSize: variables.iconFontSize - 8, color: variables.cardBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { alignSelf: null, fontSize: variables.iconFontSize - 8, color: variables.cardBorderColor }, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: variables.DefaultFontSize - 1, alignSelf: null }, - "NativeBase.Thumbnail": { + 'NativeBase.Thumbnail': { alignSelf: null }, - "NativeBase.Image": { + 'NativeBase.Image': { alignSelf: null }, - "NativeBase.Radio": { + 'NativeBase.Radio': { alignSelf: null }, - "NativeBase.Checkbox": { + 'NativeBase.Checkbox': { alignSelf: null }, - "NativeBase.Switch": { + 'NativeBase.Switch': { alignSelf: null }, flex: 0.8 }, - ".header": { - "NativeBase.Text": { + '.header': { + 'NativeBase.Text': { fontSize: 16, - fontWeight: platform === "ios" ? "600" : "500" + fontWeight: platform === PLATFORM.IOS ? '600' : '500' }, - ".bordered": { - "NativeBase.Text": { + '.bordered': { + 'NativeBase.Text': { color: variables.brandPrimary, - fontWeight: platform === "ios" ? "600" : "500" + fontWeight: platform === PLATFORM.IOS ? '600' : '500' }, borderBottomWidth: variables.borderWidth }, borderBottomWidth: null, paddingVertical: variables.cardItemPadding + 5 }, - ".footer": { - "NativeBase.Text": { + '.footer': { + 'NativeBase.Text': { fontSize: 16, - fontWeight: platform === "ios" ? "600" : "500" + fontWeight: platform === PLATFORM.IOS ? '600' : '500' }, - ".bordered": { - "NativeBase.Text": { + '.bordered': { + 'NativeBase.Text': { color: variables.brandPrimary, - fontWeight: platform === "ios" ? "600" : "500" + fontWeight: platform === PLATFORM.IOS ? '600' : '500' }, borderTopWidth: variables.borderWidth }, borderBottomWidth: null }, - "NativeBase.Text": { - ".note": { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' } }, - "NativeBase.Icon": { + 'NativeBase.Icon': { width: variables.iconFontSize + 5, fontSize: variables.iconFontSize - 2 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { width: variables.iconFontSize + 5, fontSize: variables.iconFontSize - 2 }, - ".bordered": { + '.bordered': { borderBottomWidth: StyleSheet.hairlineWidth, borderColor: variables.cardBorderColor }, - ".first": { + '.first': { borderTopLeftRadius: variables.cardBorderRadius, borderTopRightRadius: variables.cardBorderRadius }, - ".last": { + '.last': { borderBottomLeftRadius: variables.cardBorderRadius, borderBottomRightRadius: variables.cardBorderRadius }, - flexDirection: "row", - alignItems: "center", + flexDirection: 'row', + alignItems: 'center', borderRadius: variables.cardBorderRadius, padding: variables.cardItemPadding + 5, paddingVertical: variables.cardItemPadding, diff --git a/native-base-theme/components/CheckBox.js b/native-base-theme/components/CheckBox.js index d143e07..7a858c3 100644 --- a/native-base-theme/components/CheckBox.js +++ b/native-base-theme/components/CheckBox.js @@ -1,31 +1,31 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const checkBoxTheme = { - ".checked": { - "NativeBase.Icon": { + '.checked': { + 'NativeBase.Icon': { color: variables.checkboxTickColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.checkboxTickColor } }, - "NativeBase.Icon": { - color: "transparent", + 'NativeBase.Icon': { + color: 'transparent', lineHeight: variables.CheckboxIconSize, marginTop: variables.CheckboxIconMarginTop, fontSize: variables.CheckboxFontSize }, - "NativeBase.IconNB": { - color: "transparent", + 'NativeBase.IconNB': { + color: 'transparent', lineHeight: variables.CheckboxIconSize, marginTop: variables.CheckboxIconMarginTop, fontSize: variables.CheckboxFontSize }, borderRadius: variables.CheckboxRadius, - overflow: "hidden", + overflow: 'hidden', width: variables.checkboxSize, height: variables.checkboxSize, borderWidth: variables.CheckboxBorderWidth, diff --git a/native-base-theme/components/Container.js b/native-base-theme/components/Container.js index 7a93fcc..cfd7e28 100644 --- a/native-base-theme/components/Container.js +++ b/native-base-theme/components/Container.js @@ -1,14 +1,15 @@ // @flow -import { Platform, Dimensions } from "react-native"; +import { Platform, Dimensions } from 'react-native'; -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -const deviceHeight = Dimensions.get("window").height; -export default (variables /*: * */ = variable) => { +const deviceHeight = Dimensions.get('window').height; +export default (variables /* : * */ = variable) => { const theme = { flex: 1, - height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20, + height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20, backgroundColor: variables.containerBgColor }; diff --git a/native-base-theme/components/Content.js b/native-base-theme/components/Content.js index 72230c4..97bd81c 100644 --- a/native-base-theme/components/Content.js +++ b/native-base-theme/components/Content.js @@ -1,14 +1,12 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const contentTheme = { flex: 1, - backgroundColor: "transparent", - "NativeBase.Segment": { + backgroundColor: 'transparent', + 'NativeBase.Segment': { borderWidth: 0, - backgroundColor: "transparent" + backgroundColor: 'transparent' } }; diff --git a/native-base-theme/components/Fab.js b/native-base-theme/components/Fab.js index c3314da..4d2b9cb 100644 --- a/native-base-theme/components/Fab.js +++ b/native-base-theme/components/Fab.js @@ -1,28 +1,24 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { - const platform = variables.platform; - +export default () => { const fabTheme = { - "NativeBase.Button": { - alignItems: "center", + 'NativeBase.Button': { + alignItems: 'center', padding: null, - justifyContent: "center", - "NativeBase.Icon": { - alignSelf: "center", + justifyContent: 'center', + 'NativeBase.Icon': { + alignSelf: 'center', fontSize: 20, marginLeft: 0, - marginRight: 0, + marginRight: 0 }, - "NativeBase.IconNB": { - alignSelf: "center", + 'NativeBase.IconNB': { + alignSelf: 'center', fontSize: 20, marginLeft: 0, - marginRight: 0, - }, - }, + marginRight: 0 + } + } }; return fabTheme; diff --git a/native-base-theme/components/Footer.js b/native-base-theme/components/Footer.js index 0021508..292b35c 100644 --- a/native-base-theme/components/Footer.js +++ b/native-base-theme/components/Footer.js @@ -1,31 +1,32 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const platformStyle = variables.platformStyle; const platform = variables.platform; const iconCommon = { - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.tabBarActiveTextColor } }; const iconNBCommon = { - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.tabBarActiveTextColor } }; const textCommon = { - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.tabBarActiveTextColor } }; const footerTheme = { - "NativeBase.Left": { - "NativeBase.Button": { - ".transparent": { - backgroundColor: "transparent", + 'NativeBase.Left': { + 'NativeBase.Button': { + '.transparent': { + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -38,22 +39,22 @@ export default (variables /*: * */ = variable) => { }, alignSelf: null, ...iconCommon, - ...iconNBCommon, + ...iconNBCommon // ...textCommon }, flex: 1, - alignSelf: "center", - alignItems: "flex-start" + alignSelf: 'center', + alignItems: 'flex-start' }, - "NativeBase.Body": { + 'NativeBase.Body': { flex: 1, - alignItems: "center", - alignSelf: "center", - flexDirection: "row", - "NativeBase.Button": { - alignSelf: "center", - ".transparent": { - backgroundColor: "transparent", + alignItems: 'center', + alignSelf: 'center', + flexDirection: 'row', + 'NativeBase.Button': { + alignSelf: 'center', + '.transparent': { + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -64,20 +65,20 @@ export default (variables /*: * */ = variable) => { ...iconNBCommon, ...textCommon }, - ".full": { + '.full': { height: variables.footerHeight, paddingBottom: variables.footerPaddingBottom, flex: 1 }, ...iconCommon, - ...iconNBCommon, + ...iconNBCommon // ...textCommon } }, - "NativeBase.Right": { - "NativeBase.Button": { - ".transparent": { - backgroundColor: "transparent", + 'NativeBase.Right': { + 'NativeBase.Button': { + '.transparent': { + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -90,23 +91,23 @@ export default (variables /*: * */ = variable) => { }, alignSelf: null, ...iconCommon, - ...iconNBCommon, + ...iconNBCommon // ...textCommon }, flex: 1, - alignSelf: "center", - alignItems: "flex-end" + alignSelf: 'center', + alignItems: 'flex-end' }, backgroundColor: variables.footerDefaultBg, - flexDirection: "row", - justifyContent: "center", + flexDirection: 'row', + justifyContent: 'center', borderTopWidth: - platform === "ios" && platformStyle !== "material" + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? variables.borderWidth : undefined, borderColor: - platform === "ios" && platformStyle !== "material" - ? "#cbcbcb" + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? '#cbcbcb' : undefined, height: variables.footerHeight, paddingBottom: variables.footerPaddingBottom, diff --git a/native-base-theme/components/FooterTab.js b/native-base-theme/components/FooterTab.js index 8fcdf03..abaa023 100644 --- a/native-base-theme/components/FooterTab.js +++ b/native-base-theme/components/FooterTab.js @@ -1,78 +1,78 @@ // @flow -import { Platform } from "react-native"; +import { Platform } from 'react-native'; -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const platform = variables.platform; const footerTabTheme = { - "NativeBase.Button": { - ".active": { - "NativeBase.Text": { + 'NativeBase.Button': { + '.active': { + 'NativeBase.Text': { color: variables.tabBarActiveTextColor, fontSize: variables.tabBarTextSize, lineHeight: 16 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.tabBarActiveTextColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.tabBarActiveTextColor }, backgroundColor: variables.tabActiveBgColor }, flexDirection: null, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null, - alignSelf: "center", + alignSelf: 'center', flex: 1, height: variables.footerHeight, - justifyContent: "center", - ".badge": { - "NativeBase.Badge": { - "NativeBase.Text": { + justifyContent: 'center', + '.badge': { + 'NativeBase.Badge': { + 'NativeBase.Text': { fontSize: 11, - fontWeight: platform === "ios" ? "600" : undefined, + fontWeight: platform === PLATFORM.IOS ? '600' : undefined, lineHeight: 14 }, top: -3, - alignSelf: "center", + alignSelf: 'center', left: 10, zIndex: 99, height: 18, padding: 1.7, paddingHorizontal: 3 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginTop: -18 } }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.tabBarTextColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.tabBarTextColor }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.tabBarTextColor, fontSize: variables.tabBarTextSize, lineHeight: 16 } }, - backgroundColor: Platform.OS === "android" - ? variables.footerDefaultBg - : undefined, - flexDirection: "row", - justifyContent: "space-between", + backgroundColor: + Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined, + flexDirection: 'row', + justifyContent: 'space-between', flex: 1, - alignSelf: "stretch" + alignSelf: 'stretch' }; return footerTabTheme; diff --git a/native-base-theme/components/Form.js b/native-base-theme/components/Form.js index 8d7aedc..3040f30 100644 --- a/native-base-theme/components/Form.js +++ b/native-base-theme/components/Form.js @@ -1,85 +1,81 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { - const platform = variables.platform; - +export default () => { const theme = { - "NativeBase.Item": { - ".fixedLabel": { - "NativeBase.Label": { + 'NativeBase.Item': { + '.fixedLabel': { + 'NativeBase.Label': { paddingLeft: null }, marginLeft: 15 }, - ".inlineLabel": { - "NativeBase.Label": { + '.inlineLabel': { + 'NativeBase.Label': { paddingLeft: null }, marginLeft: 15 }, - ".placeholderLabel": { - "NativeBase.Input": {} + '.placeholderLabel': { + 'NativeBase.Input': {} }, - ".stackedLabel": { - "NativeBase.Label": { + '.stackedLabel': { + 'NativeBase.Label': { top: 5, paddingLeft: null }, - "NativeBase.Input": { + 'NativeBase.Input': { paddingLeft: null, marginLeft: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginTop: 36 }, marginLeft: 15 }, - ".floatingLabel": { - "NativeBase.Input": { + '.floatingLabel': { + 'NativeBase.Input': { paddingLeft: null, top: 10, marginLeft: null }, - "NativeBase.Label": { + 'NativeBase.Label': { left: 0, top: 6 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { top: 6 }, marginTop: 15, marginLeft: 15 }, - ".regular": { - "NativeBase.Label": { + '.regular': { + 'NativeBase.Label': { left: 0 }, marginLeft: 0 }, - ".rounded": { - "NativeBase.Label": { + '.rounded': { + 'NativeBase.Label': { left: 0 }, marginLeft: 0 }, - ".underline": { - "NativeBase.Label": { + '.underline': { + 'NativeBase.Label': { left: 0, top: 0, - position: "relative" + position: 'relative' }, - "NativeBase.Input": { + 'NativeBase.Input': { left: -15 }, marginLeft: 15 }, - ".last": { + '.last': { marginLeft: 0, paddingLeft: 15 }, - "NativeBase.Label": { + 'NativeBase.Label': { paddingRight: 5 }, marginLeft: 15 diff --git a/native-base-theme/components/H1.js b/native-base-theme/components/H1.js index dd87958..20aa8db 100644 --- a/native-base-theme/components/H1.js +++ b/native-base-theme/components/H1.js @@ -1,12 +1,12 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const h1Theme = { color: variables.textColor, fontSize: variables.fontSizeH1, - lineHeight: variables.lineHeightH1, + lineHeight: variables.lineHeightH1 }; return h1Theme; diff --git a/native-base-theme/components/H2.js b/native-base-theme/components/H2.js index 0a1aa77..cad4057 100644 --- a/native-base-theme/components/H2.js +++ b/native-base-theme/components/H2.js @@ -1,12 +1,12 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const h2Theme = { color: variables.textColor, fontSize: variables.fontSizeH2, - lineHeight: variables.lineHeightH2, + lineHeight: variables.lineHeightH2 }; return h2Theme; diff --git a/native-base-theme/components/H3.js b/native-base-theme/components/H3.js index 45e5891..19917f5 100644 --- a/native-base-theme/components/H3.js +++ b/native-base-theme/components/H3.js @@ -1,8 +1,8 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const h3Theme = { color: variables.textColor, fontSize: variables.fontSizeH3, diff --git a/native-base-theme/components/Header.js b/native-base-theme/components/Header.js index 9e7f30f..944f6c3 100644 --- a/native-base-theme/components/Header.js +++ b/native-base-theme/components/Header.js @@ -1,65 +1,70 @@ // @flow -import { PixelRatio, StatusBar } from "react-native"; +import { PixelRatio, StatusBar } from 'react-native'; -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const platformStyle = variables.platformStyle; const platform = variables.platform; const headerTheme = { - ".span": { + '.span': { height: 128, - "NativeBase.Left": { - alignSelf: "flex-start" + 'NativeBase.Left': { + alignSelf: 'flex-start' }, - "NativeBase.Body": { - alignSelf: "flex-end", - alignItems: "flex-start", - justifyContent: "center", + 'NativeBase.Body': { + alignSelf: 'flex-end', + alignItems: 'flex-start', + justifyContent: 'center', paddingBottom: 26 }, - "NativeBase.Right": { - alignSelf: "flex-start" + 'NativeBase.Right': { + alignSelf: 'flex-start' } }, - ".hasSubtitle": { - "NativeBase.Body": { - "NativeBase.Title": { + '.hasSubtitle': { + 'NativeBase.Body': { + 'NativeBase.Title': { fontSize: variables.titleFontSize - 2, fontFamily: variables.titleFontfamily, - textAlign: "center", - fontWeight: "500", + textAlign: 'center', + fontWeight: '500', paddingBottom: 3 }, - "NativeBase.Subtitle": { + 'NativeBase.Subtitle': { fontSize: variables.subTitleFontSize, fontFamily: variables.titleFontfamily, color: variables.subtitleColor, - textAlign: "center" + textAlign: 'center' } } }, - ".transparent": { - backgroundColor: "transparent", - borderBottomColor: "transparent", + '.transparent': { + backgroundColor: 'transparent', + borderBottomColor: 'transparent', elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null, - paddingTop: platform === "android" ? StatusBar.currentHeight : undefined, - height: platform === "android" ? variables.toolbarHeight + StatusBar.currentHeight : variables.toolbarHeight + paddingTop: + platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined, + height: + platform === PLATFORM.ANDROID + ? variables.toolbarHeight + StatusBar.currentHeight + : variables.toolbarHeight }, - ".noShadow": { + '.noShadow': { elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null }, - ".hasTabs": { + '.hasTabs': { elevation: 0, shadowColor: null, shadowOffset: null, @@ -67,131 +72,133 @@ export default (variables /*: * */ = variable) => { shadowOpacity: null, borderBottomWidth: null }, - ".hasSegment": { + '.hasSegment': { elevation: 0, shadowColor: null, shadowOffset: null, shadowRadius: null, shadowOpacity: null, borderBottomWidth: null, - "NativeBase.Left": { + 'NativeBase.Left': { flex: 0.3 }, - "NativeBase.Right": { + 'NativeBase.Right': { flex: 0.3 }, - "NativeBase.Body": { + 'NativeBase.Body': { flex: 1, - "NativeBase.Segment": { + 'NativeBase.Segment': { marginRight: 0, - alignSelf: "center", - "NativeBase.Button": { + alignSelf: 'center', + 'NativeBase.Button': { paddingLeft: 0, paddingRight: 0 } } } }, - ".noLeft": { - "NativeBase.Left": { - width: platform === "ios" ? undefined : 0, - flex: platform === "ios" ? 1 : 0 + '.noLeft': { + 'NativeBase.Left': { + width: platform === PLATFORM.IOS ? undefined : 0, + flex: platform === PLATFORM.IOS ? 1 : 0 }, - "NativeBase.Body": { - "NativeBase.Title": { - paddingLeft: platform === "ios" ? undefined : 10 + 'NativeBase.Body': { + 'NativeBase.Title': { + paddingLeft: platform === PLATFORM.IOS ? undefined : 10 }, - "NativeBase.Subtitle": { - paddingLeft: platform === "ios" ? undefined : 10 + 'NativeBase.Subtitle': { + paddingLeft: platform === PLATFORM.IOS ? undefined : 10 } } }, - "NativeBase.Button": { - justifyContent: "center", - alignSelf: "center", - alignItems: "center", - ".transparent": { - "NativeBase.Text": { + 'NativeBase.Button': { + justifyContent: 'center', + alignSelf: 'center', + alignItems: 'center', + '.transparent': { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontWeight: "600" + fontWeight: '600' }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor }, paddingHorizontal: variables.buttonPadding }, paddingHorizontal: 15 }, - ".searchBar": { - "NativeBase.Item": { - "NativeBase.Icon": { - backgroundColor: "transparent", + '.searchBar': { + 'NativeBase.Item': { + 'NativeBase.Icon': { + backgroundColor: 'transparent', color: variables.dropdownLinkColor, fontSize: variables.toolbarSearchIconSize, - alignItems: "center", + alignItems: 'center', marginTop: 2, paddingRight: 10, paddingLeft: 10 }, - "NativeBase.IconNB": { - backgroundColor: "transparent", + 'NativeBase.IconNB': { + backgroundColor: 'transparent', color: null, - alignSelf: "center" + alignSelf: 'center' }, - "NativeBase.Input": { - alignSelf: "center", + 'NativeBase.Input': { + alignSelf: 'center', lineHeight: null, height: variables.searchBarInputHeight }, - alignSelf: "center", - alignItems: "center", - justifyContent: "flex-start", + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'flex-start', flex: 1, height: variables.searchBarHeight, - borderColor: "transparent", + borderColor: 'transparent', backgroundColor: variables.toolbarInputColor }, - "NativeBase.Button": { - ".transparent": { - "NativeBase.Text": { - fontWeight: "500" + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontWeight: '500' }, paddingHorizontal: null, - paddingLeft: platform === "ios" ? 10 : null + paddingLeft: platform === PLATFORM.IOS ? 10 : null }, - paddingHorizontal: platform === "ios" ? undefined : null, - width: platform === "ios" ? undefined : 0, - height: platform === "ios" ? undefined : 0 + paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, + width: platform === PLATFORM.IOS ? undefined : 0, + height: platform === PLATFORM.IOS ? undefined : 0 } }, - ".rounded": { - "NativeBase.Item": { + '.rounded': { + 'NativeBase.Item': { borderRadius: - platform === "ios" && platformStyle !== "material" ? 25 : 3 + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 25 + : 3 } }, - "NativeBase.Left": { - "NativeBase.Button": { - ".hasText": { + 'NativeBase.Left': { + 'NativeBase.Button': { + '.hasText': { marginLeft: -10, height: 30, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize, marginTop: 2, marginRight: 5, marginLeft: 2 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontSize: platform === "ios" ? 17 : 0, + fontSize: platform === PLATFORM.IOS ? 17 : 0, marginLeft: 7, lineHeight: 19.5 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize, marginTop: 2, @@ -199,13 +206,16 @@ export default (variables /*: * */ = variable) => { marginLeft: 2 } }, - ".transparent": { + '.transparent': { marginLeft: - platform === "ios" && platformStyle !== "material" ? -3 : 0, - "NativeBase.Icon": { + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? -3 + : 0, + 'NativeBase.Icon': { color: variables.toolbarBtnColor, fontSize: - platform === "ios" && variables.platformStyle !== "material" + platform === PLATFORM.IOS && + variables.platformStyle !== PLATFORM.MATERIAL ? variables.iconHeaderSize + 1 : variables.iconHeaderSize, marginTop: 0, @@ -213,10 +223,11 @@ export default (variables /*: * */ = variable) => { marginLeft: 1, paddingTop: 1 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor, fontSize: - platform === "ios" && variables.platformStyle !== "material" + platform === PLATFORM.IOS && + variables.platformStyle !== PLATFORM.MATERIAL ? variables.iconHeaderSize + 1 : variables.iconHeaderSize - 2, marginTop: 0, @@ -224,18 +235,20 @@ export default (variables /*: * */ = variable) => { marginLeft: 1, paddingTop: 1 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontSize: platform === "ios" ? 17 : 0, - top: platform === "ios" ? 1 : -1.5, + fontSize: platform === PLATFORM.IOS ? 17 : 0, + top: platform === PLATFORM.IOS ? 1 : -1.5, paddingLeft: - platform === "ios" && platformStyle !== "material" ? 2 : 5, + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 2 + : 5, paddingRight: - platform === "ios" && platformStyle !== "material" + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? undefined : 10 }, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -243,66 +256,72 @@ export default (variables /*: * */ = variable) => { shadowRadius: null, shadowOpacity: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor }, alignSelf: null, paddingRight: variables.buttonPadding, - paddingLeft: platform === "ios" && platformStyle !== "material" ? 4 : 8 + paddingLeft: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 4 + : 8 }, - flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.4, - alignSelf: "center", - alignItems: "flex-start" + flex: + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 1 + : 0.4, + alignSelf: 'center', + alignItems: 'flex-start' }, - "NativeBase.Body": { + 'NativeBase.Body': { flex: 1, alignItems: - platform === "ios" && platformStyle !== "material" - ? "center" - : "flex-start", - alignSelf: "center", - "NativeBase.Segment": { + platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL + ? 'center' + : 'flex-start', + alignSelf: 'center', + 'NativeBase.Segment': { borderWidth: 0, - alignSelf: "flex-end", - marginRight: platform === "ios" ? -40 : -55 + alignSelf: 'flex-end', + marginRight: platform === PLATFORM.IOS ? -40 : -55 }, - "NativeBase.Button": { - alignSelf: "center", - ".transparent": { - backgroundColor: "transparent" + 'NativeBase.Button': { + alignSelf: 'center', + '.transparent': { + backgroundColor: 'transparent' }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.inverseTextColor, - backgroundColor: "transparent" + backgroundColor: 'transparent' } } }, - "NativeBase.Right": { - "NativeBase.Button": { - ".hasText": { + 'NativeBase.Right': { + 'NativeBase.Button': { + '.hasText': { height: 30, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize - 2, marginTop: 2, marginRight: 2, marginLeft: 5 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontSize: platform === "ios" ? 17 : 14, + fontSize: platform === PLATFORM.IOS ? 17 : 14, lineHeight: 19.5 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize - 2, marginTop: 2, @@ -310,13 +329,13 @@ export default (variables /*: * */ = variable) => { marginLeft: 5 } }, - ".transparent": { - marginRight: platform === "ios" ? -9 : -5, + '.transparent': { + marginRight: platform === PLATFORM.IOS ? -9 : -5, paddingLeft: 15, paddingRight: 12, paddingHorizontal: 15, borderRadius: 50, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize - 2, marginTop: 0, @@ -324,7 +343,7 @@ export default (variables /*: * */ = variable) => { marginRight: 0 // paddingTop: 0 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor, fontSize: variables.iconHeaderSize - 2, marginTop: 0, @@ -332,16 +351,17 @@ export default (variables /*: * */ = variable) => { marginRight: 0 // paddingTop: 0 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.toolbarBtnTextColor, - fontSize: platform === "ios" ? 17 : 14, - top: platform === "ios" ? 1 : -1.5, + fontSize: platform === PLATFORM.IOS ? 17 : 14, + top: platform === PLATFORM.IOS ? 1 : -1.5, paddingRight: - platform === "ios" && variables.platformStyle !== "material" + platform === PLATFORM.IOS && + variables.platformStyle !== PLATFORM.MATERIAL ? 0 : undefined }, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderColor: null, elevation: 0, shadowColor: null, @@ -349,42 +369,47 @@ export default (variables /*: * */ = variable) => { shadowRadius: null, shadowOpacity: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.toolbarBtnColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.toolbarBtnColor }, alignSelf: null, paddingHorizontal: variables.buttonPadding }, flex: 1, - alignSelf: "center", - alignItems: "flex-end", - flexDirection: "row", - justifyContent: "flex-end" + alignSelf: 'center', + alignItems: 'flex-end', + flexDirection: 'row', + justifyContent: 'flex-end' }, backgroundColor: variables.toolbarDefaultBg, - flexDirection: "row", + flexDirection: 'row', // paddingHorizontal: 10, paddingLeft: - platform === "ios" && variables.platformStyle !== "material" ? 6 : 10, + platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL + ? 6 + : 10, paddingRight: 10, - justifyContent: "center", - paddingTop: platform === "ios" ? 18 : 0, + justifyContent: 'center', + paddingTop: platform === PLATFORM.IOS ? 18 : 0, borderBottomWidth: - platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0, + platform === PLATFORM.IOS + ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) + : 0, borderBottomColor: variables.toolbarDefaultBorder, height: - variables.platform === "ios" && variables.platformStyle === "material" + variables.platform === PLATFORM.IOS && + variables.platformStyle === PLATFORM.MATERIAL ? variables.toolbarHeight + 10 : variables.toolbarHeight, elevation: 3, - shadowColor: platformStyle === "material" ? "#000" : undefined, + shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, shadowOffset: - platformStyle === "material" ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === "material" ? 0.2 : undefined, - shadowRadius: platformStyle === "material" ? 1.2 : undefined, + 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 diff --git a/native-base-theme/components/Icon.js b/native-base-theme/components/Icon.js index 0b75534..5cff95d 100644 --- a/native-base-theme/components/Icon.js +++ b/native-base-theme/components/Icon.js @@ -1,11 +1,11 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const iconTheme = { fontSize: variables.iconFontSize, - color: "#000" + color: variable.textColor }; return iconTheme; diff --git a/native-base-theme/components/Input.js b/native-base-theme/components/Input.js index ad0abff..d0dd6af 100644 --- a/native-base-theme/components/Input.js +++ b/native-base-theme/components/Input.js @@ -2,10 +2,10 @@ import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const inputTheme = { '.multiline': { - height: null, + height: null }, height: variables.inputHeightBase, color: variables.inputColor, diff --git a/native-base-theme/components/InputGroup.js b/native-base-theme/components/InputGroup.js index 9d33525..7988ca5 100644 --- a/native-base-theme/components/InputGroup.js +++ b/native-base-theme/components/InputGroup.js @@ -1,20 +1,20 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const inputGroupTheme = { - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: 24, color: variables.sTabBarActiveTextColor, paddingHorizontal: 5 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: 24, color: variables.sTabBarActiveTextColor, paddingHorizontal: 5 }, - "NativeBase.Input": { + 'NativeBase.Input': { height: variables.inputHeightBase, color: variables.inputColor, paddingLeft: 5, @@ -23,11 +23,11 @@ export default (variables /*: * */ = variable) => { fontSize: variables.inputFontSize, lineHeight: variables.inputLineHeight }, - ".underline": { - ".success": { + '.underline': { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, paddingLeft: 5, @@ -37,22 +37,22 @@ export default (variables /*: * */ = variable) => { borderLeftWidth: 0, borderColor: variables.inputBorderColor }, - ".regular": { - ".success": { + '.regular': { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, paddingLeft: 5, borderWidth: variables.borderWidth, borderColor: variables.inputBorderColor }, - ".rounded": { - ".success": { + '.rounded': { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, paddingLeft: 5, @@ -61,21 +61,21 @@ export default (variables /*: * */ = variable) => { borderColor: variables.inputBorderColor }, - ".success": { - "NativeBase.Icon": { + '.success': { + 'NativeBase.Icon': { color: variables.inputSuccessBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.inputSuccessBorderColor }, - ".rounded": { + '.rounded': { borderRadius: 30, borderColor: variables.inputSuccessBorderColor }, - ".regular": { + '.regular': { borderColor: variables.inputSuccessBorderColor }, - ".underline": { + '.underline': { borderWidth: variables.borderWidth, borderTopWidth: 0, borderRightWidth: 0, @@ -85,21 +85,21 @@ export default (variables /*: * */ = variable) => { borderColor: variables.inputSuccessBorderColor }, - ".error": { - "NativeBase.Icon": { + '.error': { + 'NativeBase.Icon': { color: variables.inputErrorBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.inputErrorBorderColor }, - ".rounded": { + '.rounded': { borderRadius: 30, borderColor: variables.inputErrorBorderColor }, - ".regular": { + '.regular': { borderColor: variables.inputErrorBorderColor }, - ".underline": { + '.underline': { borderWidth: variables.borderWidth, borderTopWidth: 0, borderRightWidth: 0, @@ -108,12 +108,12 @@ export default (variables /*: * */ = variable) => { }, borderColor: variables.inputErrorBorderColor }, - ".disabled": { - "NativeBase.Icon": { - color: "#384850" + '.disabled': { + 'NativeBase.Icon': { + color: '#384850' }, - "NativeBase.IconNB": { - color: "#384850" + 'NativeBase.IconNB': { + color: '#384850' } }, @@ -123,9 +123,9 @@ export default (variables /*: * */ = variable) => { borderRightWidth: 0, borderLeftWidth: 0, borderColor: variables.inputBorderColor, - backgroundColor: "transparent", - flexDirection: "row", - alignItems: "center" + backgroundColor: 'transparent', + flexDirection: 'row', + alignItems: 'center' }; return inputGroupTheme; diff --git a/native-base-theme/components/Item.js b/native-base-theme/components/Item.js index 447f297..2305604 100644 --- a/native-base-theme/components/Item.js +++ b/native-base-theme/components/Item.js @@ -1,37 +1,38 @@ // @flow -import { Platform } from "react-native"; +import { Platform } from 'react-native'; -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const itemTheme = { - ".floatingLabel": { - "NativeBase.Input": { + '.floatingLabel': { + 'NativeBase.Input': { height: 50, top: 8, paddingTop: 3, paddingBottom: 7, - ".multiline": { + '.multiline': { minHeight: variables.inputHeightBase, - paddingTop: Platform.OS === "ios" ? 10 : 3, - paddingBottom: Platform.OS === "ios" ? 14 : 10 + paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3, + paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10 } }, - "NativeBase.Label": { + 'NativeBase.Label': { paddingTop: 5 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { top: 6, paddingTop: 8 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { top: 6, paddingTop: 8 } }, - ".fixedLabel": { - "NativeBase.Label": { + '.fixedLabel': { + 'NativeBase.Label': { position: null, top: null, left: null, @@ -41,43 +42,43 @@ export default (variables /*: * */ = variable) => { width: null, fontSize: variables.inputFontSize }, - "NativeBase.Input": { + 'NativeBase.Input': { flex: 2, fontSize: variables.inputFontSize } }, - ".stackedLabel": { - "NativeBase.Label": { + '.stackedLabel': { + 'NativeBase.Label': { position: null, top: null, left: null, right: null, paddingTop: 5, - alignSelf: "flex-start", + alignSelf: 'flex-start', fontSize: variables.inputFontSize - 2 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginTop: 36 }, - "NativeBase.Input": { - alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start", + 'NativeBase.Input': { + alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start', flex: 1, - width: Platform.OS === "ios" ? null : variables.deviceWidth - 25, + width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25, fontSize: variables.inputFontSize, lineHeight: variables.inputLineHeight - 6, - ".secureTextEntry": { - fontSize: variables.inputFontSize - 4 + '.secureTextEntry': { + fontSize: variables.inputFontSize }, - ".multiline": { - paddingTop: Platform.OS === "ios" ? 9 : undefined, - paddingBottom: Platform.OS === "ios" ? 9 : undefined + '.multiline': { + paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined, + paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined } }, flexDirection: null, minHeight: variables.inputHeightBase + 15 }, - ".inlineLabel": { - "NativeBase.Label": { + '.inlineLabel': { + 'NativeBase.Label': { position: null, top: null, left: null, @@ -87,43 +88,43 @@ export default (variables /*: * */ = variable) => { width: null, fontSize: variables.inputFontSize }, - "NativeBase.Input": { + 'NativeBase.Input': { paddingLeft: 5, fontSize: variables.inputFontSize }, - flexDirection: "row" + flexDirection: 'row' }, - "NativeBase.Label": { + 'NativeBase.Label': { fontSize: variables.inputFontSize, color: variables.inputColorPlaceholder, paddingRight: 5 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: 24, paddingRight: 8 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { fontSize: 24, paddingRight: 8 }, - "NativeBase.Input": { - ".multiline": { + 'NativeBase.Input': { + '.multiline': { height: null }, height: variables.inputHeightBase, color: variables.inputColor, flex: 1, - top: Platform.OS === "ios" ? 1.5 : undefined, + top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined, fontSize: variables.inputFontSize }, - ".underline": { - "NativeBase.Input": { + '.underline': { + 'NativeBase.Input': { paddingLeft: 15 }, - ".success": { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, borderWidth: variables.borderWidth * 2, @@ -132,33 +133,33 @@ export default (variables /*: * */ = variable) => { borderLeftWidth: 0, borderColor: variables.inputBorderColor }, - ".regular": { - "NativeBase.Input": { + '.regular': { + 'NativeBase.Input': { paddingLeft: 8 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { paddingLeft: 10 }, - ".success": { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, borderWidth: variables.borderWidth * 2, borderColor: variables.inputBorderColor }, - ".rounded": { - "NativeBase.Input": { + '.rounded': { + 'NativeBase.Input': { paddingLeft: 8 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { paddingLeft: 10 }, - ".success": { + '.success': { borderColor: variables.inputSuccessBorderColor }, - ".error": { + '.error': { borderColor: variables.inputErrorBorderColor }, borderWidth: variables.borderWidth * 2, @@ -166,21 +167,21 @@ export default (variables /*: * */ = variable) => { borderColor: variables.inputBorderColor }, - ".success": { - "NativeBase.Icon": { + '.success': { + 'NativeBase.Icon': { color: variables.inputSuccessBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.inputSuccessBorderColor }, - ".rounded": { + '.rounded': { borderRadius: 30, borderColor: variables.inputSuccessBorderColor }, - ".regular": { + '.regular': { borderColor: variables.inputSuccessBorderColor }, - ".underline": { + '.underline': { borderWidth: variables.borderWidth * 2, borderTopWidth: 0, borderRightWidth: 0, @@ -190,21 +191,21 @@ export default (variables /*: * */ = variable) => { borderColor: variables.inputSuccessBorderColor }, - ".error": { - "NativeBase.Icon": { + '.error': { + 'NativeBase.Icon': { color: variables.inputErrorBorderColor }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.inputErrorBorderColor }, - ".rounded": { + '.rounded': { borderRadius: 30, borderColor: variables.inputErrorBorderColor }, - ".regular": { + '.regular': { borderColor: variables.inputErrorBorderColor }, - ".underline": { + '.underline': { borderWidth: variables.borderWidth * 2, borderTopWidth: 0, borderRightWidth: 0, @@ -213,15 +214,15 @@ export default (variables /*: * */ = variable) => { }, borderColor: variables.inputErrorBorderColor }, - ".disabled": { - "NativeBase.Icon": { - color: "#384850" + '.disabled': { + 'NativeBase.Icon': { + color: '#384850' }, - "NativeBase.IconNB": { - color: "#384850" + 'NativeBase.IconNB': { + color: '#384850' } }, - ".picker": { + '.picker': { marginLeft: 0 }, @@ -230,9 +231,9 @@ export default (variables /*: * */ = variable) => { borderRightWidth: 0, borderLeftWidth: 0, borderColor: variables.inputBorderColor, - backgroundColor: "transparent", - flexDirection: "row", - alignItems: "center", + backgroundColor: 'transparent', + flexDirection: 'row', + alignItems: 'center', marginLeft: 2 }; diff --git a/native-base-theme/components/Label.js b/native-base-theme/components/Label.js index 01aa47b..118f648 100644 --- a/native-base-theme/components/Label.js +++ b/native-base-theme/components/Label.js @@ -1,10 +1,8 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const labelTheme = { - ".focused": { + '.focused': { width: 0 }, fontSize: 17 diff --git a/native-base-theme/components/Left.js b/native-base-theme/components/Left.js index 0a4bc96..e01d693 100644 --- a/native-base-theme/components/Left.js +++ b/native-base-theme/components/Left.js @@ -1,12 +1,10 @@ // @flow -import variable from './../variables/platform'; - -export default (variables /*: * */ = variable) => { +export default () => { const leftTheme = { flex: 1, alignSelf: 'center', - alignItems: 'flex-start', + alignItems: 'flex-start' }; return leftTheme; diff --git a/native-base-theme/components/ListItem.js b/native-base-theme/components/ListItem.js index 94a345d..c41ec5d 100644 --- a/native-base-theme/components/ListItem.js +++ b/native-base-theme/components/ListItem.js @@ -1,244 +1,246 @@ // @flow -import { Platform, PixelRatio } from "react-native"; +import { Platform, PixelRatio } from 'react-native'; -import pickerTheme from "./Picker"; -import variable from "./../variables/platform"; +import pickerTheme from './Picker'; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const platform = variables.platform; const selectedStyle = { - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.listItemSelected }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.listItemSelected } }; const listItemTheme = { - "NativeBase.InputGroup": { - "NativeBase.Icon": { + 'NativeBase.InputGroup': { + 'NativeBase.Icon': { paddingRight: 5 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { paddingRight: 5 }, - "NativeBase.Input": { + 'NativeBase.Input': { paddingHorizontal: 5 }, flex: 1, borderWidth: null, margin: -10, - borderBottomColor: "transparent" + borderBottomColor: 'transparent' }, - ".searchBar": { - "NativeBase.Item": { - "NativeBase.Icon": { - backgroundColor: "transparent", + '.searchBar': { + 'NativeBase.Item': { + 'NativeBase.Icon': { + backgroundColor: 'transparent', color: variables.dropdownLinkColor, fontSize: - platform === "ios" + platform === PLATFORM.IOS ? variables.iconFontSize - 10 : variables.iconFontSize - 5, - alignItems: "center", + alignItems: 'center', marginTop: 2, paddingRight: 8 }, - "NativeBase.IconNB": { - backgroundColor: "transparent", + 'NativeBase.IconNB': { + backgroundColor: 'transparent', color: null, - alignSelf: "center" + alignSelf: 'center' }, - "NativeBase.Input": { - alignSelf: "center" + 'NativeBase.Input': { + alignSelf: 'center' }, - alignSelf: "center", - alignItems: "center", - justifyContent: "flex-start", + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'flex-start', flex: 1, - height: platform === "ios" ? 30 : 40, - borderColor: "transparent", - backgroundColor: "#fff", + height: platform === PLATFORM.IOS ? 30 : 40, + borderColor: 'transparent', + backgroundColor: '#fff', borderRadius: 5 }, - "NativeBase.Button": { - ".transparent": { - "NativeBase.Text": { - fontWeight: "500" + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontWeight: '500' }, paddingHorizontal: null, - paddingLeft: platform === "ios" ? 10 : null + paddingLeft: platform === PLATFORM.IOS ? 10 : null }, - paddingHorizontal: platform === "ios" ? undefined : null, - width: platform === "ios" ? undefined : 0, - height: platform === "ios" ? undefined : 0 + 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": { + 'NativeBase.CheckBox': { marginLeft: -10, marginRight: 10 }, - ".first": { - ".itemHeader": { + '.first': { + '.itemHeader': { paddingTop: variables.listItemPadding + 3 } }, - ".itemHeader": { - ".first": { + '.itemHeader': { + '.first': { paddingTop: variables.listItemPadding + 3 }, - borderBottomWidth: platform === "ios" ? variables.borderWidth : null, + borderBottomWidth: + platform === PLATFORM.IOS ? variables.borderWidth : null, marginLeft: null, padding: variables.listItemPadding, paddingLeft: variables.listItemPadding + 5, paddingTop: - platform === "ios" ? variables.listItemPadding + 25 : undefined, + platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined, paddingBottom: - platform === "android" ? variables.listItemPadding + 20 : undefined, - flexDirection: "row", + platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined, + flexDirection: 'row', borderColor: variables.listBorderColor, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: 14, - color: platform === "ios" ? undefined : variables.listNoteColor + color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor } }, - ".itemDivider": { + '.itemDivider': { borderBottomWidth: null, marginLeft: null, padding: variables.listItemPadding, paddingLeft: variables.listItemPadding + 5, backgroundColor: variables.listDividerBg, - flexDirection: "row", + flexDirection: 'row', borderColor: variables.listBorderColor }, - ".selected": { - "NativeBase.Left": { + '.selected': { + 'NativeBase.Left': { ...selectedStyle }, - "NativeBase.Body": { + 'NativeBase.Body': { ...selectedStyle }, - "NativeBase.Right": { + 'NativeBase.Right': { ...selectedStyle }, ...selectedStyle }, - "NativeBase.Left": { - "NativeBase.Body": { - "NativeBase.Text": { - ".note": { + 'NativeBase.Left': { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' }, - fontWeight: "600" + fontWeight: '600' }, marginLeft: 10, alignItems: null, alignSelf: null }, - "NativeBase.Icon": { + 'NativeBase.Icon': { width: variables.iconFontSize - 10, fontSize: variables.iconFontSize - 10 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { width: variables.iconFontSize - 10, fontSize: variables.iconFontSize - 10 }, - "NativeBase.Text": { - alignSelf: "center" + 'NativeBase.Text': { + alignSelf: 'center' }, - flexDirection: "row" + flexDirection: 'row' }, - "NativeBase.Body": { - "NativeBase.Text": { + 'NativeBase.Body': { + 'NativeBase.Text': { marginHorizontal: variables.listItemPadding, - ".note": { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' } }, alignSelf: null, alignItems: null }, - "NativeBase.Right": { - "NativeBase.Badge": { + 'NativeBase.Right': { + 'NativeBase.Badge': { alignSelf: null }, - "NativeBase.PickerNB": { - "NativeBase.Button": { + 'NativeBase.PickerNB': { + 'NativeBase.Button': { marginRight: -15, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.topTabBarActiveTextColor } } }, - "NativeBase.Button": { + 'NativeBase.Button': { alignSelf: null, - ".transparent": { - "NativeBase.Text": { + '.transparent': { + 'NativeBase.Text': { color: variables.topTabBarActiveTextColor } } }, - "NativeBase.Icon": { + 'NativeBase.Icon': { alignSelf: null, fontSize: variables.iconFontSize - 8, - color: "#c9c8cd" + color: '#c9c8cd' }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { alignSelf: null, fontSize: variables.iconFontSize - 8, - color: "#c9c8cd" + color: '#c9c8cd' }, - "NativeBase.Text": { - ".note": { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' }, alignSelf: null }, - "NativeBase.Thumbnail": { + 'NativeBase.Thumbnail': { alignSelf: null }, - "NativeBase.Image": { + 'NativeBase.Image': { alignSelf: null }, - "NativeBase.Radio": { + 'NativeBase.Radio': { alignSelf: null }, - "NativeBase.Checkbox": { + 'NativeBase.Checkbox': { alignSelf: null }, - "NativeBase.Switch": { + 'NativeBase.Switch': { alignSelf: null }, padding: null, flex: 0.28 }, - "NativeBase.Text": { - ".note": { + 'NativeBase.Text': { + '.note': { color: variables.listNoteColor, - fontWeight: "200" + fontWeight: '200' }, - alignSelf: "center" + alignSelf: 'center' }, - ".last": { + '.last': { marginLeft: -(variables.listItemPadding + 5), paddingLeft: (variables.listItemPadding + 5) * 2, top: 1 }, - ".avatar": { - "NativeBase.Left": { + '.avatar': { + 'NativeBase.Left': { flex: 0, - alignSelf: "flex-start", + alignSelf: 'flex-start', paddingTop: 14 }, - "NativeBase.Body": { - "NativeBase.Text": { + 'NativeBase.Body': { + 'NativeBase.Text': { marginLeft: null }, flex: 1, @@ -247,24 +249,24 @@ export default (variables /*: * */ = variable) => { borderColor: variables.listBorderColor, marginLeft: variables.listItemPadding + 5 }, - "NativeBase.Right": { - "NativeBase.Text": { - ".note": { + 'NativeBase.Right': { + 'NativeBase.Text': { + '.note': { fontSize: variables.noteFontSize - 2 } }, flex: 0, paddingRight: variables.listItemPadding + 5, - alignSelf: "stretch", + alignSelf: 'stretch', paddingVertical: variables.listItemPadding, borderBottomWidth: variables.borderWidth, borderColor: variables.listBorderColor }, - ".noBorder": { - "NativeBase.Body": { + '.noBorder': { + 'NativeBase.Body': { borderBottomWidth: null }, - "NativeBase.Right": { + 'NativeBase.Right': { borderBottomWidth: null } }, @@ -272,12 +274,12 @@ export default (variables /*: * */ = variable) => { paddingVertical: null, paddingRight: null }, - ".thumbnail": { - "NativeBase.Left": { + '.thumbnail': { + 'NativeBase.Left': { flex: 0 }, - "NativeBase.Body": { - "NativeBase.Text": { + 'NativeBase.Body': { + 'NativeBase.Text': { marginLeft: null }, flex: 1, @@ -286,10 +288,10 @@ export default (variables /*: * */ = variable) => { borderColor: variables.listBorderColor, marginLeft: variables.listItemPadding + 5 }, - "NativeBase.Right": { - "NativeBase.Button": { - ".transparent": { - "NativeBase.Text": { + 'NativeBase.Right': { + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { fontSize: variables.listNoteSize, color: variables.sTabBarActiveTextColor } @@ -297,18 +299,18 @@ export default (variables /*: * */ = variable) => { height: null }, flex: 0, - justifyContent: "center", - alignSelf: "stretch", + justifyContent: 'center', + alignSelf: 'stretch', paddingRight: variables.listItemPadding + 5, paddingVertical: variables.listItemPadding + 5, borderBottomWidth: variables.borderWidth, borderColor: variables.listBorderColor }, - ".noBorder": { - "NativeBase.Body": { + '.noBorder': { + 'NativeBase.Body': { borderBottomWidth: null }, - "NativeBase.Right": { + 'NativeBase.Right': { borderBottomWidth: null } }, @@ -316,103 +318,103 @@ export default (variables /*: * */ = variable) => { paddingVertical: null, paddingRight: null }, - ".icon": { - ".last": { - "NativeBase.Body": { + '.icon': { + '.last': { + 'NativeBase.Body': { borderBottomWidth: null }, - "NativeBase.Right": { + 'NativeBase.Right': { borderBottomWidth: null }, borderBottomWidth: variables.borderWidth, borderColor: variables.listBorderColor }, - "NativeBase.Left": { - "NativeBase.Button": { - "NativeBase.IconNB": { + 'NativeBase.Left': { + 'NativeBase.Button': { + 'NativeBase.IconNB': { marginHorizontal: null, fontSize: variables.iconFontSize - 5 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { marginHorizontal: null, fontSize: variables.iconFontSize - 8 }, - alignSelf: "center", + alignSelf: 'center', height: 29, width: 29, borderRadius: 6, paddingVertical: null, paddingHorizontal: null, - alignItems: "center", - justifyContent: "center" + alignItems: 'center', + justifyContent: 'center' }, - "NativeBase.Icon": { + 'NativeBase.Icon': { width: variables.iconFontSize - 5, fontSize: variables.iconFontSize - 2 }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { width: variables.iconFontSize - 5, fontSize: variables.iconFontSize - 2 }, paddingRight: variables.listItemPadding + 5, flex: 0, height: 44, - justifyContent: "center", - alignItems: "center" + justifyContent: 'center', + alignItems: 'center' }, - "NativeBase.Body": { - "NativeBase.Text": { + 'NativeBase.Body': { + 'NativeBase.Text': { marginLeft: null, fontSize: 17 }, flex: 1, height: 44, - justifyContent: "center", + justifyContent: 'center', borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), borderColor: variables.listBorderColor }, - "NativeBase.Right": { - "NativeBase.Text": { - textAlign: "center", - color: "#8F8E95", + 'NativeBase.Right': { + 'NativeBase.Text': { + textAlign: 'center', + color: '#8F8E95', fontSize: 17 }, - "NativeBase.IconNB": { - color: "#C8C7CC", + 'NativeBase.IconNB': { + color: '#C8C7CC', fontSize: variables.iconFontSize - 10, - alignSelf: "center", + alignSelf: 'center', paddingLeft: 10, paddingTop: 3 }, - "NativeBase.Icon": { - color: "#C8C7CC", + 'NativeBase.Icon': { + color: '#C8C7CC', fontSize: variables.iconFontSize - 10, - alignSelf: "center", + alignSelf: 'center', paddingLeft: 10, paddingTop: 3 }, - "NativeBase.Switch": { - marginRight: Platform.OS === "ios" ? undefined : -5, + 'NativeBase.Switch': { + marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5, alignSelf: null }, - "NativeBase.PickerNB": { + 'NativeBase.PickerNB': { ...pickerTheme() }, - flexDirection: "row", - alignItems: "center", + flexDirection: 'row', + alignItems: 'center', flex: 0, - alignSelf: "stretch", + alignSelf: 'stretch', height: 44, - justifyContent: "flex-end", + justifyContent: 'flex-end', borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), borderColor: variables.listBorderColor, paddingRight: variables.listItemPadding + 5 }, - ".noBorder": { - "NativeBase.Body": { + '.noBorder': { + 'NativeBase.Body': { borderBottomWidth: null }, - "NativeBase.Right": { + 'NativeBase.Right': { borderBottomWidth: null } }, @@ -420,18 +422,18 @@ export default (variables /*: * */ = variable) => { paddingVertical: null, paddingRight: null, height: 44, - justifyContent: "center" + justifyContent: 'center' }, - ".noBorder": { + '.noBorder': { borderBottomWidth: null }, - ".noIndent": { + '.noIndent': { marginLeft: null, padding: variables.listItemPadding, paddingLeft: variables.listItemPadding + 6 }, - alignItems: "center", - flexDirection: "row", + alignItems: 'center', + flexDirection: 'row', paddingRight: variables.listItemPadding + 6, paddingVertical: variables.listItemPadding + 3, marginLeft: variables.listItemPadding + 6, diff --git a/native-base-theme/components/Picker.android.js b/native-base-theme/components/Picker.android.js index b1867f9..300a743 100644 --- a/native-base-theme/components/Picker.android.js +++ b/native-base-theme/components/Picker.android.js @@ -1,11 +1,9 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const pickerTheme = { - ".note": { - color: "#8F8E95" + '.note': { + color: '#8F8E95' }, // width: 90, marginRight: -4, diff --git a/native-base-theme/components/Picker.ios.js b/native-base-theme/components/Picker.ios.js index 36ea854..b81b056 100644 --- a/native-base-theme/components/Picker.ios.js +++ b/native-base-theme/components/Picker.ios.js @@ -1,8 +1,6 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const pickerTheme = {}; return pickerTheme; diff --git a/native-base-theme/components/Picker.js b/native-base-theme/components/Picker.js index b1867f9..300a743 100644 --- a/native-base-theme/components/Picker.js +++ b/native-base-theme/components/Picker.js @@ -1,11 +1,9 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const pickerTheme = { - ".note": { - color: "#8F8E95" + '.note': { + color: '#8F8E95' }, // width: 90, marginRight: -4, diff --git a/native-base-theme/components/Radio.js b/native-base-theme/components/Radio.js index b6fb0ea..d1e0e5f 100644 --- a/native-base-theme/components/Radio.js +++ b/native-base-theme/components/Radio.js @@ -1,26 +1,29 @@ // @flow -import { Platform } from "react-native"; +import { Platform } from 'react-native'; -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const radioTheme = { - ".selected": { - "NativeBase.IconNB": { - color: Platform.OS === "ios" - ? variables.radioColor - : variables.radioSelectedColorAndroid, - lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight, - height: Platform.OS === "ios" ? 20 : undefined + '.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 === "ios" ? "transparent" : undefined, - lineHeight: Platform.OS === "ios" - ? undefined - : variables.radioBtnLineHeight, - fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize + '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 } }; diff --git a/native-base-theme/components/Right.js b/native-base-theme/components/Right.js index 382e70b..53b3308 100644 --- a/native-base-theme/components/Right.js +++ b/native-base-theme/components/Right.js @@ -1,15 +1,13 @@ // @flow -import variable from './../variables/platform'; - -export default (variables /*: * */ = variable) => { +export default () => { const rightTheme = { 'NativeBase.Button': { - alignSelf: null, + alignSelf: null }, flex: 1, alignSelf: 'center', - alignItems: 'flex-end', + alignItems: 'flex-end' }; return rightTheme; diff --git a/native-base-theme/components/Segment.js b/native-base-theme/components/Segment.js index 6ff15c2..8ad669c 100644 --- a/native-base-theme/components/Segment.js +++ b/native-base-theme/components/Segment.js @@ -1,50 +1,51 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const platform = variables.platform; const segmentTheme = { height: 45, borderColor: variables.segmentBorderColorMain, - flexDirection: "row", - justifyContent: "center", + flexDirection: 'row', + justifyContent: 'center', backgroundColor: variables.segmentBackgroundColor, - "NativeBase.Button": { - alignSelf: "center", + 'NativeBase.Button': { + alignSelf: 'center', borderRadius: 0, paddingTop: 3, paddingBottom: 3, height: 30, - backgroundColor: "transparent", + backgroundColor: 'transparent', borderWidth: 1, borderLeftWidth: 0, borderColor: variables.segmentBorderColor, elevation: 0, - ".active": { + '.active': { backgroundColor: variables.segmentActiveBackgroundColor, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.segmentActiveTextColor }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.segmentActiveTextColor } }, - ".first": { - borderTopLeftRadius: platform === "ios" ? 5 : undefined, - borderBottomLeftRadius: platform === "ios" ? 5 : undefined, + '.first': { + borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, + borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, borderLeftWidth: 1 }, - ".last": { - borderTopRightRadius: platform === "ios" ? 5 : undefined, - borderBottomRightRadius: platform === "ios" ? 5 : undefined + '.last': { + borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined, + borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.segmentTextColor, fontSize: 14 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { fontSize: 22, paddingTop: 0, color: variables.segmentTextColor diff --git a/native-base-theme/components/Separator.js b/native-base-theme/components/Separator.js index f31b48a..7fdf313 100644 --- a/native-base-theme/components/Separator.js +++ b/native-base-theme/components/Separator.js @@ -2,7 +2,7 @@ import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const theme = { '.group': { height: 50, @@ -11,38 +11,38 @@ export default (variables /*: * */ = variable) => { '.bordered': { height: 50, paddingVertical: variables.listItemPadding - 8, - paddingTop: variables.listItemPadding + 12, - }, + paddingTop: variables.listItemPadding + 12 + } }, '.bordered': { '.noTopBorder': { - borderTopWidth: 0, + borderTopWidth: 0 }, '.noBottomBorder': { - borderBottomWidth: 0, + borderBottomWidth: 0 }, height: 35, paddingTop: variables.listItemPadding + 2, paddingBottom: variables.listItemPadding, borderBottomWidth: variables.borderWidth, borderTopWidth: variables.borderWidth, - borderColor: variables.listBorderColor, + borderColor: variables.listBorderColor }, 'NativeBase.Text': { fontSize: variables.tabBarTextSize - 2, - color: '#777', + color: '#777' }, '.noTopBorder': { - borderTopWidth: 0, + borderTopWidth: 0 }, '.noBottomBorder': { - borderBottomWidth: 0, + borderBottomWidth: 0 }, height: 38, backgroundColor: '#F0EFF5', flex: 1, justifyContent: 'center', - paddingLeft: variables.listItemPadding + 5, + paddingLeft: variables.listItemPadding + 5 }; return theme; diff --git a/native-base-theme/components/Spinner.js b/native-base-theme/components/Spinner.js index edc811b..a453b3f 100644 --- a/native-base-theme/components/Spinner.js +++ b/native-base-theme/components/Spinner.js @@ -1,8 +1,6 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const spinnerTheme = { height: 80 }; diff --git a/native-base-theme/components/Subtitle.js b/native-base-theme/components/Subtitle.js index 897c560..bb8ea0a 100644 --- a/native-base-theme/components/Subtitle.js +++ b/native-base-theme/components/Subtitle.js @@ -1,17 +1,18 @@ // @flow -import { Platform } from "react-native"; +import { Platform } from 'react-native'; -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const subtitleTheme = { fontSize: variables.subTitleFontSize, fontFamily: variables.titleFontfamily, color: variables.subtitleColor, - textAlign: "center", - paddingLeft: Platform.OS === "ios" ? 4 : 0, - marginLeft: Platform.OS === "ios" ? undefined : -3 + textAlign: 'center', + paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, + marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3 }; return subtitleTheme; diff --git a/native-base-theme/components/SwipeRow.js b/native-base-theme/components/SwipeRow.js index 3686582..41d6083 100644 --- a/native-base-theme/components/SwipeRow.js +++ b/native-base-theme/components/SwipeRow.js @@ -1,47 +1,45 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const swipeRowTheme = { - "NativeBase.ListItem": { - ".list": { - backgroundColor: "#FFF", + 'NativeBase.ListItem': { + '.list': { + backgroundColor: '#FFF' }, - marginLeft: 0, + marginLeft: 0 }, - "NativeBase.Left": { + 'NativeBase.Left': { flex: 0, alignSelf: null, alignItems: null, - "NativeBase.Button": { + 'NativeBase.Button': { flex: 1, - alignItems: "center", - justifyContent: "center", - alignSelf: "stretch", - borderRadius: 0, - }, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + } }, - "NativeBase.Right": { + 'NativeBase.Right': { flex: 0, alignSelf: null, alignItems: null, - "NativeBase.Button": { + 'NativeBase.Button': { flex: 1, - alignItems: "center", - justifyContent: "center", - alignSelf: "stretch", - borderRadius: 0, - }, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + } }, - "NativeBase.Button": { + 'NativeBase.Button': { flex: 1, height: null, - alignItems: "center", - justifyContent: "center", - alignSelf: "stretch", - borderRadius: 0, - }, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0 + } }; return swipeRowTheme; diff --git a/native-base-theme/components/Switch.js b/native-base-theme/components/Switch.js index 116fa8f..6b667bc 100644 --- a/native-base-theme/components/Switch.js +++ b/native-base-theme/components/Switch.js @@ -1,10 +1,8 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const switchTheme = { - marginVertical: -5, + marginVertical: -5 }; return switchTheme; diff --git a/native-base-theme/components/Tab.js b/native-base-theme/components/Tab.js index 35ede8b..b242306 100644 --- a/native-base-theme/components/Tab.js +++ b/native-base-theme/components/Tab.js @@ -1,11 +1,9 @@ // @flow -import variable from "./../variables/platform"; - -export default (variables /*: * */ = variable) => { +export default () => { const tabTheme = { flex: 1, - backgroundColor: "#FFF" + backgroundColor: '#FFF' }; return tabTheme; diff --git a/native-base-theme/components/TabBar.js b/native-base-theme/components/TabBar.js index 9714cdc..fa1490d 100644 --- a/native-base-theme/components/TabBar.js +++ b/native-base-theme/components/TabBar.js @@ -1,55 +1,55 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const tabBarTheme = { - ".tabIcon": { + '.tabIcon': { height: undefined }, - ".vertical": { + '.vertical': { height: 60 }, - "NativeBase.Button": { - ".transparent": { - "NativeBase.Text": { + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { fontSize: variables.tabFontSize, color: variables.sTabBarActiveTextColor, - fontWeight: "400" + fontWeight: '400' }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.sTabBarActiveTextColor } }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { color: variables.sTabBarActiveTextColor }, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: variables.tabFontSize, color: variables.sTabBarActiveTextColor, - fontWeight: "400" + fontWeight: '400' }, - ".isTabActive": { - "NativeBase.Text": { - fontWeight: "900" + '.isTabActive': { + 'NativeBase.Text': { + fontWeight: '900' } }, flex: 1, - alignSelf: "stretch", - alignItems: "center", - justifyContent: "center", + alignSelf: 'stretch', + alignItems: 'center', + justifyContent: 'center', borderRadius: null, - borderBottomColor: "transparent", + borderBottomColor: 'transparent', backgroundColor: variables.tabBgColor }, height: 45, - flexDirection: "row", - justifyContent: "space-around", + flexDirection: 'row', + justifyContent: 'space-around', borderWidth: 1, borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0, - borderBottomColor: "#ccc", + borderBottomColor: '#ccc', backgroundColor: variables.tabBgColor }; diff --git a/native-base-theme/components/TabContainer.js b/native-base-theme/components/TabContainer.js index 44d4886..fa91548 100644 --- a/native-base-theme/components/TabContainer.js +++ b/native-base-theme/components/TabContainer.js @@ -1,24 +1,24 @@ // @flow -import variable from "./../variables/platform"; -import { Platform } from "react-native"; +import { Platform } from 'react-native'; -export default (variables /*: * */ = variable) => { +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; + +export default (variables /* : * */ = variable) => { const platformStyle = variables.platformStyle; - const platform = variables.platform; const tabContainerTheme = { elevation: 3, height: 50, - flexDirection: "row", - shadowColor: platformStyle === "material" ? "#000" : undefined, - shadowOffset: platformStyle === "material" - ? { width: 0, height: 2 } - : undefined, - shadowOpacity: platformStyle === "material" ? 0.2 : undefined, - shadowRadius: platformStyle === "material" ? 1.2 : undefined, - justifyContent: "space-around", - borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0, + 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 }; diff --git a/native-base-theme/components/TabHeading.js b/native-base-theme/components/TabHeading.js index 9f79903..74cd6f4 100644 --- a/native-base-theme/components/TabHeading.js +++ b/native-base-theme/components/TabHeading.js @@ -1,35 +1,36 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const platform = variables.platform; const tabHeadingTheme = { - flexDirection: "row", + flexDirection: 'row', backgroundColor: variables.tabDefaultBg, flex: 1, - alignItems: "center", - justifyContent: "center", - ".scrollable": { + alignItems: 'center', + justifyContent: 'center', + '.scrollable': { paddingHorizontal: 20, - flex: platform === "android" ? 0 : 1, - minWidth: platform === "android" ? undefined : 60 + flex: platform === PLATFORM.ANDROID ? 0 : 1, + minWidth: platform === PLATFORM.ANDROID ? undefined : 60 }, - "NativeBase.Text": { + 'NativeBase.Text': { color: variables.topTabBarTextColor, marginHorizontal: 7 }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.topTabBarTextColor, - fontSize: platform === "ios" ? 26 : undefined + fontSize: platform === PLATFORM.IOS ? 26 : undefined }, - ".active": { - "NativeBase.Text": { + '.active': { + 'NativeBase.Text': { color: variables.topTabBarActiveTextColor, - fontWeight: "600" + fontWeight: '600' }, - "NativeBase.Icon": { + 'NativeBase.Icon': { color: variables.topTabBarActiveTextColor } } diff --git a/native-base-theme/components/Text.js b/native-base-theme/components/Text.js index 2c95ce1..8c3fa24 100644 --- a/native-base-theme/components/Text.js +++ b/native-base-theme/components/Text.js @@ -1,14 +1,14 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const textTheme = { fontSize: variables.DefaultFontSize, fontFamily: variables.fontFamily, color: variables.textColor, - ".note": { - color: "#a7a7a7", + '.note': { + color: '#a7a7a7', fontSize: variables.noteFontSize } }; diff --git a/native-base-theme/components/Textarea.js b/native-base-theme/components/Textarea.js index f5e3974..a46d93b 100644 --- a/native-base-theme/components/Textarea.js +++ b/native-base-theme/components/Textarea.js @@ -1,15 +1,15 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const textAreaTheme = { - ".underline": { + '.underline': { borderBottomWidth: variables.borderWidth, marginTop: 5, borderColor: variables.inputBorderColor }, - ".bordered": { + '.bordered': { borderWidth: 1, marginTop: 5, borderColor: variables.inputBorderColor @@ -18,7 +18,7 @@ export default (variables /*: * */ = variable) => { paddingLeft: 10, paddingRight: 5, fontSize: 15, - textAlignVertical: "top" + textAlignVertical: 'top' }; return textAreaTheme; diff --git a/native-base-theme/components/Thumbnail.js b/native-base-theme/components/Thumbnail.js index efff792..c6c9f68 100644 --- a/native-base-theme/components/Thumbnail.js +++ b/native-base-theme/components/Thumbnail.js @@ -1,41 +1,39 @@ // @flow -import variable from './../variables/platform'; - -export default (variables /*: * */ = variable) => { +export default () => { const thumbnailTheme = { '.square': { borderRadius: 0, '.small': { width: 36, height: 36, - borderRadius: 0, + borderRadius: 0 }, '.large': { width: 80, height: 80, - borderRadius: 0, - }, + borderRadius: 0 + } }, '.small': { width: 36, height: 36, borderRadius: 18, '.square': { - borderRadius: 0, - }, + borderRadius: 0 + } }, '.large': { width: 80, height: 80, borderRadius: 40, '.square': { - borderRadius: 0, - }, + borderRadius: 0 + } }, width: 56, height: 56, - borderRadius: 28, + borderRadius: 28 }; return thumbnailTheme; diff --git a/native-base-theme/components/Title.js b/native-base-theme/components/Title.js index 5792e57..33e96bf 100644 --- a/native-base-theme/components/Title.js +++ b/native-base-theme/components/Title.js @@ -1,18 +1,19 @@ // @flow -import { Platform } from "react-native"; +import { Platform } from 'react-native'; -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const titleTheme = { fontSize: variables.titleFontSize, fontFamily: variables.titleFontfamily, color: variables.titleFontColor, - fontWeight: Platform.OS === "ios" ? "700" : undefined, - textAlign: "center", - paddingLeft: Platform.OS === "ios" ? 4 : 0, - marginLeft: Platform.OS === "ios" ? undefined : -3, + 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 }; diff --git a/native-base-theme/components/Toast.js b/native-base-theme/components/Toast.js index a595308..f01db74 100644 --- a/native-base-theme/components/Toast.js +++ b/native-base-theme/components/Toast.js @@ -1,36 +1,37 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; +import { PLATFORM } from './../variables/commonColor'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const platform = variables.platform; const toastTheme = { - ".danger": { + '.danger': { backgroundColor: variables.brandDanger }, - ".warning": { + '.warning': { backgroundColor: variables.brandWarning }, - ".success": { + '.success': { backgroundColor: variables.brandSuccess }, - backgroundColor: "rgba(0,0,0,0.8)", - borderRadius: platform === "ios" ? 5 : 0, - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center", + 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", + 'NativeBase.Text': { + color: '#fff', flex: 1 }, - "NativeBase.Button": { - backgroundColor: "transparent", + 'NativeBase.Button': { + backgroundColor: 'transparent', height: 30, elevation: 0, - "NativeBase.Text": { + 'NativeBase.Text': { fontSize: 14 } } diff --git a/native-base-theme/components/View.js b/native-base-theme/components/View.js index b9c7aeb..827581e 100644 --- a/native-base-theme/components/View.js +++ b/native-base-theme/components/View.js @@ -1,10 +1,10 @@ // @flow -import variable from "./../variables/platform"; +import variable from './../variables/platform'; -export default (variables /*: * */ = variable) => { +export default (variables /* : * */ = variable) => { const viewTheme = { - ".padder": { + '.padder': { padding: variables.contentPadding } }; diff --git a/native-base-theme/components/index.js b/native-base-theme/components/index.js index d1102fd..8b6be3e 100644 --- a/native-base-theme/components/index.js +++ b/native-base-theme/components/index.js @@ -1,216 +1,218 @@ +/* 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"; +import _ from 'lodash'; -export default (variables /*: * */ = variable) => { +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": { + 'NativeBase.Left': { ...leftTheme(variables) }, - "NativeBase.Right": { + 'NativeBase.Right': { ...rightTheme(variables) }, - "NativeBase.Body": { + 'NativeBase.Body': { ...bodyTheme(variables) }, - "NativeBase.Header": { + 'NativeBase.Header': { ...headerTheme(variables) }, - "NativeBase.Button": { + 'NativeBase.Button': { ...buttonTheme(variables) }, - "NativeBase.Title": { + 'NativeBase.Title': { ...titleTheme(variables) }, - "NativeBase.Subtitle": { + 'NativeBase.Subtitle': { ...subtitleTheme(variables) }, - "NativeBase.InputGroup": { + 'NativeBase.InputGroup': { ...inputGroupTheme(variables) }, - "NativeBase.Input": { + 'NativeBase.Input': { ...inputTheme(variables) }, - "NativeBase.Badge": { + 'NativeBase.Badge': { ...badgeTheme(variables) }, - "NativeBase.CheckBox": { + 'NativeBase.CheckBox': { ...checkBoxTheme(variables) }, - "NativeBase.Radio": { + 'NativeBase.Radio': { ...radioTheme(variables) }, - "NativeBase.Card": { + 'NativeBase.Card': { ...cardTheme(variables) }, - "NativeBase.CardItem": { + 'NativeBase.CardItem': { ...cardItemTheme(variables) }, - "NativeBase.Toast": { + 'NativeBase.Toast': { ...toastTheme(variables) }, - "NativeBase.H1": { + 'NativeBase.H1': { ...h1Theme(variables) }, - "NativeBase.H2": { + 'NativeBase.H2': { ...h2Theme(variables) }, - "NativeBase.H3": { + 'NativeBase.H3': { ...h3Theme(variables) }, - "NativeBase.Form": { + 'NativeBase.Form': { ...formTheme(variables) }, - "NativeBase.Container": { + 'NativeBase.Container': { ...containerTheme(variables) }, - "NativeBase.Content": { + 'NativeBase.Content': { ...contentTheme(variables) }, - "NativeBase.Footer": { + 'NativeBase.Footer': { ...footerTheme(variables) }, - "NativeBase.Tabs": { + 'NativeBase.Tabs': { flex: 1 }, - "NativeBase.FooterTab": { + 'NativeBase.FooterTab': { ...footerTabTheme(variables) }, - "NativeBase.ListItem": { + 'NativeBase.ListItem': { ...listItemTheme(variables) }, - "NativeBase.ListItem1": { + 'NativeBase.ListItem1': { ...listItemTheme(variables) }, - "NativeBase.Icon": { + 'NativeBase.Icon': { ...iconTheme(variables) }, - "NativeBase.IconNB": { + 'NativeBase.IconNB': { ...iconTheme(variables) }, - "NativeBase.Text": { + 'NativeBase.Text': { ...textTheme(variables) }, - "NativeBase.Spinner": { + 'NativeBase.Spinner': { ...spinnerTheme(variables) }, - "NativeBase.Fab": { + 'NativeBase.Fab': { ...fabTheme(variables) }, - "NativeBase.Item": { + 'NativeBase.Item': { ...itemTheme(variables) }, - "NativeBase.Label": { + 'NativeBase.Label': { ...labelTheme(variables) }, - "NativeBase.Textarea": { + 'NativeBase.Textarea': { ...textAreaTheme(variables) }, - "NativeBase.PickerNB": { + 'NativeBase.PickerNB': { ...pickerTheme(variables), - "NativeBase.Button": { - "NativeBase.Text": {} + 'NativeBase.Button': { + 'NativeBase.Text': {} } }, - "NativeBase.Tab": { + 'NativeBase.Tab': { ...tabTheme(variables) }, - "NativeBase.Segment": { + 'NativeBase.Segment': { ...segmentTheme(variables) }, - "NativeBase.TabBar": { + 'NativeBase.TabBar': { ...tabBarTheme(variables) }, - "NativeBase.ViewNB": { + 'NativeBase.ViewNB': { ...viewTheme(variables) }, - "NativeBase.TabHeading": { + 'NativeBase.TabHeading': { ...tabHeadingTheme(variables) }, - "NativeBase.TabContainer": { + 'NativeBase.TabContainer': { ...tabContainerTheme(variables) }, - "NativeBase.Switch": { + 'NativeBase.Switch': { ...switchTheme(variables) }, - "NativeBase.Separator": { + 'NativeBase.Separator': { ...separatorTheme(variables) }, - "NativeBase.SwipeRow": { + 'NativeBase.SwipeRow': { ...swipeRowTheme(variables) }, - "NativeBase.Thumbnail": { + 'NativeBase.Thumbnail': { ...thumbnailTheme(variables) } }; @@ -218,9 +220,9 @@ export default (variables /*: * */ = variable) => { const cssifyTheme = (grandparent, parent, parentKey) => { _.forEach(parent, (style, styleName) => { if ( - styleName.indexOf(".") === 0 && + styleName.indexOf('.') === 0 && parentKey && - parentKey.indexOf(".") === 0 + parentKey.indexOf('.') === 0 ) { if (grandparent) { if (!grandparent[styleName]) { @@ -230,7 +232,12 @@ export default (variables /*: * */ = variable) => { } } } - if (style && typeof style === "object" && styleName !== "fontVariant" && styleName !== "transform") { + if ( + style && + typeof style === 'object' && + styleName !== 'fontVariant' && + styleName !== 'transform' + ) { cssifyTheme(parent, style, styleName); } }); diff --git a/native-base-theme/variables/commonColor.js b/native-base-theme/variables/commonColor.js index c004877..5b3aa80 100644 --- a/native-base-theme/variables/commonColor.js +++ b/native-base-theme/variables/commonColor.js @@ -1,79 +1,104 @@ // @flow -import color from "color"; +import color from 'color'; +import { Platform, Dimensions, PixelRatio } from 'react-native'; -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 deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; const platformStyle = undefined; const isIphoneX = - platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); + 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", + // Accordion + headerStyle: '#edebed', + iconStyle: '#000', + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + accordionBorderColor: '#d3d3d3', - //Android + // 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)", - btnUppercaseAndroidText: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, // Badge - badgeBg: "#ED1727", - badgeColor: "#fff", - badgePadding: platform === "ios" ? 3 : 0, + badgeBg: '#ED1727', + badgeColor: '#fff', + badgePadding: platform === PLATFORM.IOS ? 3 : 0, // Button - btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", - btnDisabledBg: "#b5b5b5", + buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', + buttonDisabledBg: '#b5b5b5', buttonPadding: 6, - get btnPrimaryBg() { + get buttonPrimaryBg() { return this.brandPrimary; }, - get btnPrimaryColor() { + get buttonPrimaryColor() { return this.inverseTextColor; }, - get btnInfoBg() { + get buttonInfoBg() { return this.brandInfo; }, - get btnInfoColor() { + get buttonInfoColor() { return this.inverseTextColor; }, - get btnSuccessBg() { + get buttonSuccessBg() { return this.brandSuccess; }, - get btnSuccessColor() { + get buttonSuccessColor() { return this.inverseTextColor; }, - get btnDangerBg() { + get buttonDangerBg() { return this.brandDanger; }, - get btnDangerColor() { + get buttonDangerColor() { return this.inverseTextColor; }, - get btnWarningBg() { + get buttonWarningBg() { return this.brandWarning; }, - get btnWarningColor() { + get buttonWarningColor() { return this.inverseTextColor; }, - get btnTextSize() { - return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; + get buttonTextSize() { + return platform === PLATFORM.IOS + ? this.fontSizeBase * 1.1 + : this.fontSizeBase - 1; }, - get btnTextSizeLarge() { + get buttonTextSizeLarge() { return this.fontSizeBase * 1.5; }, - get btnTextSizeSmall() { + get buttonTextSizeSmall() { return this.fontSizeBase * 0.8; }, get borderRadiusLarge() { @@ -87,42 +112,45 @@ export default { }, // Card - cardDefaultBg: "#fff", - cardBorderColor: "#ccc", + cardDefaultBg: '#fff', + cardBorderColor: '#ccc', cardBorderRadius: 2, - cardItemPadding: platform === "ios" ? 10 : 12, + cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, // CheckBox - CheckboxRadius: platform === "ios" ? 13 : 0, - CheckboxBorderWidth: platform === "ios" ? 1 : 2, - CheckboxPaddingLeft: platform === "ios" ? 4 : 2, - CheckboxPaddingBottom: platform === "ios" ? 0 : 5, - CheckboxIconSize: platform === "ios" ? 21 : 16, - CheckboxIconMarginTop: platform === "ios" ? undefined : 1, - CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17, - checkboxBgColor: "#039BE5", + 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", + checkboxTickColor: '#fff', // Color - brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5", - brandInfo: "#62B1F6", - brandSuccess: "#5cb85c", - brandDanger: "#d9534f", - brandWarning: "#f0ad4e", - brandDark: "#000", - brandLight: "#f4f4f4", + brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', + brandInfo: '#62B1F6', + brandSuccess: '#5cb85c', + brandDanger: '#d9534f', + brandWarning: '#f0ad4e', + brandDark: '#000', + brandLight: '#f4f4f4', - //Container - containerBgColor: "#fff", + // Container + containerBgColor: '#fff', - //Date Picker - datePickerTextColor: "#000", - datePickerBg: "transparent", + // Date Picker + datePickerTextColor: '#000', + datePickerBg: 'transparent', + + // FAB + fabWidth: 56, // Font DefaultFontSize: 16, - fontFamily: platform === "ios" ? "System" : "Roboto", + fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto', fontSizeBase: 15, get fontSizeH1() { return this.fontSizeBase * 1.8; @@ -136,28 +164,28 @@ export default { // Footer footerHeight: 55, - footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", + footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', footerPaddingBottom: 0, // FooterTab - tabBarTextColor: platform === "ios" ? "#737373" : "#bfc6ea", - tabBarTextSize: platform === "ios" ? 14 : 11, - activeTab: platform === "ios" ? "#007aff" : "#fff", - sTabBarActiveTextColor: "#007aff", - tabBarActiveTextColor: platform === "ios" ? "#2874F0" : "#fff", - tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", + 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 === "ios" ? "#007aff" : "#fff", - toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", - toolbarHeight: platform === "ios" ? 64 : 56, - toolbarSearchIconSize: platform === "ios" ? 20 : 23, - toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", - searchBarHeight: platform === "ios" ? 30 : 40, - searchBarInputHeight: platform === "ios" ? 30 : 50, - toolbarBtnTextColor: platform === "ios" ? "#007aff" : "#fff", - iosStatusbar: "dark-content", - toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5", + 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) @@ -170,102 +198,102 @@ export default { }, // Icon - iconFamily: "Ionicons", - iconFontSize: platform === "ios" ? 30 : 28, - iconHeaderSize: platform === "ios" ? 33 : 24, + iconFamily: 'Ionicons', + iconFontSize: platform === PLATFORM.IOS ? 30 : 28, + iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24, // InputGroup inputFontSize: 17, - inputBorderColor: "#D9D5DC", - inputSuccessBorderColor: "#2b8339", - inputErrorBorderColor: "#ed2f2f", + inputBorderColor: '#D9D5DC', + inputSuccessBorderColor: '#2b8339', + inputErrorBorderColor: '#ed2f2f', inputHeightBase: 50, get inputColor() { return this.textColor; }, get inputColorPlaceholder() { - return "#575757"; + return '#575757'; }, // Line Height - btnLineHeight: 19, + buttonLineHeight: 19, lineHeightH1: 32, lineHeightH2: 27, lineHeightH3: 22, - lineHeight: platform === "ios" ? 20 : 24, + lineHeight: platform === PLATFORM.IOS ? 20 : 24, // List - listBg: "transparent", - listBorderColor: "#c9c9c9", - listDividerBg: "#f4f4f4", - listBtnUnderlayColor: "#DDD", - listItemPadding: platform === "ios" ? 10 : 12, - listNoteColor: "#808080", + listBg: 'transparent', + listBorderColor: '#c9c9c9', + listDividerBg: '#f4f4f4', + listBtnUnderlayColor: '#DDD', + listItemPadding: platform === PLATFORM.IOS ? 10 : 12, + listNoteColor: '#808080', listNoteSize: 13, - listItemSelected: platform === "ios" ? "#007aff" : "#3F51B5", + listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', // Progress Bar - defaultProgressColor: "#E4202D", - inverseProgressColor: "#1A191B", + defaultProgressColor: '#E4202D', + inverseProgressColor: '#1A191B', // Radio Button - radioBtnSize: platform === "ios" ? 25 : 23, - radioSelectedColorAndroid: "#3F51B5", - radioBtnLineHeight: platform === "ios" ? 29 : 24, + radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, + radioSelectedColorAndroid: '#3F51B5', + radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, get radioColor() { return this.brandPrimary; }, // Segment - segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", - segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", - segmentTextColor: platform === "ios" ? "#007aff" : "#fff", - segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", - segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", - segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", + 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", + defaultSpinnerColor: '#45D56E', + inverseSpinnerColor: '#1A191B', // Tab - tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", - topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", - topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", - topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", - topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff", + 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", + tabBgColor: '#F8F8F8', tabFontSize: 15, // Text - textColor: "#000", - inverseTextColor: "#fff", + textColor: '#000', + inverseTextColor: '#fff', noteFontSize: 14, get defaultTextColor() { return this.textColor; }, // Title - titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", - titleFontSize: platform === "ios" ? 17 : 19, - subTitleFontSize: platform === "ios" ? 11 : 14, - subtitleColor: platform === "ios" ? "#000" : "#fff", - titleFontColor: platform === "ios" ? "#000" : "#fff", + 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 === "ios" ? 5 : 2, + borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2, borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), contentPadding: 10, - dropdownLinkColor: "#414142", + dropdownLinkColor: '#414142', inputLineHeight: 24, deviceWidth, deviceHeight, isIphoneX, inputGroupRoundedBorderRadius: 30, - //iPhoneX SafeArea + // iPhoneX SafeArea Inset: { portrait: { topInset: 24, diff --git a/native-base-theme/variables/material.js b/native-base-theme/variables/material.js index ce917a1..13329ff 100644 --- a/native-base-theme/variables/material.js +++ b/native-base-theme/variables/material.js @@ -1,79 +1,97 @@ // @flow -import color from "color"; +import color from 'color'; +import { Platform, Dimensions, PixelRatio } from 'react-native'; -import { Platform, Dimensions, PixelRatio } from "react-native"; +import { PLATFORM } from './commonColor'; -const deviceHeight = Dimensions.get("window").height; -const deviceWidth = Dimensions.get("window").width; +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; -const platformStyle = "material"; +const platformStyle = PLATFORM.MATERIAL; const isIphoneX = -platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); + 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", + // 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)", - btnUppercaseAndroidText: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, // Badge - badgeBg: "#ED1727", - badgeColor: "#fff", + badgeBg: '#ED1727', + badgeColor: '#fff', badgePadding: 0, // Button - btnFontFamily: "Roboto", - btnDisabledBg: "#b5b5b5", + buttonFontFamily: 'Roboto', + buttonDisabledBg: '#b5b5b5', buttonPadding: 6, - get btnPrimaryBg() { + get buttonPrimaryBg() { return this.brandPrimary; }, - get btnPrimaryColor() { + get buttonPrimaryColor() { return this.inverseTextColor; }, - get btnInfoBg() { + get buttonInfoBg() { return this.brandInfo; }, - get btnInfoColor() { + get buttonInfoColor() { return this.inverseTextColor; }, - get btnSuccessBg() { + get buttonSuccessBg() { return this.brandSuccess; }, - get btnSuccessColor() { + get buttonSuccessColor() { return this.inverseTextColor; }, - get btnDangerBg() { + get buttonDangerBg() { return this.brandDanger; }, - get btnDangerColor() { + get buttonDangerColor() { return this.inverseTextColor; }, - get btnWarningBg() { + get buttonWarningBg() { return this.brandWarning; }, - get btnWarningColor() { + get buttonWarningColor() { return this.inverseTextColor; }, - get btnTextSize() { + get buttonTextSize() { return this.fontSizeBase - 1; }, - get btnTextSizeLarge() { + get buttonTextSizeLarge() { return this.fontSizeBase * 1.5; }, - get btnTextSizeSmall() { + get buttonTextSizeSmall() { return this.fontSizeBase * 0.8; }, get borderRadiusLarge() { @@ -87,10 +105,10 @@ export default { }, // Card - cardDefaultBg: "#fff", - cardBorderColor: "#ccc", + cardDefaultBg: '#fff', + cardBorderColor: '#ccc', cardBorderRadius: 2, - cardItemPadding: platform === "ios" ? 10 : 12, + cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, // CheckBox CheckboxRadius: 0, @@ -100,29 +118,32 @@ export default { CheckboxIconSize: 16, CheckboxIconMarginTop: 1, CheckboxFontSize: 17, - checkboxBgColor: "#039BE5", + checkboxBgColor: '#039BE5', checkboxSize: 20, - checkboxTickColor: "#fff", + checkboxTickColor: '#fff', // Color - brandPrimary: "#3F51B5", - brandInfo: "#62B1F6", - brandSuccess: "#5cb85c", - brandDanger: "#d9534f", - brandWarning: "#f0ad4e", - brandDark: "#000", - brandLight: "#f4f4f4", + brandPrimary: '#3F51B5', + brandInfo: '#62B1F6', + brandSuccess: '#5cb85c', + brandDanger: '#d9534f', + brandWarning: '#f0ad4e', + brandDark: '#000', + brandLight: '#f4f4f4', - //Container - containerBgColor: "#fff", + // Container + containerBgColor: '#fff', - //Date Picker - datePickerTextColor: "#000", - datePickerBg: "transparent", + // Date Picker + datePickerTextColor: '#000', + datePickerBg: 'transparent', + + // FAB + fabWidth: 56, // Font DefaultFontSize: 16, - fontFamily: "Roboto", + fontFamily: 'Roboto', fontSizeBase: 15, get fontSizeH1() { return this.fontSizeBase * 1.8; @@ -136,28 +157,28 @@ export default { // Footer footerHeight: 55, - footerDefaultBg: "#3F51B5", + footerDefaultBg: '#3F51B5', footerPaddingBottom: 0, // FooterTab - tabBarTextColor: "#bfc6ea", + tabBarTextColor: '#bfc6ea', tabBarTextSize: 11, - activeTab: "#fff", - sTabBarActiveTextColor: "#007aff", - tabBarActiveTextColor: "#fff", - tabActiveBgColor: "#3F51B5", + activeTab: '#fff', + sTabBarActiveTextColor: '#007aff', + tabBarActiveTextColor: '#fff', + tabActiveBgColor: '#3F51B5', // Header - toolbarBtnColor: "#fff", - toolbarDefaultBg: "#3F51B5", + toolbarBtnColor: '#fff', + toolbarDefaultBg: '#3F51B5', toolbarHeight: 56, toolbarSearchIconSize: 23, - toolbarInputColor: "#fff", - searchBarHeight: platform === "ios" ? 30 : 40, - searchBarInputHeight: platform === "ios" ? 40 : 50, - toolbarBtnTextColor: "#fff", - toolbarDefaultBorder: "#3F51B5", - iosStatusbar: "light-content", + 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) @@ -170,102 +191,102 @@ export default { }, // Icon - iconFamily: "Ionicons", + iconFamily: 'Ionicons', iconFontSize: 28, iconHeaderSize: 24, // InputGroup inputFontSize: 17, - inputBorderColor: "#D9D5DC", - inputSuccessBorderColor: "#2b8339", - inputErrorBorderColor: "#ed2f2f", + inputBorderColor: '#D9D5DC', + inputSuccessBorderColor: '#2b8339', + inputErrorBorderColor: '#ed2f2f', inputHeightBase: 50, get inputColor() { return this.textColor; }, get inputColorPlaceholder() { - return "#575757"; + return '#575757'; }, // Line Height - btnLineHeight: 19, + buttonLineHeight: 19, lineHeightH1: 32, lineHeightH2: 27, lineHeightH3: 22, lineHeight: 24, // List - listBg: "transparent", - listBorderColor: "#c9c9c9", - listDividerBg: "#f4f4f4", - listBtnUnderlayColor: "#DDD", + listBg: 'transparent', + listBorderColor: '#c9c9c9', + listDividerBg: '#f4f4f4', + listBtnUnderlayColor: '#DDD', listItemPadding: 12, - listNoteColor: "#808080", + listNoteColor: '#808080', listNoteSize: 13, - listItemSelected: "#3F51B5", + listItemSelected: '#3F51B5', // Progress Bar - defaultProgressColor: "#E4202D", - inverseProgressColor: "#1A191B", + defaultProgressColor: '#E4202D', + inverseProgressColor: '#1A191B', // Radio Button radioBtnSize: 23, - radioSelectedColorAndroid: "#3F51B5", + radioSelectedColorAndroid: '#3F51B5', radioBtnLineHeight: 24, get radioColor() { return this.brandPrimary; }, // Segment - segmentBackgroundColor: "#3F51B5", - segmentActiveBackgroundColor: "#fff", - segmentTextColor: "#fff", - segmentActiveTextColor: "#3F51B5", - segmentBorderColor: "#fff", - segmentBorderColorMain: "#3F51B5", + segmentBackgroundColor: '#3F51B5', + segmentActiveBackgroundColor: '#fff', + segmentTextColor: '#fff', + segmentActiveTextColor: '#3F51B5', + segmentBorderColor: '#fff', + segmentBorderColorMain: '#3F51B5', // Spinner - defaultSpinnerColor: "#45D56E", - inverseSpinnerColor: "#1A191B", + defaultSpinnerColor: '#45D56E', + inverseSpinnerColor: '#1A191B', // Tab - tabDefaultBg: "#3F51B5", - topTabBarTextColor: "#b3c7f9", - topTabBarActiveTextColor: "#fff", - topTabBarBorderColor: "#fff", - topTabBarActiveBorderColor: "#fff", + tabDefaultBg: '#3F51B5', + topTabBarTextColor: '#b3c7f9', + topTabBarActiveTextColor: '#fff', + topTabBarBorderColor: '#fff', + topTabBarActiveBorderColor: '#fff', // Tabs - tabBgColor: "#F8F8F8", + tabBgColor: '#F8F8F8', tabFontSize: 15, // Text - textColor: "#000", - inverseTextColor: "#fff", + textColor: '#000', + inverseTextColor: '#fff', noteFontSize: 14, get defaultTextColor() { return this.textColor; }, // Title - titleFontfamily: "Roboto", + titleFontfamily: 'Roboto', titleFontSize: 19, subTitleFontSize: 14, - subtitleColor: "#FFF", - titleFontColor: "#FFF", + subtitleColor: '#FFF', + titleFontColor: '#FFF', // Other borderRadiusBase: 2, borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), contentPadding: 10, - dropdownLinkColor: "#414142", + dropdownLinkColor: '#414142', inputLineHeight: 24, deviceWidth, deviceHeight, isIphoneX, inputGroupRoundedBorderRadius: 30, - //iPhoneX SafeArea + // iPhoneX SafeArea Inset: { portrait: { topInset: 24, diff --git a/native-base-theme/variables/platform.js b/native-base-theme/variables/platform.js index 39fbab0..b458413 100644 --- a/native-base-theme/variables/platform.js +++ b/native-base-theme/variables/platform.js @@ -1,311 +1,361 @@ // @flow -import color from "color"; +import color from 'color'; +import { Platform, Dimensions, PixelRatio } from 'react-native'; -import {Dimensions, PixelRatio, Platform} from "react-native"; +import { PLATFORM } from './commonColor'; -const deviceHeight = Dimensions.get("window").height; -const deviceWidth = Dimensions.get("window").width; +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; const platformStyle = undefined; const isIphoneX = - platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); + platform === PLATFORM.IOS && + (deviceHeight === 812 || + deviceWidth === 812 || + deviceHeight === 896 || + deviceWidth === 896); export default { - platformStyle, - platform, + platformStyle, + platform, - //Accordion - headerStyle: "#edebed", - iconStyle: "#000", - contentStyle: "#f5f4f5", - expandedIconStyle: "#000", - accordionBorderColor: "#d3d3d3", + // Accordion + accordionBorderColor: '#d3d3d3', + accordionContentPadding: 10, + accordionIconFontSize: 18, + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + headerStyle: '#edebed', + iconStyle: '#000', - // Android - androidRipple: true, - androidRippleColor: "rgba(256, 256, 256, 0.3)", - androidRippleColorDark: "rgba(0, 0, 0, 0.15)", - btnUppercaseAndroidText: true, + // 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', - // Badge - badgeBg: "#ED1727", - badgeColor: "#fff", - badgePadding: platform === "ios" ? 3 : 0, + // Android + androidRipple: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, - // Button - btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", - btnTextColor: '#fff', - btnDisabledBg: "#b5b5b5", - buttonPadding: 6, - get btnPrimaryBg() { - return this.brandPrimary; + // 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', + 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: '#f4f4f4', + 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 }, - get btnPrimaryColor() { - return this.inverseTextColor; - }, - get btnInfoBg() { - return this.brandInfo; - }, - get btnInfoColor() { - return this.inverseTextColor; - }, - get btnSuccessBg() { - return this.brandSuccess; - }, - get btnSuccessColor() { - return this.inverseTextColor; - }, - get btnDangerBg() { - return this.brandDanger; - }, - get btnDangerColor() { - return this.inverseTextColor; - }, - get btnWarningBg() { - return this.brandWarning; - }, - get btnWarningColor() { - return this.inverseTextColor; - }, - get btnTextSize() { - return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; - }, - get btnTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get btnTextSizeSmall() { - 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 === "ios" ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === "ios" ? 13 : 0, - CheckboxBorderWidth: platform === "ios" ? 1 : 2, - CheckboxPaddingLeft: platform === "ios" ? 4 : 2, - CheckboxPaddingBottom: platform === "ios" ? 0 : 5, - CheckboxIconSize: platform === "ios" ? 21 : 16, - CheckboxIconMarginTop: platform === "ios" ? undefined : 1, - CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17, - checkboxBgColor: "#be1522", - checkboxSize: 20, - checkboxTickColor: "#fff", - - // Color - brandPrimary: "#be1522", - brandInfo: "#62B1F6", - brandSuccess: "#5cb85c", - brandDanger: "#d9534f", - brandWarning: "#f0ad4e", - brandDark: "#000", - brandLight: "#f4f4f4", - - //Container - containerBgColor: "#fff", - sideMenuBgColor: "#f2f2f2", - //Date Picker - datePickerTextColor: "#000", - datePickerBg: "transparent", - - // Font - DefaultFontSize: 16, - fontFamily: 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 === "ios" ? "#F8F8F8" : "#be1522", - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", - tabBarTextSize: platform === "ios" ? 14 : 11, - activeTab: platform === "ios" ? "#007aff" : "#fff", - sTabBarActiveTextColor: "#007aff", - tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", - tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", - - // Header - toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff", - toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522", - toolbarHeight: platform === "ios" ? 64 : 56, - toolbarSearchIconSize: platform === "ios" ? 20 : 23, - toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", - toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2", - searchBarHeight: platform === "ios" ? 30 : 40, - searchBarInputHeight: platform === "ios" ? 30 : 50, - toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff", - toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f", - iosStatusbar: platform === "ios" ? "dark-content" : "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: platform === "ios" ? 30 : 28, - iconHeaderSize: 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 - btnLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: platform === "ios" ? 20 : 24, - listItemSelected: platform === "ios" ? "#be1522" : "#be1522", - - // List - listBg: "transparent", - listBorderColor: "#c9c9c9", - listDividerBg: "#f4f4f4", - listBtnUnderlayColor: "#DDD", - listItemPadding: platform === "ios" ? 10 : 12, - listNoteColor: "#808080", - listNoteSize: 13, - - // Progress Bar - defaultProgressColor: "#E4202D", - inverseProgressColor: "#1A191B", - - // Radio Button - radioBtnSize: platform === "ios" ? 25 : 23, - radioSelectedColorAndroid: "#E4202D", - radioBtnLineHeight: platform === "ios" ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", - segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", - segmentTextColor: platform === "ios" ? "#007aff" : "#fff", - segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", - segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", - segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", - - // Spinner - defaultSpinnerColor: "#be1522", - inverseSpinnerColor: "#1A191B", - - // Tab - tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522", - topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", - topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff", - topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", - topTabBarActiveBorderColor: 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 === "ios" ? "System" : "Roboto_medium", - titleFontSize: platform === "ios" ? 17 : 19, - subTitleFontSize: platform === "ios" ? 11 : 14, - subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF", - titleFontColor: 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 === "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 - } + landscape: { + topInset: 0, + leftInset: 44, + rightInset: 44, + bottomInset: 21 } + } }; diff --git a/native-base-theme/variables/platformDark.js b/native-base-theme/variables/platformDark.js index 0701b4f..cce16c1 100644 --- a/native-base-theme/variables/platformDark.js +++ b/native-base-theme/variables/platformDark.js @@ -1,311 +1,361 @@ // @flow -import color from "color"; +import color from 'color'; +import { Platform, Dimensions, PixelRatio } from 'react-native'; -import {Dimensions, PixelRatio, Platform} from "react-native"; +import { PLATFORM } from './commonColor'; -const deviceHeight = Dimensions.get("window").height; -const deviceWidth = Dimensions.get("window").width; +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; const platformStyle = undefined; const isIphoneX = - platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); + platform === PLATFORM.IOS && + (deviceHeight === 812 || + deviceWidth === 812 || + deviceHeight === 896 || + deviceWidth === 896); export default { - platformStyle, - platform, + platformStyle, + platform, - //Accordion - headerStyle: "#edebed", - iconStyle: "#000", - contentStyle: "#f5f4f5", - expandedIconStyle: "#000", - accordionBorderColor: "#d3d3d3", + // Accordion + accordionBorderColor: '#d3d3d3', + accordionContentPadding: 10, + accordionIconFontSize: 18, + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + headerStyle: '#edebed', + iconStyle: '#000', - // Android - androidRipple: true, - androidRippleColor: "rgba(256, 256, 256, 0.3)", - androidRippleColorDark: "rgba(0, 0, 0, 0.15)", - btnUppercaseAndroidText: true, + // 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', - // Badge - badgeBg: "#ED1727", - badgeColor: "#fff", - badgePadding: platform === "ios" ? 3 : 0, + // Android + androidRipple: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, - // Button - btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", - btnTextColor: '#fff', - btnDisabledBg: "#b5b5b5", - buttonPadding: 6, - get btnPrimaryBg() { - return this.brandPrimary; + // 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', + 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: '#f4f4f4', + 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 }, - get btnPrimaryColor() { - return this.textColor; - }, - get btnInfoBg() { - return this.brandInfo; - }, - get btnInfoColor() { - return this.textColor; - }, - get btnSuccessBg() { - return this.brandSuccess; - }, - get btnSuccessColor() { - return this.textColor; - }, - get btnDangerBg() { - return this.brandDanger; - }, - get btnDangerColor() { - return this.textColor; - }, - get btnWarningBg() { - return this.brandWarning; - }, - get btnWarningColor() { - return this.textColor; - }, - get btnTextSize() { - return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; - }, - get btnTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get btnTextSizeSmall() { - 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 === "ios" ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === "ios" ? 13 : 0, - CheckboxBorderWidth: platform === "ios" ? 1 : 2, - CheckboxPaddingLeft: platform === "ios" ? 4 : 2, - CheckboxPaddingBottom: platform === "ios" ? 0 : 5, - CheckboxIconSize: platform === "ios" ? 21 : 16, - CheckboxIconMarginTop: platform === "ios" ? undefined : 1, - CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17, - checkboxBgColor: "#E4202D", - checkboxSize: 20, - checkboxTickColor: "#fff", - - // Color - brandPrimary: "#be1522", - brandInfo: "#62B1F6", - brandSuccess: "#5cb85c", - brandDanger: "#d9534f", - brandWarning: "#f0ad4e", - brandDark: "#000", - brandLight: "#f4f4f4", - - //Container - containerBgColor: "#222222", - sideMenuBgColor: "#1c1c1c", - - //Date Picker - datePickerTextColor: "#fff", - datePickerBg: "transparent", - - // Font - DefaultFontSize: 16, - fontFamily: 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 === "ios" ? "#333333" : "#be1522", - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", - tabBarTextSize: platform === "ios" ? 14 : 11, - activeTab: platform === "ios" ? "#007aff" : "#fff", - sTabBarActiveTextColor: "#007aff", - tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", - tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", - - // Header - toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff", - toolbarDefaultBg: platform === "ios" ? "#333333" : "#be1522", - toolbarHeight: platform === "ios" ? 64 : 56, - toolbarSearchIconSize: platform === "ios" ? 20 : 23, - toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", - toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2", - searchBarHeight: platform === "ios" ? 30 : 40, - searchBarInputHeight: platform === "ios" ? 30 : 50, - toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff", - toolbarDefaultBorder: platform === "ios" ? "#3f3f3f" : "#ba1f0f", - iosStatusbar: platform === "ios" ? "dark-content" : "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: platform === "ios" ? 30 : 28, - iconHeaderSize: 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 - btnLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: platform === "ios" ? 20 : 24, - listItemSelected: "#be1522", - - // List - listBg: "transparent", - listBorderColor: "#3e3e3e", - listDividerBg: "#f4f4f4", - listBtnUnderlayColor: "#3a3a3a", - listItemPadding: platform === "ios" ? 10 : 12, - listNoteColor: "#acacac", - listNoteSize: 13, - - // Progress Bar - defaultProgressColor: "#E4202D", - inverseProgressColor: "#1A191B", - - // Radio Button - radioBtnSize: platform === "ios" ? 25 : 23, - radioSelectedColorAndroid: "#E4202D", - radioBtnLineHeight: platform === "ios" ? 29 : 24, - get radioColor() { - return "#be1522"; - }, - - // Segment - segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", - segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", - segmentTextColor: platform === "ios" ? "#007aff" : "#fff", - segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", - segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", - segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", - - // Spinner - defaultSpinnerColor: "#be1522", - inverseSpinnerColor: "#1A191B", - - // Tab - tabDefaultBg: platform === "ios" ? "#333333" : "#be1522", - topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", - topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff", - topTabBarBorderColor: platform === "ios" ? "#3f3f3f" : "#fff", - topTabBarActiveBorderColor: 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 === "ios" ? "System" : "Roboto_medium", - titleFontSize: platform === "ios" ? 17 : 19, - subTitleFontSize: platform === "ios" ? 11 : 14, - subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF", - titleFontColor: platform === "ios" ? "#FFF" : "#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 === "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 - } + landscape: { + topInset: 0, + leftInset: 44, + rightInset: 44, + bottomInset: 21 } + } }; From 41f869952af4861c667a738207e33370510a0007 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 28 Jan 2020 22:03:40 +0100 Subject: [PATCH 22/28] Fixed black gradient on ios --- components/DashboardItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/DashboardItem.js b/components/DashboardItem.js index 246d476..daa7dfb 100644 --- a/components/DashboardItem.js +++ b/components/DashboardItem.js @@ -101,7 +101,7 @@ export default class DashboardItem extends React.Component { div: {color: ThemeManager.getCurrentThemeVariables().textColor}, }}/> Date: Wed, 29 Jan 2020 00:29:29 +0100 Subject: [PATCH 23/28] Planex webview is no longer reloading on orientation change --- components/BaseContainer.js | 75 ++++++++++++++++++++++--------------- components/WebViewScreen.js | 3 +- 2 files changed, 46 insertions(+), 32 deletions(-) diff --git a/components/BaseContainer.js b/components/BaseContainer.js index 99fadc2..30d1889 100644 --- a/components/BaseContainer.js +++ b/components/BaseContainer.js @@ -1,13 +1,14 @@ // @flow import * as React from 'react'; -import {Container, Right} from "native-base"; +import {Container} from "native-base"; import CustomHeader from "./CustomHeader"; import CustomSideMenu from "./CustomSideMenu"; import CustomMaterialIcon from "./CustomMaterialIcon"; import {Platform, View} from "react-native"; import ThemeManager from "../utils/ThemeManager"; import Touchable from "react-native-platform-touchable"; +import {ScreenOrientation} from "expo"; type Props = { @@ -18,29 +19,30 @@ type Props = { hasTabs: boolean, hasBackButton: boolean, hasSideMenu: boolean, - isHeaderVisible: boolean } type State = { - isOpen: boolean + isOpen: boolean, + isHeaderVisible: boolean } export default class BaseContainer extends React.Component { willBlurSubscription: function; + willFocusSubscription: function; static defaultProps = { headerRightButton: , hasTabs: false, hasBackButton: false, hasSideMenu: true, - isHeaderVisible: true, }; state = { isOpen: false, + isHeaderVisible: true, }; toggle() { @@ -57,6 +59,15 @@ export default class BaseContainer extends React.Component { * Register for blur event to close side menu on screen change */ componentDidMount() { + this.willFocusSubscription = this.props.navigation.addListener('willFocus', payload => { + ScreenOrientation.unlockAsync(); + ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => { + let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE || + OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT || + OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT; + this.setState({isHeaderVisible: !isLandscape}); + }); + }); this.willBlurSubscription = this.props.navigation.addListener( 'willBlur', payload => { @@ -71,25 +82,29 @@ export default class BaseContainer extends React.Component { componentWillUnmount() { if (this.willBlurSubscription !== undefined) this.willBlurSubscription.remove(); + if (this.willFocusSubscription !== undefined) + this.willFocusSubscription.remove(); } getMainContainer() { return ( - this.toggle()}> - - - } - rightButton={this.props.headerRightButton} - hasTabs={this.props.hasTabs} - hasBackButton={this.props.hasBackButton}/> + {this.state.isHeaderVisible ? + this.toggle()}> + + + } + rightButton={this.props.headerRightButton} + hasTabs={this.props.hasTabs} + hasBackButton={this.props.hasBackButton}/> + : null} {this.props.children} ); @@ -97,7 +112,7 @@ export default class BaseContainer extends React.Component { render() { - if (this.props.isHeaderVisible) { + // if (this.state.isHeaderVisible) { return ( { this.getMainContainer()} ); - } else { - return ( - - {this.props.children} - - ); - } + // } else { + // return ( + // + // {this.props.children} + // + // ); + // } } } diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index ef53fe5..59dd396 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -189,8 +189,7 @@ export default class WebViewScreen extends React.Component { headerTitle={this.props.headerTitle} headerRightButton={this.getRefreshButton()} hasBackButton={this.props.hasHeaderBackButton} - hasSideMenu={this.props.hasSideMenu} - isHeaderVisible={!this.state.isLandscape}> + hasSideMenu={this.props.hasSideMenu}> {this.props.data.length === 1 ? this.getWebview(this.props.data[0]) : Date: Wed, 29 Jan 2020 09:30:27 +0100 Subject: [PATCH 24/28] Enabled rotation only on chosen screens and fixed sidemenu image on landscape --- components/BaseContainer.js | 79 ++++++++++++++++--------------- components/Sidebar.js | 92 +++++++++++++++++++------------------ components/WebViewScreen.js | 58 ++--------------------- 3 files changed, 93 insertions(+), 136 deletions(-) diff --git a/components/BaseContainer.js b/components/BaseContainer.js index 30d1889..e0935c9 100644 --- a/components/BaseContainer.js +++ b/components/BaseContainer.js @@ -9,6 +9,7 @@ import {Platform, View} from "react-native"; import ThemeManager from "../utils/ThemeManager"; import Touchable from "react-native-platform-touchable"; import {ScreenOrientation} from "expo"; +import {NavigationActions} from "react-navigation"; type Props = { @@ -19,6 +20,8 @@ type Props = { hasTabs: boolean, hasBackButton: boolean, hasSideMenu: boolean, + enableRotation: boolean, + hideHeaderOnLandscape: boolean, } type State = { @@ -37,6 +40,8 @@ export default class BaseContainer extends React.Component { hasTabs: false, hasBackButton: false, hasSideMenu: true, + enableRotation: false, + hideHeaderOnLandscape: false, }; @@ -59,18 +64,31 @@ export default class BaseContainer extends React.Component { * Register for blur event to close side menu on screen change */ componentDidMount() { - this.willFocusSubscription = this.props.navigation.addListener('willFocus', payload => { - ScreenOrientation.unlockAsync(); - ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => { - let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE || - OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT || - OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT; - this.setState({isHeaderVisible: !isLandscape}); + this.willFocusSubscription = this.props.navigation.addListener( + 'willFocus', + payload => { + if (this.props.enableRotation) { + ScreenOrientation.unlockAsync(); + ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => { + if (this.props.hideHeaderOnLandscape) { + let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE || + OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT || + OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT; + this.setState({isHeaderVisible: !isLandscape}); + const setParamsAction = NavigationActions.setParams({ + params: {showTabBar: !isLandscape}, + key: this.props.navigation.state.key, + }); + this.props.navigation.dispatch(setParamsAction); + } + }); + } }); - }); this.willBlurSubscription = this.props.navigation.addListener( 'willBlur', payload => { + if (this.props.enableRotation) + ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT); this.setState({isOpen: false}); } ); @@ -104,7 +122,7 @@ export default class BaseContainer extends React.Component { rightButton={this.props.headerRightButton} hasTabs={this.props.hasTabs} hasBackButton={this.props.hasBackButton}/> - : null} + : } {this.props.children} ); @@ -112,33 +130,20 @@ export default class BaseContainer extends React.Component { render() { - // if (this.state.isHeaderVisible) { - return ( - - {this.props.hasSideMenu ? - this.updateMenuState(isOpen)}> - {this.getMainContainer()} - : - this.getMainContainer()} - - ); - // } else { - // return ( - // - // {this.props.children} - // - // ); - // } - + return ( + + {this.props.hasSideMenu ? + this.updateMenuState(isOpen)}> + {this.getMainContainer()} + : + this.getMainContainer()} + + ); } } diff --git a/components/Sidebar.js b/components/Sidebar.js index c7036dd..5756f55 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -78,50 +78,52 @@ export default class SideBar extends React.Component { render() { return ( - - - item.route} - renderItem={({item}) => - { - if (item.link !== undefined) - Linking.openURL(item.link).catch((err) => console.error('Error opening link', err)); - else - this.navigateToScreen(item.route); - }} - > - - - - {item.name} - - - {item.types && - - - {`${item.types} Types`} - - } - } - /> + + + item.route} + renderItem={({item}) => + { + if (item.link !== undefined) + Linking.openURL(item.link).catch((err) => console.error('Error opening link', err)); + else + this.navigateToScreen(item.route); + }} + > + + + + {item.name} + + + {item.types && + + + {`${item.types} Types`} + + } + } + /> ); } @@ -130,7 +132,7 @@ export default class SideBar extends React.Component { const styles = StyleSheet.create({ drawerCover: { height: deviceHeight / 5, - width: null, + width: deviceHeight / 2.5, position: "relative", marginBottom: 10, marginTop: 20 diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index 59dd396..5ca209a 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -8,7 +8,6 @@ import Touchable from "react-native-platform-touchable"; import CustomMaterialIcon from "../components/CustomMaterialIcon"; import ThemeManager from "../utils/ThemeManager"; import BaseContainer from "../components/BaseContainer"; -import {ScreenOrientation} from 'expo'; import {NavigationActions} from 'react-navigation'; type Props = { @@ -25,67 +24,17 @@ type Props = { hasFooter: boolean, } -type State = { - isLandscape: boolean, -} - /** * Class defining a webview screen. */ -export default class WebViewScreen extends React.Component { +export default class WebViewScreen extends React.Component { static defaultProps = { hasBackButton: false, hasSideMenu: true, hasFooter: true, }; - - state = { - isLandscape: false, - }; - webviewArray: Array = []; - willFocusSubscription: function; - willBlurSubscription: function; - - /** - * Register for blur event to close side menu on screen change - */ - componentDidMount() { - this.willFocusSubscription = this.props.navigation.addListener( - 'willFocus', - payload => { - ScreenOrientation.unlockAsync(); - ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => { - let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE || - OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT || - OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT; - this.setState({isLandscape: isLandscape}); - const setParamsAction = NavigationActions.setParams({ - params: {showTabBar: !isLandscape}, - key: this.props.navigation.state.key, - }); - this.props.navigation.dispatch(setParamsAction); - }); - } - ); - this.willBlurSubscription = this.props.navigation.addListener( - 'willBlur', - payload => { - ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT); - } - ); - } - - /** - * Unregister from event when un-mounting components - */ - componentWillUnmount() { - if (this.willBlurSubscription !== undefined) - this.willBlurSubscription.remove(); - if (this.willFocusSubscription !== undefined) - this.willFocusSubscription.remove(); - } openWebLink(url: string) { Linking.openURL(url).catch((err) => console.error('Error opening link', err)); @@ -189,7 +138,9 @@ export default class WebViewScreen extends React.Component { headerTitle={this.props.headerTitle} headerRightButton={this.getRefreshButton()} hasBackButton={this.props.hasHeaderBackButton} - hasSideMenu={this.props.hasSideMenu}> + hasSideMenu={this.props.hasSideMenu} + enableRotation={true} + hideHeaderOnLandscape={true}> {this.props.data.length === 1 ? this.getWebview(this.props.data[0]) : { }} locked={true} style = {{ - paddingTop: this.state.isLandscape ? 20 : 0, backgroundColor: Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().tabDefaultBg : ThemeManager.getCurrentThemeVariables().brandPrimary From aa78b90e3ca143298b12ace3490c3920ecfcb843 Mon Sep 17 00:00:00 2001 From: keplyx Date: Wed, 29 Jan 2020 09:46:16 +0100 Subject: [PATCH 25/28] increased version number --- app.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.json b/app.json index 422034d..778d785 100644 --- a/app.json +++ b/app.json @@ -10,7 +10,7 @@ "android", "web" ], - "version": "1.3.2", + "version": "1.3.3", "orientation": "portrait", "primaryColor": "#be1522", "icon": "./assets/android.icon.png", From 76aeb1599c0c9ffd346b2d8d4b8a784ef61e6f39 Mon Sep 17 00:00:00 2001 From: keplyx Date: Wed, 29 Jan 2020 13:53:05 +0100 Subject: [PATCH 26/28] Added ElusEtudiants website link --- components/Sidebar.js | 5 +++++ navigation/AppNavigator.js | 2 ++ screens/ElusEtudScreen.js | 39 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 46 insertions(+) create mode 100644 screens/ElusEtudScreen.js diff --git a/components/Sidebar.js b/components/Sidebar.js index 5756f55..17f2bce 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -45,6 +45,11 @@ export default class SideBar extends React.Component { route: "AmicaleScreen", icon: "web", }, + { + name: "Élus Étudiants", + route: "ElusEtudScreen", + icon: "alpha-e-box", + }, { name: "Wiketud", route: "WiketudScreen", diff --git a/navigation/AppNavigator.js b/navigation/AppNavigator.js index f9fb664..3327e4a 100644 --- a/navigation/AppNavigator.js +++ b/navigation/AppNavigator.js @@ -12,6 +12,7 @@ import SelfMenuScreen from '../screens/SelfMenuScreen'; import TutorInsaScreen from "../screens/TutorInsaScreen"; import AmicaleScreen from "../screens/AmicaleScreen"; import WiketudScreen from "../screens/WiketudScreen"; +import ElusEtudScreen from "../screens/ElusEtudScreen"; import AvailableRoomScreen from "../screens/AvailableRoomScreen"; import DebugScreen from '../screens/DebugScreen'; import {fromRight} from "react-navigation-transitions"; @@ -33,6 +34,7 @@ function createAppContainerWithInitialRoute(initialRoute: string) { TutorInsaScreen: {screen: TutorInsaScreen}, AmicaleScreen: {screen: AmicaleScreen}, WiketudScreen: {screen: WiketudScreen}, + ElusEtudScreen: {screen: ElusEtudScreen}, AvailableRoomScreen: {screen: AvailableRoomScreen}, ProxiwashAboutScreen: {screen: ProxiwashAboutScreen}, ProximoAboutScreen: {screen: ProximoAboutScreen}, diff --git a/screens/ElusEtudScreen.js b/screens/ElusEtudScreen.js new file mode 100644 index 0000000..2843f6d --- /dev/null +++ b/screens/ElusEtudScreen.js @@ -0,0 +1,39 @@ +// @flow + +import * as React from 'react'; +import ThemeManager from "../utils/ThemeManager"; +import WebViewScreen from "../components/WebViewScreen"; + +type Props = { + navigation: Object, +} + + +const URL = 'https://srv-falcon.etud.insa-toulouse.fr/~eeinsat/'; + +/** + * Class defining the app's planex screen. + * This screen uses a webview to render the planex page + */ +export default class ElusEtudScreen extends React.Component { + + render() { + const nav = this.props.navigation; + return ( + + ); + } +} + From a38e251cb554ade73201c2b58f622a02c1f8c5ef Mon Sep 17 00:00:00 2001 From: keplyx Date: Wed, 29 Jan 2020 13:57:48 +0100 Subject: [PATCH 27/28] Changed Planex landscape indicator text color --- screens/PlanexScreen.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/screens/PlanexScreen.js b/screens/PlanexScreen.js index 227e006..e7cf8d3 100644 --- a/screens/PlanexScreen.js +++ b/screens/PlanexScreen.js @@ -80,8 +80,10 @@ export default class PlanexScreen extends React.Component { this.customInjectedJS += '$("head").append(\'\');'; this.customInjectedJS += - '$(".fc-toolbar .fc-center").append(\'

' + i18n.t("planexScreen.rotateToLandscape") + '

\');' + - '$(".fc-toolbar .fc-center").append(\'

' + i18n.t("planexScreen.rotateToPortrait") + '

\');' + + '$(".fc-toolbar .fc-center").append(\'

' + + i18n.t("planexScreen.rotateToLandscape") + '

\');' + + '$(".fc-toolbar .fc-center").append(\'

' + + i18n.t("planexScreen.rotateToPortrait") + '

\');' + 'removeAlpha();' + '});true;'; // Prevent crash on ios From 32069f2b8cd70a176af7b28136d6b658afd625dd Mon Sep 17 00:00:00 2001 From: keplyx Date: Wed, 29 Jan 2020 14:05:41 +0100 Subject: [PATCH 28/28] Fixed sidemenu image being cut off on some devices --- components/Sidebar.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/Sidebar.js b/components/Sidebar.js index 17f2bce..42eb3f0 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -8,6 +8,7 @@ import CustomMaterialIcon from '../components/CustomMaterialIcon'; import ThemeManager from "../utils/ThemeManager"; const deviceHeight = Dimensions.get("window").height; +const deviceWidth = Dimensions.get("window").width; const drawerCover = require("../assets/drawer-cover.png"); @@ -136,8 +137,8 @@ export default class SideBar extends React.Component { const styles = StyleSheet.create({ drawerCover: { - height: deviceHeight / 5, - width: deviceHeight / 2.5, + height: deviceWidth / 3, + width: 2 * deviceWidth / 3, position: "relative", marginBottom: 10, marginTop: 20