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)*/