GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

add colors for different value types

Browse Source
This commit is contained in:
AykutSarac 2022-08-13 13:48:06 +03:00
parent b4f6a8f5aa
commit 94231aca10
5 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/CustomNode/ObjectNode.tsx
View File

@ -25,6 +25,7 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
data-y={y}
key={idx}
width={width}
value={val[1]}
>
<Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
{val[1]}

18
src/components/CustomNode/styles.tsx
View File

@ -1,4 +1,10 @@
import styled from "styled-components";
import styled, { DefaultTheme } from "styled-components";
function getTypeColor(value: string, theme: DefaultTheme) {
if (!Number.isNaN(+value)) return "#FD0079";
if (value === "true") return theme.TEXT_POSITIVE;
if (value === "false") return theme.TEXT_DANGER;
}
export const StyledTextWrapper = styled.div`
display: flex;
@ -56,14 +62,20 @@ export const StyledKey = styled.span<{
}>`
font-weight: 500;
color: ${({ theme, objectKey, parent }) =>
parent ? theme.NODE_KEY : objectKey ? "#5c87ff" : theme.TEXT_POSITIVE};
parent
? theme.NODE_KEY
: objectKey
? theme.OBJECT_KEY
: theme.TEXT_POSITIVE};
font-size: ${({ parent }) => parent && "14px"};
`;
export const StyledRow = styled.span<{ width: number }>`
export const StyledRow = styled.span<{ width: number; value: string }>`
height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 auto;
width: ${({ width }) => `${width - 20}px`};
color: ${({ theme, value }) => getTypeColor(value, theme)};
`;

4
src/constants/theme.ts
View File

@ -23,6 +23,7 @@ export const darkTheme: DefaultTheme = {
BLACK_SECONDARY: "#23272A",
SILVER_DARK: "#4D4D4D",
NODE_KEY: "#FAA81A",
OBJECT_KEY: "#59b8ff",
INTERACTIVE_NORMAL: "#b9bbbe",
INTERACTIVE_HOVER: "#dcddde",
@ -42,11 +43,12 @@ export const lightTheme: DefaultTheme = {
BLACK_SECONDARY: "#F2F2F2",
SILVER_DARK: "#CCCCCC",
NODE_KEY: "#DC3790",
OBJECT_KEY: "#0260E8",
INTERACTIVE_NORMAL: "#4f5660",
INTERACTIVE_HOVER: "#2e3338",
INTERACTIVE_ACTIVE: "#060607",
BACKGROUND_NODE: "#FFFFFF",
BACKGROUND_NODE: "#FAFAFA",
BACKGROUND_TERTIARY: "#e3e5e8",
BACKGROUND_SECONDARY: "#f2f3f5",
BACKGROUND_PRIMARY: "#FFFFFF",

2
src/containers/Editor/LiveEditor/helpers.ts
View File

@ -48,7 +48,7 @@ export function getEdgeNodes(
data: {
isParent: el.parent,
},
width: isExpanded ? 35 + longestLine * 8 : 180,
width: isExpanded ? 35 + longestLine * (el.parent ? 9 : 8) : 180,
height,
});
} else {

1
src/typings/styled.d.ts vendored
View File

@ -26,6 +26,7 @@ declare module "styled-components" {
SILVER_DARK: string;
PRIMARY: string;
NODE_KEY: string;
OBJECT_KEY: string;
INTERACTIVE_NORMAL: string;
INTERACTIVE_HOVER: string;