Skip to content

Commit 51edcfd

Browse files
americano98americano98
committed
feat(styles): update summary page
1 parent afe9135 commit 51edcfd

File tree

8 files changed

+97
-47
lines changed

8 files changed

+97
-47
lines changed

‎packages/ui/locales/en/views.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,16 @@
116116
"general": "General",
117117
"codeAutomation": "Code and automation",
118118
"webhooks": "Webhooks",
119-
"clone": "Clone",
120119
"cloneRepo": "Clone repository",
121120
"cloneHttps": "HTTPS",
122121
"cloneSsh": "SSH",
122+
"gitCloneUrl": "Git clone URL",
123123
"generateCredential": "Please generate a clone credential if its your first time.",
124-
"addFile": "Add file",
125124
"readme": "README.md",
126-
"openPullReq": "Open pull requests"
125+
"editReadme": "Edit README.md",
126+
"openPullReq": "Open pull requests",
127+
"clone": "Clone",
128+
"addFile": "Add file"
127129
},
128130
"createProject": {
129131
"newProject": "Create your new project",

‎packages/ui/locales/es/views.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,16 @@
116116
"general": "General",
117117
"codeAutomation": "Code and automation",
118118
"webhooks": "Webhooks",
119-
"clone": "Clone",
120119
"cloneRepo": "Clone repository",
121120
"cloneHttps": "HTTPS",
122121
"cloneSsh": "SSH",
122+
"gitCloneUrl": "Git clone URL",
123123
"generateCredential": "Please generate a clone credential if its your first time.",
124-
"addFile": "Add file",
125124
"readme": "README.md",
126-
"openPullReq": "Open pull requests"
125+
"editReadme": "Edit README.md",
126+
"openPullReq": "Open pull requests",
127+
"clone": "Clone",
128+
"addFile": "Add file"
127129
},
128130
"createProject": {
129131
"newProject": "Create your new project",
@@ -152,6 +154,7 @@
152154
"unified": "",
153155
"viewed": "",
154156
"deleted": "",
157+
"deletedComment": "",
155158
"commits": ""
156159
},
157160
"noData": {

‎packages/ui/locales/fr/views.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,16 @@
116116
"general": "Général",
117117
"codeAutomation": "Code et automatisation",
118118
"webhooks": "Webhooks",
119-
"clone": "Cloner",
120119
"cloneRepo": "Cloner le dépôt",
121120
"cloneHttps": "HTTPS",
122121
"cloneSsh": "SSH",
122+
"gitCloneUrl": "Git clone URL",
123123
"generateCredential": "Veuillez générer un identifiant de clonage si c'est votre première fois.",
124-
"addFile": "Ajouter un fichier",
125124
"readme": "README.md",
126-
"openPullReq": "Requêtes de tirage ouvertes"
125+
"editReadme": "Edit README.md",
126+
"openPullReq": "Requêtes de tirage ouvertes",
127+
"clone": "Cloner",
128+
"addFile": "Ajouter un fichier"
127129
},
128130
"createProject": {
129131
"newProject": "Créez votre nouveau projet",

‎packages/ui/src/components/copy-button.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, useEffect, useState } from 'react'
1+
import { FC, MouseEvent, useEffect, useState } from 'react'
22

33
import { Button, ButtonProps, Icon } from '@/components'
44
import copy from 'clipboard-copy'
@@ -8,11 +8,23 @@ export interface CopyButtonProps {
88
className?: string
99
buttonVariant?: ButtonProps['variant']
1010
iconSize?: number
11+
onClick?: (e: MouseEvent<HTMLButtonElement>) => void
1112
}
1213

