diff --git a/public/index.html b/public/index.html
index 4a8ce94da..8e89cd8d2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1209,6 +1209,10 @@
♡ Waifu Mode ♡
+
@@ -1822,7 +1826,7 @@
-
+
diff --git a/public/scripts/extensions/expressions/style.css b/public/scripts/extensions/expressions/style.css
index 89e8e9fd6..cab7b42f6 100644
--- a/public/scripts/extensions/expressions/style.css
+++ b/public/scripts/extensions/expressions/style.css
@@ -15,7 +15,7 @@
padding: 0;
filter: drop-shadow(2px 2px 2px #51515199);
z-index: 3;
- resize: both;
+ /* resize: both; */
overflow: hidden;
}
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index e029f8e34..30e8009b4 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -70,6 +70,7 @@ let power_user = {
blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
waifuMode: false,
+ movingUI: false,
theme: 'Default (Dark)',
};
@@ -89,6 +90,7 @@ const storage_keys = {
blur_strength: "TavernAI_blur_strength",
waifuMode: "TavernAI_waifuMode",
+ movingUI: "TavernAI_movingUI",
};
const chat = document.getElementById('chat');
@@ -130,6 +132,13 @@ function switchWaifuMode() {
scrollChatToBottom();
}
+function switchMovingUI() {
+ const movingUI = localStorage.getItem(storage_keys.movingUI);
+ power_user.movingUI = movingUI === null ? false : movingUI == "true";
+ $("body").toggleClass("movingUI", power_user.movingUI);
+ scrollChatToBottom();
+}
+
function applyAvatarStyle() {
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
$("body").toggleClass("big-avatars", power_user.avatar_style === avatar_styles.RECTANGULAR);
@@ -255,6 +264,7 @@ applyAvatarStyle();
applyBlurStrength();
applyChatDisplay();
switchWaifuMode()
+switchMovingUI();
function loadPowerUserSettings(settings, data) {
// Load from settings.json
@@ -269,8 +279,10 @@ function loadPowerUserSettings(settings, data) {
// These are still local storage
const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
const waifuMode = localStorage.getItem(storage_keys.waifuMode);
+ const movingUI = localStorage.getItem(storage_keys.movingUI);
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
power_user.waifuMode = waifuMode === null ? false : waifuMode == "true";
+ power_user.movingUI = movingUI === null ? false : movingUI == "true";
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
@@ -289,6 +301,7 @@ function loadPowerUserSettings(settings, data) {
$("#custom_chat_separator").val(power_user.custom_chat_separator);
$("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
$("#waifuMode").prop("checked", power_user.waifuMode);
+ $("#movingUImode").prop("checked", power_user.movingUI);
$("#multigen").prop("checked", power_user.multigen);
$("#multigen_first_chunk").val(power_user.multigen_first_chunk);
$("#multigen_next_chunks").val(power_user.multigen_next_chunks);
@@ -408,6 +421,12 @@ $(document).ready(() => {
switchWaifuMode();
});
+ $("#movingUImode").change(function () {
+ power_user.movingUI = $(this).prop("checked");
+ localStorage.setItem(storage_keys.movingUI, power_user.movingUI);
+ switchMovingUI();
+ });
+
$(`input[name="avatar_style"]`).on('input', function (e) {
power_user.avatar_style = Number(e.target.value);
localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style);
diff --git a/public/style.css b/public/style.css
index f2b9bd5c9..d861d7457 100644
--- a/public/style.css
+++ b/public/style.css
@@ -208,7 +208,7 @@ code {
top: 41px;
/* margin: 0 auto; */
z-index: 2;
- resize: both;
+ /* resize: both; */
min-height: 100px;
min-width: 100px;
width: var(--sheldWidth);
@@ -230,6 +230,7 @@ code {
border: 1px solid var(--white30a);
cursor: -moz-grab;
cursor: -webkit-grab;
+ display: none;
}
#sheldheader:active {
@@ -3044,7 +3045,7 @@ label[for="extensions_autoconnect"] {
margin: 35px auto 0 auto;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
- resize: both;
+ /* resize: both; */
z-index: 9999 !important;
}
@@ -3327,13 +3328,23 @@ body.waifuMode .expression-holder {
bottom: 0;
filter: drop-shadow(2px 2px 2px #51515199);
z-index: 1;
- resize: both;
+ /* resize: both; */
}
body.waifuMode img.expression {
/* height: 90vh; */
}
+body.movingUI .drag-grabber {
+ display: inline;
+}
+
+body.movingUI #sheld,
+body.movingUI .drawer-content,
+body.movingUI #expression-holder {
+ resize: both;
+}
+
/* ---------- @media queries must always go at the bottom ------------*/
/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/