From 208aa6caba44451b9e858d74711313039f55b5c4 Mon Sep 17 00:00:00 2001 From: Rahul Yadav Date: Fri, 10 Nov 2023 06:23:20 +0400 Subject: [PATCH] Redesign create project and do minor ui changes --- .../project/NewProject/NewProject.module.scss | 70 ++++++- .../project/NewProject/NewProject.tsx | 179 +++++++----------- src/components/ui/icon/AppIconList.ts | 3 + src/components/ui/icon/Import.tsx | 23 +++ src/components/ui/icon/index.tsx | 8 +- src/components/workspace/ABIUi/ABIUi.tsx | 2 +- .../BottomPanel/BottomPanel.module.scss | 2 +- .../ContractInteraction.tsx | 7 +- .../workspace/Tabs/Tabs.module.scss | 6 +- .../ManageProject/ManageProject.module.scss | 12 ++ .../project/ManageProject/ManageProject.tsx | 18 +- src/styles/components/project.scss | 18 +- src/styles/global.scss | 3 +- src/styles/lib/form.scss | 13 ++ 14 files changed, 239 insertions(+), 125 deletions(-) create mode 100644 src/components/ui/icon/Import.tsx diff --git a/src/components/project/NewProject/NewProject.module.scss b/src/components/project/NewProject/NewProject.module.scss index c88e502..6108965 100644 --- a/src/components/project/NewProject/NewProject.module.scss +++ b/src/components/project/NewProject/NewProject.module.scss @@ -5,17 +5,82 @@ cursor: pointer; } - +.btnActionContainer { + margin-bottom: 1rem; +} .btnAction { width: 100%; height: 2.5rem; font-weight: 600; + svg { + width: 1rem; + height: 1rem; + } +} + +.fileUploadLabel { + font-size: 0.85rem; + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + margin: 1rem 0; + .icon { + font-size: 1.2rem; + } + span { + opacity: 0.8; + } +} + +.optionSelection { + [class*='ant-radio-group'] { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.5rem; + } + [class*='ant-radio-button-wrapper'] { + border: 0 !important; + text-align: center; + color: #fff; + border-radius: var(--border-radius); + &:not(.ant-radio-button-wrapper-checked) { + background-color: rgba(46, 46, 51, 0.5); + } + &::before { + display: none !important; + } + span { + color: #fff; + } + + [class*='ant-radio-button-checked'] { + border: solid 1px transparent; + background-image: linear-gradient(rgb(20, 20, 20), rgb(20, 20, 20)), + var(--primary-gradient); + background-origin: border-box; + background-clip: content-box, border-box; + border-radius: var(--border-radius); + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: #000; + z-index: -1; + border-radius: inherit; + } + } + } } .title { text-align: center; display: block; - font-size: 1.3rem; + font-size: 1.1rem; } .newIcon { width: 1.1rem; @@ -24,5 +89,6 @@ .form { margin-top: 1.5rem; .formItem { + margin-bottom: 1rem; } } diff --git a/src/components/project/NewProject/NewProject.tsx b/src/components/project/NewProject/NewProject.tsx index fc536ae..68918b2 100644 --- a/src/components/project/NewProject/NewProject.tsx +++ b/src/components/project/NewProject/NewProject.tsx @@ -1,6 +1,5 @@ -import AppIcon from '@/components/ui/icon'; +import AppIcon, { AppIconType } from '@/components/ui/icon'; import { useWorkspaceActions } from '@/hooks/workspace.hooks'; -import { UploadOutlined } from '@ant-design/icons'; import { Button, Form, Input, Modal, Radio, Upload, message } from 'antd'; import { useForm } from 'antd/lib/form/Form'; import { FC, useEffect, useState } from 'react'; @@ -17,9 +16,20 @@ import s from './NewProject.module.scss'; interface Props { className?: string; ui?: 'icon' | 'button'; + projectType?: 'default' | 'local' | 'git'; + label?: string; + icon?: AppIconType; + heading?: string; } -const NewProject: FC = ({ className = '', ui = 'icon' }) => { +const NewProject: FC = ({ + className = '', + ui = 'icon', + projectType = 'default', + label = 'Create', + icon = 'Plus', + heading = 'New Project', +}) => { const [isActive, setIsActive] = useState(false); const { projects } = useWorkspaceActions(); const { createProject } = useProjectActions(); @@ -38,16 +48,6 @@ const NewProject: FC = ({ className = '', ui = 'icon' }) => { const templatedList = [ { label: 'Blank Contract', value: 'tonBlank' }, { label: 'Counter Contract', value: 'tonCounter' }, - // { label: 'NFT Contract', value: 'nft', lang: 'tact' }, - - { label: 'Import Contract', value: 'import' }, - - // { label: 'Chat Bot Contract', value: 'chatBot' }, - ]; - - const importOptions = [ - { label: 'From Github', value: 'github', default: true }, - { label: 'From local', value: 'local' }, ]; const onFormFinish = async (values: any) => { @@ -60,14 +60,14 @@ const NewProject: FC = ({ className = '', ui = 'icon' }) => { throw `Project '${projectName}' already exists`; } - if (importType === 'github') { + if (projectType === 'git') { files = await downloadRepo(githubUrl); } const projectId = await createProject( projectName, language, - values.template, + values.template || 'import', values?.file?.file, files ); @@ -77,7 +77,7 @@ const NewProject: FC = ({ className = '', ui = 'icon' }) => { Analytics.track('Create project', { platform: 'IDE', type: `TON - ${language}`, - sourceType: importType, + sourceType: projectType, template: values.template, }); message.success(`Project '${projectName}' created`); @@ -118,61 +118,6 @@ const NewProject: FC = ({ className = '', ui = 'icon' }) => { setIsActive(false); }; - const projectImport = (fieldGetter: any) => ( -
- - - - - prevValues.importType !== currentValues.importType - } - > - {() => - fieldGetter('importType') === 'local' ? ( - - { - return false; - }} - > - - - - ) : ( - - - - ) - } - -
- ); - useEffect(() => { EventEmitter.on('ONBOARDOING_NEW_PROJECT', () => { setIsActive(true); @@ -184,12 +129,12 @@ const NewProject: FC = ({ className = '', ui = 'icon' }) => { return ( <> - +
setIsActive(true)} > - {ui === 'icon' && } + {ui === 'icon' && } {ui === 'button' && ( diff --git a/src/components/ui/icon/AppIconList.ts b/src/components/ui/icon/AppIconList.ts index c26bf49..7b0ce71 100644 --- a/src/components/ui/icon/AppIconList.ts +++ b/src/components/ui/icon/AppIconList.ts @@ -3,6 +3,7 @@ export { default as Build } from './Build'; export { default as Close } from './Close'; export { default as Code } from './Code'; export { default as GitHub } from './Github'; +export { default as Import } from './Import'; export { default as Info } from './Info'; export { default as NewFile } from './NewFile'; export { default as NewFolder } from './NewFolder'; @@ -11,3 +12,5 @@ export { default as Rocket } from './Rocket'; export { default as Setting } from './Setting'; export { default as Telegram } from './Telegram'; export { default as Test } from './Test'; + + diff --git a/src/components/ui/icon/Import.tsx b/src/components/ui/icon/Import.tsx new file mode 100644 index 0000000..b9e91cf --- /dev/null +++ b/src/components/ui/icon/Import.tsx @@ -0,0 +1,23 @@ +import { FC } from 'react'; + +interface Props { + className?: string; +} +const Import: FC = ({ className = '' }) => ( + + + +); +export default Import; diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx index bb0a4c0..efb6962 100644 --- a/src/components/ui/icon/index.tsx +++ b/src/components/ui/icon/index.tsx @@ -1,6 +1,7 @@ import { FC } from 'react'; import { AiOutlineDelete, + AiOutlineDownload, AiOutlineGoogle, AiOutlineHome, AiOutlineLogout, @@ -20,6 +21,7 @@ import { Close, Code, GitHub, + Import, Info, NewFile, NewFolder, @@ -57,7 +59,9 @@ export type AppIconType = | 'Build' | 'Rocket' | 'Eye' - | 'Clear'; + | 'Clear' + | 'Download' + | 'Import'; export interface AppIconInterface { name: AppIconType; @@ -91,6 +95,8 @@ const Components = { Rocket, Eye: FiEye, Clear: GrClear, + Download: AiOutlineDownload, + Import, }; const AppIcon: FC = ({ name, className = '' }) => { diff --git a/src/components/workspace/ABIUi/ABIUi.tsx b/src/components/workspace/ABIUi/ABIUi.tsx index cacc32d..061455d 100644 --- a/src/components/workspace/ABIUi/ABIUi.tsx +++ b/src/components/workspace/ABIUi/ABIUi.tsx @@ -97,7 +97,7 @@ const ABIUi: FC = ({ return (
-
+ {abi.parameters.map((item: ABIParameter, i: number) => { if (item.name === 'queryId') { return ( diff --git a/src/components/workspace/BottomPanel/BottomPanel.module.scss b/src/components/workspace/BottomPanel/BottomPanel.module.scss index 677f0ff..ad26933 100644 --- a/src/components/workspace/BottomPanel/BottomPanel.module.scss +++ b/src/components/workspace/BottomPanel/BottomPanel.module.scss @@ -26,7 +26,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: 0.1rem 0.7rem 0 0.5rem; + padding: 0.1rem 0.3rem 0 0.3rem; // margin: 1rem 0 0 0; .actions { diff --git a/src/components/workspace/ContractInteraction/ContractInteraction.tsx b/src/components/workspace/ContractInteraction/ContractInteraction.tsx index 82973eb..d5c3a4c 100644 --- a/src/components/workspace/ContractInteraction/ContractInteraction.tsx +++ b/src/components/workspace/ContractInteraction/ContractInteraction.tsx @@ -183,7 +183,12 @@ const ContractInteraction: FC = ({ )}
-

Send internal message: ({abi?.setters?.length || '-'})

+

+ Send internal message:{' '} + {abi?.setters?.length && abi?.setters?.length > 0 + ? `(${abi?.setters?.length})` + : ''} +

{language !== 'tact' && ( <>

diff --git a/src/components/workspace/Tabs/Tabs.module.scss b/src/components/workspace/Tabs/Tabs.module.scss index 63353be..499cf09 100644 --- a/src/components/workspace/Tabs/Tabs.module.scss +++ b/src/components/workspace/Tabs/Tabs.module.scss @@ -34,6 +34,10 @@ &::before { margin-top: 2%; } + .closeIcon { + width: 0.8rem; + height: 0.8rem; + } &:hover { .close { &:not(.isDirty) { @@ -65,7 +69,7 @@ .close { display: inline-flex; margin-left: 5px; - margin-top: 2px; + // margin-top: 2px; border-radius: 5px; padding: 1px; position: relative; diff --git a/src/components/workspace/project/ManageProject/ManageProject.module.scss b/src/components/workspace/project/ManageProject/ManageProject.module.scss index e8c2878..7943d49 100644 --- a/src/components/workspace/project/ManageProject/ManageProject.module.scss +++ b/src/components/workspace/project/ManageProject/ManageProject.module.scss @@ -20,6 +20,18 @@ .options { display: flex; gap: 0.5rem; + .git { + svg { + width: 0.95rem; + height: unset; + } + } + .local { + svg { + width: 1.3rem; + height: unset; + } + } } .deleteProject { diff --git a/src/components/workspace/project/ManageProject/ManageProject.tsx b/src/components/workspace/project/ManageProject/ManageProject.tsx index 4b5ca4a..aabf77a 100644 --- a/src/components/workspace/project/ManageProject/ManageProject.tsx +++ b/src/components/workspace/project/ManageProject/ManageProject.tsx @@ -21,6 +21,21 @@ const ManageProject: FC = () => { Projects

+ + +
{ value={project.id} title={project.name} > - {getLanguageInitial(project?.language)} - {project.name} + {project.name} - {project?.language || 'func'} ))} diff --git a/src/styles/components/project.scss b/src/styles/components/project.scss index c712794..50e2dc3 100644 --- a/src/styles/components/project.scss +++ b/src/styles/components/project.scss @@ -1,13 +1,13 @@ .onboarding-new-project-form { - .top-header { - display: grid; - grid-template-columns: auto 9rem; - gap: 0rem; - > div:nth-child(2) { - display: flex; - justify-content: flex-end; - } - } + // .top-header { + // display: grid; + // grid-template-columns: auto 9rem; + // gap: 0rem; + // > div:nth-child(2) { + // display: flex; + // justify-content: flex-end; + // } + // } .template-selector { .ant-radio-group { display: grid; diff --git a/src/styles/global.scss b/src/styles/global.scss index 1e90442..941fd1b 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,5 +1,6 @@ :root { --primary: #0098ea; + --brand-color-2: rgba(19, 226, 218, 1); --font-title: 'Poppins', sans-serif; --font-body: 'Poppins', sans-serif; --text-color: #f7f7f7; @@ -10,7 +11,7 @@ --grey-1000: #131212; --bg-color-dark: #000; --color-danger: #c84075; - --border-radius: 10px; + --border-radius: 5px; --dark-hover: linear-gradient( 0deg, rgba(0, 0, 0, 0.6) 0%, diff --git a/src/styles/lib/form.scss b/src/styles/lib/form.scss index a9555cc..cb7a0e5 100644 --- a/src/styles/lib/form.scss +++ b/src/styles/lib/form.scss @@ -27,3 +27,16 @@ div.ant-form-item { } } } + +.app-form { + .ant-input { + border: 0; + border-bottom: 1px solid transparent; + background-color: rgba(0, 0, 0, 1); + height: 35px; + box-shadow: none; + &:focus { + border-color: #454545; + } + } +}