Skip to content

Commit c3bb351

Browse files
garrettlchowgarrettlchow
committed
styled link controls
1 parent 5fc0a63 commit c3bb351

File tree

2 files changed

+170
-95
lines changed

2 files changed

+170
-95
lines changed

‎src/app/components/StateRoute/ComponentMap/LinkControls.tsx

Lines changed: 68 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,76 @@
1-
/* eslint-disable jsx-a11y/label-has-associated-control */
21
import React from 'react';
3-
import { LinkControlProps, ControlStyles, DropDownStyle, Node } from '../../../FrontendTypes';
42

5-
// Font size of the Controls label and Dropdowns
6-
const controlStyles: ControlStyles = {
7-
padding: '10px',
8-
};
9-
10-
const dropDownStyle: DropDownStyle = {
11-
margin: '0.1em',
12-
fontFamily: 'Roboto, sans-serif',
13-
borderRadius: '4px',
14-
borderStyle: 'solid',
15-
borderWidth: '1px',
16-
backgroundColor: '#d9d9d9',
17-
color: '#161617',
18-
padding: '2px',
19-
};
20-
21-
// use BFS to put all the nodes under snapShots(which is the tree node) into an array
22-
const nodeList: Node[] = [];
23-
24-
const collectNodes = (node: Node): void => {
25-
nodeList.splice(0, nodeList.length);
26-
/* We used the .splice method here to ensure that nodeList
27-
did not accumulate with page refreshes */
28-
nodeList.push(node);
29-
for (let i = 0; i < nodeList.length; i += 1) {
30-
const cur = nodeList[i];
31-
if (cur.children?.length > 0) {
32-
cur.children.forEach((child) => nodeList.push(child));
3+
const LinkControls = ({
4+
linkType,
5+
stepPercent,
6+
setOrientation,
7+
setLinkType,
8+
setStepPercent,
9+
setSelectedNode,
10+
snapShots,
11+
}) => {
12+
const collectNodes = (node) => {
13+
const nodeList = [];
14+
nodeList.push(node);
15+
for (let i = 0; i < nodeList.length; i += 1) {
16+
const cur = nodeList[i];
17+
if (cur.children?.length > 0) {
18+
cur.children.forEach((child) => nodeList.push(child));
19+
}
3320
}
34-
}
35-
};
21+
return nodeList;
22+
};
3623

37-
export default function LinkControls({
38-
linkType, // from linkType local state (initially 'vertical') in 'ComponentMap'
39-
stepPercent, // from stepPercent local state (initially '0.5') in 'ComponentMap'
40-
setOrientation, // from the orientation local state in 'ComponentMap'
41-
setLinkType, // from the linkType local state in 'ComponentMap'
42-
setStepPercent, // from the stepPercent local state in 'ComponentMap'
43-
setSelectedNode, // from the selectedNode local state in 'ComponentMap'
44-
snapShots,
45-
}: LinkControlProps): JSX.Element {
46-
collectNodes(snapShots);
24+
const nodeList = collectNodes(snapShots);
4725

4826
return (
49-
<div className='comp-map-options' style={controlStyles}>
50-
{' '}
51-
{/* This is a non-breaking space - Prevents an automatic line break at this position */}
52-
&nbsp;&nbsp;
53-
<label>Orientation:</label>{' '}
54-
{/* Toggle record button to pause state changes on target application */}
55-
{/* Controls for the Orientation selection */}
56-
&nbsp;
57-
<select
58-
onClick={(e) => e.stopPropagation()}
59-
onChange={(e) => setOrientation(e.target.value)}
60-
style={dropDownStyle}
61-
>
62-
<option value='vertical'>Vertical</option>
63-
<option value='horizontal'>Horizontal</option>
64-
</select>
65-
&nbsp;&nbsp;
66-
<label>Link:</label> {/* Controls for the link selections. */}
67-
&nbsp;
68-
<select
69-
onClick={(e) => e.stopPropagation()}
70-
onChange={(e) => setLinkType(e.target.value)}
71-
style={dropDownStyle}
72-
>
73-
<option value='step'>Step</option>
74-
<option value='diagonal'>Diagonal</option>
75-
<option value='line'>Line</option>
76-
</select>
77-
<label> Select:</label> {/* Controls for the select selections. */}
78-
&nbsp;
79-
<select
80-
id='selectInput'
81-
name='nodeOptions'
82-
onChange={(e) => setSelectedNode(e.target.value)}
83-
style={dropDownStyle}
84-
>
85-
{nodeList.map(
86-
(node) =>
87-
node.children.length > 0 && (
27+
<div className='link-controls'>
28+
<div className='control-group'>
29+
<label className='control-label'>Orientation:</label>
30+
<select
31+
onClick={(e) => e.stopPropagation()}
32+
onChange={(e) => setOrientation(e.target.value)}
33+
className='control-select'
34+
>
35+
<option value='vertical'>Vertical</option>
36+
<option value='horizontal'>Horizontal</option>
37+
</select>
38+
</div>
39+
40+
<div className='control-group'>
41+
<label className='control-label'>Link:</label>
42+
<select
43+
onClick={(e) => e.stopPropagation()}
44+
onChange={(e) => setLinkType(e.target.value)}
45+
className='control-select'
46+
>
47+
<option value='step'>Step</option>
48+
<option value='diagonal'>Diagonal</option>
49+
<option value='line'>Line</option>
50+
</select>
51+
</div>
52+
53+
<div className='control-group'>
54+
<label className='control-label'>Select:</label>
55+
<select
56+
id='selectInput'
57+
name='nodeOptions'
58+
onChange={(e) => setSelectedNode(e.target.value)}
59+
className='control-select'
60+
>
61+
{nodeList.map((node) =>
62+
node.children.length > 0 ? (
8863
<option key={node.name} value={node.name}>
8964
{node.name}
9065
</option>
91-
),
92-
)}
93-
</select>
94-
{/* This is the slider control for the step option */}
66+
) : null,
67+
)}
68+
</select>
69+
</div>
70+
9571
{linkType === 'step' && (
96-
<>
97-
&nbsp;&nbsp;
98-
<label>Step:</label>
99-
&nbsp;
72+
<div className='control-group'>
73+
<label className='control-label'>Step:</label>
10074
<input
10175
onClick={(e) => e.stopPropagation()}
10276
type='range'
@@ -106,9 +80,12 @@ export default function LinkControls({
10680
onChange={(e) => setStepPercent(Number(e.target.value))}
10781
value={stepPercent}
10882
disabled={linkType !== 'step'}
83+
className='control-range'
10984
/>
110-
</>
85+
</div>
11186
)}
11287
</div>
11388
);
114-
}
89+
};
90+
91+
export default LinkControls;

‎src/app/styles/components/_componentMap.scss

Lines changed: 102 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
box-shadow: 10px 10px rgb(163, 205, 24);
33
}
44

5-
.comp-map-options {
6-
color: $map-options-label;
7-
}
8-
95
.compMapParentText {
106
fill: $map-parent-text;
117
}
@@ -26,3 +22,105 @@
2622
.compMapRootText {
2723
fill: $map-root-text;
2824
}
25+
26+
.link-controls {
27+
display: flex;
28+
align-items: center;
29+
gap: 16px;
30+
padding: 16px;
31+
background: white;
32+
}
33+
34+
.control-group {
35+
display: flex;
36+
align-items: center;
37+
gap: 8px;
38+
}
39+
40+
.control-label {
41+
font-size: 14px;
42+
font-weight: 500;
43+
color: #4b5563;
44+
user-select: none;
45+
}
46+
47+
.control-select {
48+
background-color: #f9fafb;
49+
border: 1px solid #e5e7eb;
50+
color: #374151;
51+
font-size: 14px;
52+
padding: 6px 12px;
53+
border-radius: 6px;
54+
min-width: 100px;
55+
cursor: pointer;
56+
transition: all 200ms ease;
57+
appearance: none;
58+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
59+
background-repeat: no-repeat;
60+
background-position: right 8px center;
61+
background-size: 16px;
62+
}
63+
64+
.control-select:hover {
65+
border-color: #d1d5db;
66+
background-color: #f3f4f6;
67+
}
68+
69+
.control-select:focus {
70+
outline: none;
71+
border-color: #14b8a6;
72+
box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
73+
}
74+
75+
.control-range {
76+
appearance: none;
77+
width: 120px;
78+
height: 4px;
79+
border-radius: 2px;
80+
background: #e5e7eb;
81+
outline: none;
82+
margin: 0;
83+
cursor: pointer;
84+
}
85+
86+
.control-range::-webkit-slider-thumb {
87+
appearance: none;
88+
width: 16px;
89+
height: 16px;
90+
border-radius: 50%;
91+
background: #14b8a6;
92+
cursor: pointer;
93+
border: none;
94+
transition: transform 0.2s ease;
95+
}
96+
97+
.control-range::-moz-range-thumb {
98+
width: 16px;
99+
height: 16px;
100+
border-radius: 50%;
101+
background: #14b8a6;
102+
cursor: pointer;
103+
border: none;
104+
transition: transform 0.2s ease;
105+
}
106+
107+
.control-range::-webkit-slider-thumb:hover {
108+
transform: scale(1.1);
109+
}
110+
111+
.control-range::-moz-range-thumb:hover {
112+
transform: scale(1.1);
113+
}
114+
115+
.control-range:disabled {
116+
opacity: 0.5;
117+
cursor: not-allowed;
118+
}
119+
120+
.control-range:disabled::-webkit-slider-thumb {
121+
cursor: not-allowed;
122+
}
123+
124+
.control-range:disabled::-moz-range-thumb {
125+
cursor: not-allowed;
126+
}

0 commit comments

Comments
 (0)