From 53fb0723736e8751ba2eee20328f4496e235fcee Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 26 Mar 2019 15:10:07 +0100
Subject: [PATCH] Collapse description (#490)

* collapse file description by default and add display toggle
---
 .../component/floatingWalletBalance/view.js   | 12 ++++++-----
 app/src/page/file/view.js                     | 21 +++++++++----------
 app/src/styles/filePage.js                    | 10 +++++++--
 app/src/styles/floatingButton.js              |  5 +++++
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/app/src/component/floatingWalletBalance/view.js b/app/src/component/floatingWalletBalance/view.js
index be0843f..fed4c24 100644
--- a/app/src/component/floatingWalletBalance/view.js
+++ b/app/src/component/floatingWalletBalance/view.js
@@ -2,10 +2,11 @@
 import React from 'react';
 import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
 import { formatCredits } from 'lbry-redux'
-import Address from '../address';
-import Button from '../button';
-import Colors from '../../styles/colors';
-import floatingButtonStyle from '../../styles/floatingButton';
+import Address from 'component/address';
+import Button from 'component/button';
+import Colors from 'styles/colors';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import floatingButtonStyle from 'styles/floatingButton';
 
 type Props = {
   balance: number,
@@ -27,7 +28,8 @@ class FloatingWalletBalance extends React.PureComponent<Props> {
         {unclaimedRewardAmount > 0 &&
         <TouchableOpacity style={floatingButtonStyle.pendingContainer}
           onPress={() => navigation && navigation.navigate({ routeName: 'Rewards' })} >
-          <Text style={floatingButtonStyle.text}>claim {unclaimedRewardAmount}</Text>
+          <Icon name="award" size={18} style={floatingButtonStyle.rewardIcon} />
+          <Text style={floatingButtonStyle.text}>{unclaimedRewardAmount}</Text>
         </TouchableOpacity>}
       </View>
     );
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index cc58aec..d63a806 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -16,6 +16,7 @@ import {
   WebView
 } from 'react-native';
 import { navigateToUri } from 'utils/helper';
+import Icon from 'react-native-vector-icons/FontAwesome5';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import Button from 'component/button';
 import Colors from 'styles/colors';
@@ -62,6 +63,7 @@ class FilePage extends React.PureComponent {
       mediaLoaded: false,
       pageSuspended: false,
       relatedContentY: 0,
+      showDescription: false,
       showImageViewer: false,
       showWebView: false,
       showTipView: false,
@@ -540,15 +542,8 @@ class FilePage extends React.PureComponent {
                     position={position}
                    />}
 
-                {showActions &&
+                {(showActions && showFileActions) &&
                 <View style={filePageStyle.actions}>
-                  <View style={filePageStyle.socialActions}>
-                    <Button style={filePageStyle.actionButton}
-                            theme={"light"}
-                            icon={"gift"}
-                            text={"Send a tip"}
-                            onPress={() => this.setState({ showTipView: true })} />
-                  </View>
                   {showFileActions &&
                     <View style={filePageStyle.fileActions}>
                       {completed && <Button style={filePageStyle.actionButton}
@@ -598,13 +593,17 @@ class FilePage extends React.PureComponent {
                           style={[filePageStyle.actionButton, filePageStyle.bellButton]}
                           uri={fullChannelUri}
                           name={channelName} />
+                        <TouchableOpacity style={filePageStyle.descriptionToggle}
+                          onPress={() => this.setState({ showDescription: !this.state.showDescription })}>
+                          <Icon name={this.state.showDescription ? "caret-up" : "caret-down"} size={24} />
+                        </TouchableOpacity>
                       </View>
                     </View>
                   }
 
-                  {description && description.length > 0 && <View style={filePageStyle.divider} />}
-
-                  {description && <Text style={filePageStyle.description} selectable={true}>{this.linkify(description)}</Text>}
+                  {(this.state.showDescription && description && description.length > 0) && <View style={filePageStyle.divider} />}
+                  {(this.state.showDescription && description) &&
+                    <Text style={filePageStyle.description} selectable={true}>{this.linkify(description)}</Text>}
 
                   <View onLayout={this.setRelatedContentPosition} />
                   <RelatedContent navigation={navigation} uri={uri} />
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index b600fa2..c6873d8 100644
--- a/app/src/styles/filePage.js
+++ b/app/src/styles/filePage.js
@@ -53,7 +53,7 @@ const filePageStyle = StyleSheet.create({
   },
   title: {
     fontFamily: 'Inter-UI-Bold',
-    fontSize: 24,
+    fontSize: 20,
     marginTop: 12,
     marginLeft: 20,
     marginRight: 20,
@@ -76,7 +76,7 @@ const filePageStyle = StyleSheet.create({
   },
   channelName: {
     fontFamily: 'Inter-UI-SemiBold',
-    fontSize: 20,
+    fontSize: 16,
     color: Colors.LbryGreen
   },
   publishDateText: {
@@ -282,6 +282,12 @@ const filePageStyle = StyleSheet.create({
     alignSelf: 'flex-start',
     marginTop: 17
   },
+  descriptionToggle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 36,
+    height: 36
+  },
   text: {
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
diff --git a/app/src/styles/floatingButton.js b/app/src/styles/floatingButton.js
index 9c93998..c8dd00b 100644
--- a/app/src/styles/floatingButton.js
+++ b/app/src/styles/floatingButton.js
@@ -36,6 +36,7 @@ const floatingButtonStyle = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: Colors.BrighterLbryGreen,
+    flexDirection: 'row',
     elevation: 3
   },
   text: {
@@ -46,6 +47,10 @@ const floatingButtonStyle = StyleSheet.create({
   bottomRight: {
     right: 10,
     bottom: 10
+  },
+  rewardIcon: {
+    color: Colors.White,
+    marginRight: 4
   }
 });