Browse Source

Improved planning display

keplyx 4 years ago
parent
commit
2f3e171b08
2 changed files with 25 additions and 24 deletions
  1. 14
    16
      screens/PlanningDisplayScreen.js
  2. 11
    8
      screens/PlanningScreen.js

+ 14
- 16
screens/PlanningDisplayScreen.js View File

@@ -6,7 +6,7 @@ import ThemeManager from "../utils/ThemeManager";
6 6
 import HTML from "react-native-render-html";
7 7
 import {Linking} from "expo";
8 8
 import PlanningEventManager from '../utils/PlanningEventManager';
9
-import {Subheading, Title} from 'react-native-paper';
9
+import {Card} from 'react-native-paper';
10 10
 
11 11
 type Props = {
12 12
     navigation: Object,
@@ -28,14 +28,12 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
28 28
         // console.log("rendering planningDisplayScreen");
29 29
         return (
30 30
             <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
31
-                <Title>
32
-                    {this.displayData.title}
33
-                </Title>
34
-                <Subheading style={{marginTop: 10,}}>
35
-                    {PlanningEventManager.getFormattedTime(this.displayData)}
36
-                </Subheading>
31
+                <Card.Title
32
+                    title={this.displayData.title}
33
+                    subtitle={PlanningEventManager.getFormattedTime(this.displayData) + ' | ' + PlanningEventManager.getEventStartDate(this.displayData)}
34
+                />
37 35
                 {this.displayData.logo !== null ?
38
-                    <View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}>
36
+                    <View style={{width: '100%', height: 300}}>
39 37
                         <Image style={{flex: 1, resizeMode: "contain"}}
40 38
                                source={{uri: this.displayData.logo}}/>
41 39
                     </View>
@@ -43,14 +41,14 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
43 41
 
44 42
                 {this.displayData.description !== null ?
45 43
                     // Surround description with div to allow text styling if the description is not html
46
-                    <HTML html={"<div>" + this.displayData.description + "</div>"}
47
-                          tagsStyles={{
48
-                              p: {
49
-                                  color: ThemeManager.getCurrentThemeVariables().text,
50
-                              },
51
-                              div: {color: ThemeManager.getCurrentThemeVariables().text}
52
-                          }}
53
-                          onLinkPress={openWebLink}/>
44
+                    <Card.Content>
45
+                        <HTML html={"<div>" + this.displayData.description + "</div>"}
46
+                              tagsStyles={{
47
+                                  p: {color: ThemeManager.getCurrentThemeVariables().text,},
48
+                                  div: {color: ThemeManager.getCurrentThemeVariables().text}
49
+                              }}
50
+                              onLinkPress={openWebLink}/>
51
+                    </Card.Content>
54 52
                     : <View/>}
55 53
             </ScrollView>
56 54
         );

+ 11
- 8
screens/PlanningScreen.js View File

@@ -1,13 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {BackHandler, Image, View} from 'react-native';
4
+import {BackHandler, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6
-import ThemeManager from "../utils/ThemeManager";
7 6
 import {LocaleConfig} from 'react-native-calendars';
8 7
 import WebDataManager from "../utils/WebDataManager";
9 8
 import PlanningEventManager from '../utils/PlanningEventManager';
10
-import {Text, Title, List, Avatar, Divider} from 'react-native-paper';
9
+import {Avatar, Divider, List} from 'react-native-paper';
11 10
 import CustomAgenda from "../components/CustomAgenda";
12 11
 
13 12
 LocaleConfig.locales['fr'] = {
@@ -31,7 +30,7 @@ type State = {
31 30
 
32 31
 const FETCH_URL = "https://amicale-insat.fr/event/json/list";
33 32
 
34
-const AGENDA_MONTH_SPAN = 6;
33
+const AGENDA_MONTH_SPAN = 3;
35 34
 
36 35
 /**
37 36
  * Class defining the app's planning screen
@@ -138,7 +137,10 @@ export default class PlanningScreen extends React.Component<Props, State> {
138 137
                     <List.Item
139 138
                         title={item.title}
140 139
                         description={PlanningEventManager.getFormattedTime(item)}
141
-                        left={props => <Avatar.Image source={{uri: item.logo}} />}
140
+                        left={props => <Avatar.Image
141
+                            source={{uri: item.logo}}
142
+                            style={{backgroundColor: 'transparent'}}
143
+                        />}
142 144
                         onPress={onPress}
143 145
                     />
144 146
                 </View>
@@ -164,9 +166,10 @@ export default class PlanningScreen extends React.Component<Props, State> {
164 166
     }
165 167
 
166 168
     rowHasChanged(r1: Object, r2: Object) {
167
-        if (r1 !== undefined && r2 !== undefined)
168
-            return r1.title !== r2.title;
169
-        else return !(r1 === undefined && r2 === undefined);
169
+        return false;
170
+        // if (r1 !== undefined && r2 !== undefined)
171
+        //     return r1.title !== r2.title;
172
+        // else return !(r1 === undefined && r2 === undefined);
170 173
     }
171 174
 
172 175
     /**

Loading…
Cancel
Save