generally consistent across web/ios
This commit is contained in:
+16
-23
@@ -7,7 +7,7 @@ import {
|
|||||||
|
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {Text, CustomTextProps} from 'view/com/util/text/Text'
|
import {Text, CustomTextProps} from 'view/com/util/text/Text'
|
||||||
import {Link} from 'view/com/util/Link'
|
import {TextLink} from 'view/com/util/Link'
|
||||||
|
|
||||||
export function Tag({
|
export function Tag({
|
||||||
value,
|
value,
|
||||||
@@ -20,16 +20,13 @@ export function Tag({
|
|||||||
const type = textSize || 'xs-medium'
|
const type = textSize || 'xs-medium'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<TextLink
|
||||||
asAnchor
|
type={type}
|
||||||
|
text={`#${value}`}
|
||||||
accessible
|
accessible
|
||||||
anchorNoUnderline
|
|
||||||
href={`/search?q=${value}`}
|
href={`/search?q=${value}`}
|
||||||
style={[pal.viewLight, styles.tag]}>
|
style={[pal.textLight]}
|
||||||
<Text type={type} style={[pal.textLight]}>
|
/>
|
||||||
#{value}
|
|
||||||
</Text>
|
|
||||||
</Link>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -44,23 +41,19 @@ export function InlineTag({
|
|||||||
const type = textSize || 'xs-medium'
|
const type = textSize || 'xs-medium'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<TextLink
|
||||||
asAnchor
|
type={type}
|
||||||
|
text={`#${value}`}
|
||||||
accessible
|
accessible
|
||||||
anchorNoUnderline
|
|
||||||
href={`/search?q=${value}`}
|
href={`/search?q=${value}`}
|
||||||
style={[
|
style={[
|
||||||
pal.viewLight,
|
pal.link,
|
||||||
styles.tag,
|
|
||||||
{
|
{
|
||||||
paddingTop: 0,
|
paddingTop: 0,
|
||||||
paddingBottom: 2,
|
paddingBottom: 2,
|
||||||
},
|
},
|
||||||
]}>
|
]}
|
||||||
<Text type={type} style={[pal.textLight]}>
|
/>
|
||||||
#{value}
|
|
||||||
</Text>
|
|
||||||
</Link>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -90,14 +83,14 @@ export function EditableTag({
|
|||||||
onPointerLeave={hoverOut}
|
onPointerLeave={hoverOut}
|
||||||
style={state => [
|
style={state => [
|
||||||
pal.viewLight,
|
pal.viewLight,
|
||||||
styles.tag,
|
styles.editableTag,
|
||||||
{
|
{
|
||||||
opacity: state.pressed || state.focused ? 0.8 : 1,
|
opacity: state.pressed || state.focused ? 0.8 : 1,
|
||||||
outline: 0,
|
outline: 0,
|
||||||
paddingRight: 6,
|
paddingRight: 6,
|
||||||
},
|
},
|
||||||
]}>
|
]}>
|
||||||
<Text type="md-medium" style={[pal.textLight, {lineHeight: 13}]}>
|
<Text type="md-medium" style={[pal.textLight]}>
|
||||||
#{value}
|
#{value}
|
||||||
</Text>
|
</Text>
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
@@ -116,11 +109,11 @@ export function EditableTag({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
tag: {
|
editableTag: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
gap: 6,
|
gap: 6,
|
||||||
paddingTop: 3,
|
paddingTop: 4,
|
||||||
paddingBottom: 4,
|
paddingBottom: 4,
|
||||||
paddingHorizontal: 8,
|
paddingHorizontal: 8,
|
||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import {
|
|||||||
StyleSheet,
|
StyleSheet,
|
||||||
NativeSyntheticEvent,
|
NativeSyntheticEvent,
|
||||||
TextInputKeyPressEventData,
|
TextInputKeyPressEventData,
|
||||||
|
Platform,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
import {
|
import {
|
||||||
FontAwesomeIcon,
|
FontAwesomeIcon,
|
||||||
@@ -141,8 +142,11 @@ const styles = StyleSheet.create({
|
|||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
fontSize: 15,
|
fontSize: 15,
|
||||||
lineHeight: 15,
|
lineHeight: Platform.select({
|
||||||
paddingTop: 5,
|
web: 20,
|
||||||
paddingBottom: 6,
|
native: 18,
|
||||||
|
}),
|
||||||
|
paddingTop: 4,
|
||||||
|
paddingBottom: 4,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -333,12 +333,17 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||||||
{AppBskyFeedPost.isRecord(item.post.record) &&
|
{AppBskyFeedPost.isRecord(item.post.record) &&
|
||||||
item.post.record.tags?.length ? (
|
item.post.record.tags?.length ? (
|
||||||
<View
|
<View
|
||||||
style={{
|
style={[
|
||||||
flexDirection: 'row',
|
pal.border,
|
||||||
flexWrap: 'wrap',
|
{
|
||||||
gap: 8,
|
flexDirection: 'row',
|
||||||
paddingBottom: 12,
|
flexWrap: 'wrap',
|
||||||
}}>
|
gap: 8,
|
||||||
|
paddingBottom: 12,
|
||||||
|
marginBottom: 12,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
},
|
||||||
|
]}>
|
||||||
{item.post.record.tags.map(tag => (
|
{item.post.record.tags.map(tag => (
|
||||||
<Tag key={tag} value={tag} textSize="md-medium" />
|
<Tag key={tag} value={tag} textSize="md-medium" />
|
||||||
))}
|
))}
|
||||||
@@ -387,7 +392,7 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
<View style={[s.pl10, s.pb5]}>
|
<View style={[s.pb5]}>
|
||||||
<PostCtrls
|
<PostCtrls
|
||||||
big
|
big
|
||||||
itemUri={itemUri}
|
itemUri={itemUri}
|
||||||
@@ -718,7 +723,7 @@ const useStyles = () => {
|
|||||||
},
|
},
|
||||||
expandedInfo: {
|
expandedInfo: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
padding: 10,
|
paddingVertical: 10,
|
||||||
borderTopWidth: 1,
|
borderTopWidth: 1,
|
||||||
borderBottomWidth: 1,
|
borderBottomWidth: 1,
|
||||||
marginTop: 5,
|
marginTop: 5,
|
||||||
|
|||||||
Reference in New Issue
Block a user