extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-04-04 05:51:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #675 from JeLuF/drag

Browse Source 
Add drag handle
This commit is contained in:
cmdr2 2022-12-19 09:36:44 +05:30 committed by GitHub
commit cb3b542363
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/media/css/main.css
View File

@ -265,7 +265,7 @@ img {
} }
.preview-prompt { .preview-prompt {
font-size: 13pt; font-size: 13pt;
margin-bottom: 10pt; display: inline;
} }
#coffeeButton { #coffeeButton {
height: 23px; height: 23px;
@ -391,14 +391,18 @@ img {
.imageTaskContainer > div > .collapsible-handle { .imageTaskContainer > div > .collapsible-handle {
display: none; display: none;
} }
.drag-handle {
margin-right: 6px;
cursor: move;
}
.taskStatusLabel { .taskStatusLabel {
float: left;
font-size: 8pt; font-size: 8pt;
background:var(--background-color2); background:var(--background-color2);
border: 1px solid rgb(61, 62, 66); border: 1px solid rgb(61, 62, 66);
padding: 2pt 4pt; padding: 2pt 4pt;
border-radius: 2pt; border-radius: 2pt;
margin-right: 5pt; margin-right: 5pt;
display: inline;
} }
.activeTaskLabel { .activeTaskLabel {
background:rgb(0, 90, 30); background:rgb(0, 90, 30);
@ -448,6 +452,7 @@ img {
font-size: 10pt; font-size: 10pt;
color: #aaa; color: #aaa;
margin-bottom: 5pt; margin-bottom: 5pt;
margin-top: 5pt;
} }
.img-batch { .img-batch {
display: inline; display: inline;

19
ui/media/js/main.js
View File

@ -783,6 +783,7 @@ function createTask(task) {
taskEntry.id = `imageTaskContainer-${Date.now()}` taskEntry.id = `imageTaskContainer-${Date.now()}`
taskEntry.className = 'imageTaskContainer' taskEntry.className = 'imageTaskContainer'
taskEntry.innerHTML = ` <div class="header-content panel collapsible active"> taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
<i class="drag-handle fa-solid fa-grip"></i>
<div class="taskStatusLabel">Enqueued</div> <div class="taskStatusLabel">Enqueued</div>
<button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button> <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
<button class="secondaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button> <button class="secondaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>
@ -796,6 +797,13 @@ function createTask(task) {
</div>` </div>`
createCollapsibles(taskEntry) createCollapsibles(taskEntry)
let draghandle = taskEntry.querySelector('.drag-handle')
draghandle.addEventListener('mousedown', (e) => { taskEntry.setAttribute('draggable',true)})
draghandle.addEventListener('mouseup', (e) => { taskEntry.setAttribute('draggable',false)})
taskEntry.addEventListener('dragend', (e) => { taskEntry.setAttribute('draggable',false)})
taskEntry.addEventListener('dragstart', function(e) {
e.dataTransfer.setData("text/plain", taskEntry.id);
})
if (task.reqBody.init_image !== undefined) { if (task.reqBody.init_image !== undefined) {
@ -829,24 +837,13 @@ function createTask(task) {
task.isProcessing = true task.isProcessing = true
taskEntry = imagePreview.insertBefore(taskEntry, previewTools.nextSibling) taskEntry = imagePreview.insertBefore(taskEntry, previewTools.nextSibling)
taskEntry.draggable = true
htmlTaskMap.set(taskEntry, task) htmlTaskMap.set(taskEntry, task)
taskEntry.addEventListener('dragstart', function(ev) {
ev.dataTransfer.setData("text/plain", ev.target.id);
})
task.previewPrompt.innerText = task.reqBody.prompt task.previewPrompt.innerText = task.reqBody.prompt
if (task.previewPrompt.innerText.trim() === '') { if (task.previewPrompt.innerText.trim() === '') {
task.previewPrompt.innerHTML = '&nbsp;' // allows the results to be collapsed task.previewPrompt.innerHTML = '&nbsp;' // allows the results to be collapsed
} }
// Allow prompt text to be selected.
task.previewPrompt.addEventListener("mouseover", function() {
taskEntry.setAttribute("draggable", "false");
});
task.previewPrompt.addEventListener("mouseout", function() {
taskEntry.setAttribute("draggable", "true");
});
} }
function getCurrentUserRequest() { function getCurrentUserRequest() {