Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(web): fix function template popover #1335

Merged
merged 2 commits into from
Jun 29, 2023
Merged

fix(web): fix function template popover #1335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9311b4d
fix(web): fix function template popover
newfish-cmyk Jun 29, 2023
b6edef8
fix(web): fix typo & remove clsx
newfish-cmyk Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions web/public/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,7 +499,8 @@
"AddMore": "Add More",
"Save": "Save",
"Recommended": "Recommended Template",
"confirm": "If there are missing dependencies, the application will be automatically restarted. Are you sure you want to use this template?"
"Confirm": "If there are missing dependencies, the application will be automatically restarted. Are you sure you want to use this template?",
"ConfirmDeleteTemplate": "Are you sure you want to delete this function template？"
},
"Create function template success": "Create function template successfully",
"Publish": "release",
Expand All @@ -509,4 +510,4 @@
"DaysAgo": " Days Ago",
"WeeksAgo": " Weeks Ago",
"MonthsAgo": " Months Ago"
}
}
5 changes: 3 additions & 2 deletions web/public/locales/zh-CN/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,8 @@
"AddMore": "继续添加",
"Save": "保存",
"Recommended": "推荐模板",
"confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？"
"Confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？",
"ConfirmDeleteTemplate": "确定删除模板吗"
},
"Fee": "费用",
"PleaseCloseApplicationFirst": "请先关闭应用",
Expand Down Expand Up @@ -509,4 +510,4 @@
"DaysAgo": " 天前",
"MonthsAgo": " 月前",
"WeeksAgo": " 周前"
}
}
5 changes: 3 additions & 2 deletions web/public/locales/zh/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,8 @@
"AddMore": "继续添加",
"Save": "保存",
"Recommended": "推荐模板",
"confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？"
"Confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？",
"ConfirmDeleteTemplate": "确定删除模板吗"
},
"Fee": "费用",
"PleaseCloseApplicationFirst": "请先关闭应用",
Expand Down Expand Up @@ -509,4 +510,4 @@
"DaysAgo": " 天前",
"MonthsAgo": " 月前",
"WeeksAgo": " 周前"
}
}
5 changes: 0 additions & 5 deletions web/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,3 @@ a {
background: black;
}
}

.chakra-portal {
position: relative;
z-index: 9999;
}
33 changes: 21 additions & 12 deletions web/src/layouts/Template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,30 @@ export default function TemplateLayout() {
}, [init]);

return (
<div className={clsx("h-screen overflow-hidden", darkMode ? "" : "bg-white")}>
<div className={clsx("flex justify-center", darkMode ? "" : "bg-gray-100")}>
<>
<div
className={clsx(
"sticky top-0 z-50 flex justify-center",
darkMode ? "" : "border-b border-[#E4E9EE] bg-gray-100",
)}
>
<Header width="max-w-screen-xl" />
</div>
<div className={clsx("flex justify-center", darkMode ? "" : "border-t border-[#E4E9EE]")}>
<div className="w-full max-w-screen-xl">
{loading ? (
<Center style={{ minHeight: 300 }}>
<Spinner />
</Center>
) : (
<Outlet />
)}
<div className="overflow-auto">
<div className="fixed bottom-0 left-0 right-0 top-0 -z-40 bg-white"></div>

<div className="flex justify-center">
<div className="w-full max-w-screen-xl">
{loading ? (
<Center style={{ minHeight: 300 }}>
<Spinner />
</Center>
) : (
<Outlet />
)}
</div>
</div>
</div>
</div>
</>
);
}
2 changes: 1 addition & 1 deletion web/src/pages/app/functions/mods/FunctionPanel/FunctionTemplate/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const FuncTemplate = (props: { children?: React.ReactElement }) => {

<Modal isOpen={isOpen} onClose={handleModalClose}>
<ModalOverlay />
<ModalContent minH={"90%"} maxW={"80%"} m={"auto"}>
<ModalContent height={"95%"} maxW={"80%"} m={"auto"} overflow={"auto"}>
<ModalHeader pb={-0.5}>{t("HomePage.NavBar.funcTemplate")}</ModalHeader>
<ModalBody>
<ModalCloseButton />
Expand Down
40 changes: 20 additions & 20 deletions web/src/pages/functionTemplate/CreateFuncTemplate/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Box, Button, Radio, RadioGroup, useColorMode } from "@chakra-ui/react";
import clsx from "clsx";

