Mention future column types: Issue/PR management

devhubapp · Feb 7, 2019 · 8f94d2f · 8f94d2f
1 parent c1ccf7e
commit 8f94d2f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 19 deletions.
diff --git a/packages/components/src/components/common/H2.tsx b/packages/components/src/components/common/H2.tsx
@@ -5,12 +5,16 @@ import { useCSSVariablesOrSpringAnimatedTheme } from '../../hooks/use-css-variab
 import { contentPadding } from '../../styles/variables'
 import { SpringAnimatedText } from '../animated/spring/SpringAnimatedText'
 
-export type H2Props = TextProps & { children: string; withMargin?: boolean }
+export type H2Props = TextProps & {
+  children: string
+  muted?: boolean
+  withMargin?: boolean
+}
 
 export function H2(props: H2Props) {
   const springAnimatedTheme = useCSSVariablesOrSpringAnimatedTheme()
 
-  const { children, style, withMargin, ...otherProps } = props
+  const { children, muted, style, withMargin, ...otherProps } = props
 
   return (
     <SpringAnimatedText
@@ -19,7 +23,9 @@ export function H2(props: H2Props) {
         {
           marginBottom: withMargin ? contentPadding : undefined,
           fontWeight: '600',
-          color: springAnimatedTheme.foregroundColor,
+          color: muted
+            ? springAnimatedTheme.foregroundColorMuted50
+            : springAnimatedTheme.foregroundColor,
         },
         style,
       ]}

diff --git a/packages/components/src/components/common/SubHeader.tsx b/packages/components/src/components/common/SubHeader.tsx
@@ -12,19 +12,20 @@ import { Spacer } from './Spacer'
 export interface SubHeaderProps {
   children?: React.ReactNode
   iconName?: ColumnHeaderItemProps['iconName']
+  muted?: boolean
   title?: ColumnHeaderItemProps['title']
 }
 
 export function SubHeader(props: SubHeaderProps) {
-  const { children, iconName, title } = props
+  const { children, iconName, muted, title } = props
 
   return (
     <SpringAnimatedView
       style={{
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
         alignSelf: 'stretch',
         alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'row',
         padding: contentPadding,
       }}
     >
@@ -41,9 +42,11 @@ export function SubHeader(props: SubHeaderProps) {
 
       {!!iconName && !!title && <Spacer width={contentPadding / 2} />}
 
-      {!!title && <H2 withMargin={false}>{title}</H2>}
-
-      <Spacer flex={1} minWidth={contentPadding / 2} />
+      {!!title && (
+        <H2 muted={muted} withMargin={false}>
+          {title}
+        </H2>
+      )}
 
       {children}
     </SpringAnimatedView>

diff --git a/packages/components/src/components/modals/AddColumnModal.tsx b/packages/components/src/components/modals/AddColumnModal.tsx
@@ -22,6 +22,7 @@ import { SpringAnimatedTouchableOpacity } from '../animated/spring/SpringAnimate
 import { ColumnHeaderItem } from '../columns/ColumnHeaderItem'
 import { ModalColumn } from '../columns/ModalColumn'
 import { fabSize } from '../common/FAB'
+import { H2 } from '../common/H2'
 import { Link } from '../common/Link'
 import { separatorTickSize } from '../common/Separator'
 import { Spacer } from '../common/Spacer'
@@ -42,8 +43,10 @@ const columnTypes: Array<{
   items: Array<{
     title: string
     icon: GitHubIcon
-    payload: AddColumnDetailsPayload
+    payload: AddColumnDetailsPayload | null
   }>
+  soon?: boolean
+  soonLink?: string
 }> = [
   {
     title: 'Notifications',
@@ -137,6 +140,25 @@ const columnTypes: Array<{
       },
     ],
   },
+  {
+    soon: true,
+    soonLink: 'https://github.com/devhubapp/devhub/issues/110',
+    title: 'Issue & PR Management',
+    type: 'activity', // TODO
+    icon: 'issue-opened',
+    items: [
+      {
+        title: 'Issues',
+        icon: 'issue-opened',
+        payload: null,
+      },
+      {
+        title: 'Pull Requests',
+        icon: 'git-pull-request',
+        payload: null,
+      },
+    ],
+  },
 ]
 
 function AddColumnModalItem({
@@ -149,7 +171,7 @@ function AddColumnModalItem({
   availableWidth: number
   disabled?: boolean
   icon: GitHubIcon
-  payload: AddColumnDetailsPayload
+  payload: AddColumnDetailsPayload | null
   title: string
 }) {
   const initialTheme = useTheme(theme => {
@@ -205,12 +227,15 @@ function AddColumnModalItem({
     <SpringAnimatedTouchableOpacity
       ref={touchableRef}
       analyticsLabel={undefined}
-      disabled={disabled}
-      onPress={() =>
-        pushModal({
-          name: 'ADD_COLUMN_DETAILS',
-          params: payload,
-        })
+      disabled={disabled || !payload}
+      onPress={
+        payload
+          ? () =>
+              pushModal({
+                name: 'ADD_COLUMN_DETAILS',
+                params: payload,
+              })
+          : undefined
       }
       onPressIn={() => {
         if (Platform.realOS === 'web') return
@@ -294,7 +319,21 @@ export function AddColumnModal(props: AddColumnModalProps) {
       >
         {columnTypes.map((group, groupIndex) => (
           <View key={`add-column-header-group-${groupIndex}`}>
-            <SubHeader title={group.title} />
+            <SubHeader muted={group.soon} title={group.title}>
+              {!!group.soon && (
+                <Link
+                  analyticsLabel={`add-column-${group.title}-soon`}
+                  href={group.soonLink}
+                >
+                  <H2
+                    muted
+                    withMargin={false}
+                    children=" (soon)"
+                    style={{ flex: 1 }}
+                  />
+                </Link>
+              )}
+            </SubHeader>
 
             <View
               style={{
@@ -309,7 +348,7 @@ export function AddColumnModal(props: AddColumnModalProps) {
                 <AddColumnModalItem
                   key={`add-column-button-group-${groupIndex}-item-${itemIndex}`}
                   availableWidth={availableWidth}
-                  disabled={hasReachedColumnLimit}
+                  disabled={hasReachedColumnLimit || !item.payload}
                   icon={item.icon}
                   payload={item.payload}
                   title={item.title}