recent TLFs tweaks (keybase#18730)

tendi09 · Aug 5, 2019 · ec0520d · ec0520d
1 parent 1113d2b
commit ec0520d
Show file tree

Hide file tree

Showing 7 changed files with 352 additions and 172 deletions.
diff --git a/shared/fs/browser/root.tsx b/shared/fs/browser/root.tsx
@@ -36,7 +36,7 @@ const renderItem = ({item, section}) =>
     </WrapRow>
   ) : (
     <WrapRow>
-      <Tlf name={item.name} tlfType={item.tlfType} showTlfTypeIcon={true} />
+      <Tlf name={item.name} tlfType={item.tlfType} mixedMode={true} />
     </WrapRow>
   )
 
@@ -105,7 +105,12 @@ const Root = (_: Props) => {
     },
   ]
   return (
-    <Kb.SectionList sections={sections} renderItem={renderItem} renderSectionHeader={renderSectionHeader} />
+    <Kb.SectionList
+      sections={sections}
+      renderItem={renderItem}
+      renderSectionHeader={renderSectionHeader}
+      stickySectionHeadersEnabled={false}
+    />
   )
 }
 

diff --git a/shared/fs/browser/rows/tlf-container.tsx b/shared/fs/browser/rows/tlf-container.tsx
@@ -7,10 +7,10 @@ import OpenHOC from '../../common/open-hoc'
 import Tlf from './tlf'
 import flags from '../../../util/feature-flags'
 
