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

Changes from 4 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
42 changes: 38 additions & 4 deletions www/assets/js/spreadsheet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,13 +418,40 @@ const spreadsheet = (function() {
}

function defaultViewer(rect,offset,el) {
const spreadsheetElement = document.getElementById("slo-spreadsheet");
const spreadsheetSize = spreadsheetElement.getBoundingClientRect();
const boxWidth = spreadsheetSize.width/1.618 // golden ratio
const iconSize = 60
const standardBoxWidth = 300 + iconSize
Copy link
Member

Choose a reason for hiding this comment

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

add a const minSize = 300 and use that everywhere

const extraPadding = 30

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.width = Math.max(300, (rect.width))+'px'
Copy link
Member

Choose a reason for hiding this comment

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

Do Math.min(spreadsheetSize.width, Math.max(300, rect.width)+'px'
or Math.clamp if that exists

selector.style['min-height'] = rect.height+'px'
selector.style.overflow = 'auto'

if((rect.left + standardBoxWidth + extraPadding) > spreadsheetSize.width){
selector.style.left = (rect.left - rect.width - standardBoxWidth - extraPadding ) +'px'
}

if((rect.left - standardBoxWidth) < 0){
selector.style.left = (extraPadding) +'px'
}

if(el.scrollWidth > boxWidth){ // @TODO doublecheck during code review:
selector.style.width = (boxWidth)+'px'
if((rect.left + iconSize + boxWidth + extraPadding) > spreadsheetSize.width){
selector.style.left = (rect.left - rect.width - boxWidth - iconSize - extraPadding) +'px'
}
if((rect.left - boxWidth - extraPadding) < 0){
selector.style.left = (extraPadding) +'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 +462,7 @@ const spreadsheet = (function() {
</use></svg>
</button>
`

}
switch(columnDef.type) {
case 'id':
Expand Down Expand Up @@ -466,12 +494,18 @@ const spreadsheet = (function() {
if (current.top+current.height > offset.top+offset.height) {
if ((offset.height-current.height)<2) {
selector.style.top = '2px'
// selector.style.height = 'calc(100% - 40px)'

// @NOTE: not sure if needed here
selector.style.height = 'fit-content'
selector.style.overflow = 'visible'
} else {
selector.style.top = (offset.height - current.height)+'px'
// @NOTE: not sure if needed here
selector.style.height = 'fit-content'
selector.style.overflow = 'visible'
}
} else {

selector.style.height = 'fit-content'
selector.style.overflow = 'visible'
}
Copy link
Member

@poef poef Jan 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

If each branch of if/else has the same code, extract it outside the if/else branches
In addition: maybe add the height and top calculation to the earlier calculateOptimalPosition code and return a new object with { top, left, width, height } properties
Also set a maximum height to spreadsheet.height - select.style.top

selector.style.display = 'block'
}
Expand Down