Unread messages, review and complete dividers (#360)

* add NewMessages divider

* add DividerDate

* unify dividers

* fix NewMessages gradient

* NewMessages -> DividerNewMessages
This commit is contained in:
Pavel 2023-03-30 13:40:10 +02:00 committed by GitHub
parent c338bf7aae
commit c351d864a0
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
21 changed files with 208 additions and 69 deletions

View File

@ -42,6 +42,7 @@
"@tamagui/shorthands": "1.7.7", "@tamagui/shorthands": "1.7.7",
"@tamagui/theme-base": "1.7.7", "@tamagui/theme-base": "1.7.7",
"expo-blur": "~12.0.1", "expo-blur": "~12.0.1",
"expo-linear-gradient": "^12.1.2",
"tamagui": "1.7.7", "tamagui": "1.7.7",
"zustand": "^4.3.6" "zustand": "^4.3.6"
}, },

View File

@ -1,29 +0,0 @@
import { Stack } from '@tamagui/core'
import { Text } from '../text'
type Props = {
label: string
tight?: boolean
}
const DividerLabel = (props: Props) => {
const { label, tight = true } = props
return (
<Stack
paddingHorizontal={16}
paddingTop={tight ? 8 : 16}
paddingBottom={8}
borderColor="$neutral-10"
borderTopWidth={1}
>
<Text size={13} color="$neutral-50" weight="medium">
{label}
</Text>
</Stack>
)
}
export { DividerLabel }
export type { Props as DividerLabelProps }

View File

@ -1,33 +0,0 @@
import { Stack, styled } from '@tamagui/core'
export const Divider = styled(Stack, {
name: 'Divider',
backgroundColor: '$neutral-80-opa-10',
flexShrink: 0,
// borderWidth: 0,
flex: 1,
height: '100%',
// maxHeight: 0,
maxWidth: 1,
width: 1,
marginHorizontal: 12,
// y: -0.5,
variants: {
// vertical: {
// true: {
// y: 0,
// x: -0.5,
// height: isWeb ? 'initial' : 'auto',
// // maxHeight auto WILL BE passed to style attribute, but for some reason not used?
// // almost seems like a react or browser bug, but for now `initial` works
// // also, it doesn't happen for `height`, but for consistency using the same values
// maxHeight: isWeb ? 'initial' : 'auto',
// width: 0,
// maxWidth: 0,
// borderBottomWidth: 0,
// borderRightWidth: 1,
// },
// },
} as const,
})

View File

@ -1 +0,0 @@
export * from './divider'

View File

@ -0,0 +1,25 @@
import { DividerDate } from './divider-date'
import type { Meta, StoryObj } from '@storybook/react'
// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
const meta: Meta<typeof DividerDate> = {
component: DividerDate,
argTypes: {},
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159384&t=OkwNsSt1XE3TE2SS-11',
},
},
}
type Story = StoryObj<typeof DividerDate>
export const Default: Story = {
args: {
label: 'Today',
},
}
export default meta

View File

@ -0,0 +1,32 @@
import { Stack } from '@tamagui/core'
import { Text } from '../../text'
import { DividerLine } from '../divider-line'
type Props = {
label: string
}
const DividerDate = (props: Props) => {
const { label } = props
return (
<Stack
paddingTop={8}
marginBottom={12}
marginLeft={48}
marginRight={8}
gap={4}
// borderBottomWidth={1}
// borderColor="$neutral-10"
>
<Text size={11} color="$neutral-50" weight="medium">
{label}
</Text>
<DividerLine />
</Stack>
)
}
export { DividerDate }
export type { Props as DividerLabelProps }

View File

@ -0,0 +1 @@
export * from './divider-date'

View File

@ -9,7 +9,7 @@ const meta: Meta<typeof DividerLabel> = {
parameters: { parameters: {
design: { design: {
type: 'figma', type: 'figma',
url: '', url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159384&t=OkwNsSt1XE3TE2SS-11',
}, },
}, },
} }

