nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gantt css, dynamic css and colors

Browse Source
This commit is contained in:
STEINNI
2026-08-29 10:13:06 +00:00
parent 6e902b91fd
commit 5a8f93e376
4 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
buildoz.css
+4 -3
View File
@@ -375,7 +375,8 @@ bz-grafloweditor .inner-console section .cols-2 input{
bz-gantt{
position: relative;
--row: 30px;
--row: 25px;
--bar-gap: 4px; /* space above & below each bar inside its row */
}
bz-gantt ul.tasks{
list-style: none;
@@ -393,6 +394,6 @@ bz-gantt ul.tasks li{
bz-gantt.gantt bz-graflow{
position: absolute;
left: 8em;
top: 0.5em;
left: calc(var(--tasks-width, 7em) + 1em);
top: var(--bar-gap);
}
bzGantt.js
+12 -1
View File
@@ -20,6 +20,7 @@ class BZgantt extends Buildoz {
async connectedCallback(){
await customElements.whenDefined('bz-graflow')
super.connectedCallback()
this.rowHeight = parseFloat(getComputedStyle(this).getPropertyValue('--row')) || 30
this.ul = document.createElement('ul')
this.ul.classList.add('tasks')
@@ -160,7 +161,7 @@ class BZgantt extends Buildoz {
for(const dep of task.dependsOn ?? []){
flow.links.push({ "from": [dep, "out1"], "to": [task.id, "inp1"] })
}
curY += 30 // row height
curY += this.rowHeight
}
return flow
}
@@ -172,6 +173,16 @@ class BZgantt extends Buildoz {
li.textContent = task.name
this.ul.appendChild(li)
}
// Publish the widest label width, used by CSS to place the graflow
const range = document.createRange()
let maxWidth = 0
for(const li of this.ul.children){
range.selectNodeContents(li)
maxWidth = Math.max(maxWidth, range.getBoundingClientRect().width)
}
this.style.setProperty('--tasks-width', Math.ceil(maxWidth) + 'px')
const flow = this.buildFlow()
this.graflow.loadFlow({
"nodesFile": this.nodesfile,
graflow_examples/nodesLib/nodesGantt.html
+2 -1
View File
@@ -9,7 +9,8 @@
.bzgf-node .body{
border-radius: 4px;
overflow: hidden;
height: 1.2em;
height: calc(var(--row, 30px) - 2 * var(--bar-gap, 8px));
line-height: calc(var(--row, 30px) - 2 * var(--bar-gap, 8px));
text-overflow: ellipsis;
white-space: nowrap;
font-size: .9em;
graflow_examples/test8.html
+10 -10
View File
@@ -29,16 +29,16 @@
<script>
const ganttData = {
"tasks": [
{ "id": "t1", "name": "Task 1", "start": "2026-09-01", "end":"2026-09-05" },
{ "id": "t2", "name": "Task 2", "start": "2026-09-15", "end":"2026-09-20", "dependsOn": ["t8"] },
{ "id": "t3", "name": "Task 3", "start": "2026-09-20", "end":"2026-09-25", "dependsOn": ["t9"] },
{ "id": "t4", "name": "Task 4", "start": "2026-09-01", "end":"2026-09-10" },
{ "id": "t5", "name": "Task 5", "start": "2026-09-05", "end":"2026-09-07", "dependsOn": ["t4", "t7"] },
{ "id": "t6", "name": "Task 6", "start": "2026-09-07", "end":"2026-09-08", "dependsOn": ["t5"] },
{ "id": "t7", "name": "Task 7", "start": "2026-09-05", "end":"2026-09-08", "dependsOn": ["t1"] },
{ "id": "t8", "name": "Task 8", "start": "2026-09-08", "end":"2026-09-15", "dependsOn": ["t6"] },
{ "id": "t9", "name": "Task 9", "start": "2026-09-15", "end":"2026-09-18", "dependsOn": ["t8"] },
]
{ "id": "t1", "name": "Task 1", "start": "2026-09-01", "end":"2026-09-05", "color": "#8F8" },
{ "id": "t2", "name": "Task 2", "start": "2026-09-15", "end":"2026-09-20", "color": "#F8F", "dependsOn": ["t8"] },
{ "id": "t3", "name": "Task 3", "start": "2026-09-20", "end":"2026-09-25", "color": "#FF8", "dependsOn": ["t9"] },
{ "id": "t4", "name": "Task 4", "start": "2026-09-01", "end":"2026-09-10", "color": "#F88" },
{ "id": "t5", "name": "Task 5", "start": "2026-09-05", "end":"2026-09-07", "color": "#88F", "dependsOn": ["t4", "t7"] },
{ "id": "t6", "name": "Task 6", "start": "2026-09-07", "end":"2026-09-08", "color": "#8F8", "dependsOn": ["t5"] },
{ "id": "t7", "name": "Task 7", "start": "2026-09-05", "end":"2026-09-08", "color": "#88F", "dependsOn": ["t1"] },
{ "id": "t8", "name": "Task 8 which is quite long", "start": "2026-09-08", "end":"2026-09-15", "color": "#8F8", "dependsOn": ["t6"] },
{ "id": "t9", "name": "Task 9", "start": "2026-09-15", "end":"2026-09-18", "color": "#F8F", "dependsOn": ["t8"] },
], "color": "#8F8"
}
window.addEventListener('load',()=>{