Lotus CIandClaude Opus 5.5
f920fd82fb
CI / Build & Quality Checks (pull_request) Successful in 2m57s
CI / Trigger Desktop Build (pull_request) Skipped
CI / Docker image build & smoke test (pull_request) Skipped
CI / Secret scan (gitleaks) (pull_request) Successful in 8s
CI / Playwright smoke (e2e) (pull_request) Successful in 18m1s
Long-press opens the message action sheet (#166), but on iOS the system takes a long-press for itself: the link/image callout or the text-selection loupe races the 450 ms press. Message rows on touch screens now carry data-touch-actions (no -webkit-touch-callout), and the pressed row carries data-pressing from touch-down until the finger lifts, which turns text selection off for that moment only. Copy Text stays in the sheet. Refs #199 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5
91 lines
2.2 KiB
TypeScript
91 lines
2.2 KiB
TypeScript
import { globalStyle, style } from '@vanilla-extract/css';
|
|
import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
|
|
|
|
export const MessageBase = style({
|
|
position: 'relative',
|
|
});
|
|
export const MessageBaseBubbleCollapsed = style({
|
|
paddingTop: 0,
|
|
});
|
|
|
|
export const MessageOptionsBase = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
top: toRem(-30),
|
|
right: 0,
|
|
zIndex: 1,
|
|
},
|
|
]);
|
|
export const MessageOptionsBar = style([
|
|
DefaultReset,
|
|
{
|
|
padding: config.space.S100,
|
|
},
|
|
]);
|
|
|
|
export const BubbleAvatarBase = style({
|
|
paddingTop: 0,
|
|
});
|
|
|
|
export const MessageAvatar = style({
|
|
cursor: 'pointer',
|
|
});
|
|
|
|
export const MessageQuickReaction = style({
|
|
minWidth: toRem(32),
|
|
});
|
|
|
|
export const MessageMenuGroup = style({
|
|
padding: config.space.S100,
|
|
});
|
|
|
|
export const MessageMenuItemText = style({
|
|
flexGrow: 1,
|
|
});
|
|
|
|
export const ReactionsContainer = style({
|
|
position: 'relative',
|
|
selectors: {
|
|
'&:empty': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
});
|
|
|
|
/** [Gitea #138] "+N" / "less" chip at the end of a collapsed reaction row. */
|
|
export const ReactionsMore = style([
|
|
FocusOutline,
|
|
{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
flexShrink: 0,
|
|
padding: `${toRem(2)} ${config.space.S200}`,
|
|
color: color.SurfaceVariant.OnContainer,
|
|
backgroundColor: 'transparent',
|
|
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
|
|
borderRadius: config.radii.R300,
|
|
cursor: 'pointer',
|
|
selectors: {
|
|
'&:hover, &:focus-visible': {
|
|
backgroundColor: color.SurfaceVariant.ContainerHover,
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const ReactionsTooltipText = style({
|
|
wordBreak: 'break-word',
|
|
});
|
|
|
|
// [Gitea #199] Long-press opens the message action sheet on touch screens. On
|
|
// iOS a long-press otherwise belongs to the system: a link/image callout, or
|
|
// the text-selection loupe, both of which race (and win against) the 450 ms
|
|
// press. No callout on message rows, and no selection while a finger is
|
|
// down; copying text is in the sheet.
|
|
globalStyle('[data-touch-actions]', { WebkitTouchCallout: 'none' });
|
|
globalStyle('[data-touch-actions][data-pressing], [data-touch-actions][data-pressing] *', {
|
|
userSelect: 'none',
|
|
WebkitUserSelect: 'none',
|
|
});
|