View File

@ -0,0 +1,29 @@
import { Stack } from '@tamagui/core'
import { Text } from '../../text'
import { DividerLine } from '../divider-line'
type Props = {
label: string
tight?: boolean
count?: number
}
// TODO: Add counter after PR #355 lands
const DividerLabel = (props: Props) => {
const { label, tight = true } = props
return (
<Stack paddingBottom={8} gap={tight ? 8 : 16}>
<DividerLine />
<Stack paddingHorizontal={16}>
<Text size={13} color="$neutral-50" weight="medium">
{label}
</Text>
</Stack>
</Stack>
)
}
export { DividerLabel }
export type { Props as DividerLabelProps }

View File

@ -0,0 +1,22 @@
import { Stack, styled } from '@tamagui/core'
export const DividerLine = styled(Stack, {
name: 'DividerLine',
backgroundColor: '$neutral-10',
variants: {
orientation: {
horizontal: {
width: '100%',
height: '1px',
},
vertical: {
height: '100%',
width: '1px',
},
},
} as const,
defaultVariants: {
orientation: 'horizontal',
},
})

View File

@ -0,0 +1 @@
export * from './divider-line'

View File

@ -0,0 +1,42 @@
import { Stack } from 'tamagui'
import { DividerNewMessages } from './divider-new-messages'
import type { Meta, StoryObj } from '@storybook/react'
const meta: Meta<typeof DividerNewMessages> = {
component: DividerNewMessages,
argTypes: {},
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159391&t=mgkcemjDOjfGvZZ2-11',
},
},
}
type Story = StoryObj<typeof DividerNewMessages>
export const Default: Story = {
args: {},
render: () => {
return (
<Stack gap={24}>
<DividerNewMessages color="$primary-50" />
<DividerNewMessages color="$yellow-50" />
<DividerNewMessages color="$turquoise-50" />
{/* <NewMessages color="$cooper-50" /> */}
{/* <NewMessages color="$sky-50" /> */}
{/* <NewMessages color="$camel-50" /> */}
<DividerNewMessages color="$orange-50" />
{/* <NewMessages color="$army-50" /> */}
<DividerNewMessages color="$pink-50" />
<DividerNewMessages color="$purple-50" />
{/* <NewMessages color="$magenta-50" /> */}
{/* <NewMessages color="$yin-50" /> */}
</Stack>
)
},
}
export default meta

View File

@ -0,0 +1,28 @@
import { Stack } from '@tamagui/core'
import { LinearGradient } from '@tamagui/linear-gradient'
import { Text } from '../../text'
import type { ColorTokens } from '@tamagui/core'
type Props = {
color: ColorTokens
}
const DividerNewMessages = (props: Props) => {
const { color } = props
return (
<Stack position="relative" height={42} backgroundColor={color}>
<LinearGradient height={42} colors={['$white-95', '$white-100']}>
<Stack paddingHorizontal={56} paddingVertical={12} zIndex={10}>
<Text size={13} weight="medium" color={color}>
New Messages
</Text>
</Stack>
</LinearGradient>
</Stack>
)
}
export { DividerNewMessages }

View File

@ -0,0 +1 @@
export { DividerNewMessages } from './divider-new-messages'

View File

@ -0,0 +1,4 @@
export { DividerDate } from './divider-date'
export { DividerLabel } from './divider-label'
export { DividerLine } from './divider-line'
export { DividerNewMessages } from './divider-new-messages'

View File

@ -1,8 +1,7 @@
export * from './anchor-actions' export * from './anchor-actions'
export * from './button' export * from './button'
export * from './composer' export * from './composer'
export * from './divider' export * from './dividers'
export * from './divider-label'
export * from './dynamic-button' export * from './dynamic-button'
export * from './icon-button' export * from './icon-button'
export * from './image' export * from './image'

View File