import { TextIcon } from "@/components/CommonIcon";
import ConfirmButton from "@/components/ConfirmButton";
import FileTypeIcon from "@/components/FileTypeIcon";

import {
Expand Down Expand Up @@ -145,9 +146,14 @@ export default function CreateFuncTemplate() {
return (
<div className={clsx("flex flex-col px-20 2xl:px-48", colorMode === "dark" ? "" : "bg-white")}>
<div className="pt-8 text-lg">
<a href="/market/templates/my" className="text-second">
{t("Template.MyTemplate")}
</a>
<span
className="cursor-pointer text-second"
onClick={() => {
navigate(-1);
}}
>
{t("HomePage.NavBar.funcTemplate")}
</span>
<span className="px-3">
<ChevronRightIcon />
</span>
Expand Down Expand Up @@ -273,17 +279,19 @@ export default function CreateFuncTemplate() {

<div className="mt-4 flex justify-center pb-4">
{isEdit && (
<Button
className="mr-12 w-36 bg-red-100"
variant={"warnText"}
onClick={async () => {
<ConfirmButton
headerText={t("Delete")}
bodyText={t("Template.ConfirmDeleteTemplate")}
onSuccessAction={async () => {
await deleteFunctionMutation.mutateAsync({ id: templateId });
showSuccess(t("DeleteSuccess"));
navigate("/market/templates/my");
}}
>
{t("Delete")}
</Button>
<Button className="mr-4 w-36 bg-red-100" variant={"warnText"}>
{t("Delete")}
</Button>
</ConfirmButton>
)}
<Button className="w-36" onClick={handleSubmit(onSubmit)}>
{isEdit ? t("Template.Save") : t("Publish")}
Expand All @@ -300,10 +308,7 @@ export default function CreateFuncTemplate() {
return (
<div
key={item.name}
className={clsx(
"group my-3 flex cursor-pointer items-center justify-between rounded-md py-1 font-medium hover:opacity-100",
darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100",
)}
className="my-3 flex items-center justify-between rounded-md py-1 font-medium hover:opacity-100"
>
<div className="flex w-10/12 items-center">
<FileTypeIcon type="ts" fontSize={18} />
Expand All @@ -326,10 +331,7 @@ export default function CreateFuncTemplate() {
return (
<Box
key={item.package.name}
className={clsx(
"group my-3 flex cursor-pointer items-center justify-between rounded-md py-1 font-medium",
darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100",
)}
className="my-3 flex items-center justify-between py-1 font-medium"
>
<div>
<FileTypeIcon type="npm" />
Expand All @@ -340,9 +342,7 @@ export default function CreateFuncTemplate() {
<DeleteIcon
boxSize={3}
color={"gray.400"}
className={clsx(
"mr-2 opacity-0 hover:text-gray-800 group-hover:opacity-100",
)}
className="cursor-pointer hover:text-gray-800"
onClick={() => {
setPackageList(
packageList.filter((pkg) => pkg.package.name !== item.package.name),
Expand Down
24 changes: 15 additions & 9 deletions web/src/pages/functionTemplate/FuncTemplateItem/TemplateFunctionInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,26 @@ const TemplateFunctionInfo = ({

return (
<>
<div className="flex justify-between">
<div className="w-full">
<div className="truncate pb-2 text-[24px] font-semibold">{template.name}</div>
<div className="truncate text-second">{template.description}</div>
{!popover && (
<div>
<div className="mb-2 flex justify-between">
<div className="w-full">
<div className="truncate pb-2 text-[24px] font-semibold">{template.name}</div>
<div className="truncate text-second">{template.description}</div>
</div>
</div>
<Divider marginY={4} variant="dashed" />
</div>
</div>
<Divider marginY={4} variant="dashed" />
<div className="mb-2 flex w-full overflow-auto">
)}
<div className="flex w-full overflow-auto">
{template.items.map((item) => (
<div
className={clsx(
"mb-2 mr-2 cursor-pointer rounded-md border px-8 py-1 text-[14px]",
"mr-2 cursor-pointer whitespace-nowrap rounded-md border px-8 py-1 text-[14px]",
!darkMode && "bg-[#F6F8F9]",
"hover:border-blue-400 hover:bg-blue-100 hover:text-blue-700",
currentFunction?.name === item.name && "border-blue-400 bg-blue-100 text-blue-700",
popover ? "mb-2" : "mb-4",
)}
onClick={() => {
setCurrentFunction(item);
Expand All @@ -50,7 +55,7 @@ const TemplateFunctionInfo = ({
<div
className="overflow-auto"
style={{
height: popover ? "400px" : "60vh",
height: popover ? "250px" : "60vh",
}}
>
<MonacoEditor
Expand All @@ -59,6 +64,7 @@ const TemplateFunctionInfo = ({
readOnly={true}
title={currentFunction.name}
currentFunction={currentFunction}
popover={popover}
/>
</div>
</>
Expand Down
5 changes: 2 additions & 3 deletions web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import TemplateFunctionInfo from "./TemplateFunctionInfo";

import { TFunctionTemplate } from "@/apis/typing";

const FuncTemplateItem = (props: { setSelectedItem: any; selectedItem: any; isModal: boolean }) => {
const { setSelectedItem, isModal } = props;
const FuncTemplateItem = (props: { isModal: boolean }) => {
const { isModal } = props;
const { colorMode } = useColorMode();
const { t } = useTranslation();
const navigate = useNavigate();
Expand Down Expand Up @@ -56,7 +56,6 @@ const FuncTemplateItem = (props: { setSelectedItem: any; selectedItem: any; isMo
className="cursor-pointer text-second"
onClick={() => {
navigate(-1);
setSelectedItem({ text: t("Template.Recommended"), value: "recommended" });
}}
>
{t("HomePage.NavBar.funcTemplate")}
Expand Down
6 changes: 4 additions & 2 deletions web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ const MonacoEditor = (props: {
setCurrentFunction?: any;
functionList?: any;
setFunctionList?: any;
popover?: boolean;
}) => {
const {
readOnly,
Expand All @@ -88,6 +89,7 @@ const MonacoEditor = (props: {
setCurrentFunction,
functionList,
setFunctionList,
popover,
} = props;
const monacoEl = useRef<HTMLDivElement | null>(null);
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>();
Expand All @@ -113,7 +115,7 @@ const MonacoEditor = (props: {
formatOnPaste: true,
overviewRulerLanes: 0,
lineNumbersMinChars: 4,
fontSize: 14,
fontSize: popover ? 10 : 14,
theme: darkMode ? "lafEditorThemeDark" : "lafEditorTheme",
});
}
Expand Down Expand Up @@ -143,7 +145,7 @@ const MonacoEditor = (props: {
return (
<div
className={clsx(
"h-full overflow-hidden rounded-md border",
"h-full overflow-hidden rounded-md border border-grayModern-200",
darkMode ? "bg-[#202631]" : "bg-white",
)}
>
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/functionTemplate/Mods/PaginationBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const PaginationBar = (props: { page: number; setPage: any; total?: number; page
const darkMode = colorMode === "dark";

return (
<div className="flex w-full flex-wrap-reverse items-center justify-end pb-8 pr-16 pt-4 text-lg">
<div className="flex w-full flex-wrap-reverse items-center justify-end pb-8 pr-8 pt-4 text-lg">
<span className="mr-4">
{t("Template.Total")}: {total}
</span>
Expand Down