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

@@ -16,6 +16,7 @@ module.exports = {
     '*.lock',
     '.husky',
     'patches',
+    '*.html',
   ],
   overrides: [
     {

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">

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) {

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}>
-                    &middot;&nbsp;
+                    {({timeElapsed}) => (
-                    <TimeElapsed timestamp={item.post.indexedAt}>
+                      <Text
-                      {({timeElapsed}) => <>{timeElapsed}</>}
+                        type="md"
-                    </TimeElapsed>
+                        style={[styles.metaItem, pal.textLight]}
-                  </Text>
+                        title={niceDate(item.post.indexedAt)}>
+                        &middot;&nbsp;{timeElapsed}
+                      </Text>
+                    )}
+                  </TimeElapsed>
                 </View>
               </View>
               <View style={styles.meta}>

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>

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',

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>
   )

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>