Skip to content

Commit

Permalink
Update topBars' positioning and drag events
Browse files Browse the repository at this point in the history
  • Loading branch information
@aimerib
aimerib committed Jul 30, 2024
1 parent 265833a commit acc21a1
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 28 deletions.
4 changes: 2 additions & 2 deletions src/Pages/Text2Image.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
<div class="t2i-top-bar-container" style="line-height:1.5">
<div class="t2i-top-bar" id="t2i_top_bar">
<div class="main-image-area" id="main_image_area">
<div class="image_editor_input" id="image_editor_input" style="display:none;"></div><div class="image_editor_sizebar splitter-bar t2i-top-imageeditor-bar" id="image_editor_sizebar" style="display:none;"></div><div class="current_image" id="current_image"><div id="welcome_message" class="welcome_message">@(new HtmlString(Program.VersionUpdateMessage ?? Program.ServerSettings.UI.OverrideWelcomeMessage))</div></div><div class="t2i-top-split-bar splitter-bar" id="t2i-top-2nd-split-bar"></div>
<div class="image_editor_input" id="image_editor_input" style="display:none;"></div><div class="image_editor_sizebar splitter-bar t2i-top-imageeditor-bar" id="image_editor_sizebar" style="display:none;"></div><div class="current_image" id="current_image"><div id="welcome_message" class="welcome_message">@(new HtmlString(Program.VersionUpdateMessage ?? Program.ServerSettings.UI.OverrideWelcomeMessage))</div></div><div class="t2i-top-split-bar splitter-bar" id="t2i-top-split-bar"></div>
<div class="current_image_batch" id="current_image_batch_wrapper">
<div style="position: relative; width: 0; height: 0;">
<div class="batch-gear-button" onclick="doPopover('batchgear')">&#9881;</div>
Expand Down Expand Up @@ -162,7 +162,7 @@
<div class="sui_popover_model_button translate" onclick="mainGenHandler.doInterrupt(true)">Interrupt All Sessions</div>
</div>
</div>
<div class="t2i-top-split-bar splitter-bar" id="t2i-top-split-bar"><div class="t2i-split-quickbutton t2i-top-split-quickbutton" id="t2i-top-split-quickbutton">&#x21D2;</div></div>
<div class="t2i-top-split-bar splitter-bar" id="t2i-top-2nd-split-bar"><div class="t2i-split-quickbutton t2i-top-split-quickbutton" id="t2i-top-split-quickbutton">&#x21D2;</div></div>
<div class="input-sidebar" id="input_sidebar">
<span class="interrupt_line"></span>
<div class="main_inputs_area_wrapper" id="main_inputs_area_wrapper">
Expand Down
3 changes: 2 additions & 1 deletion src/wwwroot/css/genpage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,6 @@ body {
}
.main-image-area {
display: inline-block;
padding: 0.5rem;
overflow: hidden;
width: calc(100vw - 28rem);
height: 50vh;
Expand Down Expand Up @@ -188,6 +187,7 @@ body {
flex-direction: column;
gap: 10px;
align-items: center;
min-width: 22rem;
}
.current-image-data {
white-space: wrap;
Expand Down Expand Up @@ -799,6 +799,7 @@ body {
border-top: 1px solid var(--light-border);
width: fit-content;
padding-top: 0.5rem;
min-width: 22rem;
}
.alt_prompt_main_line {
display: flex;
Expand Down
1 change: 0 additions & 1 deletion src/wwwroot/css/themes/modern.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@
}

#t2i-top-2nd-split-bar {
margin-top: -8px;
width: var(--panel-gap);
position: relative;
z-index: 1;
Expand Down
49 changes: 25 additions & 24 deletions src/wwwroot/js/genpage/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1315,7 +1315,7 @@ let pageBarTop2 = -1;
let pageBarMid = -1;
let imageEditorSizeBarVal = -1;
let midForceToBottom = localStorage.getItem('barspot_midForceToBottom') == 'true';
let leftShut = localStorage.getItem('barspot_leftShut') == 'true';
let rightShut = localStorage.getItem('barspot_rightShut') == 'true';

let setPageBarsFunc;
let altPromptSizeHandleFunc;
Expand All @@ -1331,7 +1331,7 @@ function resetPageSizer() {
pageBarMid = -1;
imageEditorSizeBarVal = -1;
midForceToBottom = false;
leftShut = false;
rightShut = false;
setPageBarsFunc();
for (let runnable of layoutResets) {
runnable();
Expand Down Expand Up @@ -1363,7 +1363,7 @@ function pageSizer() {
let midDrag = false;
let imageEditorSizeBarDrag = false;
let isSmallWindow = window.innerWidth < 768 || window.innerHeight < 768;
if(isLikelyMobile()) {
if(isSmallWindow) {
topSplit.style.display = "none";
topSplit2.style.display = "none";
topSplitButton.style.display = "none";
Expand All @@ -1382,22 +1382,21 @@ function pageSizer() {
setCookie('barspot_pageBarTop2', pageBarTop2, 365);
setCookie('barspot_pageBarMidPx', pageBarMid, 365);
setCookie('barspot_imageEditorSizeBar', imageEditorSizeBarVal, 365);
let barTopLeft = leftShut ? `20px` : pageBarTop == -1 ? (isSmallWindow ? `14rem` : `28rem`) : `${pageBarTop}px`;
let barTopRight = pageBarTop2 == -1 ? (isSmallWindow ? `4rem` : `21rem`) : `${pageBarTop2}px`;
let barTopRight = rightShut ? `20px` : pageBarTop == -1 ? (isSmallWindow ? `14rem` : `28rem`) : `${pageBarTop}px`;
let barTopLeft = pageBarTop2 == -1 ? (isSmallWindow ? `4rem` : `21rem`) : `${pageBarTop2}px`;
let curImgWidth = `100vw - ${barTopLeft} - ${barTopRight} - 10px`;
// TODO: this 'eval()' hack to read the size in advance is a bit cursed.
let fontRem = parseFloat(getComputedStyle(document.documentElement).fontSize);
let curImgWidthNum = eval(curImgWidth.replace(/vw/g, `* ${window.innerWidth * 0.01}`).replace(/rem/g, `* ${fontRem}`).replace(/px/g, ''));
let curImgWidthNum = (window.innerWidth * 0.01 * parseFloat(curImgWidth.replace(/vw/g, ''))) - (fontRem * parseFloat(curImgWidth.replace(/rem/g, ''))) - parseFloat(curImgWidth.replace(/px/g, ''));
if (curImgWidthNum < 400) {
barTopRight = `${barTopRight} + ${400 - curImgWidthNum}px`;
curImgWidth = `100vw - ${barTopLeft} - ${barTopRight} - 10px`;
}
inputSidebar.style.width = `${barTopLeft}`;
mainInputsAreaWrapper.classList[pageBarTop < 350 ? "add" : "remove"]("main_inputs_small");
mainInputsAreaWrapper.style.width = `${barTopLeft}`;
inputSidebar.style.display = leftShut ? 'none' : '';
inputSidebar.style.display = rightShut ? 'none' : '';
altRegion.style.width = `calc(100vw - ${barTopLeft} - ${barTopRight} - 10px)`;
if(!isLikelyMobile()){
if(!isSmallWindow){
mainImageArea.style.width = `calc(100vw - ${barTopLeft})`;
}
mainImageArea.scrollTop = 0;
Expand All @@ -1416,7 +1415,7 @@ function pageSizer() {
else {
currentImageBatchCore.classList.remove('current_image_batch_core_small');
}
topSplitButton.innerHTML = leftShut ? '&#x21DA;' : '&#x21DB;';
topSplitButton.innerHTML = rightShut ? '&#x21DA;' : '&#x21DB;';
midSplitButton.innerHTML = midForceToBottom ? '&#x290A;' : '&#x290B;';
let altHeight = altRegion.style.display == 'none' ? '0px' : `(${altText.offsetHeight + altNegText.offsetHeight + altImageRegion.offsetHeight}px + 2rem)`;
if (pageBarMid != -1 || midForceToBottom) {
Expand Down Expand Up @@ -1497,9 +1496,9 @@ function pageSizer() {
midForceToBottom = val;
localStorage.setItem('barspot_midForceToBottom', midForceToBottom);
}
function setLeftShut(val) {
leftShut = val;
localStorage.setItem('barspot_leftShut', leftShut);
function setRightShut(val) {
rightShut = val;
localStorage.setItem('barspot_rightShut', rightShut);
}
midSplit.addEventListener('mousedown', (e) => {
if (e.target == midSplitButton) {
Expand All @@ -1525,33 +1524,35 @@ function pageSizer() {
e.preventDefault();
}, true);
topSplitButton.addEventListener('click', (e) => {
topDrag = false;
setLeftShut(!leftShut);
pageBarTop = Math.max(pageBarTop, 400);
topDrag2 = false;
setRightShut(!rightShut);
pageBarTop2 = Math.max(pageBarTop2, 400);
setPageBars();
e.preventDefault();
triggerChangeFor(altText);
triggerChangeFor(altNegText);
}, true);
console.log(topDrag)
let moveEvt = (e, x, y) => {
let offX = x;
offX = Math.max(Math.min(offX, window.innerWidth - 100), 10);
if (topDrag) {
pageBarTop = Math.min(window.innerWidth - offX - 5, 51 * 16);
setLeftShut(pageBarTop > window.innerWidth - 300);
pageBarTop = window.innerWidth - offX - 15;
console.log(pageBarTop)
if (pageBarTop < 100) {
pageBarTop = 22;
}
setPageBars();
}
if (topDrag2) {
pageBarTop2 = window.innerWidth - offX + 15;
if (pageBarTop2 < 100) {
pageBarTop2 = 22;
}
pageBarTop2 = Math.min(window.innerWidth - offX - 5, 51 * 16);
setRightShut(pageBarTop2 > window.innerWidth - 300);
setPageBars();
}
if (imageEditorSizeBarDrag) {
let maxAreaWidth = imageEditor.inputDiv.offsetWidth + currentImage.offsetWidth + 10;
let imageAreaLeft = imageEditor.inputDiv.getBoundingClientRect().left;
let val = Math.min(Math.max(offX - imageAreaLeft + 3, 200), maxAreaWidth - 200);
let imageAreaRight = imageEditor.inputDiv.getBoundingClientRect().right;
let val = Math.min(Math.max(offX - imageAreaRight + 3, 200), maxAreaWidth - 200);
imageEditorSizeBarVal = Math.min(90, Math.max(10, val / maxAreaWidth * 100));
setPageBars();
}
Expand Down

0 comments on commit acc21a1

Please sign in to comment.