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

added panel lock to rightnav

Browse Source 
Added a lock/unlock toggle to the right nav which will function to pin the panel in place (disengages auto-close) if the user desires it.
This commit is contained in:
RossAsscends
2023-03-01 05:38:02 +09:00
parent e16b1d533b
commit db19ccb0f0
2 changed files with 64 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@@ -1905,9 +1905,10 @@
// RossAscends: Added functionality that will close the RightNav panels when User clicks outside them // RossAscends: Added functionality that will close the RightNav panels when User clicks outside them
var NavToggle = document.getElementById("nav-toggle"); var NavToggle = document.getElementById("nav-toggle");
var PanelPin = document.getElementById("rm_button_panel_pin");
$('document').ready(function(){ $('document').ready(function(){
$("html").click(function(e){ $("html").click(function(e){
if (NavToggle.checked === true){ if (NavToggle.checked === true && PanelPin.checked === false) {
if ($(e.target).attr('id') !== "nav-toggle") { if ($(e.target).attr('id') !== "nav-toggle") {
if (document.querySelector('#right-nav-panel').contains(e.target) === false){ if (document.querySelector('#right-nav-panel').contains(e.target) === false){
document.getElementById('nav-toggle').click(); document.getElementById('nav-toggle').click();
@@ -2962,8 +2963,9 @@
<div class="right_menu_button" id="rm_button_characters"><h2>Characters</h2></div> <div class="right_menu_button" id="rm_button_characters"><h2>Characters</h2></div>
<div class="right_menu_button" id="rm_button_settings"><h2>Settings</h2></div> <div class="right_menu_button" id="rm_button_settings"><h2>Settings</h2></div>
<div class="right_menu_button" id="rm_button_selected_ch"><h2></h2></div> <div class="right_menu_button" id="rm_button_selected_ch"><h2></h2></div>
<div class="right_menu_button" id="rm_button_panel_pin_div"><input type="checkbox" id="rm_button_panel_pin"></div>
<div id="rm_ch_create_block" class="right_menu"> <div id="rm_ch_create_block" class="right_menu" style="display: none;">
<div id="rm_button_back" class="right_menu_button"><h2 style="color: rgb(188, 193, 200, 0.5);">&#8656;</h2></div> <div id="rm_button_back" class="right_menu_button"><h2 style="color: rgb(188, 193, 200, 0.5);">&#8656;</h2></div>
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data"> <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">

67
public/style.css
View File

@@ -520,10 +520,67 @@ input[type=button] {
text-align: center; text-align: center;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
margin-top:0px; margin-top:0px;
}
.right_menu_button:active {
color:red;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.05);
background-color: rgba(0,0,0,0.05);
}
#rm_button_panel_pin_div {
height: 1.65rem;
width: 24px;
margin-top: -10px;
margin-right: 30px;
float: right;
}
#rm_button_panel_pin {
/*position: absolute;
right: 13px;
top: 12px;*/
padding: 0px;
margin: 0px;
cursor: pointer;
height: 0;
width: 0;
z-index: 3001;
}
#rm_button_panel_pin:hover::after {
color: #f4f4f4;
}
#rm_button_panel_pin::after {
content: '\01F513'; /*open lock emoji*/
filter:grayscale(1);
line-height: 20px;
font-size: 15px;
padding: 0;
text-align: center;
vertical-align: middle;
display: inline-block;
width: 20px;
height: 20px;
margin-top: 0;
margin-left: 0;
border-radius: 5px;
background: rgba(0, 0, 0, 0.3);
color: #666;
-webkit-transition: all 0.275s;
transition: all 0.275s;
} }
#rm_button_panel_pin:checked::after {
content: '\01F512'; /*closed lock emoji*/
line-height: 20px;
font-size: 15px;
}
#character_import_button{ #character_import_button{
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@@ -587,11 +644,7 @@ input[type=button] {
} }
} }
.right_menu_button:active {
color:red;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.05);
background-color: rgba(0,0,0,0.05);
}
#rm_ch_create_block{ #rm_ch_create_block{
display: none; display: none;