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
2023-08-22 13:04:17 -05:00 · 2023-08-22 13:04:17 -05:00 · 548ec6c82d
parent 16b265a861
commit 548ec6c82d
8 changed files with 166 additions and 22 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -16,6 +16,7 @@ module.exports = {
    '*.lock',
    '.husky',
    'patches',
+    '*.html',
  ],
  overrides: [
    {
--- 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">
--- 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) {
--- 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]}>
-                    &middot;&nbsp;
-                    <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)}>
+                        &middot;&nbsp;{timeElapsed}
+                      </Text>
+                    )}
+                  </TimeElapsed>
                </View>
              </View>
              <View style={styles.meta}>
--- 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>
--- 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',
--- 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>
  )
--- 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>