Pop_Slime/crtr
1
0
Fork 0
Code Issues 6 Pull Requests Projects 1 Releases Activity

Improve scaling logic of popup list in skin editor..

Browse Source
This commit is contained in:
PopSlime
2023-03-15 15:39:31 +08:00
parent b64f85aaa2
commit 0bc57c368f
2 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Http/SkinEditor/app.css
View File

@@ -45,15 +45,21 @@ body {
overflow: auto; overflow: auto;
} }
.t-list { .t-list-container {
position: absolute; position: absolute;
max-width: 100vw;
max-height: 100vh;
overflow: auto; overflow: auto;
background-color: floralwhite; background-color: floralwhite;
box-sizing: border-box; box-sizing: border-box;
border: solid 1px gray; border: solid 1px gray;
border-radius: 4px; border-radius: 4px;
}
.t-list-composed {
max-width: 100vw;
max-height: 100vh;
}
.t-list {
padding: 2px; padding: 2px;
margin: 0; margin: 0;
} }
@@ -294,7 +300,7 @@ input {
background-color: black; background-color: black;
color: white; color: white;
} }
.t-list { .t-list-container {
background-color: darkslategray; background-color: darkslategray;
} }
.t-li:hover { .t-li:hover {

19
Http/SkinEditor/app.js
View File

@@ -332,18 +332,23 @@ function generateAddExpList(event, item) {
} }
function popup(event, ul) { function popup(event, ul) {
clist = ul; clist = $("<div></div>").addClass("t-list-container").append(ul);
app.append(ul); app.append(clist);
ul.css("column-count", Math.max(1, Math.min(
Math.floor(0.6 * window.innerWidth / clist.outerWidth()),
Math.ceil((clist.outerHeight() + 256) / window.innerHeight)
)));
var left = event.pageX; var left = event.pageX;
if (left + ul.outerWidth() > window.innerWidth) if (left + clist.outerWidth() > window.innerWidth)
left = Math.max(0, left - ul.outerWidth()); left = Math.max(0, left - clist.outerWidth());
var top = event.pageY; var top = event.pageY;
if (top + ul.outerHeight() > window.innerHeight) if (top + clist.outerHeight() > window.innerHeight)
top = Math.max(0, top - ul.outerHeight()); top = Math.max(0, top - clist.outerHeight());
ul.css({ clist.css({
"left": left, "left": left,
"top": top "top": top
}); });
clist.addClass("t-list-composed");
} }
function generateInputList(el, key) { function generateInputList(el, key) {