13-
export const CopyButton: FC<CopyButtonProps> = ({ name, className, buttonVariant = 'custom', iconSize = 16 }) => {
14+
export const CopyButton: FC<CopyButtonProps> = ({
15+
name,
16+
className,
17+
buttonVariant = 'custom',
18+
iconSize = 16,
19+
onClick
20+
}) => {
1421
const [copied, setCopied] = useState(false)
1522

23+
const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
24+
onClick?.(e)
25+
setCopied(true)
26+
}
27+
1628
useEffect(() => {
1729
let timeoutId: number
1830

@@ -29,8 +41,8 @@ export const CopyButton: FC<CopyButtonProps> = ({ name, className, buttonVariant
2941
const changeIcon = copied ? 'tick' : 'clone'
3042

3143
return (
32-
<Button className={className} variant={buttonVariant} size="icon" aria-label="Copy" onClick={() => setCopied(true)}>
33-
<Icon name={changeIcon} size={iconSize} className="text-icons-3" />
44+
<Button className={className} variant={buttonVariant} size="icon" aria-label="Copy" onClick={handleClick}>
45+
<Icon className="text-icons-3" name={changeIcon} size={iconSize} />
3446
</Button>
3547
)
3648
}

‎packages/ui/src/components/dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
6464
{mainContent}
6565
</div>
6666
{footer}
67-
<DialogPrimitive.Close className="absolute right-4 top-[18px] disabled:pointer-events-none" asChild>
67+
<DialogPrimitive.Close className="absolute right-3 top-[18px] disabled:pointer-events-none" asChild>
6868
<Button size="icon" variant="custom" className="text-icons-4 hover:text-icons-2">
6969
<Icon name="close" size={16} />
7070
<span className="sr-only">Close</span>

‎packages/ui/src/views/repo/components/token-dialog/clone-credential-dialog.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { FC } from 'react'
12
import { useForm } from 'react-hook-form'
23
import { Link } from 'react-router-dom'
34

@@ -35,7 +36,7 @@ const formSchema = z.object({
3536

3637
export type TCloneCredentialsDialog = z.infer<typeof formSchema>
3738

38-
export const CloneCredentialDialog: React.FC<CloneCredentialDialogProps> = ({
39+
export const CloneCredentialDialog: FC<CloneCredentialDialogProps> = ({
3940
open,
4041
onClose,
4142
toManageToken,
@@ -49,36 +50,43 @@ export const CloneCredentialDialog: React.FC<CloneCredentialDialogProps> = ({
4950
})
5051
return (
5152
<Dialog open={open} onOpenChange={onClose}>
52-
<DialogContent className="max-w-[576px]">
53+
<DialogContent className="max-w-xl">
5354
<DialogHeader>
5455
<DialogTitle>{t('views:repos.cloneCredential', 'Generate Clone Credential')}</DialogTitle>
5556
</DialogHeader>
56-
<form className="flex flex-col gap-y-7 pb-4">
57+
<form className="flex flex-col gap-y-7">
5758
{/* NAME */}
5859

5960
<Input
61+
className="py-px"
6062
id="identifier"
6163
label={t('views:repos.name')}
6264
value={tokenData?.identifier}
6365
readOnly
6466
variant="extended"
6567
rightElementVariant="default"
66-
rightElement={<CopyButton name={tokenData?.identifier} />}
68+
rightElement={<CopyButton name={tokenData?.identifier} onClick={e => e.preventDefault()} />}
6769
/>
6870

69-
<Input id="lifetime" label={t('views:repos.expiration')} value={tokenData?.lifetime} readOnly />
71+
<Input
72+
className="py-px"
73+
id="lifetime"
74+
label={t('views:repos.expiration')}
75+
value={tokenData?.lifetime}
76+
readOnly
77+
/>
7078

7179
{/* Expiration Info */}
7280
<Input
81+
className="py-px truncate"
7382
id="token"
7483
label={t('views:repos.token')}
7584
variant="extended"
7685
value={tokenData?.token}
7786
readOnly
7887
rightElementVariant="default"
79-
rightElement={<CopyButton name={tokenData?.token} />}
88+
rightElement={<CopyButton name={tokenData?.token} onClick={e => e.preventDefault()} />}
8089
autoFocus
81-
className="truncate"
8290
/>
8391

8492
<span>{t('views:repos.cloneCredGenerated')}</span>

‎packages/ui/src/views/repo/repo-summary/components/clone-repo-dialog.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from 'react'
1+
import { FC, useState } from 'react'
22

33
import {
44
Button,
@@ -27,7 +27,7 @@ export enum CloneRepoTabs {
2727
SSH = 'ssh'
2828
}
2929

30-
export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
30+
export const CloneRepoDialog: FC<CloneRepoDialogProps> = ({
3131
httpsUrl,
3232
sshUrl,
3333
handleCreateToken,
@@ -39,30 +39,30 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
3939
return (
4040
<DropdownMenu>
4141
<DropdownMenuTrigger asChild>
42-
<Button>
43-
<Icon name="clone" />
44-
&nbsp; {t('views:repos.clone', 'Clone')}
42+
<Button className="gap-x-2 items-center pl-5 pr-2.5">
43+
{t('views:repos.cloneRepo', 'Clone repository')}
44+
<Icon name="chevron-down" size={12} className="text-icons-5" />
4545
</Button>
4646
</DropdownMenuTrigger>
47-
<DropdownMenuContent className="w-[328px] p-0" align="end">
48-
<div className="px-4 pt-4">
49-
<span className="text-14 font-medium leading-none">{t('views:repos.cloneRepo', 'Clone repository')}</span>
47+
<DropdownMenuContent className="w-[328px] p-0 shadow-2" align="end">
48+
<div className="px-4 pt-4 leading-none">
49+
<span className="text-14 font-medium inline-block">{t('views:repos.cloneRepo', 'Clone repository')}</span>
5050
</div>
5151
<Tabs
52-
className="mt-2"
52+
className="mt-4"
5353
variant="branch"
5454
value={currentTab}
5555
onValueChange={val => setCurrentTab(val as CloneRepoTabs)}
5656
>
57-
<TabsList>
57+
<TabsList className="px-4">
5858
<DropdownMenuItem
5959
className="rounded-t-md p-0"
6060
onSelect={e => {
6161
e.preventDefault()
6262
setCurrentTab(CloneRepoTabs.HTTPS)
6363
}}
6464
>
65-
<TabsTrigger className="data-[state=active]:bg-background-2" value={CloneRepoTabs.HTTPS}>
65+
<TabsTrigger className="data-[state=active]:bg-background-2 px-4" value={CloneRepoTabs.HTTPS}>
6666
{t('views:repos.cloneHttps', 'HTTPS')}
6767
</TabsTrigger>
6868
</DropdownMenuItem>
@@ -74,7 +74,7 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
7474
}}
7575
>
7676
<TabsTrigger
77-
className="data-[state=active]:bg-background-2"
77+
className="data-[state=active]:bg-background-2 px-4"
7878
value={CloneRepoTabs.SSH}
7979
onClick={e => e.stopPropagation()}
8080
>
@@ -83,20 +83,25 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
8383
</DropdownMenuItem>
8484
</TabsList>
8585
</Tabs>
86-
<div className="px-5 py-4">
86+
<div className="p-4">
87+
<div className="flex items-center mb-2.5">
88+
<span className="text-foreground-2 leading-none inline-block">
89+
{t('views:repos.gitCloneUrl', 'Git clone URL')}
90+
</span>
91+
</div>
8792
{currentTab === 'https' ? (
8893
<>
8994
<Input
95+
className="text-foreground-1 py-px"
9096
id="httpsUrl"
9197
readOnly
9298
value={httpsUrl}
9399
variant="extended"
94-
className="text-foreground-2"
95100
rightElementVariant="default"
96101
rightElement={<CopyButton name={httpsUrl} />}
97102
/>
98103
<div className="flex items-center mt-4">
99-
<span className="text-foreground-4">
104+
<span className="text-foreground-4 leading-snug">
100105
{t('views:repos.generateCredential', 'Please generate a clone credential if its your first time.')}
101106
</span>
102107
</div>
@@ -108,10 +113,10 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
108113
</>
109114
) : (
110115
<Input
116+
className="text-foreground-1 py-px"
111117
id="sshUrl"
112118
readOnly
113119
value={sshUrl}
114-
className="text-tertiary-background"
115120
variant="extended"
116121
rightElementVariant="default"
117122
rightElement={<CopyButton name={sshUrl} />}

‎packages/ui/src/views/repo/repo-summary/repo-summary.tsx‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
/* eslint-disable @typescript-eslint/no-unused-vars */
22

3-
import { Link, useNavigate } from 'react-router-dom'
3+
import { Link } from 'react-router-dom'
44

55
import {
66
Button,
77
ButtonGroup,
8+
FileAdditionsTrigger,
9+
Icon,
810
ListActions,
911
MarkdownViewer,
1012
NoData,
@@ -96,7 +98,6 @@ export function RepoSummaryView({
9698
setSearchQuery,
9799
handleCreateToken
98100
}: RepoSummaryViewProps) {
99-
const navigate = useNavigate()
100101
const { t } = useTranslationStore()
101102
const { repoId, spaceId, selectedBranchTag } = useRepoBranchesStore()
102103

@@ -190,11 +191,12 @@ export function RepoSummaryView({
190191
</ListActions.Left>
191192
<ListActions.Right>
192193
<ButtonGroup>
193-
<Button variant="outline" asChild>
194-
<Link to={`/${spaceId}/repos/${repoId}/code/new/${gitRef || selectedBranchTag?.name || ''}/~/`}>
195-
{t('views:repos.addFile', 'Add File')}
196-
</Link>
197-
</Button>
194+
<FileAdditionsTrigger
195+
useTranslationStore={useTranslationStore}
196+
pathNewFile={`/${spaceId}/repos/${repoId}/code/new/${gitRef || selectedBranchTag?.name || ''}/~/`}
197+
// TODO: set the actual file upload path
198+
pathUploadFiles={`/${spaceId}/repos/${repoId}/code/upload/${gitRef || selectedBranchTag?.name || ''}/~/`}
199+
/>
198200
<CloneRepoDialog
199201
sshUrl={repository?.git_ssh_url ?? 'could not fetch url'}
200202
httpsUrl={repository?.git_url ?? 'could not fetch url'}
@@ -231,12 +233,28 @@ export function RepoSummaryView({
231233
/>
232234
<Spacer size={5} />
233235
<StackedList.Root>
234-
<StackedList.Item isHeader disableHover>
236+
<StackedList.Item className="py-2" isHeader disableHover>
235237
<StackedList.Field
236238
title={<Text color="tertiaryBackground">{t('views:repos.readme', 'README.md')}</Text>}
237239
/>
238-
{/* TODO: add component and file editing logic */}
239-
<StackedList.Field right />
240+
<StackedList.Field
241+
right
242+
title={
243+
<Button
244+
className="flex border border-borders-1 hover:bg-background-3"
245+
variant="ghost"
246+
size="icon"
247+
asChild
248+
>
249+
<Link
250+
to={`/${spaceId}/repos/${repoId}/code/edit/${gitRef || selectedBranchTag?.name}/~/README.md`}
251+
>
252+
<Icon name="edit-pen" size={16} className="text-icons-3" />
253+
<span className="sr-only">{t('views:repos.editReadme', 'Edit README.md')}</span>
254+
</Link>
255+
</Button>
256+
}
257+
/>
240258
</StackedList.Item>
241259
<StackedList.Item disableHover>
242260
<MarkdownViewer source={decodedReadmeContent || ''} />

0 commit comments

Comments
 (0)