Skip to content

Commit

Permalink
style(#5): 💄 Move inline styling to the linked css file, and ran format
Browse files Browse the repository at this point in the history
  • Loading branch information
@gautegf
gautegf committed Oct 4, 2025
1 parent 6644426 commit 4f44bf3
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 29 deletions.
5 changes: 4 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@
href="/libs/jstree/themes/mixed/style.css"
/>
<link rel="stylesheet" type="text/css" href="src/style.css" />
<link rel="stylesheet" href="/src/MeasurementControl/measurementsPanel.css" />
<link
rel="stylesheet"
href="/src/MeasurementControl/measurementsPanel.css"
/>
</head>

<body>
Expand Down
1 change: 0 additions & 1 deletion src/ElevationControl/elevationControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@ function moveElevationContainer() {

//initiate and orchestrate all funcitons to render the Evelation control section of the sidebar propperly
window.initElevationControls = function initElevationControls(viewer) {

//Creates the section
createElevationPanel(viewer)

Expand Down
34 changes: 30 additions & 4 deletions src/MeasurementControl/measurementsPanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,10 +227,30 @@
color: #fff;
}

.m-list-title, .m-data-title {
.measurements-panel {
position: relative;
}
.measurement-tools-host {
margin-bottom: 6px;
}
.measurement-items-root {
max-height: 260px;
overflow: auto;
margin-bottom: 6px;
border: 1px solid #333;
border-radius: 4px;
}
.measurement-info-message {
padding: 4px 8px;
font-size: 12px;
opacity: 0.6;
}

.m-list-title,
.m-data-title {
font-size: 12px;
font-weight: 600;
letter-spacing: .5px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 6px 8px 4px 14px;
margin-left: 2px;
Expand All @@ -239,5 +259,11 @@
align-items: center;
gap: 6px;
}
.m-list-title { margin: 6px 0 4px; }
.m-data-title { margin: 10px 0 8px; border-top:1px solid #303a3f; padding-top:10px; }
.m-list-title {
margin: 6px 0 4px;
}
.m-data-title {
margin: 10px 0 8px;
border-top: 1px solid #303a3f;
padding-top: 10px;
}
99 changes: 76 additions & 23 deletions src/MeasurementControl/measurementsPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,19 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
if (menu) {
const header = document.createElement('h3')
header.id = 'menu_point_measurements'
header.innerHTML = '<span>Measurements</span>'
const headerSpan = document.createElement('span')
headerSpan.textContent = 'Measurements'
header.appendChild(headerSpan)
const panel = document.createElement('div')
panel.className = 'pv-menu-list'
panel.innerHTML =
'<div style="margin-bottom:6px" id="measurement_tools_host"></div><div id="measurements_list" class="auto"></div>'
panel.className = 'pv-menu-list measurements-panel'
const toolsHostDiv = document.createElement('div')
toolsHostDiv.id = 'measurement_tools_host'
toolsHostDiv.className = 'measurement-tools-host'
const listContainerDiv = document.createElement('div')
listContainerDiv.id = 'measurements_list'
listContainerDiv.className = 'auto'
panel.appendChild(toolsHostDiv)
panel.appendChild(listContainerDiv)
// Insert before filters/tools if possible, else append at end
const tools = document.getElementById('menu_tools')
if (tools) {
Expand All @@ -39,7 +47,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
if ($(menu).accordion && $(menu).data('uiAccordion')) return
if (window.jQuery) {
const $p = window.jQuery(panel)
;($p.is(':visible') ? $p.slideUp(350) : $p.slideDown(350))
$p.is(':visible') ? $p.slideUp(350) : $p.slideDown(350)
return
}
})
Expand All @@ -55,8 +63,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {

let listRoot = document.createElement('div')
listRoot.id = 'measurement_items'
listRoot.style.cssText =
'max-height:260px; overflow:auto; margin-bottom:6px; border:1px solid #333; border-radius:4px;'
listRoot.className = 'measurement-items-root'
const listTitle = document.createElement('div')
listTitle.className = 'm-list-title'
listTitle.textContent = 'List of measurements'
Expand Down Expand Up @@ -168,14 +175,20 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
)
}
if (targetContainer && targetContainer.children.length === 0) {
targetContainer.innerHTML =
'<div style="padding:4px 8px;font-size:12px;opacity:0.6">Select a measurement to view its properties here</div>'
targetContainer.innerHTML = ''
const msg = document.createElement('div')
msg.className = 'measurement-info-message'
msg.textContent = 'Select a measurement to view its properties here'
targetContainer.appendChild(msg)
}
}

if (targetContainer) {
targetContainer.innerHTML =
'<div style="padding:4px 8px;font-size:12px;opacity:0.6">Select a measurement to view its properties here</div>'
targetContainer.innerHTML = ''
const msg2 = document.createElement('div')
msg2.className = 'measurement-info-message'
msg2.textContent = 'Select a measurement to view its properties here'
targetContainer.appendChild(msg2)
}

// Helper to decide if a uuid is a measurement-like object
Expand Down Expand Up @@ -223,31 +236,63 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
const order = Array.from(groups.keys()).sort()
listRoot.innerHTML = ''
if (itemsRaw.length === 0) {
listRoot.innerHTML = '<div class="m-empty">No measurements</div>'
const emptyEl = document.createElement('div')
emptyEl.className = 'm-empty'
emptyEl.textContent = 'No measurements'
listRoot.appendChild(emptyEl)
return
}
order.forEach((type) => {
const section = document.createElement('div')
section.className = 'm-group'
const gid = 'g_' + type.toLowerCase()
section.innerHTML = `\n <div class="m-group-header" data-group="${gid}" data-open="true">\n <span class="m-group-caret">▾</span>\n <span class="m-group-title">${type}</span>\n <span class="m-group-count" id="${gid}_count"></span>\n </div>\n <div class="m-group-body" id="${gid}_body"></div>`
const header = document.createElement('div')
header.className = 'm-group-header'
header.dataset.group = gid
header.dataset.open = 'true'
const caret = document.createElement('span')
caret.className = 'm-group-caret'
caret.textContent = '▾'
const titleSpan = document.createElement('span')
titleSpan.className = 'm-group-title'
titleSpan.textContent = type
const countSpan = document.createElement('span')
countSpan.className = 'm-group-count'
countSpan.id = gid + '_count'
header.appendChild(caret)
header.appendChild(titleSpan)
header.appendChild(countSpan)
const body = document.createElement('div')
body.className = 'm-group-body'
body.id = gid + '_body'
section.appendChild(header)
section.appendChild(body)
listRoot.appendChild(section)
const body = section.querySelector('.m-group-body')
groups.get(type).forEach((entry) => {
const m = entry.obj
const num = perTypeNumbers.get(type)?.get(m.uuid) || 0
const baseName = `${type} #${num}`
const row = document.createElement('div')
row.className = 'm-row'
row.dataset.uuid = m.uuid
const icon = TYPE_ICONS[type] || TYPE_ICONS['Measurement']
row.innerHTML =
`<span class="m-row-icon">${icon}</span><span class="m-row-label" title="${baseName}">${baseName}</span>` +
'<button class="m-row-delete" data-act="delete" title="Delete">×</button>'
const iconSpan = document.createElement('span')
iconSpan.className = 'm-row-icon'
iconSpan.textContent = TYPE_ICONS[type] || TYPE_ICONS['Measurement']
const labelSpan = document.createElement('span')
labelSpan.className = 'm-row-label'
labelSpan.title = baseName
labelSpan.textContent = baseName
const delBtn = document.createElement('button')
delBtn.className = 'm-row-delete'
delBtn.dataset.act = 'delete'
delBtn.title = 'Delete'
delBtn.textContent = '×'
row.appendChild(iconSpan)
row.appendChild(labelSpan)
row.appendChild(delBtn)
body.appendChild(row)
})
section.querySelector('#' + gid + '_count').textContent =
groups.get(type).length
countSpan.textContent = groups.get(type).length
})
}

Expand Down Expand Up @@ -351,7 +396,9 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
;[...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach((el) => {
el.classList.toggle('active', el.dataset.uuid === uuid)
})
const thisRow = listRoot.querySelector(`.m-row[data-uuid="${uuid}"] .m-row-label`)
const thisRow = listRoot.querySelector(
`.m-row[data-uuid="${uuid}"] .m-row-label`
)
if (thisRow) {
lastSelection.uuid = uuid
lastSelection.label = thisRow.textContent.trim()
Expand All @@ -372,7 +419,9 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
;[...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach((el) => {
el.classList.toggle('active', el.dataset.uuid === uuid)
})
const activeRow = listRoot.querySelector(`.m-row[data-uuid="${uuid}"] .m-row-label`)
const activeRow = listRoot.querySelector(
`.m-row[data-uuid="${uuid}"] .m-row-label`
)
if (activeRow) {
lastSelection.uuid = uuid
lastSelection.label = activeRow.textContent.trim()
Expand Down Expand Up @@ -403,7 +452,11 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
const measLi = measOptions.closest('li') || measOptions
let prev = measLi.previousElementSibling
for (let i = 0; i < 3 && prev; i++) {
if (prev.classList && prev.classList.contains('divider') && /Measurement/i.test(prev.textContent || '')) {
if (
prev.classList &&
prev.classList.contains('divider') &&
/Measurement/i.test(prev.textContent || '')
) {
prev.remove()
break
}
Expand Down

0 comments on commit 4f44bf3

Please sign in to comment.