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
GitHub
parent
c338bf7aae
commit
c351d864a0
|
|
@ -42,6 +42,7 @@
|
|||
"@tamagui/shorthands": "1.7.7",
|
||||
"@tamagui/theme-base": "1.7.7",
|
||||
"expo-blur": "~12.0.1",
|
||||
"expo-linear-gradient": "^12.1.2",
|
||||
"tamagui": "1.7.7",
|
||||
"zustand": "^4.3.6"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
@ -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,
|
||||
})
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './divider'
|
||||
|
|
@ -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
|
||||
|
|
@ -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 }
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './divider-date'
|
||||
|
|
@ -9,7 +9,7 @@ const meta: Meta<typeof DividerLabel> = {
|
|||
parameters: {
|
||||
design: {
|
||||
type: 'figma',
|
||||
url: '',
|
||||
url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159384&t=OkwNsSt1XE3TE2SS-11',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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',
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './divider-line'
|
||||
|
|
@ -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
|
||||
|
|
@ -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 }
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { DividerNewMessages } from './divider-new-messages'
|
||||
|
|
@ -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'
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
export * from './anchor-actions'
|
||||
export * from './button'
|
||||
export * from './composer'
|
||||
export * from './divider'
|
||||
export * from './divider-label'
|
||||
export * from './dividers'
|
||||
export * from './dynamic-button'
|
||||
export * from './icon-button'
|
||||
export * from './image'
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
import { Stack } from '@tamagui/core'
|
||||
|
||||
import { DividerDate, DividerNewMessages } from '../dividers'
|
||||
import { PinAnnouncement } from '../system-messages'
|
||||
import { Message } from './message'
|
||||
|
||||
|
|
@ -78,6 +81,9 @@ export const Messages = () => {
|
|||
reply
|
||||
id="1234-1242"
|
||||
/>
|
||||
<Stack marginHorizontal={-8} marginVertical={8}>
|
||||
<DividerNewMessages color="$blue-50" />
|
||||
</Stack>
|
||||
<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"
|
||||
reactions={reactions}
|
||||
|
|
@ -92,6 +98,7 @@ export const Messages = () => {
|
|||
reactions={{}}
|
||||
id="1234-1244"
|
||||
/>
|
||||
<DividerDate label="Today" />
|
||||
<Message
|
||||
images={[
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Stack } from '@tamagui/core'
|
||||
|
||||
import { DividerLabel } from '../divider-label'
|
||||
import { DividerLabel } from '../dividers'
|
||||
import { UserList } from '../user-list'
|
||||
|
||||
import type { USerListProps } from '../user-list'
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ import {
|
|||
import { Stack, Text as RNText } from '@tamagui/core'
|
||||
import { BlurView } from 'expo-blur'
|
||||
|
||||
import { Divider } from '../divider'
|
||||
import { DropdownMenu } from '../dropdown-menu'
|
||||
import { IconButton } from '../icon-button'
|
||||
import { PinnedMessage } from '../pinned-message'
|
||||
|
|
@ -85,7 +84,13 @@ const Topbar = (props: Props) => {
|
|||
)}
|
||||
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
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:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/expo-manifests/-/expo-manifests-0.4.0.tgz#6fd44b6427e113f2eb9409ca46df95cbbea068df"
|
||||
|
|
|
|||
Loading…
Reference in New Issue