Skip to content

Commit

Permalink
feat: adds minor UI updates
Browse files Browse the repository at this point in the history
  • Loading branch information
ghoshnirmalya committed Dec 28, 2020
1 parent ab4efd5 commit 869e3b4
Show file tree
Hide file tree
Showing 17 changed files with 166 additions and 174 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ const FeaturesSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>Heading</FormLabel>
<Input
size="sm"
rounded="lg"
value={meta.heading}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleMetaChange("heading", e.currentTarget.value)
Expand All @@ -100,6 +101,7 @@ const FeaturesSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>Card {index + 1} heading</FormLabel>
<Input
size="sm"
rounded="lg"
value={card.heading}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleDataChange(index, "heading", e.currentTarget.value)
Expand All @@ -110,6 +112,7 @@ const FeaturesSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>Card {index + 1} sub-heading</FormLabel>
<Input
size="sm"
rounded="lg"
value={card.subHeading}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleDataChange(index, "subHeading", e.currentTarget.value)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ const FooterSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>Label</FormLabel>
<Input
size="sm"
rounded="lg"
value={link.label}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleDataChange(index, "label", e.currentTarget.value)
Expand All @@ -86,6 +87,7 @@ const FooterSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>URL</FormLabel>
<Input
size="sm"
rounded="lg"
value={link.link}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleDataChange(index, "link", e.currentTarget.value)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const HeroSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>Heading</FormLabel>
<Input
size="sm"
rounded="lg"
value={meta.heading}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleMetaChange("heading", e.currentTarget.value)
Expand All @@ -66,6 +67,7 @@ const HeroSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>Sub heading</FormLabel>
<Input
size="sm"
rounded="lg"
value={meta.subHeading}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleMetaChange("subHeading", e.currentTarget.value)
Expand All @@ -79,6 +81,7 @@ const HeroSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>Button {index + 1} label</FormLabel>
<Input
size="sm"
rounded="lg"
value={button.label}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleDataChange(index, "label", e.currentTarget.value)
Expand All @@ -89,6 +92,7 @@ const HeroSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>Button {index + 1} URL</FormLabel>
<Input
size="sm"
rounded="lg"
value={button.link}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleDataChange(index, "link", e.currentTarget.value)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ const NavbarSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>Label</FormLabel>
<Input
size="sm"
rounded="lg"
value={link.label}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleDataChange(index, "label", e.currentTarget.value)
Expand All @@ -86,6 +87,7 @@ const NavbarSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
<FormLabel>URL</FormLabel>
<Input
size="sm"
rounded="lg"
value={link.link}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
handleDataChange(index, "link", e.currentTarget.value)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,11 @@ const ContentArea: FC = () => {
};

