News redesign (another iteration) (#872)

Author: Krzysztof Jan Modras

ReactNative/js/components/SpeedDial.jsx

@@ -13,10 +13,9 @@ const getStyles = theme => ({
     alignItems: 'center',
   },
   circle: {
-    borderColor: theme.separatorColor,
-    borderWidth: 1,
     padding: 20,
     borderRadius: 60,
+    backgroundColor: '#ffffff30',
   },
   label: {
     marginTop: 5,
@@ -37,7 +36,7 @@ const getStyles = theme => ({
   pinIcon: {
     width: 12,
     height: 12,
-    color: theme.textColor,
+    color: '#ffffff',
   },
 });
 

ReactNative/js/screens/Home/components/News.jsx

@@ -5,6 +5,7 @@ import {
   StyleSheet,
   Image,
   TouchableWithoutFeedback,
+  Text,
 } from 'react-native';
 import ListItem from '../../../components/ListItem';
 import ThemeContext from '../../../contexts/theme';
@@ -17,8 +18,10 @@ const getStyles = theme =>
       paddingTop: 30,
     },
     image: {
-      height: 200,
-      marginBottom: 10,
+      height: 100,
+      width: 150,
+      flexShrink: 0,
+      marginLeft: 10,
     },
     item: {
       marginBottom: 20,
@@ -28,6 +31,16 @@ const getStyles = theme =>
       backgroundColor: theme.separatorColor,
       height: 1,
     },
+    description: {
+      flex: 1,
+      color: theme.textColor,
+      fontSize: 12,
+    },
+    secondRow: {
+      marginTop: 5,
+      flex: 1,
+      flexDirection: 'row',
+    },
   });
 
 const openLink = url => NativeModules.BrowserActions.openLink(url, '');
@@ -53,7 +66,7 @@ const useNews = newsModule => {
   return data;
 };
 
-const HiddableImage = (props) => {
+const HiddableImage = props => {
   const { style, source } = props;
   const [isHidden, setHidden] = useState(false, [source]);
   const hide = useCallback(() => setHidden(true), [setHidden]);
@@ -62,10 +75,18 @@ const HiddableImage = (props) => {
     [isHidden],
   );
   return (
-    <Image {...props} style={[style, hiddenStyle]} source={{ uri: source }} onError={hide} />
+    <Image
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      style={[style, hiddenStyle]}
+      source={{ uri: source }}
+      onError={hide}
+    />
   );
 };
 
+const noop = () => {};
+
 export default function News({ newsModule, isImagesEnabled }) {
   const theme = useContext(ThemeContext);
   const news = useNews(newsModule);
@@ -75,7 +96,6 @@ export default function News({ newsModule, isImagesEnabled }) {
   if (news.length === 0) {
     return null;
   }
-
   /* eslint-disable prettier/prettier */
   return (
     <View style={styles.container}>
@@ -85,20 +105,25 @@ export default function News({ newsModule, isImagesEnabled }) {
           style={styles.item}
           key={item.url}
         >
-          {isImagesEnabled && item.imageUrl &&
-            <TouchableWithoutFeedback
-              onPress={() => openLink(item.url)}
-            >
-              <HiddableImage style={styles.image} source={item.imageUrl} />
-            </TouchableWithoutFeedback>
-          }
-          <ListItem
-            url={item.url}
-            title={item.title}
-            displayUrl={item.domain}
-            label={item.breaking_label ? NativeModules.LocaleConstants['ActivityStream.News.BreakingLabel'] : null}
-            onPress={() => openLink(item.url)}
-          />
+          <TouchableWithoutFeedback onPress={() => openLink(item.url)}>
+            <View>
+              <ListItem
+                url={item.url}
+                title={item.title}
+                displayUrl={item.domain}
+                label={item.breaking_label ? NativeModules.LocaleConstants['ActivityStream.News.BreakingLabel'] : null}
+                onPress={noop}
+              />
+              <View style={styles.secondRow}>
+                <Text style={styles.description} allowFontScaling={false}>
+                  {item.description}
+                </Text>
+                {isImagesEnabled && item.imageUrl &&
+                  <HiddableImage style={styles.image} source={item.imageUrl} />
+                }
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
           <View style={styles.separator} />
         </View>
       ))}

ReactNative/js/screens/Home/components/NewsToolbar.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TouchableWithoutFeedback, View, Text, StyleSheet } from 'react-native';
+import NativeDrawable from '../../../components/NativeDrawable';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+  },
+  button: {
+    alignSelf: 'flex-end',
+    flexDirection: 'row',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 15,
+    marginRight: 5,
+  },
+  buttonIcon: {
+    color: '#ffffff',
+    height: 20,
+    width: 20,
+    transform: [{ rotate: '-90deg' }],
+  },
+});
+
+export default ({ scrollToNews }: { scrollToNews: any }) => {
+  return (
+    <View style={styles.wrapper}>
+      <TouchableWithoutFeedback onPress={scrollToNews}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>News</Text>
+          <NativeDrawable
+            style={styles.buttonIcon}
+            source="nav-back"
+            color={styles.buttonIcon.color}
+          />
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+};

ReactNative/js/screens/Home/index.jsx

@@ -1,23 +1,30 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef, useCallback, useState } from 'react';
 import {
   Dimensions,
   NativeModules,
   ScrollView,
   StyleSheet,
   View,
   Image,
+  findNodeHandle,
 } from 'react-native';
 import { parse } from 'tldts';
 import ToolbarArea from '../../components/ToolbarArea';
 import News from './components/News';
 import SpeedDialRow from './components/SpeedDialsRow';
 import UrlBar from './components/UrlBar';
 import Background from './components/Background';
