this repo has no description
Experiment: new reply/thread "badges"
Also totally forced one-lined the name text + date at the top of a status
+75
-12
+5
-2
src/components/icon.jsx
+5
-2
src/components/icon.jsx
···
42
42
popin: ['mingcute:external-link-line', '180deg'],
43
43
plus: 'mingcute:add-circle-line',
44
44
'chevron-left': 'mingcute:left-line',
45
+
reply: ['mingcute:share-forward-line', '180deg', 'horizontal'],
46
+
thread: 'mingcute:route-line',
45
47
};
46
48
47
49
function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
···
49
51
50
52
const iconSize = SIZES[size];
51
53
let iconName = ICONS[icon];
52
-
let rotate;
54
+
let rotate, flip;
53
55
if (Array.isArray(iconName)) {
54
-
[iconName, rotate] = iconName;
56
+
[iconName, rotate, flip] = iconName;
55
57
}
56
58
return (
57
59
<div
···
70
72
height={iconSize}
71
73
icon={iconName}
72
74
rotate={rotate}
75
+
flip={flip}
73
76
>
74
77
{alt}
75
78
</iconify-icon>
+39
src/components/status.css
+39
src/components/status.css
···
104
104
display: flex;
105
105
gap: 8px;
106
106
justify-content: space-between;
107
+
white-space: nowrap;
108
+
}
109
+
.status > .container > .meta > * {
110
+
min-width: 0;
111
+
overflow: hidden;
112
+
text-overflow: ellipsis;
107
113
}
108
114
.status.large > .container > .meta {
109
115
min-height: 50px;
···
127
133
.status > .container > .meta .reply-to {
128
134
opacity: 0.5;
129
135
font-size: smaller;
136
+
}
137
+
138
+
.status-reply-badge {
139
+
display: inline-flex;
140
+
margin-left: 4px;
141
+
gap: 4px;
142
+
align-items: center;
143
+
}
144
+
.status-reply-badge .icon {
145
+
color: var(--reply-to-color);
146
+
}
147
+
.status-thread-badge {
148
+
display: inline-flex;
149
+
margin: 8px 0 0 0;
150
+
gap: 4px;
151
+
align-items: center;
152
+
color: var(--reply-to-color);
153
+
background: var(--bg-color);
154
+
border: 1px solid var(--reply-to-color);
155
+
border-radius: 4px;
156
+
padding: 4px;
157
+
font-size: 10px;
158
+
line-height: 1;
159
+
text-transform: uppercase;
160
+
opacity: 0.75;
161
+
background-image: repeating-linear-gradient(
162
+
-70deg,
163
+
transparent,
164
+
transparent 3px,
165
+
var(--reply-to-faded-color) 3px,
166
+
var(--reply-to-faded-color) 4px
167
+
);
168
+
font-weight: bold;
130
169
}
131
170
132
171
.status.large .content-container {
+28
-9
src/components/status.jsx
+28
-9
src/components/status.jsx
···
220
220
)}
221
221
<div class="container">
222
222
<div class="meta">
223
-
<span>
224
-
<NameText
225
-
account={status.account}
226
-
showAvatar={size === 's'}
227
-
showAcct={size === 'l'}
228
-
/>
229
-
{inReplyToAccount && !withinContext && size !== 's' && (
223
+
{/* <span> */}
224
+
<NameText
225
+
account={status.account}
226
+
showAvatar={size === 's'}
227
+
showAcct={size === 'l'}
228
+
/>
229
+
{/* {inReplyToAccount && !withinContext && size !== 's' && (
230
230
<>
231
231
{' '}
232
232
<span class="ib">
···
234
234
<NameText account={inReplyToAccount} short />
235
235
</span>
236
236
</>
237
-
)}
238
-
</span>{' '}
237
+
)} */}
238
+
{/* </span> */}{' '}
239
239
{size !== 'l' &&
240
240
(uri ? (
241
241
<a href={uri} target="_blank" class="time">
···
271
271
</span>
272
272
))}
273
273
</div>
274
+
{inReplyToAccount && !withinContext && size !== 's' && (
275
+
<div
276
+
class={`status-${
277
+
inReplyToAccountId === status.account.id ? 'thread' : 'reply'
278
+
}-badge`}
279
+
>
280
+
{inReplyToAccountId === status.account.id ? (
281
+
<>
282
+
<Icon icon="thread" size="s" />
283
+
Thread
284
+
</>
285
+
) : (
286
+
<>
287
+
<Icon icon="reply" />{' '}
288
+
<NameText account={inReplyToAccount} short />
289
+
</>
290
+
)}
291
+
</div>
292
+
)}
274
293
<div
275
294
class={`content-container ${
276
295
sensitive || spoilerText ? 'has-spoiler' : ''
+2
-1
src/index.css
+2
-1
src/index.css
···
2
2
--blue-color: royalblue;
3
3
--purple-color: blueviolet;
4
4
--green-color: green;
5
-
--orange-color: orange;
5
+
--orange-color: darkorange;
6
6
--red-color: orangered;
7
7
--bg-color: #fff;
8
8
--bg-faded-color: #f0f2f5;
···
39
39
--blue-color: CornflowerBlue;
40
40
--purple-color: mediumpurple;
41
41
--green-color: limegreen;
42
+
--orange-color: orange;
42
43
--bg-color: #242526;
43
44
--bg-faded-color: #18191a;
44
45
--bg-blur-color: #0009;