return (
<Box
h="calc(100vh - 50px - 50px)"
w="calc(100vw - 500px)"
bg={bgColor}
p={14}
>
<Box h="calc(100vh - 50px)" w="calc(100vw - 500px)" bg={bgColor} p={14}>
<Box
shadow="xl"
bg={bgColor}
h="calc(100vh - 50px - 50px - 120px)"
h="calc(100vh - 50px - 120px)"
overflowY="auto"
maxW={determinePreviewWidth()}
mx="auto"
Expand Down
8 changes: 2 additions & 6 deletions packages/builder/components/pages/index/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
import { Flex, Text, useColorModeValue } from "@chakra-ui/react";
import RightSidebar from "components/pages/index/right-sidebar";
import Survey from "components/pages/index/survey";
import TopNavbar from "components/pages/index/top-navbar";
import dynamic from "next/dynamic";
import React, { FC } from "react";
import { useSelector } from "react-redux";
Expand All @@ -19,7 +18,7 @@ const LazyContentArea = dynamic(

return (
<Flex
h="calc(100vh - 50px - 50px)"
h="calc(100vh - 50px)"
w="calc(100vw - 500px)"
bg={bgColor}
alignItems="center"
Expand All @@ -43,9 +42,6 @@ const IndexPageComponent: FC = () => {

return (
<Flex overflow="hidden" flexDir="column">
<Box>
<TopNavbar />
</Box>
<Flex>
<LazyContentArea />
<RightSidebar />
Expand Down
2 changes: 1 addition & 1 deletion packages/builder/components/pages/index/left-sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const LeftSidebar: FC = () => {

return (
<Flex
h="calc(100vh - 50px - 50px)"
h="calc(100vh - 50px)"
w="50px"
borderRightWidth={1}
py={4}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const AddNewSection: FC<IProps> = ({ positionOfSection }) => {
<Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
<PopoverTrigger>
<Button
size="sm"
size="xs"
leftIcon={<MdAdd />}
w="100%"
disabled={isOpen}
Expand Down
45 changes: 39 additions & 6 deletions packages/builder/components/pages/index/right-sidebar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,55 @@
import { Box, Text, useColorModeValue } from "@chakra-ui/react";
import { Box, Button, HStack, useColorModeValue } from "@chakra-ui/react";
import Tabs from "components/pages/index/right-sidebar/tabs";
import dynamic from "next/dynamic";
import React, { FC } from "react";

const LazyDownloadHTMLButton = dynamic(
() =>
import(
/* webpackChunkName: 'lazyDownloadHTMLButton' */ "components/pages/index/right-sidebar/download-html-button"
),
{
ssr: false,
loading: () => {
return <Button size="sm" isLoading />;
},
}
);

const LazyDeviceButtons = dynamic(
() =>
import(
/* webpackChunkName: 'lazyDeviceButtons' */ "components/pages/index/right-sidebar/device-buttons"
),
{
ssr: false,
loading: () => {
return <Button size="sm" isLoading />;
},
}
);

const RightSidebar: FC = () => {
const bgColor = useColorModeValue("brand.100", "brand.900");
const editorControlsBgColor = useColorModeValue("brand.100", "brand.900");

return (
<Box
h="calc(100vh - 50px - 50px)"
h="calc(100vh - 50px)"
w="500px"
bg={bgColor}
borderLeftWidth={1}
overflowY="auto"
>
<Box borderBottomWidth={1} p={4} bg={editorControlsBgColor}>
<Text fontWeight="bold">Editor</Text>
</Box>
<HStack
spacing={4}
align="center"
borderBottomWidth={1}
p={4}
justifyContent="space-between"
>
<LazyDeviceButtons />
<LazyDownloadHTMLButton />
</HStack>
<Tabs />
</Box>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
} from "@chakra-ui/react";
import dynamic from "next/dynamic";
import React, { FC } from "react";
import { MdChromeReaderMode, MdDns } from "react-icons/md";
import { MdChromeReaderMode, MdCollections, MdDns } from "react-icons/md";

const LazyRightSidebarSectionsTab = dynamic(
() =>
Expand Down Expand Up @@ -53,6 +53,25 @@ const LazyRightSidebarTemplatesTab = dynamic(
}
);

const LazyRightSidebarPagesTab = dynamic(
() =>
import(
/* webpackChunkName: 'lazyRightSidebarPagesTab' */ "components/pages/index/right-sidebar/tabs/pages"
),
{
ssr: false,
loading: () => {
return (
<Flex h={100} alignItems="center" justifyContent="center">
<Text fontSize="20" fontWeight="bold">
Loading...
</Text>
</Flex>
);
},
}
);

const RightSidebarTabs: FC = () => {
const editorControlsBgColor = useColorModeValue("brand.100", "brand.900");

Expand All @@ -71,6 +90,12 @@ const RightSidebarTabs: FC = () => {
<Text>Templates</Text>
</HStack>
</Tab>
<Tab>
<HStack spacing={1}>
<Icon as={MdCollections} />
<Text>Pages</Text>
</HStack>
</Tab>
</TabList>
<TabPanels>
<TabPanel>
Expand All @@ -83,6 +108,11 @@ const RightSidebarTabs: FC = () => {
<LazyRightSidebarTemplatesTab />
</Box>
</TabPanel>
<TabPanel>
<Box>
<LazyRightSidebarPagesTab />
</Box>
</TabPanel>
</TabPanels>
</Tabs>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ const AddPage: FC = () => {
<FormLabel htmlFor="url">URL</FormLabel>
<InputGroup size="sm">
<Input
rounded="lg"
ref={urlField}
type="url"
id="url"
Expand All @@ -93,7 +94,7 @@ const AddPage: FC = () => {
setURL(e.currentTarget.value)
}
/>
<InputRightAddon>.html</InputRightAddon>
<InputRightAddon rounded="lg">.html</InputRightAddon>
</InputGroup>
<FormHelperText>
Enter the url of HTML page in lowercase and hyphenated (eg:
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { Box, Button, HStack, Text, VStack } from "@chakra-ui/react";
import dynamic from "next/dynamic";
import React, { FC } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getCurrentPageData, getSiteData } from "selectors/site";
import { setCurrentPageId } from "slices/site";

const LazyAddPage = dynamic(
() =>
import(
/* webpackChunkName: 'lazyAddPage' */ "components/pages/index/right-sidebar/tabs/pages/add-page"
),
{
ssr: false,
loading: () => {
return <Button size="sm" isLoading />;
},
}
);

const LazyManagePages = dynamic(
() =>
import(
/* webpackChunkName: 'lazyManagePages' */ "components/pages/index/right-sidebar/tabs/pages/manage-pages"
),
{
ssr: false,
loading: () => {
return <Button size="sm" isLoading />;
},
}
);

const RightSidebarPagesTab: FC = () => {
const dispatch = useDispatch();
const { pages } = useSelector(getSiteData());
const currentPageId = useSelector(getCurrentPageData());

const pagesNode = () => {
return pages.map((page, index: number) => {
return (
<Box
key={index}
as="button"
onClick={() => dispatch(setCurrentPageId(index))}
bg={index === currentPageId ? "brand.700" : "brand.900"}
alignItems="center"
w="100%"
rounded="lg"
_hover={{
shadow: "lg",
}}
>
<Text px={2} py={1} fontWeight="bold" textAlign="left" fontSize="sm">
{page.meta.id}.html
</Text>
</Box>
);
});
};

return (
<VStack spacing={2}>
<HStack spacing={4} justifyContent="flex-end" w="100%">
<LazyManagePages />
<LazyAddPage />
</HStack>
{pagesNode()}
</VStack>
);
};

export default RightSidebarPagesTab;
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const ManagePages: FC = () => {
</FormLabel>
<InputGroup size="sm">
<Input
rounded="lg"
type="url"
id="url"
placeholder="URL"
Expand All @@ -79,7 +80,9 @@ const ManagePages: FC = () => {
handleUpdation(e.currentTarget.value, index)
}
/>
<InputRightAddon>.html</InputRightAddon>
<InputRightAddon rounded="lg">
.html
</InputRightAddon>
</InputGroup>
</FormControl>
<IconButton
Expand Down

0 comments on commit 869e3b4

Please sign in to comment.