Skip to content

Commit 9b0f8f8

Browse files
walesch-yanwalesch-yan
committed
cleanup styles of queue components
1 parent f7a156f commit 9b0f8f8

File tree

9 files changed

+120
-210
lines changed

9 files changed

+120
-210
lines changed

‎ui/src/components/SampleQueue/CharacterisationTaskItem.jsx‎

Lines changed: 16 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,7 @@ export default class TaskItem extends Component {
3232
return <span />;
3333
}
3434

35-
return (
36-
<div
37-
style={{
38-
borderLeft: '1px solid #DDD',
39-
borderRight: '1px solid #DDD',
40-
borderBottom: '1px solid #DDD',
41-
padding: '0.5em',
42-
}}
43-
>
44-
{this.getDiffPlan(data)}
45-
</div>
46-
);
35+
return <div className={styles.resultBody}>{this.getDiffPlan(data)}</div>;
4736
}
4837

4938
getDiffPlan(data) {
@@ -217,58 +206,42 @@ export default class TaskItem extends Component {
217206
selected={selected}
218207
show={show}
219208
showContextMenu={showContextMenu}
220-
specialTaskCSS="Characterisation"
209+
warningTaskCSS={
210+
state === TASK_COLLECTED && data.diffractionPlan.length === undefined
211+
} // this is a special prop for emitting a warning signal if the task is collected but has no diffraction plan
221212
state={state}
222213
taskHeaderOnClickHandler={taskHeaderOnClickHandler}
223214
taskHeaderOnContextMenuHandler={taskHeaderOnContextMenuHandler}
224215
>
225216
<div className={styles.taskBody}>
226217
{wedges.map((wedge, i) => {
227-
const padding = i > 0 ? '1em' : '0em';
218+
const padding = i > 0 ? '1.5em' : '0.5em';
228219
return (
229220
<div key={`wedge-${i}`}>
230221
<div
222+
className={styles.dataPath}
231223
style={{
232-
borderLeft: '1px solid #DDD',
233-
borderRight: '1px solid #DDD',
234224
paddingTop: padding,
235225
}}
236226
>
237-
<div
238-
style={{
239-
borderTop: '1px solid #DDD',
240-
padding: '0.5em',
241-
display: 'flex',
242-
justifyContent: 'space-around',
243-
alignItems: 'center',
227+
<b>Path:</b>
228+
{this.wedgePath(wedge)}
229+
<Button
230+
variant="outline-secondary"
231+
style={{ width: '3em' }}
232+
title="Copy path"
233+
onClick={() => {
234+
navigator.clipboard.writeText(`${wedge.parameters.path}`);
244235
}}
245236
>
246-
<b>Path:</b>
247-
{this.wedgePath(wedge)}
248-
<Button
249-
variant="outline-secondary"
250-
style={{ width: '3em' }}
251-
title="Copy path"
252-
onClick={() => {
253-
navigator.clipboard.writeText(
254-
`${wedge.parameters.path}`,
255-
);
256-
}}
257-
>
258-
<i
259-
style={{ marginLeft: 0 }}
260-
className="fa fa-copy"
261-
aria-hidden="true"
262-
/>
263-
</Button>
264-
</div>
237+
<i className="fa fa-copy" aria-hidden="true" />
238+
</Button>
265239
</div>
266240
<Table
267241
striped
268242
bordered
269243
hover
270244
onClick={this.showForm}
271-
style={{ fontSize: 'smaller', marginBottom: 0 }}
272245
className={styles.taskParametersTable}
273246
>
274247
<thead>

‎ui/src/components/SampleQueue/EnergyScanTaskItem.jsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,7 @@ export default class EnergyScanTaskItem extends Component {
3333
: '';
3434

3535
return (
36-
<div
37-
style={{
38-
borderLeft: '1px solid #DDD',
39-
borderRight: '1px solid #DDD',
40-
borderBottom: '1px solid #DDD',
41-
padding: '0.5em',
42-
}}
43-
>
36+
<div className={styles.resultBody}>
4437
<a href={link} target="_blank" rel="noreferrer">
4538
{' '}
4639
View Results in ISPyB

‎ui/src/components/SampleQueue/Item.module.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
.nodeName {
3232
margin-left: 4px;
3333
cursor: pointer;
34+
display: flex;
3435
}
3536

3637
.taskBody {
@@ -70,3 +71,37 @@
7071
background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 5%);
7172
background-color: rgba(217, 83, 79, 0.56) !important;
7273
}
74+
75+
.resultBody {
76+
border-left: 1px solid #ddd;
77+
border-right: 1px solid #ddd;
78+
border-bottom: 1px solid #ddd;
79+
padding: 0.5em;
80+
}
81+
82+
.dataPath {
83+
border-left: 1px solid #ddd;
84+
border-right: 1px solid #ddd;
85+
border-top: 1px solid #ddd;
86+
padding: 0.5em;
87+
display: flex;
88+
justify-content: space-around;
89+
align-items: 'center';
90+
}
91+
92+
.delTask {
93+
display: flex;
94+
margin-left: auto;
95+
align-items: center;
96+
padding-left: 10px;
97+
padding-right: 10px;
98+
color: #d9534f;
99+
cursor: pointer;
100+
}
101+
102+
.progressBar {
103+
height: 18px;
104+
width: 150px;
105+
right: 60px;
106+
margin-left: 10px;
107+
}

‎ui/src/components/SampleQueue/TaskItem.jsx‎

Lines changed: 14 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,7 @@ export default class TaskItem extends Component {
3535
);
3636
}
3737
return (
38-
<div
39-
style={{
40-
borderLeft: '1px solid #DDD',
41-
borderRight: '1px solid #DDD',
42-
borderBottom: '1px solid #DDD',
43-
padding: '0.5em',
44-
}}
45-
>
38+
<div className={styles.resultBody}>
4639
<a
4740
href="#"
4841
onClick={() =>
@@ -197,51 +190,34 @@ export default class TaskItem extends Component {
197190
>
198191
<div className={styles.taskBody}>
199192
{wedges.map((wedge, i) => {
200-
const padding = i > 0 ? '1em' : '0em';
193+
const padding = i > 0 ? '1.5em' : '0.5em';
201194
return (
202195
<div key={`wedge-${i}`}>
203196
<div
197+
className={styles.dataPath}
204198
style={{
205-
borderLeft: '1px solid #DDD',
206-
borderRight: '1px solid #DDD',
207199
paddingTop: padding,
208200
}}
209201
>
210-
<div
211-
style={{
212-
borderTop: '1px solid #DDD',
213-
padding: '0.5em',
214-
display: 'flex',
215-
justifyContent: 'space-around',
216-
alignItems: 'center',
202+
<b>Path:</b>
203+
{this.wedgePath(wedge)}
204+
<Button
205+
variant="outline-secondary"
206+
style={{ width: '3em' }}
207+
title="Copy path"
208+
onClick={() => {
209+
navigator.clipboard.writeText(`${wedge.parameters.path}`);
217210
}}
218211
>
219-
<b>Path:</b>
220-
{this.wedgePath(wedge)}
221-
<Button
222-
variant="outline-secondary"
223-
style={{ width: '3em' }}
224-
title="Copy path"
225-
onClick={() => {
226-
navigator.clipboard.writeText(
227-
`${wedge.parameters.path}`,
228-
);
229-
}}
230-
>
231-
<i
232-
style={{ marginLeft: 0 }}
233-
className="fa fa-copy"
234-
aria-hidden="true"
235-
/>
236-
</Button>
237-
</div>
212+
<i className="fa fa-copy" aria-hidden="true" />
213+
</Button>
238214
</div>
215+
239216
<Table
240217
striped
241218
bordered
242219
hover
243220
onClick={this.showForm}
244-
style={{ fontSize: 'smaller', marginBottom: 0 }}
245221
className={styles.taskParametersTable}
246222
>
247223
<thead>

‎ui/src/components/SampleQueue/TaskItemContainer.jsx‎

Lines changed: 27 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ import {
99
} from '../../constants';
1010
import styles from './Item.module.css';
1111

12+
const stateBasedStyles = {
13+
[TASK_RUNNING]: styles.taskRunning,
14+
[TASK_COLLECTED]: styles.taskSuccess,
15+
[TASK_COLLECT_FAILED]: styles.taskError,
16+
};
17+
1218
export default class TaskItemContainer extends Component {
1319
constructor(props) {
1420
super(props);
@@ -37,54 +43,19 @@ export default class TaskItemContainer extends Component {
3743
const {
3844
children,
3945
dataLabel,
40-
diffractionPlanLength = undefined,
4146
pointIDString,
4247
progress,
4348
selected,
4449
show,
4550
showContextMenu,
46-
specialTaskCSS = '',
51+
warningTaskCSS = false,
4752
state,
4853
} = this.props;
4954

50-
const delTaskCSS = {
51-
display: 'flex',
52-
marginLeft: 'auto',
53-
alignItems: 'center',
54-
paddingLeft: '10px',
55-
paddingRight: '10px',
56-
color: '#d9534f',
57-
cursor: 'pointer',
58-
};
59-
6055
let taskCSS = selected ? styles.taskHeadSelected : styles.taskHead;
61-
let pbarBsStyle = 'info';
62-
63-
switch (state) {
64-
case TASK_RUNNING: {
65-
taskCSS += ` ${styles.taskRunning}`;
66-
pbarBsStyle = 'info';
67-
break;
68-
}
69-
case TASK_COLLECTED: {
70-
pbarBsStyle = 'success';
71-
if (
72-
specialTaskCSS === 'Characterisation' &&
73-
diffractionPlanLength === undefined
74-
) {
75-
taskCSS += ` ${styles.taskWarning}`;
76-
break;
77-
}
78-
taskCSS += ` ${styles.taskSuccess}`;
79-
break;
80-
}
81-
case TASK_COLLECT_FAILED: {
82-
taskCSS += ` ${styles.taskError}`;
83-
pbarBsStyle = 'danger';
84-
break;
85-
}
86-
// No default
87-
}
56+
taskCSS += ` ${
57+
warningTaskCSS ? styles.taskWarning : stateBasedStyles[state] || ''
58+
}`;
8859

8960
return (
9061
<div className={styles.nodeSample}>
@@ -99,36 +70,26 @@ export default class TaskItemContainer extends Component {
9970
onContextMenu={this.taskHeaderOnContextMenu}
10071
>
10172
<div className={taskCSS} style={{ display: 'flex' }}>
102-
<b>
103-
<span className="node-name" style={{ display: 'flex' }}>
104-
{pointIDString} {dataLabel}
105-
{state === TASK_RUNNING && (
106-
<span
107-
style={{
108-
width: '150px',
109-
right: '60px',
110-
position: 'absolute',
111-
}}
112-
>
113-
<ProgressBar
114-
variant={pbarBsStyle}
115-
striped
116-
style={{ marginBottom: 0, height: '18px' }}
117-
min={0}
118-
max={1}
119-
animated={progress < 1}
120-
label={`${(progress * 100).toPrecision(3)} %`}
121-
now={progress}
122-
/>
123-
</span>
124-
)}
125-
</span>
126-
</b>
73+
<span className={styles.nodeName} style={{ fontWeight: 'bold' }}>
74+
{pointIDString} {dataLabel}
75+
</span>
76+
{state === TASK_RUNNING && (
77+
<ProgressBar
78+
variant="info"
79+
striped
80+
className={styles.progressBar}
81+
min={0}
82+
max={1}
83+
animated={progress < 1}
84+
label={`${(progress * 100).toPrecision(3)} %`}
85+
now={progress}
86+
/>
87+
)}
88+
12789
{state === TASK_UNCOLLECTED && (
12890
<i
129-
className="fas fa-times"
91+
className={`fas fa-times ${styles.delTask}`}
13092
onClick={this.deleteTask}
131-
style={delTaskCSS}
13293
/>
13394
)}
13495
</div>

‎ui/src/components/SampleQueue/TodoItem.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function TodoItem({ sampleData }) {
2222
return (
2323
<div className={styles.nodeSample}>
2424
<div className={styles.taskHead}>
25-
<div className={`d-flex ${styles.nodeName}`}>
25+
<div className={styles.nodeName}>
2626
<p className="pt-1 me-auto">
2727
<b>{`${sampleID} `}</b>
2828
{`${proteinAcronym} ${sampleName}`}

‎ui/src/components/SampleQueue/TodoTree.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function TodoTree(props) {
3030
return (
3131
<ListGroup variant="flush">
3232
<ListGroup.Item
33-
className={`d-flex ${styles.listHead}`}
33+
className={styles.listHead}
3434
style={{ borderBottom: 'none' }}
3535
>
3636
<Form className="me-auto">
@@ -53,7 +53,7 @@ export default function TodoTree(props) {
5353
</Button>
5454
</div>
5555
</ListGroup.Item>
56-
<ListGroup.Item className={`d-flex ${styles.listBody}`}>
56+
<ListGroup.Item className={styles.listBody}>
5757
{current_list.map((key) => {
5858
const sampleData = sampleList[key];
5959
return <TodoItem sampleData={sampleData} key={`Sample ${key}`} />;

0 commit comments

Comments
 (0)