diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index cec46d094..998637bf9 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -24,9 +24,11 @@ import { oai_settings } from "./openai.js";
import { poe_settings } from "./poe.js";
var NavToggle = document.getElementById("nav-toggle");
-var PanelPin = document.getElementById("rm_button_panel_pin");
+var RPanelPin = document.getElementById("rm_button_panel_pin");
+var LPanelPin = document.getElementById("lm_button_panel_pin");
var SelectedCharacterTab = document.getElementById("rm_button_selected_ch");
var RightNavPanel = document.getElementById("right-nav-panel");
+var LeftNavPanel = document.getElementById("left-nav-panel")
var AdvancedCharDefsPopup = document.getElementById("character_popup");
var ConfirmationPopup = document.getElementById("dialogue_popup");
var AutoConnectCheckbox = document.getElementById("auto-connect-checkbox");
@@ -207,6 +209,7 @@ function RA_checkOnlineStatus() {
if (online_status !== undefined && online_status !== "no_connection") {
$("#send_textarea").attr("placeholder", "Type a message..."); //on connect, placeholder tells user to type message
const formColor = power_user.fast_ui_mode ? "var(--black90a)" : "var(--black60a)";
+ /* console.log("RA-AC -- connected, coloring input as " + formColor); */
$("#send_form").css("background-color", formColor); //on connect, form BG changes to transprent black
$("#API-status-top").removeClass("redOverlayGlow");
connection_made = true;
@@ -294,9 +297,9 @@ $("document").ready(function () {
$("#api_button").click(function () { setTimeout(RA_checkOnlineStatus, 100); });
//toggle pin class when lock toggle clicked
- $(PanelPin).on("click", function () {
- SaveLocal("NavLockOn", $(PanelPin).prop("checked"));
- if ($(PanelPin).prop("checked") == true) {
+ $(RPanelPin).on("click", function () {
+ SaveLocal("NavLockOn", $(RPanelPin).prop("checked"));
+ if ($(RPanelPin).prop("checked") == true) {
console.log('adding pin class to right nav');
$(RightNavPanel).addClass('pinnedOpen');
} else {
@@ -310,34 +313,82 @@ $("document").ready(function () {
}
}
});
+ $(LPanelPin).on("click", function () {
+ SaveLocal("LNavLockOn", $(LPanelPin).prop("checked"));
+ if ($(LPanelPin).prop("checked") == true) {
+ console.log('adding pin class to Left nav');
+ $(LeftNavPanel).addClass('pinnedOpen');
+ } else {
+ console.log('removing pin class from Left nav');
+ $(LeftNavPanel).removeClass('pinnedOpen');
- // read the state of Nav Lock and apply to rightnav classlist
- $(PanelPin).prop('checked', LoadLocalBool("NavLockOn"));
+ if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
+ $(LeftNavPanel).slideToggle(200, "swing");
+ $(leftNavDrawerIcon).toggleClass('openIcon closedIcon');
+ $(LeftNavPanel).toggleClass('openDrawer closedDrawer');
+ }
+ }
+ });
+
+ // read the state of right Nav Lock and apply to rightnav classlist
+ $(RPanelPin).prop('checked', LoadLocalBool("NavLockOn"));
if (LoadLocalBool("NavLockOn") == true) {
//console.log('setting pin class via local var');
$(RightNavPanel).addClass('pinnedOpen');
}
- if ($(PanelPin).prop('checked' == true)) {
+ if ($(RPanelPin).prop('checked' == true)) {
console.log('setting pin class via checkbox state');
$(RightNavPanel).addClass('pinnedOpen');
}
+ // read the state of left Nav Lock and apply to leftnav classlist
+ $(LPanelPin).prop('checked', LoadLocalBool("LNavLockOn"));
+ if (LoadLocalBool("LNavLockOn") == true) {
+ //console.log('setting pin class via local var');
+ $(LeftNavPanel).addClass('pinnedOpen');
+ }
+ if ($(LPanelPin).prop('checked' == true)) {
+ console.log('setting pin class via checkbox state');
+ $(LeftNavPanel).addClass('pinnedOpen');
+ }
- //save state of nav being open or closed
+ //save state of Right nav being open or closed
$("#rightNavDrawerIcon").on("click", function () {
if (!$("#rightNavDrawerIcon").hasClass('openIcon')) {
SaveLocal('NavOpened', 'true');
} else { SaveLocal('NavOpened', 'false'); }
});
+ //save state of Left nav being open or closed
+ $("#leftNavDrawerIcon").on("click", function () {
+ if (!$("#leftNavDrawerIcon").hasClass('openIcon')) {
+ SaveLocal('LNavOpened', 'true');
+ } else { SaveLocal('LNavOpened', 'false'); }
+ });
+
+ //auto-open R nav if locked and previously open
+
if (LoadLocalBool("NavLockOn") == true && LoadLocalBool("NavOpened") == true) {
+ console.log("RA -- clicking right nav to open");
$("#rightNavDrawerIcon").click();
} else {
- console.log('didnt see reason to open nav on load: ' +
+ console.log('didnt see reason to open right nav on load: ' +
LoadLocalBool("NavLockOn")
+ ' nav open pref' +
LoadLocalBool("NavOpened" == true));
}
+ //auto-open L nav if locked and previously open
+
+ if (LoadLocalBool("LNavLockOn") == true && LoadLocalBool("LNavOpened") == true) {
+ console.log("RA -- clicking left nav to open");
+ $("#leftNavDrawerIcon").click();
+ } else {
+ console.log('didnt see reason to open left nav on load: ' +
+ LoadLocalBool("LNavLockOn")
+ + ' L-nav open pref' +
+ LoadLocalBool("LNavOpened" == true));
+ }
+
//save AutoConnect and AutoLoadChat prefs
$(AutoConnectCheckbox).on("change", function () { SaveLocal("AutoConnectEnabled", $(AutoConnectCheckbox).prop("checked")); });
$(AutoLoadChatCheckbox).on("change", function () { SaveLocal("AutoLoadChatEnabled", $(AutoLoadChatCheckbox).prop("checked")); });
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 79b422ee4..d92e579a1 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -16,6 +16,11 @@ const chat_styles = {
BUBBLES: 1,
}
+const sheld_width = {
+ DEFAULT: 0,
+ w1000px: 1,
+}
+
let power_user = {
collapse_newlines: false,
force_pygmalion_formatting: false,
@@ -29,6 +34,7 @@ let power_user = {
fast_ui_mode: true,
avatar_style: avatar_styles.ROUND,
chat_display: chat_styles.DEFAULT,
+ sheld_width: sheld_width.DEFAULT,
};
const storage_keys = {
@@ -43,7 +49,8 @@ const storage_keys = {
fast_ui_mode: "TavernAI_fast_ui_mode",
multigen: "TavernAI_multigen",
avatar_style: "TavernAI_avatar_style",
- chat_display: "TavernAI_chat_display"
+ chat_display: "TavernAI_chat_display",
+ sheld_width: "TavernAI_sheld_width"
};
function collapseNewlines(x) {
@@ -54,6 +61,7 @@ function switchUiMode() {
const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
$("body").toggleClass("no-blur", power_user.fast_ui_mode);
+ $("#send_form").toggleClass("no-blur-sendtextarea", power_user.fast_ui_mode);
}
function applyAvatarStyle() {
@@ -66,9 +74,21 @@ function applyChatDisplay() {
$("body").toggleClass("bubblechat", power_user.chat_display === chat_styles.BUBBLES);
}
+function applySheldWidth() {
+ power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? chat_styles.DEFAULT);
+ $("body").toggleClass("w1000px", power_user.sheld_width === sheld_width.w1000px);
+ let r = document.documentElement;
+ if (power_user.sheld_width === 1) {
+ r.style.setProperty('--sheldWidth', '1000px');
+ } else {
+ r.style.setProperty('--sheldWidth', '800px');
+ }
+}
+
applyAvatarStyle();
switchUiMode();
applyChatDisplay();
+applySheldWidth();
// TODO delete in next release
function loadFromLocalStorage() {
@@ -97,6 +117,7 @@ function loadPowerUserSettings(settings) {
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "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);
$("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
$("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
@@ -110,6 +131,7 @@ function loadPowerUserSettings(settings) {
$("#multigen").prop("checked", power_user.multigen);
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
$(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
+ $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
}
$(document).ready(() => {
@@ -149,7 +171,7 @@ $(document).ready(() => {
saveSettingsDebounced();
});
- $("#custom_chat_separator").on('input', function() {
+ $("#custom_chat_separator").on('input', function () {
power_user.custom_chat_separator = $(this).val();
saveSettingsDebounced();
});
@@ -177,4 +199,10 @@ $(document).ready(() => {
localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
applyChatDisplay();
});
+ $(`input[name="sheld_width"]`).on('input', function (e) {
+ power_user.sheld_width = Number(e.target.value);
+ localStorage.setItem(storage_keys.sheld_width, power_user.sheld_width);
+ console.log("sheld width changing now");
+ applySheldWidth();
+ });
});
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index f1feb4f79..fecd43b06 100644
--- a/public/style.css
+++ b/public/style.css
@@ -33,9 +33,11 @@
--greyCAIbg: rgb(36, 36, 37);
--ivory: rgb(220, 220, 210);
- --sheldWidth: 1000px;
+ --sheldWidth: 800px;
}
+
+
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
@@ -154,7 +156,10 @@ code {
/*TOPPER margin*/
#top-bar {
- width: 100vw;
+ width: var(--sheldWidth);
+ margin: 0 auto;
+ left: 0;
+ right: 0;
display: inline-block;
height: 40px;
position: fixed;
@@ -163,6 +168,7 @@ code {
box-shadow: 0 2px 20px 0 var(--black70a);
backdrop-filter: blur(10px);
background-color: var(--black70a);
+ /* border-radius: 0 0 20px 20px; */
-webkit-backdrop-filter: blur(10px);
z-index: 3000;
}
@@ -170,20 +176,20 @@ code {
#sheld {
display: grid;
grid-template-rows: auto min-content;
- height: calc(100svh - 40px);
+ height: calc(100svh - 42px);
overflow-x: hidden;
- max-width: var(--sheldWidth);
+ max-width: 800px;
position: absolute;
left: 0;
right: 0;
- top: 35px;
+ top: 41px;
margin: 0 auto;
z-index: 2;
}
#chat {
- margin-top: 5px;
+ /* margin-top: 5px; */
overflow-x: hidden;
padding-bottom: 0;
overflow-y: scroll;
@@ -205,7 +211,7 @@ code {
#form_sheld {
white-space: nowrap;
width: 100%;
- margin: 1px auto 10px auto;
+ margin: 1px auto 0 auto;
z-index: 3;
}
@@ -420,7 +426,8 @@ code {
}
#avatars-style .range-block-range,
-#chat-display .range-block-range {
+#chat-display .range-block-range,
+#sheld-width .range-block-range {
display: flex;
flex-direction: column;
}
@@ -651,27 +658,33 @@ input[type="file"] {
}
-#rm_button_panel_pin {
+#rm_button_panel_pin,
+#lm_button_panel_pin {
display: none;
}
-#rm_button_panel_pin:checked+label {
+#rm_button_panel_pin:checked+label,
+#lm_button_panel_pin:checked+label {
display: block;
}
-#rm_button_panel_pin:checked+label .checked {
+#rm_button_panel_pin:checked+label .checked,
+#lm_button_panel_pin:checked+label .checked {
display: block;
}
-#rm_button_panel_pin:checked+label .unchecked {
+#rm_button_panel_pin:checked+label .unchecked,
+#lm_button_panel_pin:checked+label .unchecked {
display: none;
}
-#rm_button_panel_pin:not(:checked)+label .checked {
+#rm_button_panel_pin:not(:checked)+label .checked,
+#lm_button_panel_pin:not(:checked)+label .checked {
display: none;
}
-#rm_button_panel_pin:not(:checked)+label .unchecked {
+#rm_button_panel_pin:not(:checked)+label .unchecked,
+#lm_button_panel_pin:not(:checked)+label .unchecked {
display: block;
}
@@ -787,10 +800,6 @@ img[src*="user-slash-solid.svg"] {
display: block;
}
-#api_button,
-#api_button_novel,
-#api_button_textgenerationwebui {}
-
#textgenerationwebui_api pre {
display: inline;
}
@@ -922,9 +931,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
margin-top: 5px;
display: flex;
flex-wrap: wrap;
- width: 100%;
- max-width: 800px;
- justify-content: center;
+ width: calc(var(--sheldWidth) - 100px);
+ max-width: 100vw;
+ justify-content: space-evenly;
}
.bg_example {
@@ -1030,9 +1039,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
position: relative;
}
-#advanced_div {
- /* width: 100%; */
-}
#rm_characters_block .form_create_bottom_buttons_block {
justify-content: space-evenly !important;
@@ -1189,12 +1195,12 @@ input[type=search]:focus::-webkit-search-cancel-button {
background-color: var(--black50a);
border: 1px solid var(--white30a);
border-radius: 10px;
- padding: 5px;
+ padding: 10px;
width: min-content;
cursor: pointer;
margin: 10px 0;
transition: 0.3s;
- /* font-size: 15px; */
+ font-size: 15px;
}
.menu_button:hover {
@@ -1335,7 +1341,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
- max-width: 800px;
+ max-width: var(--sheldWidth);
height: calc(100% - 40px);
position: absolute;
margin-left: auto;
@@ -1581,7 +1587,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin) {
}
/* the checkbox starts with a size 0 background of a checkmark */
-input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin)::after {
+input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin)::after {
content: '';
color: var(--white100);
position: absolute;
@@ -1602,15 +1608,13 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin)::after {
}
/* when the checkbox is checked, the background image is grown to normal size to fill the background of the 'checkbox'*/
-input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after {
+input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):checked::after {
-webkit-transform: scale(1);
transform: scale(1);
}
/*---------------------------------------------------------------------------------------------------------*/
-#title_api {}
-
.option_select_right_menu {
width: 284px;
margin-bottom: 35px;
@@ -1924,8 +1928,8 @@ input[type="range"]::-webkit-slider-thumb {
-webkit-backdrop-filter: blur(30px);
grid-template-rows: 50px 100px 100px 100px auto;
grid-gap: 10px;
- max-width: 800px;
- height: calc(100vh - 50px);
+ max-width: var(--sheldWidth);
+ height: calc(100vh - 40px);
position: absolute;
z-index: 3002;
margin-left: auto;
@@ -2019,9 +2023,9 @@ input[type="range"]::-webkit-slider-thumb {
#select_chat_popup {
display: grid;
grid-template-rows: auto auto;
- max-width: 800px;
+ max-width: var(--sheldWidth);
height: min-content;
- max-height: calc(100vh - 55px);
+ max-height: calc(100vh - 40px);
min-height: 100px;
position: absolute;
z-index: 2066;
@@ -2590,9 +2594,9 @@ a {
#right-nav-panel {
width: calc((100vw - var(--sheldWidth) - 2px) /2);
/* min-width: 450px; */
- height: calc(100vh - 55px);
+ height: 100vh;
position: fixed;
- top: 40px;
+ top: 0;
margin: 0;
right: 0;
left: auto;
@@ -2654,14 +2658,6 @@ a {
font-size: 2em;
}
-/* this is what causes the panel movement */
-#nav-toggle:checked~#right-nav-panel {
- /* right: 0;
- box-shadow: -5px 0 20px 0 var(--black70a); */
- /*overflow-y: auto;*/
-}
-
-
#right-nav-panel>div:not(#right-nav-panel-tabs) {
height: calc(100% - 40px);
overflow-y: auto;
@@ -2774,7 +2770,7 @@ label[for="extensions_autoconnect"] {
margin: 0 auto;
padding-top: 5px;
height: 40px;
- max-width: 800px;
+ max-width: var(--sheldWidth);
color: white;
justify-content: center;
display: grid;
@@ -2915,26 +2911,27 @@ label[for="extensions_autoconnect"] {
-webkit-backdrop-filter: blur(20px);
}
-.fillRight, .fillLeft {
+.fillRight,
+.fillLeft {
min-width: unset;
}
-.fillLeft{
+.fillLeft {
max-width: calc((100vw - var(--sheldWidth) - 2px) /2);
- max-height: calc(100vh - 55px);
- height: calc(100vh - 55px);
+ height: 100vh;
+ max-height: 100vh;
position: fixed;
- top: 40px;
+ top: 0;
margin: 0;
left: 0;
right: auto;
- padding: 0 10px;
+ padding: 10px 10px 0 10px;
border-radius: 0 0 20px 0;
box-shadow: none;
}
.width100p {
- width:100%;
+ width: 100%;
}
.drawer-content .text_pole {
@@ -3085,7 +3082,7 @@ label[for="extensions_autoconnect"] {
#character_popup,
#world_popup {
/*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
- height: calc(100svh - 55px);
+ height: calc(100svh - 40px);
width: calc(100vw - 10px);
margin: 0 auto;
margin-left: 5px;
@@ -3194,7 +3191,7 @@ label[for="extensions_autoconnect"] {
/*bubble chat style*/
body.bubblechat #chat {
- margin-top: 5px;
+ /* margin-top: 5px; */
overflow-x: hidden;
padding-bottom: 0;
overflow-y: scroll;
@@ -3204,7 +3201,7 @@ body.bubblechat #chat {
scrollbar-width: thin;
transition: all 1s ease-in-out;
flex-direction: column;
- border-radius: 20px;
+ /* border-radius: 20px; */
z-index: 3;
border: none;
backdrop-filter: unset;
@@ -3249,12 +3246,20 @@ body.bubblechat ::-webkit-scrollbar-thumb {
border-radius: 5px;
}
+body.w1000px #sheld {
+ max-width: 1000px !important;
+}
+
/*FastUI blur removal*/
body.no-blur * {
backdrop-filter: unset !important;
}
+#send_form.no-blur-sendtextarea {
+ background-color: var(--black90a) !important;
+}
+
body.no-blur #bg1,
body.no-blur #bg2 {
filter: unset;