rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

character expressions are now draggable

Browse Source
This commit is contained in:
RossAscends
2023-04-18 18:35:36 +09:00
parent 473c7a614d
commit ac7ee2f11f
4 changed files with 66 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/scripts/RossAscends-mods.js
View File

@ -315,6 +315,9 @@ function OpenNavPanels() {
dragElement(document.getElementById("sheld")); dragElement(document.getElementById("sheld"));
dragElement(document.getElementById("left-nav-panel")); dragElement(document.getElementById("left-nav-panel"));
dragElement(document.getElementById("right-nav-panel")); dragElement(document.getElementById("right-nav-panel"));
setTimeout(function () {
dragElement(document.getElementById("expression-holder"))
}, 2000);
function dragElement(elmnt) { function dragElement(elmnt) {
@ -342,6 +345,7 @@ function dragElement(elmnt) {
//disable scrollbars when dragging to prevent jitter //disable scrollbars when dragging to prevent jitter
$("body").css("overflow", "hidden"); $("body").css("overflow", "hidden");
//get window size //get window size
let winWidth = window.innerWidth; let winWidth = window.innerWidth;
let winHeight = window.innerHeight; let winHeight = window.innerHeight;
@ -387,6 +391,9 @@ function dragElement(elmnt) {
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
$(elmnt).css("bottom", "unset");
$(elmnt).css("right", "unset");
} }
}, 50) }, 50)
@ -403,6 +410,7 @@ function dragElement(elmnt) {
document.onmousemove = null; document.onmousemove = null;
//revert scrolling to normal after drag to allow recovery of vastly misplaced elements //revert scrolling to normal after drag to allow recovery of vastly misplaced elements
$("body").css("overflow", "auto"); $("body").css("overflow", "auto");
} }
} }

6
public/scripts/extensions/expressions/index.js
View File

@ -285,7 +285,11 @@ function onClickExpressionImage() {
(function () { (function () {
function addExpressionImage() { function addExpressionImage() {
const html = `<div id="expression-holder" class="expression-holder"><img class="expression"></div>`; const html = `
<div id="expression-holder" class="expression-holder">
<div id="expression-holderheader" class="fa-solid fa-grip drag-grabber"></div>
<img class="expression">
</div>`;
$('body').append(html); $('body').append(html);
} }
function addSettings() { function addSettings() {

28
public/scripts/extensions/expressions/style.css
View File

@ -5,7 +5,7 @@
} }
.expression-holder { .expression-holder {
max-height: 90vh; /* max-height: 90vh;
max-width: calc((100vw - 800px)/2); max-width: calc((100vw - 800px)/2);
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -16,14 +16,34 @@
text-align: center; text-align: center;
filter: drop-shadow(2px 2px 2px #51515199); filter: drop-shadow(2px 2px 2px #51515199);
transition: 500ms; transition: 500ms;
z-index: 3; */
/* min-width: 100px;
min-height: 100px; */
max-height: 90vh;
max-width: 90vh;
width: calc((100vw - var(--sheldWidth)) /2);
position: absolute;
bottom: 1px;
padding: 0;
filter: drop-shadow(2px 2px 2px #51515199);
z-index: 3; z-index: 3;
resize: both;
overflow: hidden;
/* border: 1px solid red; */
} }
img.expression { img.expression {
max-width: 100%; /* max-width: 90vw;
max-height: 90vh; max-height: 90vh; */
width: 100%;
height: 100%;
vertical-align: bottom; vertical-align: bottom;
object-fit: cover; object-fit: contain;
} }
img.expression.default { img.expression.default {

32
public/style.css
View File

@ -3318,7 +3318,7 @@ body.waifuMode #chat {
} }
body.waifuMode .expression-holder { body.waifuMode .expression-holder {
max-height: 90vh; /* max-height: 90vh;
max-width: unset; max-width: unset;
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -3330,14 +3330,38 @@ body.waifuMode .expression-holder {
text-align: center; text-align: center;
filter: drop-shadow(2px 2px 2px #51515199); filter: drop-shadow(2px 2px 2px #51515199);
transition: 500ms; transition: 500ms;
z-index: 1; */
max-height: 90vh;
max-width: 90vw;
/* width: 100vw; */
/* width: min-content; */
height: 90vh;
width: 90vw;
position: absolute;
left: 5vw;
/* right: calc(100vw / 2); */
/* display: flex !important; */
/* justify-self: center; */
bottom: 0;
/* padding-left: 10px; */
/* padding-right: 10px; */
/* text-align: center; */
filter: drop-shadow(2px 2px 2px #51515199);
/* transition: 500ms; */
z-index: 1; z-index: 1;
resize: both;
} }
body.waifuMode img.expression { body.waifuMode img.expression {
height: 90vh; /* height: 90vh;
max-width: 100%; max-width: 100%;
max-height: 90vh; max-height: 90vh;
vertical-align: bottom; vertical-align: bottom; */
height: 90vh;
/* width: 100px; */
/* vertical-align: bottom; */
} }
/* ---------- @media queries must always go at the bottom ------------*/ /* ---------- @media queries must always go at the bottom ------------*/
@ -3430,7 +3454,7 @@ body.waifuMode img.expression {
resize: none; resize: none;
left: 0 !important; left: 0 !important;
top: 42px !important; top: 42px;
width: 100% !important; width: 100% !important;
max-width: 100%; max-width: 100%;
} }