Skip to content

Commit

Permalink
style(#5): 🎨 ran format
Browse files Browse the repository at this point in the history 
Closes #5
  • Loading branch information
@gautegf
gautegf committed Oct 1, 2025
1 parent 75c5b43 commit 03e8495
Show file tree
Hide file tree
Showing 3 changed files with 512 additions and 278 deletions.
13 changes: 6 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
type="text/css"
href="/libs/jstree/themes/mixed/style.css"
/>

</head>

<body>
Expand Down Expand Up @@ -75,18 +74,18 @@
$('#menu_scene').next().show()
$('#menu_filters').next().show()
viewer.toggleSidebar()

// Initialize custom measurements panel (global function from measurementsPanel.js)
if(window.initMeasurementsPanel){
window.initMeasurementsPanel(viewer);
if (window.initMeasurementsPanel) {
window.initMeasurementsPanel(viewer)
} else {
console.warn('initMeasurementsPanel not found on window');
console.warn('initMeasurementsPanel not found on window')
}
})

let url = './pointclouds/data_converted/metadata.json'

Potree.loadPointCloud(url).then(e => {
Potree.loadPointCloud(url).then((e) => {
let pointcloud = e.pointcloud
let material = pointcloud.material

Expand All @@ -97,7 +96,7 @@

viewer.scene.addPointCloud(pointcloud)
viewer.fitToScreen()
})
})
</script>
</body>
</html>
264 changes: 226 additions & 38 deletions src/measurementsPanel.css
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,228 @@
#measurements_list .mcard{background:#2d373c;border:1px solid #1c2428;border-radius:4px;margin:6px 4px;padding:6px 8px;font-family:inherit;font-size:12px;color:#eee;}
#measurements_list .mheader{display:flex;align-items:center;margin-bottom:4px;font-weight:bold;}
#measurements_list .mstatus{width:8px;height:8px;border-radius:50%;background:#68d96e;margin-right:6px;}
#measurements_list .mdelete{margin-left:auto;cursor:pointer;color:#d55;font-weight:bold;background:transparent;border:none;font-size:14px;}
#measurements_list table{width:100%;border-collapse:collapse;margin-top:4px;}
#measurements_list td{padding:2px 4px;}
#measurements_list tr:nth-child(even){background:#3a454b;}
#measurements_list .coordRow td{background:#2f383d;font-family:monospace;font-size:11px;padding:4px 6px;border:1px solid #404a50;border-radius:4px;margin:2px 0;}
#measurements_list .segmentRow td{background:transparent;padding:0 0 2px 0;}
#measurements_list .segmentConnector{width:1px;height:12px;background:#505b61;margin:2px auto 0;}
#measurements_list .segmentPill{display:inline-block;background:#3d474d;border:1px solid #566067;padding:2px 10px;margin:2px auto 4px;border-radius:6px;font-size:11px;font-family:monospace;}
#measurements_list .totalRow td{background:#424d53;font-weight:600;font-size:12px;text-align:center;border:1px solid #59646a;border-radius:6px;margin-top:4px;}
#measurements_list .separator td{padding:0;height:2px;background:transparent;}
#measurements_list .attrRow td{font-size:11px;color:#cfd5d8;}
#measurements_list .empty{opacity:.6;padding:8px;text-align:center;}
#measurements_list{max-height:400px;overflow-y:auto;margin:10px 0;}
#measurements_list::-webkit-scrollbar{width:8px;}
#measurements_list::-webkit-scrollbar-track{background:var(--bg-dark-color);}
#measurements_list::-webkit-scrollbar-thumb{background:var(--bg-color-2);border-radius:4px;}
#measurements_list::-webkit-scrollbar-thumb:hover{background:var(--color-1);}
#measurements_list .mcard {
background: #2d373c;
border: 1px solid #1c2428;
border-radius: 4px;
margin: 6px 4px;
padding: 6px 8px;
font-family: inherit;
font-size: 12px;
color: #eee;
}
#measurements_list .mheader {
display: flex;
align-items: center;
margin-bottom: 4px;
font-weight: bold;
}
#measurements_list .mstatus {
width: 8px;
height: 8px;
border-radius: 50%;
background: #68d96e;
margin-right: 6px;
}
#measurements_list .mdelete {
margin-left: auto;
cursor: pointer;
color: #d55;
font-weight: bold;
background: transparent;
border: none;
font-size: 14px;
}
#measurements_list table {
width: 100%;
border-collapse: collapse;
margin-top: 4px;
}
#measurements_list td {
padding: 2px 4px;
}
#measurements_list tr:nth-child(even) {
background: #3a454b;
}
#measurements_list .coordRow td {
background: #2f383d;
font-family: monospace;
font-size: 11px;
padding: 4px 6px;
border: 1px solid #404a50;
border-radius: 4px;
margin: 2px 0;
}
#measurements_list .segmentRow td {
background: transparent;
padding: 0 0 2px 0;
}
#measurements_list .segmentConnector {
width: 1px;
height: 12px;
background: #505b61;
margin: 2px auto 0;
}
#measurements_list .segmentPill {
display: inline-block;
background: #3d474d;
border: 1px solid #566067;
padding: 2px 10px;
margin: 2px auto 4px;
border-radius: 6px;
font-size: 11px;
font-family: monospace;
}
#measurements_list .totalRow td {
background: #424d53;
font-weight: 600;
font-size: 12px;
text-align: center;
border: 1px solid #59646a;
border-radius: 6px;
margin-top: 4px;
}
#measurements_list .separator td {
padding: 0;
height: 2px;
background: transparent;
}
#measurements_list .attrRow td {
font-size: 11px;
color: #cfd5d8;
}
#measurements_list .empty {
opacity: 0.6;
padding: 8px;
text-align: center;
}
#measurements_list {
max-height: 400px;
overflow-y: auto;
margin: 10px 0;
}
#measurements_list::-webkit-scrollbar {
width: 8px;
}
#measurements_list::-webkit-scrollbar-track {
background: var(--bg-dark-color);
}
#measurements_list::-webkit-scrollbar-thumb {
background: var(--bg-color-2);
border-radius: 4px;
}
#measurements_list::-webkit-scrollbar-thumb:hover {
background: var(--color-1);
}

