ButtonCounter//ExploreListItem//Idea: use button counter everywhere a…

…nd update styles fixes #453 fixes #454
liqd · Apr 11, 2023 · d1d323d · d1d323d
1 parent cfb20e5
commit d1d323d
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 47 deletions.
diff --git a/src/components/ButtonCounter.js b/src/components/ButtonCounter.js
@@ -5,34 +5,45 @@ import { styles } from './ButtonCounter.styles'
 import { TextSourceSans } from './TextSourceSans'
 
 export const ButtonCounter = (props) => {
+  const listStyle = [styles.baseText, styles.disableText, styles.listText]
   let btnStyle
   let textStyle
   if (props.disabled) {
-    textStyle = [styles.text, styles.disableStyle]
+    btnStyle = styles.btn
+    textStyle = [styles.baseText, styles.disableText]
   } else {
     if (props.counter === 0) {
       btnStyle = styles.btn
-      textStyle = styles.text
+      textStyle = styles.baseText
     } else {
       if (props.rating === 'pos') {
         btnStyle = styles.btn
-        textStyle = [styles.text, styles.ratedUp]
+        textStyle = [styles.baseText, styles.ratedUp]
         if (props.highlight) {
           btnStyle = [styles.btn, styles.highlightUp]
-          textStyle = [styles.text, styles.ratedUp]
+          textStyle = [styles.baseText, styles.ratedUp]
         }
       } else if (props.rating === 'neg') {
         btnStyle = styles.btn
-        textStyle = [styles.text, styles.ratedDown]
+        textStyle = [styles.baseText, styles.ratedDown]
         if (props.highlight) {
           btnStyle = [styles.btn, styles.highlightDown]
-          textStyle = [styles.text, styles.ratedDown]
+          textStyle = [styles.baseText, styles.ratedDown]
         }
       }
     }
   }
 
-  return (
+  return (props.list ?
+    <View style={styles.container}>
+      <TextSourceSans style={listStyle}>
+        {props.counter}
+      </TextSourceSans>
+      <TextSourceSans style={listStyle}>
+        {props.icon}
+      </TextSourceSans>
+    </View>
+    :
     <View style={styles.container}>
       <Pressable
         style={btnStyle}
@@ -43,6 +54,8 @@ export const ButtonCounter = (props) => {
       >
         <TextSourceSans style={textStyle}>
           {props.counter}
+        </TextSourceSans>
+        <TextSourceSans style={textStyle}>
           {props.icon}
         </TextSourceSans>
       </Pressable>

diff --git a/src/components/ButtonCounter.styles.js b/src/components/ButtonCounter.styles.js
@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native'
 
 import { COLORS } from '../theme/colors'
-import { FONTS, LETTERSPACING, LINEHEIGHTS, SIZES } from '../theme/fonts'
+import { FONTS, LINEHEIGHTS, SIZES } from '../theme/fonts'
 import { BORDERRADIUS, SPACINGS } from '../theme/spacings'
 
 export const styles = StyleSheet.create({
@@ -10,24 +10,26 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   btn: {
-    paddingLeft: SPACINGS.multiplyBy(.5),
-    paddingRight: SPACINGS.multiplyBy(.5),
-    paddingTop: SPACINGS.multiplyBy(.25),
-    paddingBottom: SPACINGS.multiplyBy(.25),
-    marginBottom: SPACINGS.multiplyBy(.5),
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: SPACINGS.multiplyBy(.5),
+    paddingVertical: SPACINGS.multiplyBy(.4),
     borderRadius: BORDERRADIUS.base,
   },
-  text: {
-    letterSpacing: LETTERSPACING.iconbtn,
+  baseText: {
+    marginRight: 5,
     fontSize: SIZES.md,
     lineHeight: LINEHEIGHTS.sm,
     fontFamily: FONTS.familySemiBold
   },
-  disableStyle: {
-    fontSize: SIZES.sm,
+  disableText: {
     color: COLORS.grey.medium,
     fontFamily: FONTS.familySans
   },
+  listText: {
+    fontSize: SIZES.sm,
+  },
   ratedUp: {
     color: COLORS.primary,
   },

diff --git a/src/containers/Comments/Comment.styles.js b/src/containers/Comments/Comment.styles.js
@@ -53,6 +53,7 @@ export const styles = StyleSheet.create({
   },
   bottomActionsContainer: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingBottom: SPACINGS.multiplyBy(0.5)

diff --git a/src/containers/Ideas/ExploreListItem.styles.js b/src/containers/Ideas/ExploreListItem.styles.js
@@ -31,6 +31,7 @@ export const styles = StyleSheet.create({
     padding: SPACINGS.multiplyBy(0.8),
   },
   progressText: {
+    fontSize: SIZES.sm,
     color: COLORS.grey.medium
   },
   progressBar: {

diff --git a/src/containers/Ideas/Idea.js b/src/containers/Ideas/Idea.js
@@ -300,15 +300,7 @@ export const Idea = (props) => {
   const optionsIcon = <IconSLI name='options-vertical' size={22} />
   const arrowUpIcon = <IconSLI name='arrow-up' size={18} />
   const arrowDownIcon = <IconSLI name='arrow-down' size={18} />
-  const commentIcon = (
-    <IconSLI name='bubble' size={18}
-      color={!hasComments
-        ? styles.disabledIcon.color
-        : styles.fontColor.color
-      }
-      style={styles.commentIcon}
-    />
-  )
+  const commentIcon = <IconSLI name='bubble' size={18} />
 
   const fetchComments = (ideaContentType, ideaPk) => {
     API.getComments(ideaContentType, ideaPk)
@@ -412,6 +404,7 @@ export const Idea = (props) => {
         <ScrollView
           style={styles.container}
           scrollEnabled={!isEditing}
+          scrollEventThrottle={16}
           keyboardShouldPersistTaps='handled'
           onScroll={handleScroll}
           ref={scrollViewRef}
@@ -490,9 +483,14 @@ export const Idea = (props) => {
                   disabled={!ideaState.has_rating_permission}
                 />
               </View>
-              <View>
-                {commentIcon}
-              </View>
+              {hasComments &&
+                <View>
+                  <ButtonCounter
+                    icon={commentIcon}
+                    labelText={t('idea has comments')}
+                    disabled
+                  />
+                </View>}
             </View>
           </View>
           {comments && (

diff --git a/src/containers/Ideas/Idea.styles.js b/src/containers/Ideas/Idea.styles.js
@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native'
 
 import { COLORS } from '../../theme/colors'
-import { FONTS, LINEHEIGHTS,SIZES } from '../../theme/fonts'
+import { FONTS, LINEHEIGHTS, SIZES } from '../../theme/fonts'
 import { SPACINGS } from '../../theme/spacings'
 
 export const styles = StyleSheet.create({
@@ -58,10 +58,6 @@ export const styles = StyleSheet.create({
     marginVertical: SPACINGS.multiplyBy(.5),
     flexWrap: 'wrap',
   },
-  commentIcon: {
-    fontSize: SIZES.md,
-    marginVertical: SPACINGS.multiplyBy(.5),
-  },
   pressableEditing: {
     opacity: 0.25,
     backgroundColor: '#fff'

diff --git a/src/containers/Ideas/IdeasListItem.js b/src/containers/Ideas/IdeasListItem.js
@@ -31,9 +31,9 @@ export const IdeasListItem = (props) => {
     return categoryList
   }
 
-  const arrowUpIcon = <IconSLI name='arrow-up' size={18} />
-  const arrowDownIcon = <IconSLI name='arrow-down' size={18} />
-  const commentIcon = <IconSLI name='bubble' size={18} />
+  const arrowUpIcon = <IconSLI name='arrow-up' size={16} />
+  const arrowDownIcon = <IconSLI name='arrow-down' size={16} />
+  const commentIcon = <IconSLI name='bubble' size={16} />
 
   return (
     <TouchableOpacity
@@ -60,15 +60,15 @@ export const IdeasListItem = (props) => {
               <View style={styles.noLabelSpacing}></View>)}
         </View>
         <View style={styles.bottomContainer}>
-          <TextSourceSans style={styles.text}>{creator}</TextSourceSans>
+          <TextSourceSans style={styles.creatorText}>{creator}</TextSourceSans>
           <View style={styles.infoContainer}>
             <TextSourceSans style={styles.date}>
               {created}
             </TextSourceSans>
             <View style={styles.counters}>
-              <ButtonCounter icon={arrowUpIcon} counter={upCount} disabled />
-              <ButtonCounter icon={arrowDownIcon} counter={downCount} disabled />
-              <ButtonCounter icon={commentIcon} counter={commentCount} disabled />
+              <ButtonCounter icon={arrowUpIcon} counter={upCount} disabled list />
+              <ButtonCounter icon={arrowDownIcon} counter={downCount} disabled list />
+              <ButtonCounter icon={commentIcon} counter={commentCount} disabled list />
             </View>
           </View>
         </View>

diff --git a/src/containers/Ideas/IdeasListItem.styles.js b/src/containers/Ideas/IdeasListItem.styles.js
@@ -27,9 +27,9 @@ export const styles = StyleSheet.create({
     fontSize: SIZES.base,
     fontFamily: FONTS.familySemiBold
   },
-  text: {
+  creatorText: {
     fontSize: SIZES.sm,
-    marginRight: SPACINGS.multiplyBy(0.5),
+    flexBasis: '100%'
   },
   date: {
     fontSize: SIZES.sm,

diff --git a/src/theme/fonts.js b/src/theme/fonts.js
@@ -24,7 +24,3 @@ export const LINEHEIGHTS = {
   lg: pixelRatio * 28,
   xl: pixelRatio * 30,
 }
-
-export const LETTERSPACING = {
-  iconbtn: 5,
-}