mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-04 14:30:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

move floating expand button to code block header

Browse source
This commit is contained in:
Ajay Bura 2025-07-27 12:15:44 +05:30
parent 1807908f02
commit 739829331b
2 changed files with 22 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/app/plugins/react-custom-html-parser.tsx
View file

@ -16,7 +16,7 @@ import {
} from 'html-react-parser'; } from 'html-react-parser';
import { MatrixClient } from 'matrix-js-sdk'; import { MatrixClient } from 'matrix-js-sdk';
import classNames from 'classnames'; import classNames from 'classnames';
import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds'; import { Box, Chip, config, Header, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds';
import { IntermediateRepresentation, Opts as LinkifyOpts, OptFn } from 'linkifyjs'; import { IntermediateRepresentation, Opts as LinkifyOpts, OptFn } from 'linkifyjs';
import Linkify from 'linkify-react'; import Linkify from 'linkify-react';
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
@ -265,21 +265,34 @@ export function CodeBlock({
{language ?? 'Code'} {language ?? 'Code'}
</Text> </Text>
</Box> </Box>
<Box shrink="No"> <Box shrink="No" gap="200">
<Chip <Chip
variant="Surface" variant={copied ? 'Success' : 'Surface'}
radii="300" fill="None"
radii="Pill"
onClick={handleCopy} onClick={handleCopy}
before={copied && <Icon size="50" src={Icons.Check} />} before={copied && <Icon size="50" src={Icons.Check} />}
> >
<Text size="B300">{copied ? 'Copied' : 'Copy'}</Text> <Text size="B300">{copied ? 'Copied' : 'Copy'}</Text>
</Chip> </Chip>
{largeCodeBlock && (
<IconButton
size="300"
variant="SurfaceVariant"
outlined
radii="300"
onClick={toggleExpand}
aria-label={expanded ? 'Collapse' : 'Expand'}
>
<Icon size="50" src={expanded ? Icons.ChevronTop : Icons.ChevronBottom} />
</IconButton>
)}
</Box> </Box>
</Header> </Header>
<Scroll <Scroll
style={{ style={{
maxHeight: largeCodeBlock && !expanded ? toRem(300) : undefined, maxHeight: largeCodeBlock && !expanded ? toRem(300) : undefined,
paddingBottom: largeCodeBlock ? toRem(48) : undefined, paddingBottom: largeCodeBlock ? config.space.S400 : undefined,
}} }}
direction="Both" direction="Both"
variant="SurfaceVariant" variant="SurfaceVariant"
@ -291,20 +304,7 @@ export function CodeBlock({
{domToReact(children, opts)} {domToReact(children, opts)}
</div> </div>
</Scroll> </Scroll>
{largeCodeBlock && ( {largeCodeBlock && !expanded && <Box className={css.CodeBlockBottomShadow} />}
<Box className={css.CodeBlockBottomBar} justifyContent="End">
<IconButton
style={{ pointerEvents: 'all' }}
variant="Secondary"
radii="300"
outlined
onClick={toggleExpand}
aria-label={expanded ? 'Collapse' : 'Expand'}
>
<Icon size="50" src={expanded ? Icons.ChevronTop : Icons.ChevronBottom} />
</IconButton>
</Box>
)}
</Text> </Text>
); );
} }

5
src/app/styles/CustomHtml.css.ts
View file

@ -95,6 +95,7 @@ export const CodeBlock = style([
export const CodeBlockHeader = style({ export const CodeBlockHeader = style({
padding: `0 ${config.space.S200} 0 ${config.space.S300}`, padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
borderBottomWidth: config.borderWidth.B300, borderBottomWidth: config.borderWidth.B300,
gap: config.space.S200,
}); });
export const CodeBlockInternal = style([ export const CodeBlockInternal = style([
CodeFont, CodeFont,
@ -104,14 +105,14 @@ export const CodeBlockInternal = style([
}, },
]); ]);
export const CodeBlockBottomBar = style({ export const CodeBlockBottomShadow = style({
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,
left: 0, left: 0,
right: 0, right: 0,
pointerEvents: 'none', pointerEvents: 'none',
padding: config.space.S200, height: config.space.S400,
background: `linear-gradient(to top, #00000022, #00000000)`, background: `linear-gradient(to top, #00000022, #00000000)`,
}); });