Merge pull request #1916 from wix/fix/Timeline_styles

Fix Timeline styles

Author: Inbal-Tish

src/timeline/Timeline.tsx

@@ -243,7 +243,9 @@ const Timeline = (props: TimelineProps) => {
     <ScrollView
       // @ts-expect-error
       ref={scrollView}
+      style={styles.current.container}
       contentContainerStyle={[styles.current.contentStyle, {width: constants.screenWidth}]}
+      showsVerticalScrollIndicator={false}
       {...scrollEvents}
     >
       <TimelineHours

src/timeline/style.ts

@@ -1,140 +1,116 @@
-// @flow
 import {StyleSheet} from 'react-native';
+import * as defaultStyle from '../style';
 import {Theme} from '../types';
 import constants from '../commons/constants';
 
-// const eventPaddingLeft = 4
+const LINE_COLOR = '#D8D8D8';
+const TIME_LABEL_COLOR = '#AAAAAA';
+const EVENT_TEXT_COLOR = '#615B73';
+const NOW_INDICATOR_COLOR = 'red';
+const UNAVAILABLE_HOURS_BLOCK_COLOR = '#F8F9FA';
 
 export default function styleConstructor(theme: Theme = {}, calendarHeight: number) {
+  const appStyle = {...defaultStyle, ...theme};
+
   return StyleSheet.create({
     container: {
-      flex: 1,
-      backgroundColor: '#ffff',
-      ...theme.container
+      backgroundColor: appStyle.calendarBackground,
+      ...appStyle.timelineContainer,
     },
     contentStyle: {
-      backgroundColor: '#ffff',
-      height: calendarHeight + 10,
-      ...theme.contentStyle,
+      backgroundColor: appStyle.calendarBackground,
+      ...appStyle.contentStyle,
       flexDirection: 'row',
-    },
-    header: {
-      paddingHorizontal: 30,
-      height: 50,
-      borderTopWidth: 1,
-      borderBottomWidth: 1,
-      borderColor: '#E6E8F0',
-      backgroundColor: '#F5F5F6',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'stretch',
-      ...theme.header
-    },
-    headerTextContainer: {
-      justifyContent: 'center'
-    },
-    headerText: {
-      fontSize: 16,
-      ...theme.headerText
-    },
-    arrow: {
-      width: 15,
-      height: 15,
-      resizeMode: 'contain'
-    },
-    arrowButton: {
-      width: 50,
-      alignItems: 'center',
-      justifyContent: 'center',
-      ...theme.arrowButton
-    },
-    event: {
-      position: 'absolute',
-      backgroundColor: '#F0F4FF',
-      borderColor: '#DDE5FD',
-      borderWidth: 1,
-      paddingLeft: 4,
-      minHeight: 25,
-      flex: 1,
-      opacity: 1,
-      paddingTop: 5,
-      paddingBottom: 0,
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-      overflow: 'hidden',
-      ...theme.event
-    },
-    eventTitle: {
-      color: '#615B73',
-      fontWeight: '600',
-      minHeight: 15,
-      ...theme.eventTitle
-    },
-    eventSummary: {
-      color: '#615B73',
-      fontSize: 12,
-      flexWrap: 'wrap',
-      ...theme.eventSummary
-    },
-    eventTimes: {
-      marginTop: 3,
-      fontSize: 10,
-      fontWeight: 'bold',
-      color: '#615B73',
-      flexWrap: 'wrap',
-      ...theme.eventTimes
-    },
-    eventsContainer: {
-      flex: 1
+      height: calendarHeight + 10
     },
     line: {
       height: 1,
-      position: 'absolute',
-      backgroundColor: 'rgb(216,216,216)',
-      ...theme.line
+      backgroundColor: LINE_COLOR,
+      ...theme.line,
+      position: 'absolute'
     },
     verticalLine: {
-      position: 'absolute',
       width: 1,
-      height: '105%',
-      backgroundColor: 'rgb(216,216,216)'
+      backgroundColor: LINE_COLOR,
+      ...appStyle.verticalLine,
+      position: 'absolute',
+      height: '105%'
     },
     nowIndicator: {
       position: 'absolute',
       right: 0
     },
     nowIndicatorLine: {
       height: 1,
+      backgroundColor: NOW_INDICATOR_COLOR, 
+      ...appStyle.nowIndicatorLine,
       position: 'absolute',
       left: 0,
-      right: 0,
-      backgroundColor: 'red',
-      ...theme.nowIndicatorLine
+      right: 0
     },
     nowIndicatorKnob: {
-      position: 'absolute',
-      left: -3,
-      top: -3,
       width: 7,
       height: 7,
       borderRadius: 4,
-      backgroundColor: 'red',
-      ...theme.nowIndicatorKnob
+      backgroundColor: NOW_INDICATOR_COLOR,
+      ...appStyle.nowIndicatorKnob,
+      position: 'absolute',
+      left: -3,
+      top: -3
     },
     timeLabel: {
-      position: 'absolute',
-      color: 'rgb(170,170,170)',
+      color: TIME_LABEL_COLOR,
       fontSize: 10,
-      fontFamily: constants.isIOS ? 'Helvetica Neue' : 'Roboto',
       fontWeight: '500',
+      fontFamily: constants.isIOS ? 'Helvetica Neue' : 'Roboto',
       paddingLeft: 12,
       textAlign: 'center',
-      ...theme.timeLabel
+      ...appStyle.timeLabel,
+      position: 'absolute'
     },
     unavailableHoursBlock: {
       position: 'absolute',
       right: 0,
-      backgroundColor: '#F8F9FA'
+      backgroundColor: UNAVAILABLE_HOURS_BLOCK_COLOR
+    },
+    event: {
+      opacity: 1,
+      paddingLeft: 4,
+      paddingTop: 5,
+      paddingBottom: 0,
+      backgroundColor: '#F0F4FF',
+      borderColor: '#DDE5FD',
+      borderWidth: 1,
+      ...appStyle.event,
+      position: 'absolute',
+      flex: 1,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      overflow: 'hidden',
+      minHeight: 25,
+    },
+    eventTitle: {
+      color: EVENT_TEXT_COLOR,
+      fontWeight: '600',
+      ...appStyle.eventTitle,
+      minHeight: 15
+    },
+    eventSummary: {
+      color: EVENT_TEXT_COLOR,
+      fontSize: 12,
+      ...appStyle.eventSummary,
+      flexWrap: 'wrap'
+    },
+    eventTimes: {
+      marginTop: 3,
+      color: EVENT_TEXT_COLOR,
+      fontSize: 10,
+      fontWeight: 'bold',
+      ...appStyle.eventTimes,
+      flexWrap: 'wrap'
+    },
+    eventsContainer: {
+      flex: 1
     }
   });
 }

src/timeline/timeline.api.json

@@ -13,11 +13,6 @@
       "type": "Theme",
       "description": "Specify theme properties to override specific styles for calendar parts"
     },
-    {
-      "name": "style",
-      "type": "ViewStyle",
-      "description": "Specify style for calendar container element"
-    },
     {
       "name": "events",
       "type": "Event[]",

src/types.ts

@@ -11,16 +11,14 @@ export type DateData = {
   dateString: string;
 };
 export interface Theme {
-  container?: object;
+  timelineContainer?: object;
   contentStyle?: ViewStyle;
-  header?: object;
-  headerText?: object;
-  arrowButton?: object;
   event?: object;
   eventTitle?: object;
   eventSummary?: object;
   eventTimes?: object;
   line?: object;
+  verticalLine?: object;
   nowIndicatorLine?: object;
   nowIndicatorKnob?: object;
   timeLabel?: object;