diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/state/models/ui/shell.ts | 9 | ||||
| -rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 19 | ||||
| -rw-r--r-- | src/view/com/util/Link.tsx | 7 | ||||
| -rw-r--r-- | src/view/com/util/PostMeta.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/util/text/Text.tsx | 10 |
5 files changed, 37 insertions, 10 deletions
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts index d1ea4ddf1..0c0bb01d7 100644 --- a/src/state/models/ui/shell.ts +++ b/src/state/models/ui/shell.ts @@ -267,13 +267,20 @@ export class ShellUiModel { hydrate(v: unknown) { if (isObj(v)) { if (hasProp(v, 'colorMode') && isColorMode(v.colorMode)) { - this.colorMode = v.colorMode + this.setColorMode(v.colorMode) } } } setColorMode(mode: ColorMode) { this.colorMode = mode + + if (typeof window !== 'undefined') { + const html = window.document.documentElement + // remove any other color mode classes + html.className = html.className.replace(/colorMode--\w+/g, '') + html.classList.add(`colorMode--${mode}`) + } } setMinimalShellMode(v: boolean) { diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index e44151ac5..088be6a90 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -193,7 +193,8 @@ export const PostThreadItem = observer(function PostThreadItem({ /> </View> <View style={styles.layoutContent}> - <View style={[styles.meta, styles.metaExpandedLine1]}> + <View + style={[styles.meta, styles.metaExpandedLine1, {zIndex: 1}]}> <View style={[s.flexRow]}> <Link style={styles.metaItem} @@ -210,12 +211,16 @@ export const PostThreadItem = observer(function PostThreadItem({ )} </Text> </Link> - <Text type="md" style={[styles.metaItem, pal.textLight]}> - · - <TimeElapsed timestamp={item.post.indexedAt}> - {({timeElapsed}) => <>{timeElapsed}</>} - </TimeElapsed> - </Text> + <TimeElapsed timestamp={item.post.indexedAt}> + {({timeElapsed}) => ( + <Text + type="md" + style={[styles.metaItem, pal.textLight]} + title={niceDate(item.post.indexedAt)}> + · {timeElapsed} + </Text> + )} + </TimeElapsed> </View> </View> <View style={styles.meta}> diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index e428960fe..fd886fda4 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -135,6 +135,7 @@ export const TextLink = observer(function TextLink({ numberOfLines, lineHeight, dataSet, + title, }: { testID?: string type?: TypographyVariant @@ -144,6 +145,7 @@ export const TextLink = observer(function TextLink({ numberOfLines?: number lineHeight?: number dataSet?: any + title?: string } & TextProps) { const {...props} = useLinkProps({to: sanitizeUrl(href)}) const store = useStores() @@ -173,8 +175,8 @@ export const TextLink = observer(function TextLink({ style={style} numberOfLines={numberOfLines} lineHeight={lineHeight} - // @ts-ignore web only -prf dataSet={dataSet} + title={title} // @ts-ignore web only -prf hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window {...props}> @@ -197,6 +199,7 @@ interface DesktopWebTextLinkProps extends TextProps { accessible?: boolean accessibilityLabel?: string accessibilityHint?: string + title?: string } export const DesktopWebTextLink = observer(function DesktopWebTextLink({ testID, @@ -218,6 +221,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({ text={text} numberOfLines={numberOfLines} lineHeight={lineHeight} + title={props.title} {...props} /> ) @@ -229,6 +233,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({ style={style} numberOfLines={numberOfLines} lineHeight={lineHeight} + title={props.title} {...props}> {text} </Text> diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index bf21ff0d1..b0ad01754 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -79,6 +79,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) { lineHeight={1.2} text={timeElapsed} accessibilityLabel={niceDate(opts.timestamp)} + title={niceDate(opts.timestamp)} accessibilityHint="" href={opts.postHref} /> @@ -94,6 +95,7 @@ const styles = StyleSheet.create({ alignItems: isAndroid ? 'center' : 'baseline', paddingBottom: 2, gap: 4, + zIndex: 1, }, avatar: { alignSelf: 'center', diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx index 2825390cb..ea97d59fe 100644 --- a/src/view/com/util/text/Text.tsx +++ b/src/view/com/util/text/Text.tsx @@ -6,6 +6,8 @@ import {useTheme, TypographyVariant} from 'lib/ThemeContext' export type CustomTextProps = TextProps & { type?: TypographyVariant lineHeight?: number + title?: string + dataSet?: Record<string, string | number> } export function Text({ @@ -13,13 +15,19 @@ export function Text({ children, lineHeight, style, + title, + dataSet, ...props }: React.PropsWithChildren<CustomTextProps>) { const theme = useTheme() const typography = theme.typography[type] const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined return ( - <RNText style={[s.black, typography, lineHeightStyle, style]} {...props}> + <RNText + style={[s.black, typography, lineHeightStyle, style]} + // @ts-ignore web only -esb + dataSet={Object.assign({tooltip: title}, dataSet || {})} + {...props}> {children} </RNText> ) |