feb9ffd383
New WorkflowOptionalStepsPanel (sibling to Fields/Settings) lets authors add/remove optional steps and set each one's defaultOn, with unknown ids shown as muted removable rows. Wire optionalSteps state through both load paths (incl. the fragment path, which also dropped settings), every flowToIr/serializeGraph call site, and the save handler deps — fixing a stale-closure that dropped defaultOn edits on save. Extract the shared phaseBadge helper. Mobile gets an Optional steps tab too.
108 lines
1.9 KiB
CSS
108 lines
1.9 KiB
CSS
/* WorkflowOptionalStepsPanel — sibling of WorkflowFieldsPanel; mirrors its layout
|
|
* so the optional-steps panel reads consistently alongside Fields/Settings. */
|
|
|
|
.wf-optional-steps-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.wf-optional-steps-header h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.wf-optional-steps-hint,
|
|
.wf-optional-steps-empty {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.wf-optional-steps-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.wf-optional-step-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: var(--space-sm);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm, 6px);
|
|
}
|
|
|
|
.wf-optional-step-item.is-unknown {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.wf-optional-step-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.wf-optional-step-title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wf-optional-step-name {
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.wf-optional-step-name--unknown {
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.wf-optional-step-description {
|
|
font-size: 0.72rem;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.wf-optional-step-default {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.wf-optional-step-remove {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wf-optional-step-remove:hover:not(:disabled) {
|
|
color: var(--danger, #ef4444);
|
|
}
|
|
|
|
.wf-optional-steps-add {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.wf-optional-steps-add-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|