@ -1,3 +1,6 @@
import { Stack } from '@tamagui/core'
import { DividerDate, DividerNewMessages } from '../dividers'
import { PinAnnouncement } from '../system-messages' import { PinAnnouncement } from '../system-messages'
import { Message } from './message' import { Message } from './message'
@ -78,6 +81,9 @@ export const Messages = () => {
reply reply
id="1234-1242" id="1234-1242"
/> />
<Stack marginHorizontal={-8} marginVertical={8}>
<DividerNewMessages color="$blue-50" />
</Stack>
<Message <Message
text="Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim.sit" text="Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim.sit"
reactions={reactions} reactions={reactions}
@ -92,6 +98,7 @@ export const Messages = () => {
reactions={{}} reactions={{}}
id="1234-1244" id="1234-1244"
/> />
<DividerDate label="Today" />
<Message <Message
images={[ images={[
{ {

View File

@ -1,6 +1,6 @@
import { Stack } from '@tamagui/core' import { Stack } from '@tamagui/core'
import { DividerLabel } from '../divider-label' import { DividerLabel } from '../dividers'
import { UserList } from '../user-list' import { UserList } from '../user-list'
import type { USerListProps } from '../user-list' import type { USerListProps } from '../user-list'

View File

@ -13,7 +13,6 @@ import {
import { Stack, Text as RNText } from '@tamagui/core' import { Stack, Text as RNText } from '@tamagui/core'
import { BlurView } from 'expo-blur' import { BlurView } from 'expo-blur'
import { Divider } from '../divider'
import { DropdownMenu } from '../dropdown-menu' import { DropdownMenu } from '../dropdown-menu'
import { IconButton } from '../icon-button' import { IconButton } from '../icon-button'
import { PinnedMessage } from '../pinned-message' import { PinnedMessage } from '../pinned-message'
@ -85,7 +84,13 @@ const Topbar = (props: Props) => {
)} )}
<LockedIcon color="$neutral-80-opa-40" /> <LockedIcon color="$neutral-80-opa-40" />
<Divider height={16} $sm={{ display: 'none' }} /> <Stack
backgroundColor="$neutral-80-opa-10"
marginHorizontal={12}
height={16}
width={1}
$sm={{ display: 'none' }}
/>
</Stack> </Stack>
<Stack <Stack

View File

@ -9550,6 +9550,11 @@ expo-linear-gradient@^12.0.1:
resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.0.1.tgz#452f793b0463ddf313aad431552f23acc85f5d64" resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.0.1.tgz#452f793b0463ddf313aad431552f23acc85f5d64"
integrity sha512-TMl/wBTVQOliL4S3DS5Aa3UFfVySr0mdJEHLG6kfBdMCLkr+tfLI2rGyJ+scS7xgMsvhTIaurhf1+Z0sL3aLCg== integrity sha512-TMl/wBTVQOliL4S3DS5Aa3UFfVySr0mdJEHLG6kfBdMCLkr+tfLI2rGyJ+scS7xgMsvhTIaurhf1+Z0sL3aLCg==
expo-linear-gradient@^12.1.2:
version "12.1.2"
resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.1.2.tgz#25e352b179a73fb7c2de3c1bc48186557e445348"
integrity sha512-e1d6Hq5qsRL8sWutrOuQhuir4vHiRJ1PmvDIL8P33mt51Y8VFTQjTG/mr5qJlT8lUD/ADJfaBLzV7SNqSuDTLQ==
expo-manifests@~0.4.0: expo-manifests@~0.4.0:
version "0.4.0" version "0.4.0"
resolved "https://registry.yarnpkg.com/expo-manifests/-/expo-manifests-0.4.0.tgz#6fd44b6427e113f2eb9409ca46df95cbbea068df" resolved "https://registry.yarnpkg.com/expo-manifests/-/expo-manifests-0.4.0.tgz#6fd44b6427e113f2eb9409ca46df95cbbea068df"