Skip to content

Commit

Permalink
clean up styles and change order on parents
Browse files Browse the repository at this point in the history
  • Loading branch information
@meganrm
meganrm committed Dec 5, 2023
1 parent a1e004f commit ffad029
Show file tree
Hide file tree
Showing 10 changed files with 178 additions and 153 deletions.
176 changes: 91 additions & 85 deletions src/components/CheckBoxTree/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ interface CheckBoxTreeProps {
setRecentColors: ActionCreator<SetRecentColorsAction>;
}
const CHECKBOX_SPAN_NO = 2;
const LABEL_SPAN_NO = 6;
import styles from "./style.css";

class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
Expand Down Expand Up @@ -124,11 +123,10 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
value.length ? key : ""
)
);

return (
<div className={styles.checkAllCheckbox}>
<SharedCheckbox
title="All"
title="All Agent Types"
showLabel={true}
options={map(treeData, "key" as string)}
onTopLevelCheck={this.toggleAllOnOff}
Expand All @@ -140,57 +138,54 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
);
};

renderRowWithNoChildren = (nodeData: AgentDisplayNode) => {
const { agentsChecked, agentsHighlighted } = this.props;
renderHighlightNoChildren = (nodeData: AgentDisplayNode) => {
const { agentsHighlighted } = this.props;
const isHighlighted =
isEmpty(agentsHighlighted) || !agentsHighlighted[nodeData.title]
? false
: agentsHighlighted[nodeData.title].includes(nodeData.title);

return (
<Checkbox
className={[styles.noChildrenRow].join(" ")}
key={`${nodeData.title}-highlight`}
checkboxType={CHECKBOX_TYPE_STAR}
value={nodeData.title}
checked={isHighlighted}
onChange={(event) =>
this.onAgentWithNoTagsChangeHighlight(event, nodeData.title)
}
/>
);
};

renderCheckBoxNoChildren = (nodeData: AgentDisplayNode) => {
const { agentsChecked } = this.props;

const isVisible =
isEmpty(agentsChecked) || !agentsChecked[nodeData.title]
? false
: agentsChecked[nodeData.title].includes(nodeData.title);

return (
<Row
className={[styles.noChildrenRow, styles.checkboxSet].join(" ")}
>
<Col span={12}>
<Checkbox
className={"header-checkbox"}
key={`${nodeData.title}-highlight`}
checkboxType={CHECKBOX_TYPE_STAR}
value={nodeData.title}
checked={isHighlighted}
onChange={(event) =>
this.onAgentWithNoTagsChangeHighlight(
event,
nodeData.title
)
}
/>
</Col>
<Col span={12}>
<Checkbox
className={"header-checkbox"}
key={`${nodeData.title}-onoff`}
checked={isVisible}
value={nodeData.title}
onChange={(event) =>
this.onAgentWithNoTagsChangeVisible(
event,
nodeData.title
)
}
/>
</Col>
</Row>
<Checkbox
className={"header-checkbox"}
key={`${nodeData.title}-onoff`}
checked={isVisible}
value={nodeData.title}
onChange={(event) =>
this.onAgentWithNoTagsChangeVisible(event, nodeData.title)
}
/>
);
};

renderSharedCheckboxes = (nodeData: AgentDisplayNode) => (
<Row key="actions" className={styles.checkboxSet}>
<Col span={12}>
renderSharedCheckboxes = (
nodeData: AgentDisplayNode,
type: CHECKBOX_TYPE_STAR | undefined
) => {
if (type === CHECKBOX_TYPE_STAR) {
return (
<SharedCheckbox
title={nodeData.title}
showLabel={false}
Expand All @@ -202,8 +197,9 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
}
isHeader={true}
/>
</Col>
<Col span={12}>
);
} else {
return (
<SharedCheckbox
title={nodeData.title}
showLabel={false}
Expand All @@ -212,9 +208,9 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
checkedList={this.props.agentsChecked[nodeData.title] || []}
isHeader={true}
/>
</Col>
</Row>
);
);
}
};
render() {
const {
agentsHighlighted,
Expand All @@ -226,22 +222,6 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
} = this.props;
return treeData.length > 0 ? (
<div className={styles.container}>
<Row className={styles.colLabels}>
<Col span={CHECKBOX_SPAN_NO} offset={4}>
<label
className={classNames([
"icon-moon",
styles.starIcon,
])}
/>
</Col>
<Col span={CHECKBOX_SPAN_NO}>
<label>show</label>
</Col>
<Col flex={LABEL_SPAN_NO} offset={1}>
<label>type</label>
</Col>
</Row>
<TreeNode headerContent={this.renderCheckAllButton()} />
{treeData.map((nodeData) => {
const childrenHaveDifferentColors =
Expand All @@ -253,8 +233,11 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
headerContent={
<>
{nodeData.children.length
? this.renderSharedCheckboxes(nodeData)
: this.renderRowWithNoChildren(
? this.renderSharedCheckboxes(
nodeData,
CHECKBOX_TYPE_STAR
)
: this.renderHighlightNoChildren(
nodeData
)}{" "}
<ColorSwatch
Expand All @@ -268,6 +251,14 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
setColorChange={setColorChange}
setRecentColors={setRecentColors}
/>
{nodeData.children.length
? this.renderSharedCheckboxes(
nodeData,
undefined
)
: this.renderCheckBoxNoChildren(
nodeData
)}{" "}
<Text
style={{ maxWidth: 143 }}
ellipsis={{
Expand Down Expand Up @@ -302,6 +293,42 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
}
/>
</Col>
<Row className={styles.subMenu}>
<Col span={CHECKBOX_SPAN_NO} offset={3}>
{nodeData.children.map((value) => {
return (
<div
key={`label-${nodeData.title}-${value.value}-color`}
className={
styles.rowLabelContainer
}
>
<ColorSwatch
color={
value.color ||
nodeData.color
}
agentName={
nodeData.title
}
tags={[
value.value as string,
]}
recentColors={
recentColors
}
setColorChange={
setColorChange
}
setRecentColors={
setRecentColors
}
/>
</div>
);
})}
</Col>
</Row>
<Col span={CHECKBOX_SPAN_NO}>
<CheckboxTreeSubmenu
options={nodeData.children}
Expand Down Expand Up @@ -329,27 +356,6 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
styles.rowLabelContainer
}
>
<ColorSwatch
color={
value.color ||
nodeData.color
}
agentName={
nodeData.title
}
tags={[
value.value as string,
]}
recentColors={
recentColors
}
setColorChange={
setColorChange
}
setRecentColors={
setRecentColors
}
/>
<label
className={
styles.rowLabel
Expand Down
21 changes: 10 additions & 11 deletions src/components/CheckBoxTree/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,6 @@
line-height: 1;
}

.container .col-labels {
background-color: var(--dark-theme-sidebar-item-bg);
margin-bottom: 3px;
}

.container .col-labels label {
font-size: 10px;
text-transform: uppercase;
}

.container :global(.ant-checkbox-inner) {
border-color: var(--warm-gray);
}
Expand All @@ -64,7 +54,7 @@

.check-all-checkbox {
width: 100%;
margin-left: 60px;
margin-left: 67px;
padding: 10px 0;
}

Expand All @@ -88,4 +78,13 @@

.container :global(.ant-typography-ellipsis) {
color: var(--dark-theme-sidebar-text)
}

.container :global(.header-checkbox) {
margin-left: 8px;
top: 3px;
}

.container :global(.header-checkbox .ant-checkbox) {
top: 3px;
}
4 changes: 4 additions & 0 deletions src/components/CheckboxTreeSubmenu/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,8 @@
.container :global(.ant-checkbox-wrapper) {
width: 37px;
height: 40px;
}

.container span {
top: 0;
}
44 changes: 23 additions & 21 deletions src/components/ColorPicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const ColorPicker = ({
setColorChange,
setRecentColors,
}: ColorPickerProps) => {
const [color, setColor] = useState(initialColor);
const [color, setColor] = useState("#000000");
const [debouncedColor] = useDebounce(color, 250);
const isInitialRender = useRef(true);

Expand Down Expand Up @@ -69,33 +69,35 @@ const ColorPicker = ({
};

const renderColorPickerComponent = () => (
<div className={styles.container}>
<div className={styles.colorPicker}>
<HexColorPicker color={color} onChange={setColor} />
<div className={styles.selectionDisplay}>
<div className={styles.oldColorContainer}>
<div
className={styles.oldColor}
style={{ backgroundColor: initialColor }}
onClick={() => {
setColor(initialColor);
}}
></div>
<p> CURRENT </p>
<div className={styles.colorSelections}>
<div className={styles.selection}>
<div
className={styles.largeSwatch}
style={{ backgroundColor: initialColor }}
onClick={() => {
setColor(initialColor);
}}
></div>
<label>Current</label>
</div>
<div className={styles.selection}>
<div
className={styles.largeSwatch}
style={{ backgroundColor: color }}
></div>
<label>New</label>
</div>
</div>
<div className={styles.oldColorContainer}>
<div
className={styles.newColor}
style={{ backgroundColor: color }}
></div>
<p> NEW </p>
</div>
<div className={styles.oldColorContainer}>
<div className={styles.selection}>
<HexColorInput
className={styles.hexInput}
color={color}
onChange={setColor}
/>
<p> HEX </p>
<label>Hex</label>
</div>
</div>
<div
Expand All @@ -120,7 +122,7 @@ const ColorPicker = ({
</Tooltip>
))}
</div>
<p className={styles.recentColorText}> Recent </p>
<h4 className={styles.recentColorText}> Recent </h4>
<div className={styles.colors}>
{recentColors.map((color) => (
<button
Expand Down
Loading

0 comments on commit ffad029

Please sign in to comment.