+
| Initial scope | | | ',
...properties.map(({ name = '', type = '' }) => {
- return `| ${name} | | ${type || 'Any'} | |
`
+ return `| ${name} | | ${type || 'Any'} |
`
}),
]
}
@@ -1754,7 +1754,7 @@ export default {
mxConstants.CONNECT_HANDLE_FILLCOLOR = '#4D7281'
mxConstants.VALID_COLOR = '#A7D0E3'
- mxConstants.GUIDE_COLOR = '#2D2D2D'
+ mxConstants.GUIDE_COLOR = '162425'
mxConstants.GUIDE_STROKEWIDTH = 1
// Creates the default style for vertices
@@ -1796,7 +1796,7 @@ export default {
style[mxConstants.STYLE_HORIZONTAL] = false
style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_MIDDLE
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE
- style[mxConstants.STYLE_FILLCOLOR] = 'white'
+ style[mxConstants.STYLE_FILLCOLOR] = 'var(--white)'
style[mxConstants.STYLE_STROKECOLOR] = 'var(--dark)'
style[mxConstants.STYLE_STROKEWIDTH] = 0
style[mxConstants.STYLE_STROKEWIDTH] = 2
@@ -1932,7 +1932,7 @@ export default {
}
// Image for fixed point
- mxConstraintHandler.prototype.pointImage = new mxImage(`${mxClient.imageBasePath}/connection-point.svg`, 8, 8)
+ mxConstraintHandler.prototype.pointImage = new mxImage(this.getIcon('connection-point'), 8, 8)
// On hover outline for fixed point
mxConstraintHandler.prototype.createHighlightShape = function () {
@@ -1959,6 +1959,8 @@ export default {
dragElt.style.width = `${prototype.geometry.width}px`
dragElt.style.height = `${prototype.geometry.height}px`
+ icon = this.getIcon(icon, this.currentTheme)
+
const img = toolbar.addMode(title, icon, funct)
const ds = mxUtils.makeDraggable(img, graph, funct, dragElt, null, null, this.graph.autoscroll, true)
@@ -2415,10 +2417,10 @@ export default {
this.highlights = []
// Handle first cell & edge
- this.highlights[this.highlights.push(new mxCellHighlight(this.graph, '#719430', 2)) - 1].highlight(this.graph.view.getState(this.graph.model.getCell(this.dryRun.cellID)))
+ this.highlights[this.highlights.push(new mxCellHighlight(this.graph, 'var(--success)', 2)) - 1].highlight(this.graph.view.getState(this.graph.model.getCell(this.dryRun.cellID)))
const firstEdge = this.graph.model.getEdgesBetween(this.graph.model.getCell(this.dryRun.cellID), this.graph.model.getCell(firstStepID), true)[0]
if (firstEdge) {
- this.highlights[this.highlights.push(new mxCellHighlight(this.graph, '#719430', 2)) - 1].highlight(this.graph.view.getState(firstEdge))
+ this.highlights[this.highlights.push(new mxCellHighlight(this.graph, 'var(--success)', 2)) - 1].highlight(this.graph.view.getState(firstEdge))
}
// Handle others
@@ -2432,7 +2434,7 @@ export default {
if (cell && cell.index !== 0) {
this.graph.model.getEdgesBetween(this.graph.model.getCell(cell.parentID), this.graph.model.getCell(stepID), true)
.forEach(edge => {
- this.highlights[this.highlights.push(new mxCellHighlight(this.graph, '#719430', 2)) - 1].highlight(this.graph.view.getState(edge))
+ this.highlights[this.highlights.push(new mxCellHighlight(this.graph, 'var(--success)', 2)) - 1].highlight(this.graph.view.getState(edge))
})
}
} else {
@@ -2462,7 +2464,7 @@ export default {
time.sum += stepTime
this.graph.model.getEdgesBetween(this.graph.model.getCell(parentID), this.graph.model.getCell(stepID), true)
.forEach(edge => {
- this.highlights[this.highlights.push(new mxCellHighlight(this.graph, '#719430', 2)) - 1].highlight(this.graph.view.getState(edge))
+ this.highlights[this.highlights.push(new mxCellHighlight(this.graph, 'var(--success)', 2)) - 1].highlight(this.graph.view.getState(edge))
})
})
@@ -2471,14 +2473,14 @@ export default {
}
// Set info overlay
- const time = new mxCellOverlay(new mxImage(`${mxClient.imageBasePath}/clock-${error ? 'danger' : 'success'}.svg`, 16, 16), `${log}`)
+ const time = new mxCellOverlay(new mxImage(this.getIcon(`clock-${error ? 'danger' : 'success'}`), 16, 16), `${log}`)
this.graph.addCellOverlay(this.graph.model.getCell(stepID), time)
// Highlight cell based on error
if (error) {
- this.highlights[this.highlights.push(new mxCellHighlight(this.graph, '#E54122', 2)) - 1].highlight(this.graph.view.getState(this.graph.model.getCell(stepID)))
+ this.highlights[this.highlights.push(new mxCellHighlight(this.graph, 'var(--danger)', 2)) - 1].highlight(this.graph.view.getState(this.graph.model.getCell(stepID)))
} else {
- this.highlights[this.highlights.push(new mxCellHighlight(this.graph, '#719430', 2)) - 1].highlight(this.graph.view.getState(this.graph.model.getCell(stepID)))
+ this.highlights[this.highlights.push(new mxCellHighlight(this.graph, 'var(--success)', 2)) - 1].highlight(this.graph.view.getState(this.graph.model.getCell(stepID)))
}
}
})
@@ -2537,6 +2539,10 @@ export default {
})
.catch(this.toastErrorHandler(this.$t('notification:event-type-fetch-failed')))
},
+
+ getIcon (icon, mode = 'light') {
+ return `${mxClient.imageBasePath}/${mode === 'dark' ? 'dark/' : ''}${icon}.svg`
+ },
},
}
@@ -2551,7 +2557,7 @@ export default {
}
.toolbar {
- background-color: var(--gray-200) !important;
+ background-color: var(--sidebar-bg) !important;
width: 66px;
}
@@ -2651,7 +2657,7 @@ export default {
}
.step-values tr.title {
- background-color: white !important;
+ background-color: var(--light) !important;
}
.step-values tr.title th {
diff --git a/client/web/workflow/src/lib/style.js b/client/web/workflow/src/lib/style.js
index b41cce617..872798325 100644
--- a/client/web/workflow/src/lib/style.js
+++ b/client/web/workflow/src/lib/style.js
@@ -13,126 +13,126 @@ const kindToStyle = {
visualSwimlane: {
width: 320,
height: 160,
- icon: 'icons/swimlane.svg',
+ icon: 'swimlane',
style: 'swimlane',
},
expressions: {
width: 200,
height: 80,
- icon: 'icons/expressions.svg',
+ icon: 'expressions',
style: 'expressions',
},
function: {
width: 200,
height: 80,
- icon: 'icons/function.svg',
+ icon: 'function',
style: 'function',
},
iterator: {
width: 200,
height: 80,
- icon: 'icons/iterator.svg',
+ icon: 'iterator',
style: 'iterator',
},
'exec-workflow': {
width: 200,
height: 80,
- icon: 'icons/exec-workflow.svg',
+ icon: 'exec-workflow',
style: 'exec-workflow',
},
break: {
width: 200,
height: 80,
- icon: 'icons/break.svg',
+ icon: 'break',
style: 'break',
},
continue: {
width: 200,
height: 80,
- icon: 'icons/continue.svg',
+ icon: 'continue',
style: 'continue',
},
trigger: {
width: 200,
height: 80,
- icon: 'icons/trigger.svg',
+ icon: 'trigger',
style: 'trigger',
},
'error-handler': {
width: 200,
height: 80,
- icon: 'icons/error-handler.svg',
+ icon: 'error-handler',
style: 'error-handler',
},
error: {
width: 200,
height: 80,
- icon: 'icons/error.svg',
+ icon: 'error',
style: 'error',
},
termination: {
width: 200,
height: 80,
- icon: 'icons/termination.svg',
+ icon: 'termination',
style: 'termination',
},
gatewayExcl: {
width: 200,
height: 80,
- icon: 'icons/gateway-exclusive.svg',
+ icon: 'gateway-exclusive',
style: 'gatewayExclusive',
},
gatewayIncl: {
width: 200,
height: 80,
- icon: 'icons/gateway-inclusive.svg',
+ icon: 'gateway-inclusive',
style: 'gatewayInclusive',
},
gatewayFork: {
width: 200,
height: 80,
- icon: 'icons/gateway-parallel.svg',
+ icon: 'gateway-parallel',
style: 'gatewayParallel',
},
gatewayJoin: {
width: 200,
height: 80,
- icon: 'icons/gateway-parallel.svg',
+ icon: 'gateway-parallel',
style: 'gatewayParallel',
},
prompt: {
width: 200,
height: 80,
- icon: 'icons/prompt.svg',
+ icon: 'prompt',
style: 'prompt',
},
delay: {
width: 200,
height: 80,
- icon: 'icons/delay.svg',
+ icon: 'delay',
style: 'delay',
},
debug: {
width: 200,
height: 80,
- icon: 'icons/debug.svg',
+ icon: 'debug',
style: 'debug',
},
}