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

- left panel is now draggable and resizeable

Browse Source
This commit is contained in:
RossAscends
2023-04-18 02:33:02 +09:00
parent daaf460e17
commit d7dceca390
3 changed files with 631 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/index.html
View File

@@ -68,7 +68,9 @@
<div class="drawer-toggle drawer-header"> <div class="drawer-toggle drawer-header">
<div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders closedIcon" title="AI Response Configuration"></div> <div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders closedIcon" title="AI Response Configuration"></div>
</div> </div>
<div id="left-nav-panel" class="drawer-content fillLeft closedDrawer widthFreeExpand">
<div id="left-nav-panel" class="drawer-content fillLeft closedDrawer">
<div id="left-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div>
<div class="right_menu_button" id="lm_button_panel_pin_div" title="Locked = AI Configuration panel will stay open"> <div class="right_menu_button" id="lm_button_panel_pin_div" title="Locked = AI Configuration panel will stay open">
<input type="checkbox" id="lm_button_panel_pin"> <input type="checkbox" id="lm_button_panel_pin">
<label for="lm_button_panel_pin"> <label for="lm_button_panel_pin">
@@ -76,6 +78,7 @@
<div class="checked fa-solid fa-lock "></div> <div class="checked fa-solid fa-lock "></div>
</label> </label>
</div> </div>
<div class="scrollableInner">
<div class="flex-container"> <div class="flex-container">
<div id="respective-presets-block" class="width100p"> <div id="respective-presets-block" class="width100p">
<div id="kobold_api-presets"> <div id="kobold_api-presets">
@@ -796,6 +799,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="sys-settings-button" class="drawer" style="z-index:3001;"> <div id="sys-settings-button" class="drawer" style="z-index:3001;">
<div class="drawer-toggle drawer-header"> <div class="drawer-toggle drawer-header">
@@ -1358,6 +1362,7 @@
</div> </div>
</div> </div>
<nav id="right-nav-panel" class="drawer-content closedDrawer fillRight"> <nav id="right-nav-panel" class="drawer-content closedDrawer fillRight">
<!-- <div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div> -->
<div id="right-nav-panel-tabs"> <div id="right-nav-panel-tabs">
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div> <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
<div class="right_menu_button" id="rm_button_selected_ch"> <div class="right_menu_button" id="rm_button_selected_ch">
@@ -1814,7 +1819,7 @@
<div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div> <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
</div> </div>
<div id="sheld"> <div id="sheld">
<div id="sheldheader" class="fa-solid fa-grip"></div> <div id="sheldheader" class="fa-solid fa-grip drag-grabber"></div>
<div class="pull-tab"></div> <div class="pull-tab"></div>
<div id="chat"> <div id="chat">
</div> </div>

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

@@ -309,6 +309,8 @@ function OpenNavPanels() {
// Make the DIV element draggable: // Make the DIV element draggable:
dragElement(document.getElementById("sheld")); dragElement(document.getElementById("sheld"));
dragElement(document.getElementById("left-nav-panel"));
function dragElement(elmnt) { function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

25
public/style.css
View File

@@ -216,10 +216,10 @@ code {
width: var(--sheldWidth); width: var(--sheldWidth);
} }
#sheldheader { .drag-grabber {
position: absolute; position: absolute;
width: 20px; width: 20px !important;
height: 20px; height: 20px !important;
color: var(--SmartThemeBodyColor); color: var(--SmartThemeBodyColor);
z-index: 2000; z-index: 2000;
text-align: center; text-align: center;
@@ -3002,6 +3002,8 @@ label[for="extensions_autoconnect"] {
margin: 35px auto 0 auto; margin: 35px auto 0 auto;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
resize: both;
z-index: 9999;
} }
.fillRight, .fillRight,
@@ -3010,9 +3012,9 @@ label[for="extensions_autoconnect"] {
} }
.fillLeft { .fillLeft {
max-width: calc((100svw - var(--sheldWidth) - 2px) /2); width: calc((100svw - var(--sheldWidth) - 2px) /2);
height: 99.9svh; /* height: 99.9svh; */
max-height: 99.9svh; max-height: calc(100svh - 42px);
position: fixed; position: fixed;
top: 0; top: 0;
margin: 0; margin: 0;
@@ -3021,6 +3023,12 @@ label[for="extensions_autoconnect"] {
padding: 5px; padding: 5px;
border-radius: 0 0 20px 0; border-radius: 0 0 20px 0;
box-shadow: none; box-shadow: none;
overflow-y: hidden;
}
.scrollableInner {
overflow: auto;
height: 100%;
} }
.width100p { .width100p {
@@ -3293,7 +3301,7 @@ toolcool-color-picker {
} }
#sheldheader, .drag-grabber,
.pull-tab { .pull-tab {
display: none; display: none;
@@ -3319,7 +3327,8 @@ toolcool-color-picker {
border-right: 1px solid var(--grey30); border-right: 1px solid var(--grey30);
border-bottom: 1px solid var(--grey30); border-bottom: 1px solid var(--grey30);
border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;
top: 40px; top: 40px !important;
left: 0 !important;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
} }