graflow playing with severity in test4
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
"markup": {
|
||||
"title": "Evaluations",
|
||||
"subtitle": "...",
|
||||
"severity": "secondary"
|
||||
"severity": "info"
|
||||
},
|
||||
"data": { "node": "eval", "nodeId":null}
|
||||
},
|
||||
@@ -17,7 +17,7 @@
|
||||
"markup": {
|
||||
"title": "GAP",
|
||||
"subtitle": "...",
|
||||
"severity": "secondary"
|
||||
"severity": "accent"
|
||||
},
|
||||
"data": { "a": "a2", "b":"b2"}
|
||||
},
|
||||
@@ -27,7 +27,7 @@
|
||||
"markup": {
|
||||
"title": "CID",
|
||||
"subtitle": "...",
|
||||
"severity": "secondary"
|
||||
"severity": "primary"
|
||||
},
|
||||
"data": { "a": "a3", "b":"b3"}
|
||||
},
|
||||
@@ -37,7 +37,7 @@
|
||||
"markup": {
|
||||
"title": "Case Allocation",
|
||||
"subtitle": "...",
|
||||
"severity": "secondary"
|
||||
"severity": "success"
|
||||
},
|
||||
"data": {
|
||||
"track": "equity"
|
||||
@@ -49,7 +49,7 @@
|
||||
"markup": {
|
||||
"title": "Grant Signature",
|
||||
"subtitle": "...",
|
||||
"severity": "secondary"
|
||||
"severity": "danger"
|
||||
},
|
||||
"data": {
|
||||
"track": "grant"
|
||||
@@ -123,7 +123,7 @@
|
||||
"markup": {
|
||||
"title": "Investment Agreement",
|
||||
"subtitle": "...",
|
||||
"severity": "secondary"
|
||||
"severity": "warning"
|
||||
},
|
||||
"data": {
|
||||
"track": "equity",
|
||||
|
||||
@@ -8,6 +8,14 @@
|
||||
position: absolute;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
div.bzgf-node div.body[primary] { background-color: var(--eicui-base-color-primary); color:white;}
|
||||
div.bzgf-node div.body[info] { background-color: var(--eicui-base-color-info); color:white;}
|
||||
div.bzgf-node div.body[success] { background-color: var(--eicui-base-color-success); color:white;}
|
||||
div.bzgf-node div.body[warning] { background-color: var(--eicui-base-color-warning);}
|
||||
div.bzgf-node div.body[danger] { background-color: var(--eicui-base-color-danger);}
|
||||
div.bzgf-node div.body[accent] { background-color: var(--eicui-base-color-accent);}
|
||||
|
||||
.bzgf-node .body{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
@@ -68,7 +76,7 @@
|
||||
|
||||
<template>
|
||||
<div class="bzgf-node" data-nodetype="eicBasic">
|
||||
<div class="body">
|
||||
<div class="body" {severity}>
|
||||
<div class="title">{title}</div>
|
||||
<div class="subtitle">{subtitle}</div>
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,14 @@
|
||||
position: absolute;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
div.bzgf-node[primary] { background-color: var(--eicui-base-color-primary);}
|
||||
div.bzgf-node[info] { background-color: var(--eicui-base-color-info);}
|
||||
div.bzgf-node[success] { background-color: var(--eicui-base-color-success);}
|
||||
div.bzgf-node[warning] { background-color: var(--eicui-base-color-warning);}
|
||||
div.bzgf-node[danger] { background-color: var(--eicui-base-color-danger);}
|
||||
div.bzgf-node[accent] { background-color: var(--eicui-base-color-accent);}
|
||||
|
||||
.bzgf-node .body{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
<th>align</th>
|
||||
<th>oriented</th>
|
||||
<th>nodesmove</th>
|
||||
<th>editwires</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -51,6 +52,7 @@
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a target="test2" href="./test2.html">test2</a></td>
|
||||
@@ -62,6 +64,7 @@
|
||||
<td></td>
|
||||
<td>X</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a target="test3" href="./test3.html">test3</a></td>
|
||||
@@ -73,6 +76,7 @@
|
||||
<td>First</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a target="test4" href="./test4.html">test4</a></td>
|
||||
@@ -84,6 +88,7 @@
|
||||
<td>Center</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a target="test4.5" href="./test4.5.html">test4.5</a></td>
|
||||
@@ -95,6 +100,7 @@
|
||||
<td>Parent</td>
|
||||
<td>X</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a target="test5" href="./test5.html">test5</a></td>
|
||||
@@ -106,6 +112,7 @@
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>X</td>
|
||||
<td>X</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a target="test6" href="./test6.html">test6</a></td>
|
||||
@@ -117,6 +124,7 @@
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>X</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -55,11 +55,32 @@
|
||||
min-width: 800px;
|
||||
min-height: 300px;
|
||||
border: 1px solid #999;
|
||||
padding: 1rem;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
border:2px solid #A00
|
||||
}
|
||||
.container::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
pointer-events: none;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
135deg,
|
||||
transparent 0px,
|
||||
transparent 3px,
|
||||
#A00 3px,
|
||||
#A00 6px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('load',()=>{
|
||||
const severities = ['primary', 'info', 'success', 'warning', 'danger', 'accent']
|
||||
|
||||
let grflw4 = document.querySelector('bz-graflow.icmp')
|
||||
grflw4.addEventListener('subflowLoaded',
|
||||
(evt) => { grflw4 = evt.detail.subflow }
|
||||
@@ -86,14 +107,27 @@
|
||||
const grfl = entry.target.querySelector('bz-graflow')
|
||||
grfl.autofit()
|
||||
})
|
||||
|
||||
ro.observe(el)
|
||||
|
||||
let aifmi = null; let sidx=0;
|
||||
const sevanimation = () => { console.log('sevanimation')
|
||||
severities.forEach(severity => aifmi.removeAttribute(severity))
|
||||
aifmi.setAttribute(severities[sidx], '')
|
||||
sidx++
|
||||
if (sidx >= severities.length) sidx = 0
|
||||
setTimeout(sevanimation, 1000)
|
||||
}
|
||||
grflw4.addEventListener('refreshed',() => {
|
||||
aifmi = grflw4.stagedNodes['aifm-investment'].querySelector('.body')
|
||||
sevanimation()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" style="padding:0;"">
|
||||
<div class="container">
|
||||
<bz-graflow class="icmp" flow="./flows/testFlowICMP.json" tension="60">
|
||||
<div class="demooptions">
|
||||
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
|
||||
|
||||
Reference in New Issue
Block a user