From 548ec6c82d114f96c431a4e0f162e8360bfd22f4 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 22 Aug 2023 13:04:17 -0500 Subject: [PATCH] add title attr to text text links (#1228) * add title attr to text text links * Revert "add title attr to text text links" This reverts commit c028cd184efd3b2788d8f46134eecf521e5d7b07. * use css tooltips * add to expanded post state * handle theming * add to bskyweb --- .eslintrc.js | 1 + bskyweb/templates/base.html | 70 +++++++++++++++++++-- src/state/models/ui/shell.ts | 9 ++- src/view/com/post-thread/PostThreadItem.tsx | 19 +++--- src/view/com/util/Link.tsx | 7 ++- src/view/com/util/PostMeta.tsx | 2 + src/view/com/util/text/Text.tsx | 10 ++- web/index.html | 70 +++++++++++++++++++-- 8 files changed, 166 insertions(+), 22 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3de954e4..c5b7e861 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 b5ed329c..5a671d6a 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; + } {% include "scripts.html" %} diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts index d1ea4ddf..0c0bb01d 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 e44151ac..088be6a9 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({ /> - + - - ·  - - {({timeElapsed}) => <>{timeElapsed}} - - + + {({timeElapsed}) => ( + + · {timeElapsed} + + )} + diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index e428960f..fd886fda 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} diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index bf21ff0d..b0ad0175 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 2825390c..ea97d59f 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 } export function Text({ @@ -13,13 +15,19 @@ export function Text({ children, lineHeight, style, + title, + dataSet, ...props }: React.PropsWithChildren) { const theme = useTheme() const typography = theme.typography[type] const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined return ( - + {children} ) diff --git a/web/index.html b/web/index.html index 1bfa8f68..603e3954 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; + }