-type OwnProps = {
+export type OwnProps = {
   destinationPickerIndex?: number
+  mixedMode?: boolean
   name: string
-  showTlfTypeIcon?: boolean
   tlfType: Types.TlfType
 }
 
@@ -19,7 +19,7 @@ const mapStateToProps = (state, {tlfType, name}: OwnProps) => ({
   _username: state.config.username,
 })
 
-const mergeProps = (stateProps, _, {tlfType, name, showTlfTypeIcon, destinationPickerIndex}: OwnProps) => {
+const mergeProps = (stateProps, _, {tlfType, name, mixedMode, destinationPickerIndex}: OwnProps) => {
   const shouldBadge = Constants.tlfIsBadged(stateProps._tlf)
   const path = Constants.tlfTypeAndNameToPath(tlfType, name)
   const usernames = Constants.getUsernamesFromTlfName(name).filter(name => name !== stateProps._username)
@@ -31,9 +31,9 @@ const mergeProps = (stateProps, _, {tlfType, name, showTlfTypeIcon, destinationP
       flags.kbfsOfflineMode &&
       stateProps._tlf.syncConfig &&
       stateProps._tlf.syncConfig.mode !== Types.TlfSyncMode.Disabled,
+    mixedMode,
     name,
     path,
-    showTlfTypeIcon,
     // Only include the user if they're the only one
     usernames: usernames.isEmpty() ? I.List([stateProps._username]) : usernames,
   }

diff --git a/shared/fs/browser/rows/tlf.tsx b/shared/fs/browser/rows/tlf.tsx
@@ -13,7 +13,7 @@ type TlfProps = StillCommonProps & {
   // We don't use this at the moment. In the future this will be used for
   // showing ignored folders when we allow user to show ignored folders in GUI.
   isIgnored: boolean
-  showTlfTypeIcon?: boolean
+  mixedMode?: boolean
   usernames: I.List<string>
 }
 
@@ -27,7 +27,7 @@ const Content = (props: TlfProps) => (
           path={props.path}
         />
       </Kb.Box2>
-      <TlfInfo path={props.path} mode="row" />
+      <TlfInfo path={props.path} mode="row" mixedMode={props.mixedMode} />
     </Kb.Box2>
   </Kb.BoxGrow>
 )
@@ -54,7 +54,7 @@ const Tlf = (props: TlfProps) => (
     inDestinationPicker={props.inDestinationPicker}
     badge={props.isNew ? Types.PathItemBadgeType.New : null}
     showActionsWithGrow={true}
-    showTlfTypeIcon={props.showTlfTypeIcon}
+    showTlfTypeIcon={!!props.mixedMode}
   >
     {!!props.loadPathMetadata && <FsPathMetadataLoader path={props.path} />}
     <Kb.Box style={rowStyles.itemBox}>

diff --git a/shared/fs/common/index.stories.tsx b/shared/fs/common/index.stories.tsx
@@ -13,6 +13,7 @@ import Errs from './errs'
 import OpenInSystemFileManager from './open-in-system-file-manager'
 import {OwnProps as PathItemIconOwnProps} from './path-item-icon-container'
 import {OwnProps as PathItemInfoOwnProps} from './path-item-info-container'
+import {OwnProps as TlfInfoOwnProps} from './tlf-info-container'
 import SyncStatus from './sync-status'
 import PieSlice from './pie-slice'
 import ConfirmDelete from './path-item-action/confirm-delete'
@@ -118,9 +119,12 @@ export const commonProvider = {
     progress: 0.67,
     show: true,
   }),
-  TlfInfo: ({mode}: PathItemInfoOwnProps) => ({
+  TlfInfo: ({mixedMode, mode}: TlfInfoOwnProps) => ({
+    mixedMode,
     mode,
     reset: ['foo', 'bar', 'cue'],
+    tlfMtime: 1564784024580,
+    tlfType: Types.TlfType.Private,
   }),
   TryEnableDriverOnFocus: () => ({
     appFocusedCount: 1,
@@ -284,15 +288,49 @@ const load = () => {
     .add('TlfInfo', () => (
       <Kb.Box2 direction="vertical" gap="small" gapStart={true} fullWidth={true}>
         <Kb.Text type="Body">mode=default reset=false</Kb.Text>
-        <TlfInfo mode="default" reset={false} />
+        <TlfInfo tlfMtime={1564784024580} tlfType={Types.TlfType.Private} mode="default" reset={false} />
         <Kb.Text type="Body">mode=default reset=true</Kb.Text>
-        <TlfInfo mode="default" reset={true} />
+        <TlfInfo tlfMtime={1564784024580} tlfType={Types.TlfType.Private} mode="default" reset={true} />
         <Kb.Text type="Body">mode=row reset=Array(1)</Kb.Text>
-        <TlfInfo mode="row" reset={['foo']} />
+        <TlfInfo tlfMtime={1564784024580} tlfType={Types.TlfType.Private} mode="row" reset={['foo']} />
         <Kb.Text type="Body">mode=default reset=Array(2)</Kb.Text>
-        <TlfInfo mode="default" reset={['foo', 'bar']} />
+        <TlfInfo
+          tlfMtime={1564784024580}
+          tlfType={Types.TlfType.Private}
+          mode="default"
+          reset={['foo', 'bar']}
+        />
         <Kb.Text type="Body">mode=row reset=Array(3)</Kb.Text>
-        <TlfInfo mode="row" reset={['foo', 'bar', 'cue']} />
+        <TlfInfo
+          tlfMtime={1564784024580}
+          tlfType={Types.TlfType.Private}
+          mode="row"
+          reset={['foo', 'bar', 'cue']}
+        />
+        <Kb.Text type="Body">mode=row mixedMode=true reset=Array(3)</Kb.Text>
+        <TlfInfo
+          mixedMode={true}
+          tlfMtime={1564784024580}
+          tlfType={Types.TlfType.Private}
+          mode="row"
+          reset={['foo', 'bar', 'cue']}
+        />
+        <Kb.Text type="Body">mode=row mixedMode=true reset=true</Kb.Text>
+        <TlfInfo
+          mixedMode={true}
+          tlfMtime={1564784024580}
+          tlfType={Types.TlfType.Private}
+          mode="row"
+          reset={true}
+        />
+        <Kb.Text type="Body">mode=row mixedMode=true reset=false</Kb.Text>
+        <TlfInfo
+          mixedMode={true}
+          tlfMtime={1564784024580}
+          tlfType={Types.TlfType.Private}
+          mode="row"
+          reset={false}
+        />
       </Kb.Box2>
     ))
     .add('PathItemInfo', () => (

diff --git a/shared/fs/common/tlf-info-container.tsx b/shared/fs/common/tlf-info-container.tsx
@@ -5,6 +5,7 @@ import TlfInfo from './tlf-info'
 
 export type OwnProps = {
   path: Types.Path
+  mixedMode?: boolean
   mode: 'row' | 'default'
 }
 
@@ -18,11 +19,14 @@ export default Container.namedConnect(
     const resetParticipants =
       stateProps._tlf === Constants.unknownTlf ? undefined : stateProps._tlf.resetParticipants.toArray()
     return {
+      mixedMode: ownProps.mixedMode,
       mode: ownProps.mode,
       reset:
         !!resetParticipants &&
         !!resetParticipants.length &&
         (resetParticipants.includes(stateProps._username) || resetParticipants),
+      tlfMtime: stateProps._tlf.tlfMtime,
+      tlfType: Types.getPathVisibility(ownProps.path),
     }
   },
   'TlfInfo'

diff --git a/shared/fs/common/tlf-info.tsx b/shared/fs/common/tlf-info.tsx
@@ -1,13 +1,18 @@
 import * as React from 'react'
 import * as Styles from '../../styles'
 import * as Kb from '../../common-adapters'
+import * as Types from '../../constants/types/fs'
+import {formatTimeForFS} from '../../util/timestamp'
 
 export type Props = {
+  mixedMode?: boolean
   mode: 'row' | 'default'
   reset: boolean | Array<string>
+  tlfMtime: number
+  tlfType: Types.Visibility
 }
 
-const getResetText = (names: Array<string>): string => {
+const getOtherResetText = (names: Array<string>): string => {
   if (names.length === 1) {
     return `${names[0]} has reset their account.`
   } else if (names.length === 2) {
@@ -16,37 +21,89 @@ const getResetText = (names: Array<string>): string => {
   return `${names.slice(0, -1).join(', ')}, and ${names[names.length - 1]} have reset their accounts.`
 }
 
-const TlfInfo = (props: Props) =>
-  props.reset ? (
-    <Kb.Box2 direction="horizontal" fullWidth={true} centerChildren={props.mode === 'default'}>
-      {props.reset === true ? (
-        <Kb.Text
-          type="BodySmallError"
-          style={props.mode === 'default' ? styles.textDefault : styles.textRow}
-          lineClamp={props.mode === 'row' && Styles.isMobile ? 1 : undefined}
-        >
-          Participants have to let you back in.
-        </Kb.Text>
-      ) : (
-        <>
-          {props.mode === 'row' && (
-            <Kb.Meta title="reset" backgroundColor={Styles.globalColors.red} style={styles.meta} />
-          )}
-          <Kb.Text
-            type="BodySmall"
-            style={props.mode === 'default' ? styles.textDefault : styles.textRow}
-            lineClamp={props.mode === 'row' && Styles.isMobile ? 1 : undefined}
-          >
-            {getResetText(props.reset)}
-          </Kb.Text>
-        </>
-      )}
+const ResetMetaMaybe = (props: Props) =>
+  props.mode === 'row' && props.reset === true ? (
+    <Kb.Meta title="reset" backgroundColor={Styles.globalColors.red} style={styles.meta} />
+  ) : null
+
+const ResetText = (props: Props) => (
+  <Kb.Text
+    type="BodySmallError"
+    style={props.mode === 'default' ? styles.textDefault : styles.textRow}
+    lineClamp={props.mode === 'row' && Styles.isMobile ? 1 : undefined}
+  >
+    {props.reset === true
+      ? 'Participants have to let you back in.'
+      : props.reset
+      ? getOtherResetText(props.reset)
+      : null}
+  </Kb.Text>
+)
+
+const PrefixText = (props: Props) =>
+  props.mixedMode && props.tlfType ? (
+    <Kb.Box2 direction="horizontal" gap="xtiny" gapEnd={true}>
+      <Kb.Text
+        type="BodySmall"
+        style={props.mode === 'default' ? styles.textDefault : styles.textRow}
+        lineClamp={props.mode === 'row' && Styles.isMobile ? 1 : undefined}
+      >
+        {props.tlfType}/
+      </Kb.Text>
+      <Kb.Text
+        type="BodySmall"
+        style={props.mode === 'default' ? styles.textDefault : styles.textRow}
+        lineClamp={props.mode === 'row' && Styles.isMobile ? 1 : undefined}
+      >
+        •
+      </Kb.Text>
     </Kb.Box2>
   ) : null
 
+const TimeText = (props: Props) =>
+  props.tlfMtime ? (
+    <Kb.Text
+      type="BodySmall"
+      style={props.mode === 'default' ? styles.textDefault : styles.textRow}
+      lineClamp={props.mode === 'row' && Styles.isMobile ? 1 : undefined}
+    >
+      {formatTimeForFS(props.tlfMtime, props.mode !== 'row')}
+    </Kb.Text>
+  ) : null
+
+const getText = (props: Props) => {
+  if (Styles.isMobile && props.mixedMode) {
+    // on mobile in fs root, don't show reset text, and only show time text
+    // if reset badge isn't shown, i.e. not self reset
+    return props.reset !== true ? <TimeText {...props} /> : null
+  }
+
+  // in mixed mode, reset text takes higher priority
+  if (props.mixedMode) {
+    return props.reset ? <ResetText {...props} /> : <TimeText {...props} />
+  }
+
+  // otherwise, show reset text if we need, and don't show time text.
+  return props.reset ? <ResetText {...props} /> : null
+}
+
+const TlfInfo = (props: Props) => (
+  <Kb.Box2
+    direction="horizontal"
+    fullWidth={true}
+    centerChildren={props.mode === 'default'}
+    alignItems="center"
+  >
+    <PrefixText {...props} />
+    <ResetMetaMaybe {...props} />
+    {getText(props)}
+  </Kb.Box2>
+)
+
 const styles = Styles.styleSheetCreate({
   meta: {
-    marginRight: Styles.globalMargins.tiny,
+    alignSelf: 'center',
+    marginRight: Styles.globalMargins.xtiny,
   },
   textDefault: {
     textAlign: 'center',