Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings
This repository was archived by the owner on May 4, 2023. It is now read-only.

Commit 17cbeb2

Browse filesBrowse files
dastrong-codigadastrong-codiga
committed
fix: scrollable code
1 parent fff7ba9 commit 17cbeb2
Copy full SHA for 17cbeb2

File tree

1 file changed

+144
-156
lines changed
Filter options

1 file changed

+144
-156
lines changed

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

Copy file name to clipboardExpand all lines: src/renderer/components/Code/Code.tsx
+144-156Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.