/* Modern grouped measurement list */
#measurement_items{background:#252d31;border:1px solid #1b2326;border-radius:6px;font-size:12px;color:#d9e2e6;}
#measurement_items .m-empty{padding:10px;text-align:center;opacity:.6;}
#measurement_items .m-group{border-top:1px solid #303a3f;}
#measurement_items .m-group:first-child{border-top:none;}
#measurement_items .m-group-header{display:flex;align-items:center;gap:6px;padding:6px 10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:11px;background:linear-gradient(#2f383d,#2b3438);cursor:pointer;user-select:none;position:sticky;top:0;z-index:1;}
#measurement_items .m-group-header:hover{background:#374247;}
#measurement_items .m-group-caret{font-size:10px;width:14px;text-align:center;color:#8fb9c9;}
#measurement_items .m-group-title{flex:1;color:#c7d4d9;}
#measurement_items .m-group-count{background:#3d4850;color:#9fb7c2;font-size:10px;padding:2px 6px;border-radius:10px;line-height:1;}
#measurement_items .m-group-body{padding:4px 4px 6px;}
#measurement_items .m-row{display:flex;align-items:center;gap:6px;padding:6px 8px;margin:2px 2px;border:1px solid transparent;border-radius:4px;background:#2c3539;transition:background .15s,border-color .15s;cursor:pointer;}
#measurement_items .m-row-icon{width:16px;flex:0 0 16px;text-align:center;font-size:12px;color:#8fb9c9;filter:drop-shadow(0 0 2px #0a0f12);}
#measurement_items .m-row:hover{background:#354045;border-color:#425056;}
#measurement_items .m-row.active{background:#1f4b63;border-color:#2f6b8c;box-shadow:0 0 0 1px #2f6b8c66;}
#measurement_items .m-row-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#measurement_items .m-row-delete{background:#3b2626;border:1px solid #5a3a3a;color:#ff9a9a;font-weight:600;font-size:11px;line-height:1;padding:4px 6px;border-radius:4px;cursor:pointer;transition:background .15s, color .15s;}
#measurement_items .m-row-delete:hover{background:#5a2d2d;color:#fff;}

#measurement_items {
background: #252d31;
border: 1px solid #1b2326;
border-radius: 6px;
font-size: 12px;
color: #d9e2e6;
}
#measurement_items .m-empty {
padding: 10px;
text-align: center;
opacity: 0.6;
}
#measurement_items .m-group {
border-top: 1px solid #303a3f;
}
#measurement_items .m-group:first-child {
border-top: none;
}
#measurement_items .m-group-header {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 11px;
background: linear-gradient(#2f383d, #2b3438);
cursor: pointer;
user-select: none;
position: sticky;
top: 0;
z-index: 1;
}
#measurement_items .m-group-header:hover {
background: #374247;
}
#measurement_items .m-group-caret {
font-size: 10px;
width: 14px;
text-align: center;
color: #8fb9c9;
}
#measurement_items .m-group-title {
flex: 1;
color: #c7d4d9;
}
#measurement_items .m-group-count {
background: #3d4850;
color: #9fb7c2;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
line-height: 1;
}
#measurement_items .m-group-body {
padding: 4px 4px 6px;
}
#measurement_items .m-row {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
margin: 2px 2px;
border: 1px solid transparent;
border-radius: 4px;
background: #2c3539;
transition:
background 0.15s,
border-color 0.15s;
cursor: pointer;
}
#measurement_items .m-row-icon {
width: 16px;
flex: 0 0 16px;
text-align: center;
font-size: 12px;
color: #8fb9c9;
filter: drop-shadow(0 0 2px #0a0f12);
}
#measurement_items .m-row:hover {
background: #354045;
border-color: #425056;
}
#measurement_items .m-row.active {
background: #1f4b63;
border-color: #2f6b8c;
box-shadow: 0 0 0 1px #2f6b8c66;
}
#measurement_items .m-row-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#measurement_items .m-row-delete {
background: #3b2626;
border: 1px solid #5a3a3a;
color: #ff9a9a;
font-weight: 600;
font-size: 11px;
line-height: 1;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
transition:
background 0.15s,
color 0.15s;
}
#measurement_items .m-row-delete:hover {
background: #5a2d2d;
color: #fff;
}
Loading

0 comments on commit 03e8495

Please sign in to comment.