Added styled features to frontend

This commit is contained in:
frikky
2021-05-06 13:35:20 +02:00
parent c704f5a5e2
commit 04216d960f
6 changed files with 19 additions and 208 deletions
-1
View File
@@ -1420,7 +1420,6 @@ const ParsedAction = (props) => {
fullWidth
style={{backgroundColor: theme.palette.inputColor, color: "white", height: 50, borderRadius: theme.palette.borderRadius,}}
onChange={(event, newValue) => {
console.log("Changed to ", event.target, newValue)
// Workaround with event lol
setNewSelectedAction({"target": {"value": newValue.name}})
}}
+2 -2
View File
@@ -133,8 +133,8 @@ const data = [{
css: {
'shape': 'ellipse',
'border-color': '#80deea',
'width': '12px',
'height': '12px',
'width': '5px',
'height': '5px',
'z-index': '5002',
'font-size': '10px',
'text-valign': 'center',
+10 -4
View File
@@ -100,6 +100,7 @@ function removeParam(key, sourceURL) {
}
const splitter = "|~|"
const svgSize = 24
//const referenceUrl = "https://shuffler.io/functions/webhooks/"
//const referenceUrl = window.location.origin+"/api/v1/hooks/"
@@ -1368,7 +1369,7 @@ const AngularWorkflow = (props) => {
if (!found) {
console.log("Node wasn't found")
const iconInfo = GetIconInfo(nodedata)
const svg_pin = `<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
const svg_pin = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin)
const offset = nodedata.isStartNode ? 36 : 44
@@ -2264,7 +2265,7 @@ const AngularWorkflow = (props) => {
}
const iconInfo = GetIconInfo(action)
const svg_pin = `<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
const svg_pin = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin)
const offset = action.isStartNode ? 36 : 44
@@ -2428,7 +2429,12 @@ const AngularWorkflow = (props) => {
}
selectedNode.remove()
if (selectedNode.data().decorator === true) {
alert.info("This edge can't be deleted.")
} else {
selectedNode.remove()
}
setSelectedTrigger({})
setSelectedTriggerIndex({})
}
@@ -3430,7 +3436,7 @@ const AngularWorkflow = (props) => {
const foundnode = cy.getElementById(currentNode.data.id)
if (foundnode !== null && foundnode !== undefined) {
const iconInfo = GetIconInfo(newaction)
const svg_pin = `<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
const svg_pin = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin)
foundnode.data("image", svgpin_Url)
foundnode.data("imageColor", iconInfo.iconBackgroundColor)
+5 -5
View File
@@ -81,15 +81,15 @@ const useStyles = makeStyles((theme) => ({
export const GetIconInfo = (action) => {
// Finds the icon based on the action. Should be verbs.
const iconList = [
{"key": "download", "values": ["get", "download"]},
{"key": "download", "values": ["get", "download", "return", "hello world"]},
{"key": "search", "values": ["search", "find"]},
{"key": "delete", "values": ["delete", "remove"]},
{"key": "send", "values": ["send", "dispatch", "mail", "forward", "post", "submit"]},
{"key": "repeat", "values": ["repeat", "retry"]},
{"key": "execute", "values": ["execute", "run", "play"]},
{"key": "repeat", "values": ["repeat", "retry", "pause",]},
{"key": "execute", "values": ["execute", "run", "play", "raise",]},
{"key": "extract", "values": ["extract", "unpack", "decompress"]},
{"key": "inflate", "values": ["inflate", "pack", "compress",]},
{"key": "edit", "values": ["update", "edit", "put", "patch", "change", "parse", "replace", "filter", "conver", "map"]},
{"key": "edit", "values": ["update", "create", "edit", "put", "patch", "change", "parse", "replace", "filter", "conver", "map"]},
{"key": "compare", "values": ["compare", "convert", "to", "filter", "translate", ]},
{"key": "list", "values": ["list"]},
]
@@ -480,7 +480,7 @@ const Workflows = (props) => {
const ret = setNewWorkflow(data.name, data.description, data.tags, data, false)
.then((response) => {
if (response !== undefined) {
alert.success("Successfully imported "+data.name)
alert.success(`Successfully imported ${data.name}`)
}
})
}