+import NewsToolbar from './components/NewsToolbar';
 
 const hideKeyboard = () => NativeModules.BrowserActions.hideKeyboard();
 
-const getStyles = () =>
-  StyleSheet.create({
+const getStyles = () => {
+  const maxWidth = Math.min(
+    Dimensions.get('window').width,
+    Dimensions.get('window').height,
+  );
+
+  return StyleSheet.create({
     safeArea: {
       flex: 1,
     },
@@ -36,12 +43,15 @@ const getStyles = () =>
       flexDirection: 'column',
       justifyContent: 'space-evenly',
     },
+    newsToolbarWrapper: {
+      width: maxWidth,
+      paddingHorizontal: 20,
+      marginBottom: 20,
+      alignSelf: 'center',
+    },
     newsWrapper: {
       flex: 1,
-      width: Math.min(
-        Dimensions.get('window').width,
-        Dimensions.get('window').height,
-      ),
+      width: maxWidth,
       alignSelf: 'center',
       paddingHorizontal: 20,
     },
@@ -65,6 +75,7 @@ const getStyles = () =>
       height: 80,
     },
   });
+};
 
 export default function Home({
   speedDials,
@@ -75,6 +86,9 @@ export default function Home({
   height,
   toolbarHeight,
 }) {
+  const [showNewsToolbar, setShowNewsToolbar] = useState(true);
+  const scrollViewElement = useRef(null);
+  const newsElement = useRef(null);
   const styles = getStyles();
   const [firstRow, secondRow] = useMemo(() => {
     const pinnedDomains = new Set([
@@ -87,8 +101,23 @@ export default function Home({
     return [dials.slice(0, 4), dials.slice(4, 8)];
   }, [pinnedSites, speedDials]);
 
+  const scrollToNews = useCallback(() => {
+    if (!scrollViewElement.current || !newsElement.current) {
+      return;
+    }
+    scrollViewElement.current.scrollTo({ x: 0, y: 100 });
+    newsElement.current.measureLayout(
+      findNodeHandle(scrollViewElement.current),
+      (x, y) => {
+        scrollViewElement.current.scrollTo({ x, y });
+      },
+    );
+    setShowNewsToolbar(false);
+  }, [scrollViewElement]);
+
   return (
     <ScrollView
+      ref={scrollViewElement}
       style={styles.container}
       onScroll={hideKeyboard}
       scrollEventThrottle={1}
@@ -113,10 +142,14 @@ export default function Home({
             <SpeedDialRow dials={secondRow} />
           </View>
         </View>
+
+        <View style={styles.newsToolbarWrapper}>
+          {showNewsToolbar && <NewsToolbar scrollToNews={scrollToNews} />}
+        </View>
         <ToolbarArea height={toolbarHeight} />
       </Background>
       {isNewsEnabled && (
-        <View style={styles.newsWrapper}>
+        <View style={styles.newsWrapper} ref={newsElement}>
           <News newsModule={newsModule} isImagesEnabled={isNewsImagesEnabled} />
         </View>
       )}