diff options
| -rw-r--r-- | .eslintrc.js | 1 | ||||
| -rw-r--r-- | bskyweb/templates/base.html | 70 | ||||
| -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 | ||||
| -rw-r--r-- | web/index.html | 70 |
8 files changed, 166 insertions, 22 deletions
diff --git a/.eslintrc.js b/.eslintrc.js index 3de954e43..c5b7e861f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -16,6 +16,7 @@ module.exports = { '*.lock', '.husky', 'patches', + '*.html', ], overrides: [ { diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index b5ed329cd..5a671d6ad 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -39,6 +39,32 @@ height: calc(100% + env(safe-area-inset-top)); } + /* Color theming */ + :root { + --text: black; + --background: white; + --backgroundLight: #F3F3F8; + } + html.colorMode--dark { + --text: white; + --background: black; + --backgroundLight: #26272D; + } + @media (prefers-color-scheme: light) { + html.colorMode--system { + --text: black; + --background: white; + --backgroundLight: #F3F3F8; + } + } + @media (prefers-color-scheme: dark) { + html.colorMode--system { + --text: white; + --background: black; + --backgroundLight: #26272D; + } + } + body { display: flex; /* Allows you to scroll below the viewport; default value is visible */ @@ -49,12 +75,6 @@ -moz-osx-font-smoothing: grayscale; -ms-overflow-style: scrollbar; } - /* Enable for apps that support dark-theme */ - /*@media (prefers-color-scheme: dark) { - body { - background-color: black; - } - }*/ /* Remove default link styling */ a { @@ -109,6 +129,44 @@ .tippy-content .items { width: fit-content; } + + /* Tooltips */ + [data-tooltip] { + position: relative; + z-index: 10; + } + [data-tooltip]::after { + content: attr(data-tooltip); + display: none; + position: absolute; + bottom: 0; + left: 50%; + transform: translateY(100%) translateY(8px) translateX(-50%); + padding: 4px 10px; + border-radius: 10px; + background: var(--backgroundLight); + color: var(--text); + text-align: center; + white-space: nowrap; + font-size: 12px; + z-index: 10; + } + [data-tooltip]::before { + content: ''; + display: none; + position: absolute; + border-bottom: 6px solid var(--backgroundLight); + border-left: 6px solid transparent; + border-right: 6px solid transparent; + bottom: 0; + left: 50%; + transform: translateY(100%) translateY(2px) translateX(-50%); + z-index: 10; + } + [data-tooltip]:hover::after, + [data-tooltip]:hover::before { + display:block; + } </style> {% include "scripts.html" %} <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"> 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> ) diff --git a/web/index.html b/web/index.html index 1bfa8f68d..603e3954d 100644 --- a/web/index.html +++ b/web/index.html @@ -43,6 +43,32 @@ height: calc(100% + env(safe-area-inset-top)); } + /* Color theming */ + :root { + --text: black; + --background: white; + --backgroundLight: #F3F3F8; + } + html.colorMode--dark { + --text: white; + --background: black; + --backgroundLight: #26272D; + } + @media (prefers-color-scheme: light) { + html.colorMode--system { + --text: black; + --background: white; + --backgroundLight: #F3F3F8; + } + } + @media (prefers-color-scheme: dark) { + html.colorMode--system { + --text: white; + --background: black; + --backgroundLight: #26272D; + } + } + body { display: flex; /* Allows you to scroll below the viewport; default value is visible */ @@ -53,12 +79,6 @@ -moz-osx-font-smoothing: grayscale; -ms-overflow-style: scrollbar; } - /* Enable for apps that support dark-theme */ - /*@media (prefers-color-scheme: dark) { - body { - background-color: black; - } - }*/ /* Remove default link styling */ a { @@ -113,6 +133,44 @@ .tippy-content .items { width: fit-content; } + + /* Tooltips */ + [data-tooltip] { + position: relative; + z-index: 10; + } + [data-tooltip]::after { + content: attr(data-tooltip); + display: none; + position: absolute; + bottom: 0; + left: 50%; + transform: translateY(100%) translateY(8px) translateX(-50%); + padding: 4px 10px; + border-radius: 10px; + background: var(--backgroundLight); + color: var(--text); + text-align: center; + white-space: nowrap; + font-size: 12px; + z-index: 10; + } + [data-tooltip]::before { + content: ''; + display: none; + position: absolute; + border-bottom: 6px solid var(--backgroundLight); + border-left: 6px solid transparent; + border-right: 6px solid transparent; + bottom: 0; + left: 50%; + transform: translateY(100%) translateY(2px) translateX(-50%); + z-index: 10; + } + [data-tooltip]:hover::after, + [data-tooltip]:hover::before { + display:block; + } </style> </head> |