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/dev features improve #531

Merged
merged 4 commits into from
Sep 18, 2023
Merged

Fix/dev features improve #531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
274577d
fix(components): remove devmode
jennieramida Sep 15, 2023
710ae14
fix(components): change sidebar to accordion
jennieramida Sep 15, 2023
db6da59
fix(components): show all icon when collapse
jennieramida Sep 15, 2023
08dc4e7
fix: add key, edit changelog
evilpeach Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Improvements

- [#531](https://github.com/alleslabs/celatone-frontend/pull/531) Revise developer features and add accordion to sidebar navigation
- [#529](https://github.com/alleslabs/celatone-frontend/pull/529) Improve developer features ux writing and transition
- [#528](https://github.com/alleslabs/celatone-frontend/pull/528) Improve developer features toggle for a smoother ux
- [#519](https://github.com/alleslabs/celatone-frontend/pull/519) Validate schema input when initialFormData has changed
Expand Down
210 changes: 41 additions & 169 deletions src/lib/layout/SubHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,108 +1,22 @@
import {
Flex,
Text,
Switch,
FormControl,
FormLabel,
Button,
Heading,
} from "@chakra-ui/react";
import { AnimatePresence } from "framer-motion";
import type { CSSProperties, Dispatch, SetStateAction } from "react";
import { useEffect, useRef } from "react";
import { Flex, Text } from "@chakra-ui/react";

import { usePoolConfig, useGovConfig, useWasmConfig } from "lib/app-provider";
import { AppLink } from "lib/components/AppLink";
import type { IconKeys } from "lib/components/icon";
import { CustomIcon } from "lib/components/icon";
import { MotionBox } from "lib/components/MotionBox";
import { Tooltip } from "lib/components/Tooltip";
import { useIsCurrentPage } from "lib/hooks";
import type { Option } from "lib/types";

interface SubHeaderMenuInfo {
name: string;
slug: string;
icon: IconKeys;
}

const boxShadow = "0px 4px 8px 0px var(--chakra-colors-gray-900)";
const FirstLandPrompt = ({
setIsDevMode,
}: {
setIsDevMode: Dispatch<SetStateAction<Option<boolean>>>;
}) => (
<AnimatePresence>
<MotionBox
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{
delay: "1",
duration: "0.5",
ease: "easeInOut",
}}
position="absolute"
right="24px"
mt={1}
gap={2}
p={6}
display="flex"
flexDirection="column"
bg="gray.800"
w="430px"
borderRadius={4}
boxShadow={boxShadow}
zIndex="popover"
>
<Flex>
<Heading as="h6" variant="h6" fontWeight={600}>
Want to
<Text as="span" color="accent.main" pl={1}>
Deploy, Query, or Execute?
</Text>
</Heading>
</Flex>
<Text variant="body2" color="text.main" my={1}>
Turn on Dev Features to get full access to our deploy, query, execute
and other developer features through{" "}
<Text as="span" fontWeight={600}>
sidebar navigation
</Text>
.
</Text>
<Flex direction="column" gap={2}>
<Button onClick={() => setIsDevMode(true)}>Turn on Dev Feature!</Button>
<Button variant="outline-primary" onClick={() => setIsDevMode(false)}>
Use Celatone as Explorer
</Button>
<Text variant="body3" textAlign="center" color="text.dark">
You can change it back anytime
</Text>
</Flex>
</MotionBox>
</AnimatePresence>
);

interface SubHeaderProps {
isExpand: boolean;
isDevMode: Option<boolean>;
setIsDevMode: Dispatch<SetStateAction<Option<boolean>>>;
setIsExpand: Dispatch<SetStateAction<boolean>>;
}
const SubHeader = ({
isExpand,
isDevMode,
setIsDevMode,
setIsExpand,
}: SubHeaderProps) => {
const SubHeader = () => {
const wasmConfig = useWasmConfig({ shouldRedirect: false });
const poolConfig = usePoolConfig({ shouldRedirect: false });
const govConfig = useGovConfig({ shouldRedirect: false });

const prevIsDevModeRef = useRef<boolean>(Boolean(isDevMode));

const subHeaderMenu: SubHeaderMenuInfo[] = [
{ name: "Overview", slug: "/", icon: "home" },
{ name: "Transactions", slug: "/txs", icon: "file" },
Expand All @@ -124,92 +38,50 @@ const SubHeader = ({

const activeColor = "primary.light";

const switchHighlight: CSSProperties = {
borderRadius: "4px",
padding: "6px 8px",
backgroundColor: "var(--chakra-colors-gray-700)",
};

useEffect(() => {
// Basic to dev and nav is collapse -> should exapnd
if (isDevMode && !prevIsDevModeRef.current && !isExpand) setIsExpand(true);
prevIsDevModeRef.current = Boolean(isDevMode);
}, [isDevMode, isExpand, setIsExpand]);

return (
<>
<Flex px={6} alignItems="center" h="full" justifyContent="space-between">
<Flex h="full">
{subHeaderMenu.map((item) => (
<AppLink href={item.slug} key={item.slug}>
<Flex
alignItems="center"
px={4}
gap={2}
h="full"
borderBottomWidth={2}
borderColor={
isCurrentPage(item.slug) ? activeColor : "transparent"
}
transition="all .25s ease-in-out"
_hover={{ borderColor: activeColor }}
sx={{
_hover: {
"> svg, > p": {
color: activeColor,
transition: "all .25s ease-in-out",
},
borderBottomWidth: 2,
borderColor: activeColor,
<Flex px={6} alignItems="center" h="full" justifyContent="space-between">
<Flex h="full">
{subHeaderMenu.map((item) => (
<AppLink href={item.slug} key={item.slug}>
<Flex
alignItems="center"
px={4}
gap={2}
h="full"
borderBottomWidth={2}
borderColor={
isCurrentPage(item.slug) ? activeColor : "transparent"
}
transition="all .25s ease-in-out"
_hover={{ borderColor: activeColor }}
sx={{
_hover: {
"> svg, > p": {
color: activeColor,
transition: "all .25s ease-in-out",
},
}}
borderBottomWidth: 2,
borderColor: activeColor,
},
}}
>
<CustomIcon
boxSize={3}
name={item.icon}
color={isCurrentPage(item.slug) ? activeColor : "gray.600"}
/>
<Text
variant="body2"
fontWeight={700}
color={isCurrentPage(item.slug) ? activeColor : "text.dark"}
>
<CustomIcon
boxSize={3}
name={item.icon}
color={isCurrentPage(item.slug) ? activeColor : "gray.600"}
/>
<Text
variant="body2"
fontWeight={700}
color={isCurrentPage(item.slug) ? activeColor : "text.dark"}
>
{item.name}
</Text>
</Flex>
</AppLink>
))}
</Flex>
<Tooltip
label="Enable to access to our deploy, query, execute, and other developer features."
placement="bottom"
isDisabled={isDevMode === undefined}
>
<FormControl
display="flex"
alignItems="center"
width="fit-content"
style={isDevMode === undefined ? switchHighlight : undefined}
>
<FormLabel mb={0} cursor="pointer" mr={2}>
<Text variant="body2" color="text.dark" fontWeight={600}>
Dev Features
{item.name}
</Text>
</FormLabel>
<Switch
size="md"
isChecked={isDevMode}
onChange={(e) => {
setIsDevMode(e.target.checked);
}}
/>
</FormControl>
</Tooltip>
</Flex>
</AppLink>
))}
</Flex>
{isDevMode === undefined && (
<FirstLandPrompt setIsDevMode={setIsDevMode} />
)}
</>
</Flex>
);
};

Expand Down
19 changes: 4 additions & 15 deletions src/lib/layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ type LayoutProps = {
const Layout = ({ children }: LayoutProps) => {
const router = useRouter();
const isMobile = useMobile();
const { isExpand, isDevMode, setIsExpand, setIsDevMode } = useNavContext();
const { isExpand, setIsExpand } = useNavContext();

const defaultRow = "70px 48px 1fr";
const mode = useMemo(() => {
Expand All @@ -37,16 +37,9 @@ const Layout = ({ children }: LayoutProps) => {
templateRows: defaultRow,
templateCols: isExpand ? "250px 1fr" : "48px 1fr",
header: <Header />,
subHeader: (
<SubHeader
isExpand={isExpand}
isDevMode={isDevMode}
setIsDevMode={setIsDevMode}
setIsExpand={setIsExpand}
/>
),
subHeader: <SubHeader />,
};
}, [isMobile, isExpand, isDevMode, setIsDevMode, setIsExpand]);
}, [isExpand, isMobile]);

useEffect(() => {
scrollToTop();
Expand Down Expand Up @@ -81,11 +74,7 @@ const Layout = ({ children }: LayoutProps) => {
area="nav"
overflowY="auto"
>
<Navbar
isExpand={isExpand}
setIsExpand={setIsExpand}
isDevMode={isDevMode}
/>
<Navbar isExpand={isExpand} setIsExpand={setIsExpand} />
</GridItem>
</>
)}
Expand Down
25 changes: 25 additions & 0 deletions src/lib/layout/navbar/Collapse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,31 @@ export const CollapseNavMenu = ({
</AppLink>
)
)}
{item.subSection &&
item.subSection.map((section) => (
<div key={section.category}>
{section.submenu.map((subitem) =>
subitem.isDisable ? (
<CollapseNavInfo
key={subitem.slug}
submenu={subitem}
isCurrentPage={isCurrentPage}
/>
) : (
<AppLink
href={subitem.slug}
key={subitem.slug}
onClick={() => AmpTrack(AmpEvent.USE_SIDEBAR)}
>
<CollapseNavInfo
submenu={subitem}
isCurrentPage={isCurrentPage}
/>
</AppLink>
)
)}
</div>
))}
</Box>
))}
</Box>
Expand Down
Loading
Loading