Skip to content
This repository was archived by the owner on May 4, 2023. It is now read-only.

Commit 17cbeb2

Browse files
dastrong-codigadastrong-codiga
committed
fix: scrollable code
1 parent fff7ba9 commit 17cbeb2

File tree

1 file changed

+144
-156
lines changed

1 file changed

+144
-156
lines changed

‎src/renderer/components/Code/Code.tsx

Lines changed: 144 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
Tooltip,
1010
Text,
1111
Link,
12-
Box,
1312
Menu,
1413
MenuButton,
1514
Portal,
@@ -67,169 +66,158 @@ export default function Code({ recipe }: CodeProps) {
6766
const minWidth = lineMaxDigits < 3 ? '2.7em' : `${lineMaxDigits}.25em`;
6867

6968
return (
70-
<Flex
71-
position="relative"
72-
flex={1}
73-
h="full"
74-
w="full"
75-
overflowX="auto"
76-
overflowY="scroll"
77-
>
78-
<Box
79-
position="absolute"
80-
top="0"
81-
left="0"
82-
minHeight="full"
83-
minWidth="full"
84-
h="full"
85-
w="full"
69+
<Flex position="relative" flex={1} h="full" w="full" overflow="hidden">
70+
<Flex
71+
pos="absolute"
72+
alignItems="center"
73+
gridGap="space_8"
74+
top="space_8"
75+
right="space_24"
76+
zIndex="docked"
8677
>
87-
<LinkBox
88-
as="article"
89-
w="full"
90-
minH="full"
91-
overflow="hidden"
92-
borderWidth="1px"
93-
borderStyle="solid"
94-
borderColor="neutral.50"
95-
_dark={{
96-
borderColor: 'base.onyx',
78+
<CodeViewToggler
79+
inputProps={{
80+
value: codeView,
81+
onChange: (value) => setCodeView(value as CodeViewsType),
9782
}}
98-
>
99-
<CodigaCode
100-
border={0}
101-
borderRadius={0}
102-
pt="space_48"
103-
pos="relative"
104-
sx={{
105-
'code[class*="language-"] > span:first-child > .linenumber:first-child':
106-
{
107-
paddingTop: '0.5em !important',
108-
},
109-
'code[class*="language-"] .linenumber': {
110-
border: '0 !important',
111-
background: 'transparent !important',
112-
fontStyle: 'normal !important',
113-
},
114-
}}
115-
>
116-
<Flex
117-
pos="absolute"
118-
alignItems="center"
119-
gridGap="space_8"
120-
top="space_8"
121-
right="space_8"
122-
zIndex="docked"
123-
>
124-
<CodeViewToggler
125-
inputProps={{
126-
value: codeView,
127-
onChange: (value) => setCodeView(value as CodeViewsType),
128-
}}
129-
/>
83+
/>
84+
85+
<Tooltip label="Copy Snippet">
86+
<IconButton
87+
variant="ghost"
88+
h="32px"
89+
minW="32px"
90+
p="space_8"
91+
icon={<CopyIcon />}
92+
onClick={onCopy}
93+
aria-label="Copy Snippet"
94+
/>
95+
</Tooltip>
13096

131-
<Tooltip label="Copy Snippet">
132-
<IconButton
133-
variant="ghost"
134-
h="32px"
135-
minW="32px"
136-
p="space_8"
137-
icon={<CopyIcon />}
138-
onClick={onCopy}
139-
aria-label="Copy Snippet"
140-
/>
141-
</Tooltip>
97+
<Tooltip label="Comment on Snippet">
98+
<IconButton
99+
as={Link}
100+
isExternal
101+
href={`${APP_URL}/assistant/snippet/${recipe.id}/view`}
102+
variant="ghost"
103+
h="32px"
104+
minW="32px"
105+
p="space_8"
106+
_hover={{ textDecor: 'none' }}
107+
icon={
108+
<Flex gridGap="space_4" alignItems="center">
109+
<BubbleIcon />
110+
<Text as="span" size="xs" lineHeight="16px">
111+
{commentsCount}
112+
</Text>
113+
</Flex>
114+
}
115+
aria-label="Comment on Snippet"
116+
/>
117+
</Tooltip>
142118

143-
<Tooltip label="Comment on Snippet">
144-
<IconButton
119+
{userId && recipe.owner && userId === recipe.owner.id && (
120+
<Menu size="sm">
121+
<MenuButton
122+
as={IconButton}
123+
variant="ghost"
124+
h="32px"
125+
minW="32px"
126+
p="space_8"
127+
fontSize="xx-small"
128+
letterSpacing="2px"
129+
>
130+
•••
131+
</MenuButton>
132+
<Portal>
133+
<MenuList
134+
zIndex="tooltip"
135+
boxShadow="base"
136+
py={0}
137+
overflow="hidden"
138+
minW="175px"
139+
>
140+
<MenuItem
145141
as={Link}
146142
isExternal
147-
href={`${APP_URL}/assistant/snippet/${recipe.id}/view`}
148-
variant="ghost"
149-
h="32px"
150-
minW="32px"
151-
p="space_8"
152-
_hover={{ textDecor: 'none' }}
153-
icon={
154-
<Flex gridGap="space_4" alignItems="center">
155-
<BubbleIcon />
156-
<Text as="span" size="xs" lineHeight="16px">
157-
{commentsCount}
158-
</Text>
159-
</Flex>
160-
}
161-
aria-label="Comment on Snippet"
162-
/>
163-
</Tooltip>
164-
165-
{userId && recipe.owner && userId === recipe.owner.id && (
166-
<Menu size="sm">
167-
<MenuButton
168-
as={IconButton}
169-
variant="ghost"
170-
h="32px"
171-
minW="32px"
172-
p="space_8"
173-
fontSize="xx-small"
174-
letterSpacing="2px"
143+
href={getSnippetUrl(recipe.id, 'edit')}
144+
_hover={{
145+
textDecor: 'none',
146+
color: '#fff !important',
147+
bg: 'base.rose',
148+
}}
149+
_focus={{ boxShadow: 'none' }}
150+
>
151+
<Text
152+
size="xs"
153+
d="flex"
154+
alignItems="center"
155+
gridGap="space_4"
156+
color="inherit !important"
175157
>
176-
•••
177-
</MenuButton>
178-
<Portal>
179-
<MenuList
180-
zIndex="tooltip"
181-
boxShadow="base"
182-
py={0}
183-
overflow="hidden"
184-
minW="175px"
185-
>
186-
<MenuItem
187-
as={Link}
188-
isExternal
189-
href={getSnippetUrl(recipe.id, 'edit')}
190-
_hover={{
191-
textDecor: 'none',
192-
color: '#fff !important',
193-
bg: 'base.rose',
194-
}}
195-
_focus={{ boxShadow: 'none' }}
196-
>
197-
<Text
198-
size="xs"
199-
d="flex"
200-
alignItems="center"
201-
gridGap="space_4"
202-
color="inherit !important"
203-
>
204-
<PencilIcon /> Edit Snippet
205-
</Text>
206-
</MenuItem>
207-
</MenuList>
208-
</Portal>
209-
</Menu>
210-
)}
211-
</Flex>
158+
<PencilIcon /> Edit Snippet
159+
</Text>
160+
</MenuItem>
161+
</MenuList>
162+
</Portal>
163+
</Menu>
164+
)}
165+
</Flex>
212166

213-
<CodeContent
214-
customStyle={{
215-
background: bg,
216-
overflowX: 'auto',
217-
}}
218-
codeTagProps={{
219-
style: {
220-
display: 'block',
221-
height: '100%',
222-
fontSize: '14px',
223-
},
224-
}}
225-
lineNumberStyle={{ minWidth }}
226-
language={recipe.language?.toLocaleLowerCase()}
227-
>
228-
{code}
229-
</CodeContent>
230-
</CodigaCode>
231-
</LinkBox>
232-
</Box>
167+
<LinkBox
168+
as="article"
169+
minH="full"
170+
minW="full"
171+
overflow="scroll"
172+
borderWidth="1px"
173+
borderStyle="solid"
174+
borderColor="neutral.50"
175+
_dark={{
176+
borderColor: 'base.onyx',
177+
}}
178+
>
179+
<CodigaCode
180+
border={0}
181+
borderRadius={0}
182+
pt="space_48"
183+
h="full"
184+
w="full"
185+
sx={{
186+
'code[class*="language-"] > span:first-child > .linenumber:first-child':
187+
{
188+
paddingTop: '0.5em !important',
189+
},
190+
'code[class*="language-"] .linenumber': {
191+
border: '0 !important',
192+
background: 'transparent !important',
193+
fontStyle: 'normal !important',
194+
},
195+
}}
196+
>
197+
<CodeContent
198+
customStyle={{
199+
background: bg,
200+
h: 'full',
201+
w: 'full',
202+
position: 'absolute',
203+
top: 0,
204+
left: 0,
205+
paddingTop: '48px',
206+
}}
207+
codeTagProps={{
208+
style: {
209+
display: 'block',
210+
height: '100%',
211+
fontSize: '14px',
212+
},
213+
}}
214+
lineNumberStyle={{ minWidth }}
215+
language={recipe.language?.toLocaleLowerCase()}
216+
>
217+
{code}
218+
</CodeContent>
219+
</CodigaCode>
220+
</LinkBox>
233221
</Flex>
234222
);
235223
}

0 commit comments

Comments
 (0)