cleanup styles of queue components Part 2 #1786
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
walesch-yan
force-pushed
the
yw-cleanup-css
branch
from
9b0f8f8 to
c275a44
Compare
walesch-yan
commented
Jul 16, 2025
Comment on lines
-227
to
-243
| const padding = i > 0 ? '1em' : '0em'; | ||
| const padding = i > 0 ? '1.5em' : '0.5em'; | ||
| return ( | ||
| <div key={`wedge-${i}`}> | ||
| <div | ||
| className={styles.dataPath} | ||
| style={{ | ||
| borderLeft: '1px solid #DDD', | ||
| borderRight: '1px solid #DDD', | ||
| paddingTop: padding, | ||
| }} | ||
| > | ||
| <div | ||
| style={{ | ||
| borderTop: '1px solid #DDD', | ||
| padding: '0.5em', | ||
| display: 'flex', | ||
| justifyContent: 'space-around', | ||
| alignItems: 'center', |
There was a problem hiding this comment.
Here and also in TaskItem I merged the styles and created 1 single div for both. That is also the reason why I increased the conditional padding in both cases by 0.5em
walesch-yan
commented
Jul 16, 2025
Comment on lines
-231
to
-234
| <i | ||
| style={{ marginLeft: 0 }} | ||
| className="fa fa-copy" | ||
| aria-hidden="true" |
There was a problem hiding this comment.
The removal of this marginLeft style is a consequence of removing the applied style on all font-awesome icons in #1775. Hence, setting marginLeft to 0 is not necessary anymore, as it is the default.
walesch-yan
commented
Jul 16, 2025
Comment on lines
-50
to
-58
| const delTaskCSS = { | ||
| display: 'flex', | ||
| marginLeft: 'auto', | ||
| alignItems: 'center', | ||
| paddingLeft: '10px', | ||
| paddingRight: '10px', | ||
| color: '#d9534f', | ||
| cursor: 'pointer', | ||
| }; |
There was a problem hiding this comment.
moved this to module
walesch-yan
commented
Jul 16, 2025
Comment on lines
-61
to
+58
| let pbarBsStyle = 'info'; | ||
|
|
||
| switch (state) { | ||
| case TASK_RUNNING: { | ||
| taskCSS += ` ${styles.taskRunning}`; | ||
| pbarBsStyle = 'info'; | ||
| break; | ||
| } | ||
| case TASK_COLLECTED: { | ||
| pbarBsStyle = 'success'; | ||
| if ( | ||
| specialTaskCSS === 'Characterisation' && | ||
| diffractionPlanLength === undefined | ||
| ) { | ||
| taskCSS += ` ${styles.taskWarning}`; | ||
| break; | ||
| } | ||
| taskCSS += ` ${styles.taskSuccess}`; | ||
| break; | ||
| } | ||
| case TASK_COLLECT_FAILED: { | ||
| taskCSS += ` ${styles.taskError}`; | ||
| pbarBsStyle = 'danger'; | ||
| break; | ||
| } | ||
| // No default | ||
| } | ||
| taskCSS += ` ${ | ||
| warningTaskCSS ? styles.taskWarning : stateBasedStyles[state] || '' | ||
| }`; |
There was a problem hiding this comment.
A few comments on this:
- instead of passing
specialTaskCSSanddiffractionPLanLength, now only one prop (warningTaskCSS) is passed if the warning style should be applied. OnlyCharacterisationTaskItemuses this prop. - replaced the switch statement with a look-up table for styles.
- removed
pbarStylebecause theProgressBaris only rendered ifstateequalsTASK_RUNNINGhence the conditional setting was unnecessary
walesch-yan
commented
Jul 16, 2025
Comment on lines
-102
to
+88
| <b> | ||
| <span className="node-name" style={{ display: 'flex' }}> | ||
| {pointIDString} {dataLabel} | ||
| {state === TASK_RUNNING && ( | ||
| <span | ||
| style={{ | ||
| width: '150px', | ||
| right: '60px', | ||
| position: 'absolute', | ||
| }} | ||
| > | ||
| <ProgressBar | ||
| variant={pbarBsStyle} | ||
| striped | ||
| style={{ marginBottom: 0, height: '18px' }} | ||
| min={0} | ||
| max={1} | ||
| animated={progress < 1} | ||
| label={`${(progress * 100).toPrecision(3)} %`} | ||
| now={progress} | ||
| /> | ||
| </span> | ||
| )} | ||
| </span> | ||
| </b> | ||
| <span className={styles.nodeName} style={{ fontWeight: 'bold' }}> | ||
| {pointIDString} {dataLabel} | ||
| </span> | ||
| {state === TASK_RUNNING && ( | ||
| <ProgressBar | ||
| variant="info" | ||
| striped | ||
| className={styles.progressBar} | ||
| min={0} | ||
| max={1} | ||
| animated={progress < 1} | ||
| label={`${(progress * 100).toPrecision(3)} %`} | ||
| now={progress} | ||
| /> | ||
| )} | ||
|
|
There was a problem hiding this comment.
replaced span and b tags here with proper styling
marcus-oscarsson
force-pushed
the
yw-cleanup-css
branch
from
c275a44 to
db01813
Compare
github-merge-queue
bot
removed this pull request from the merge queue due to no response for status checks
marcus-oscarsson
removed this pull request from the merge queue due to the queue being cleared
walesch-yan
force-pushed
the
yw-cleanup-css
branch
from
db01813 to
e82858f
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is a follow-up to #1775. It includes the following changes concerning the CSS styles of the queue components:
TaskItemContainer