forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
authored by
Eric Bailey
and committed by
GitHub
548ec6c8
16b265a8
+166
-22
+1
.eslintrc.js
+1
.eslintrc.js
+64
-6
bskyweb/templates/base.html
+64
-6
bskyweb/templates/base.html
···
39
39
height: calc(100% + env(safe-area-inset-top));
40
40
}
41
41
42
+
/* Color theming */
43
+
:root {
44
+
--text: black;
45
+
--background: white;
46
+
--backgroundLight: #F3F3F8;
47
+
}
48
+
html.colorMode--dark {
49
+
--text: white;
50
+
--background: black;
51
+
--backgroundLight: #26272D;
52
+
}
53
+
@media (prefers-color-scheme: light) {
54
+
html.colorMode--system {
55
+
--text: black;
56
+
--background: white;
57
+
--backgroundLight: #F3F3F8;
58
+
}
59
+
}
60
+
@media (prefers-color-scheme: dark) {
61
+
html.colorMode--system {
62
+
--text: white;
63
+
--background: black;
64
+
--backgroundLight: #26272D;
65
+
}
66
+
}
67
+
42
68
body {
43
69
display: flex;
44
70
/* Allows you to scroll below the viewport; default value is visible */
···
49
75
-moz-osx-font-smoothing: grayscale;
50
76
-ms-overflow-style: scrollbar;
51
77
}
52
-
/* Enable for apps that support dark-theme */
53
-
/*@media (prefers-color-scheme: dark) {
54
-
body {
55
-
background-color: black;
56
-
}
57
-
}*/
58
78
59
79
/* Remove default link styling */
60
80
a {
···
108
128
}
109
129
.tippy-content .items {
110
130
width: fit-content;
131
+
}
132
+
133
+
/* Tooltips */
134
+
[data-tooltip] {
135
+
position: relative;
136
+
z-index: 10;
137
+
}
138
+
[data-tooltip]::after {
139
+
content: attr(data-tooltip);
140
+
display: none;
141
+
position: absolute;
142
+
bottom: 0;
143
+
left: 50%;
144
+
transform: translateY(100%) translateY(8px) translateX(-50%);
145
+
padding: 4px 10px;
146
+
border-radius: 10px;
147
+
background: var(--backgroundLight);
148
+
color: var(--text);
149
+
text-align: center;
150
+
white-space: nowrap;
151
+
font-size: 12px;
152
+
z-index: 10;
153
+
}
154
+
[data-tooltip]::before {
155
+
content: '';
156
+
display: none;
157
+
position: absolute;
158
+
border-bottom: 6px solid var(--backgroundLight);
159
+
border-left: 6px solid transparent;
160
+
border-right: 6px solid transparent;
161
+
bottom: 0;
162
+
left: 50%;
163
+
transform: translateY(100%) translateY(2px) translateX(-50%);
164
+
z-index: 10;
165
+
}
166
+
[data-tooltip]:hover::after,
167
+
[data-tooltip]:hover::before {
168
+
display:block;
111
169
}
112
170
</style>
113
171
{% include "scripts.html" %}
+8
-1
src/state/models/ui/shell.ts
+8
-1
src/state/models/ui/shell.ts
···
267
267
hydrate(v: unknown) {
268
268
if (isObj(v)) {
269
269
if (hasProp(v, 'colorMode') && isColorMode(v.colorMode)) {
270
-
this.colorMode = v.colorMode
270
+
this.setColorMode(v.colorMode)
271
271
}
272
272
}
273
273
}
274
274
275
275
setColorMode(mode: ColorMode) {
276
276
this.colorMode = mode
277
+
278
+
if (typeof window !== 'undefined') {
279
+
const html = window.document.documentElement
280
+
// remove any other color mode classes
281
+
html.className = html.className.replace(/colorMode--\w+/g, '')
282
+
html.classList.add(`colorMode--${mode}`)
283
+
}
277
284
}
278
285
279
286
setMinimalShellMode(v: boolean) {
+12
-7
src/view/com/post-thread/PostThreadItem.tsx
+12
-7
src/view/com/post-thread/PostThreadItem.tsx
···
193
193
/>
194
194
</View>
195
195
<View style={styles.layoutContent}>
196
-
<View style={[styles.meta, styles.metaExpandedLine1]}>
196
+
<View
197
+
style={[styles.meta, styles.metaExpandedLine1, {zIndex: 1}]}>
197
198
<View style={[s.flexRow]}>
198
199
<Link
199
200
style={styles.metaItem}
···
210
211
)}
211
212
</Text>
212
213
</Link>
213
-
<Text type="md" style={[styles.metaItem, pal.textLight]}>
214
-
·
215
-
<TimeElapsed timestamp={item.post.indexedAt}>
216
-
{({timeElapsed}) => <>{timeElapsed}</>}
217
-
</TimeElapsed>
218
-
</Text>
214
+
<TimeElapsed timestamp={item.post.indexedAt}>
215
+
{({timeElapsed}) => (
216
+
<Text
217
+
type="md"
218
+
style={[styles.metaItem, pal.textLight]}
219
+
title={niceDate(item.post.indexedAt)}>
220
+
· {timeElapsed}
221
+
</Text>
222
+
)}
223
+
</TimeElapsed>
219
224
</View>
220
225
</View>
221
226
<View style={styles.meta}>
+6
-1
src/view/com/util/Link.tsx
+6
-1
src/view/com/util/Link.tsx
···
135
135
numberOfLines,
136
136
lineHeight,
137
137
dataSet,
138
+
title,
138
139
}: {
139
140
testID?: string
140
141
type?: TypographyVariant
···
144
145
numberOfLines?: number
145
146
lineHeight?: number
146
147
dataSet?: any
148
+
title?: string
147
149
} & TextProps) {
148
150
const {...props} = useLinkProps({to: sanitizeUrl(href)})
149
151
const store = useStores()
···
173
175
style={style}
174
176
numberOfLines={numberOfLines}
175
177
lineHeight={lineHeight}
176
-
// @ts-ignore web only -prf
177
178
dataSet={dataSet}
179
+
title={title}
178
180
// @ts-ignore web only -prf
179
181
hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
180
182
{...props}>
···
197
199
accessible?: boolean
198
200
accessibilityLabel?: string
199
201
accessibilityHint?: string
202
+
title?: string
200
203
}
201
204
export const DesktopWebTextLink = observer(function DesktopWebTextLink({
202
205
testID,
···
218
221
text={text}
219
222
numberOfLines={numberOfLines}
220
223
lineHeight={lineHeight}
224
+
title={props.title}
221
225
{...props}
222
226
/>
223
227
)
···
229
233
style={style}
230
234
numberOfLines={numberOfLines}
231
235
lineHeight={lineHeight}
236
+
title={props.title}
232
237
{...props}>
233
238
{text}
234
239
</Text>
+2
src/view/com/util/PostMeta.tsx
+2
src/view/com/util/PostMeta.tsx
···
79
79
lineHeight={1.2}
80
80
text={timeElapsed}
81
81
accessibilityLabel={niceDate(opts.timestamp)}
82
+
title={niceDate(opts.timestamp)}
82
83
accessibilityHint=""
83
84
href={opts.postHref}
84
85
/>
···
94
95
alignItems: isAndroid ? 'center' : 'baseline',
95
96
paddingBottom: 2,
96
97
gap: 4,
98
+
zIndex: 1,
97
99
},
98
100
avatar: {
99
101
alignSelf: 'center',
+9
-1
src/view/com/util/text/Text.tsx
+9
-1
src/view/com/util/text/Text.tsx
···
6
6
export type CustomTextProps = TextProps & {
7
7
type?: TypographyVariant
8
8
lineHeight?: number
9
+
title?: string
10
+
dataSet?: Record<string, string | number>
9
11
}
10
12
11
13
export function Text({
···
13
15
children,
14
16
lineHeight,
15
17
style,
18
+
title,
19
+
dataSet,
16
20
...props
17
21
}: React.PropsWithChildren<CustomTextProps>) {
18
22
const theme = useTheme()
19
23
const typography = theme.typography[type]
20
24
const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
21
25
return (
22
-
<RNText style={[s.black, typography, lineHeightStyle, style]} {...props}>
26
+
<RNText
27
+
style={[s.black, typography, lineHeightStyle, style]}
28
+
// @ts-ignore web only -esb
29
+
dataSet={Object.assign({tooltip: title}, dataSet || {})}
30
+
{...props}>
23
31
{children}
24
32
</RNText>
25
33
)
+64
-6
web/index.html
+64
-6
web/index.html
···
43
43
height: calc(100% + env(safe-area-inset-top));
44
44
}
45
45
46
+
/* Color theming */
47
+
:root {
48
+
--text: black;
49
+
--background: white;
50
+
--backgroundLight: #F3F3F8;
51
+
}
52
+
html.colorMode--dark {
53
+
--text: white;
54
+
--background: black;
55
+
--backgroundLight: #26272D;
56
+
}
57
+
@media (prefers-color-scheme: light) {
58
+
html.colorMode--system {
59
+
--text: black;
60
+
--background: white;
61
+
--backgroundLight: #F3F3F8;
62
+
}
63
+
}
64
+
@media (prefers-color-scheme: dark) {
65
+
html.colorMode--system {
66
+
--text: white;
67
+
--background: black;
68
+
--backgroundLight: #26272D;
69
+
}
70
+
}
71
+
46
72
body {
47
73
display: flex;
48
74
/* Allows you to scroll below the viewport; default value is visible */
···
53
79
-moz-osx-font-smoothing: grayscale;
54
80
-ms-overflow-style: scrollbar;
55
81
}
56
-
/* Enable for apps that support dark-theme */
57
-
/*@media (prefers-color-scheme: dark) {
58
-
body {
59
-
background-color: black;
60
-
}
61
-
}*/
62
82
63
83
/* Remove default link styling */
64
84
a {
···
112
132
}
113
133
.tippy-content .items {
114
134
width: fit-content;
135
+
}
136
+
137
+
/* Tooltips */
138
+
[data-tooltip] {
139
+
position: relative;
140
+
z-index: 10;
141
+
}
142
+
[data-tooltip]::after {
143
+
content: attr(data-tooltip);
144
+
display: none;
145
+
position: absolute;
146
+
bottom: 0;
147
+
left: 50%;
148
+
transform: translateY(100%) translateY(8px) translateX(-50%);
149
+
padding: 4px 10px;
150
+
border-radius: 10px;
151
+
background: var(--backgroundLight);
152
+
color: var(--text);
153
+
text-align: center;
154
+
white-space: nowrap;
155
+
font-size: 12px;
156
+
z-index: 10;
157
+
}
158
+
[data-tooltip]::before {
159
+
content: '';
160
+
display: none;
161
+
position: absolute;
162
+
border-bottom: 6px solid var(--backgroundLight);
163
+
border-left: 6px solid transparent;
164
+
border-right: 6px solid transparent;
165
+
bottom: 0;
166
+
left: 50%;
167
+
transform: translateY(100%) translateY(2px) translateX(-50%);
168
+
z-index: 10;
169
+
}
170
+
[data-tooltip]:hover::after,
171
+
[data-tooltip]:hover::before {
172
+
display:block;
115
173
}
116
174
</style>
117
175
</head>