Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spreadsheet increase inputsize #100

Open
wants to merge 6 commits into
base: simplystore
Choose a base branch
from
Open

Spreadsheet increase inputsize #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
554a907
spreadsheet display fix WIP: can't get to grock rect and offset and e…
Hoxolotl Dec 18, 2024
06b993c
big boxes WIP
Hoxolotl Dec 19, 2024
9905cc5
boxes now appear at correct locations. TODO: change height when editi…
Hoxolotl Jan 8, 2025
533c235
save GUI is now showing up correctly, double check notes line 498 and…
Hoxolotl Jan 8, 2025
3494ef9
fixed override for Karakteristiek so as to have a textarea instead of…
Hoxolotl Jan 22, 2025
0273c4e
moving boxes to the left WIP, lots of solved issues but it still need…
Hoxolotl Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion www/assets/js/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,7 @@
sortable: true,
filterable: true
}
if (columnValues.length<=15 && columnDefinition.name!='Description') { //@FIXME: allow switch to textarea from list type that is set like this?
if (columnValues.length<=15 && columnDefinition.name!='Description' && columnDefinition.name!='Karakteristiek') { //@FIXME: hardcoding Karakteristiek isn't right, allow switch to textarea from list type that is set like this?
let propSchema = meta.schemas.properties[c]
if (propSchema?.type) {
if (propSchema.type=='string') {
Expand Down
50 changes: 38 additions & 12 deletions www/assets/js/spreadsheet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,14 +417,40 @@ const spreadsheet = (function() {
}
}

function defaultViewer(rect,offset,el) {
function defaultViewer(cellRect,tableRect,el) {
const minCellWidth = 300
const maxCellWidth = tableRect.width/2 // golden ratio
let cellWidth = Math.max(minCellWidth, maxCellWidth)

let columnDef = getColumnDefinition(el)
let row = getRow(el)
selector.innerHTML = ''
selector.style.top = Math.max(2, (rect.top - offset.top))+'px'
selector.style.left = (rect.left - offset.left)+'px'
selector.style.width = rect.width+'px'
selector.style['min-height'] = rect.height+'px'
selector.style.top = Math.max(2, (cellRect.top - tableRect.top)) + 'px'
selector.style.maxWidth = cellWidth + 'px'
selector.style.minWidth = cellRect.width + 'px'
selector.style.width = "fit-content"

selector.style['min-height'] = cellRect.height +'px'
selector.style.overflow = 'auto'
selector.style.marginRight = "2px"

let trueCellWidth = selector.getBoundingClientRect().width
console.log(trueCellWidth, cellRect.width)

window.setTimeout(() => {
console.log("selector width: ")
let temp = getComputedStyle(selector)
console.log(temp.getPropertyValue("width"))
calculateOptimalPosition(cellRect)
}, 10)

function calculateOptimalPosition(cellRect){
const cellRelativeLeft = cellRect.left - tableRect.left

// @TODO: add code here to move the box left if the content doesn't fit nicely on the page
selector.style.left = cellRelativeLeft + 'px'
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please extra code above to a separate function, e.g. calculateOptimalPosition

let value = row.columns[columnDef.value] || ''
let header = ''
if (columnDef.editor!==false) {
Expand All @@ -435,6 +461,7 @@ const spreadsheet = (function() {
</use></svg>
</button>
`

}
switch(columnDef.type) {
case 'id':
Expand Down Expand Up @@ -463,16 +490,15 @@ const spreadsheet = (function() {
break
}
let current = selector.getBoundingClientRect()
if (current.top+current.height > offset.top+offset.height) {
if ((offset.height-current.height)<2) {

if (current.top+current.height > tableRect.top+tableRect.height) {
if ((tableRect.height-current.height)<2) {
selector.style.top = '2px'
// selector.style.height = 'calc(100% - 40px)'
} else {
selector.style.top = (offset.height - current.height)+'px'
}
} else {
}

}
selector.style.height = 'fit-content'
selector.style.overflow = 'auto'
selector.style.display = 'block'
}

Expand Down