- right nav now draggable

- added mainColor to all buttons and panel texts/headers
- adjusted button hover stylings
This commit is contained in:
RossAscends
2023-04-18 07:43:56 +09:00
parent 3d1e0f3aa1
commit 6afb03e017
3 changed files with 184 additions and 178 deletions

View File

@ -1361,186 +1361,189 @@
</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-panelheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="right-nav-panel-tabs"> <div id="rm_button_panel_pin_div" title="Locked = Character Management panel will stay open">
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div> <input type="checkbox" id="rm_button_panel_pin">
<div class="right_menu_button" id="rm_button_selected_ch"> <label for="rm_button_panel_pin">
<h2></h2> <div class="fa-solid unchecked fa-lock-open" alt=""></div>
</div> <div class="fa-solid checked fa-lock" alt=""></div>
<div class="right_menu_button" id="rm_button_panel_pin_div" title="Locked = Character Management panel will stay open"> </label>
<input type="checkbox" id="rm_button_panel_pin">
<label for="rm_button_panel_pin">
<div class="fa-solid unchecked fa-lock-open" alt=""></div>
<div class="fa-solid checked fa-lock" alt=""></div>
</label>
</div>
</div> </div>
<div id="rm_ch_create_block" class="right_menu" style="display: none;"> <div class="scrollableInner">
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data"> <div id="right-nav-panel-tabs">
<div id="avatar-and-name-block"> <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
<div id="name_div"> <div class="right_menu_button" id="rm_button_selected_ch">
<h4>Character Name</h4> <h2></h2>
<input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="120" value="" autocomplete="off"> </div>
</div>
<div id="avatar_div" class="avatar_div"> </div>
<div id="avatar_div_div" class="avatar"> <div id="rm_ch_create_block" class="right_menu" style="display: none;">
<img id="avatar_load_preview" src="img/ai4.png" alt="avatar"> <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="avatar-and-name-block">
<div id="name_div">
<h4>Character Name</h4>
<input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="120" value="" autocomplete="off">
</div> </div>
<div class="form_create_bottom_buttons_block"> <div id="avatar_div" class="avatar_div">
<label for="add_avatar_button" class="menu_button fa-solid fa-file-image " title="Click to select a new avatar for this character"> <div id="avatar_div_div" class="avatar">
<input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp"> <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
</label> </div>
<div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div> <div class="form_create_bottom_buttons_block">
<div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div> <label for="add_avatar_button" class="menu_button fa-solid fa-file-image " title="Click to select a new avatar for this character">
<div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div> <input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
<label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character"> </label>
<input type="submit" id="create_button" name="create_button"> <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
</label> <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
<div id="delete_button" class="menu_button fa-solid fa-trash-can " title="Delete Character"></div> <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div>
<label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character">
<input type="submit" id="create_button" name="create_button">
</label>
<div id="delete_button" class="menu_button fa-solid fa-trash-can " title="Delete Character"></div>
</div>
</div>
<div title="Token counts may be inaccurate and provided just for reference." id="result_info"></div>
</div>
<hr>
<div id="description_div" class="margin-bot-10px">
Description
<a href="/notes/1" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<textarea id="description_textarea" placeholder="Describe your character's physical and mental traits here." class="margin-bot-10px" name="description" placeholder=""></textarea>
<div id="first_message_div" class="margin-bot-10px">
First message
<a href="/notes/3" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<textarea id="firstmessage_textarea" placeholder="This will be the first message from the character that starts every chat." class="margin-bot-10px" name="first_mes" placeholder=""></textarea>
<!-- these divs are invisible and used for server communication purposes -->
<div id="hidden-divs">
<div id="avatar_url_div">
<input id="avatar_url_pole" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
<div id="selected_chat_div">
<input id="selected_chat_pole" name="chat" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
<div id="create_date_div">
<input id="create_date_pole" name="create_date" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
<div id="last_mes_div">
<input id="last_mes_pole" name="last_mes" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div> </div>
</div> </div>
<div title="Token counts may be inaccurate and provided just for reference." id="result_info"></div> <!-- now back to normal divs for display purposes-->
</div> </form>
<hr>
<div id="description_div" class="margin-bot-10px">
Description
<a href="/notes/1" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<textarea id="description_textarea" placeholder="Describe your character's physical and mental traits here." class="margin-bot-10px" name="description" placeholder=""></textarea>
<div id="first_message_div" class="margin-bot-10px">
First message
<a href="/notes/3" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<textarea id="firstmessage_textarea" placeholder="This will be the first message from the character that starts every chat." class="margin-bot-10px" name="first_mes" placeholder=""></textarea>
<!-- these divs are invisible and used for server communication purposes -->
<div id="hidden-divs">
<div id="avatar_url_div">
<input id="avatar_url_pole" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
<div id="selected_chat_div">
<input id="selected_chat_pole" name="chat" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
<div id="create_date_div">
<input id="create_date_pole" name="create_date" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
<div id="last_mes_div">
<input id="last_mes_pole" name="last_mes" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
</div>
<!-- now back to normal divs for display purposes-->
</form>
</div>
<div id="rm_group_chats_block" class="right_menu">
<div id="rm_group_top_bar">
<div id="rm_button_back_from_group" class="menu_button fa-solid fa-left-long"></div>
<input id="rm_group_chat_name" class="text_pole" type="text" name="chat_name" placeholder="Chat Name (Optional)" />
</div> </div>
<div id="rm_group_buttons"> <div id="rm_group_chats_block" class="right_menu">
<div class="rm_group_settings"> <div id="rm_group_top_bar">
<label class="checkbox_label"> <div id="rm_button_back_from_group" class="menu_button fa-solid fa-left-long"></div>
<input id="rm_group_allow_self_responses" type="checkbox" /> <input id="rm_group_chat_name" class="text_pole" type="text" name="chat_name" placeholder="Chat Name (Optional)" />
Allow bot responses to self
</label>
<label id="rm_group_automode_label" class="checkbox_label">
<input id="rm_group_automode" type="checkbox" />
Auto Mode
</label>
<h5>
Group reply strategy
<a href="/notes/group_reply_strategy" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h5>
<label>
<input type="radio" name="rm_group_activation_strategy" value="0" />
Natural order
</label>
<label>
<input type="radio" name="rm_group_activation_strategy" value="1" />
List order
</label>
</div> </div>
<div id="rm_group_buttons_expander">&nbsp;</div> <div id="rm_group_buttons">
<input id="rm_group_submit" class="menu_button" type="submit" value="Create"> <div class="rm_group_settings">
<input id="rm_group_delete" class="menu_button" type="submit" value="Delete"> <label class="checkbox_label">
</div> <input id="rm_group_allow_self_responses" type="checkbox" />
<div id="rm_group_add_members_header"> Allow bot responses to self
<h3>Add Members</h3> </label>
<input id="rm_group_filter" class="text_pole" type="search" placeholder="Filter..." /> <label id="rm_group_automode_label" class="checkbox_label">
</div> <input id="rm_group_automode" type="checkbox" />
<!-- !!!Don't break line after div!!! --> Auto Mode
<div id="rm_group_add_members"></div> </label>
<h3>Members</h3> <h5>
<!-- !!!Don't break line after div!!! --> Group reply strategy
<div id="rm_group_members"></div> <a href="/notes/group_reply_strategy" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h5>
<div id="group_member_template"> <label>
<div class="group_member"> <input type="radio" name="rm_group_activation_strategy" value="0" />
<div class="avatar"> Natural order
<img alt="Avatar" src="" /> </label>
<label>
<input type="radio" name="rm_group_activation_strategy" value="1" />
List order
</label>
</div> </div>
<div class="ch_name"></div> <div id="rm_group_buttons_expander">&nbsp;</div>
<div class="group_member_icon"> <input id="rm_group_submit" class="menu_button" type="submit" value="Create">
<div title="Move up" data-action="up" class="right_menu_button fa-solid fa-xl fa-chevron-up"></div> <input id="rm_group_delete" class="menu_button" type="submit" value="Delete">
<div title="Move down" data-action="down" class="right_menu_button fa-solid fa-xl fa-chevron-down"></div> </div>
<div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-2xl fa-xmark"></div> <div id="rm_group_add_members_header">
<div title="Add to group" data-action="add" class="right_menu_button fa-solid fa-2xl fa-plus"></div> <h3>Add Members</h3>
<input id="rm_group_filter" class="text_pole" type="search" placeholder="Filter..." />
</div>
<!-- !!!Don't break line after div!!! -->
<div id="rm_group_add_members"></div>
<h3>Members</h3>
<!-- !!!Don't break line after div!!! -->
<div id="rm_group_members"></div>
<div id="group_member_template">
<div class="group_member">
<div class="avatar">
<img alt="Avatar" src="" />
</div>
<div class="ch_name"></div>
<div class="group_member_icon">
<div title="Move up" data-action="up" class="right_menu_button fa-solid fa-xl fa-chevron-up"></div>
<div title="Move down" data-action="down" class="right_menu_button fa-solid fa-xl fa-chevron-down"></div>
<div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-2xl fa-xmark"></div>
<div title="Add to group" data-action="add" class="right_menu_button fa-solid fa-2xl fa-plus"></div>
</div>
</div>
</div>
<div id="group_list_template">
<div class="group_select">
<div class="avatar">
<img src="">
</div>
<div class="group_icon">
<div class="fa-solid fa-user-group"></div>
</div>
<div class="ch_name"></div>
</div> </div>
</div> </div>
</div> </div>
<div id="group_list_template"> <div id="rm_character_import" class="right_menu" style="display: none;">
<div class="group_select"> <form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div class="avatar"> <input multiple type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar">
<img src=""> <input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div> </form>
<div class="group_icon"> </div>
<div class="fa-solid fa-user-group"></div> <div id="rm_characters_block" class="right_menu">
</div> <div class="form_create_bottom_buttons_block">
<div class="ch_name"></div> <div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
<div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up "></div>
<div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
</div> </div>
<form id="form_character_search_form" action="javascript:void(null);">
<input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." />
<select id="character_sort_order" title="Characters sorting order">
<option data-field="name" data-order="asc">Name, A-Z</option>
<option data-field="name" data-order="desc">Name, Z-A</option>
<option data-field="date_added" data-order="desc">Date added, newer first</option>
<option data-field="date_added" data-order="asc">Date added, older first</option>
<option data-field="date_last_chat" data-order="desc">Recently chatted</option>
<option data-field="chat_size" data-order="desc">Most chatted</option>
<option data-field="chat_size" data-order="asc">Least chatted</option>
</select>
</form>
<div id="rm_print_characters_block"></div>
</div> </div>
</div>
<div id="rm_character_import" class="right_menu" style="display: none;"> <!-- only displays after creating/deleting a character/group -->
<form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data"> <div id="rm_info_block" class="right_menu">
<input multiple type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar"> <div id="rm_info_panel">
<input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off"> <div id="rm_info_avatar"></div>
</form> <div id="rm_info_text"></div>
</div> <div id="rm_info_button" class="menu_button">Back</div>
<div id="rm_characters_block" class="right_menu"> </div>
<div class="form_create_bottom_buttons_block">
<div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
<div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up "></div>
<div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
</div>
<form id="form_character_search_form" action="javascript:void(null);">
<input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." />
<select id="character_sort_order" title="Characters sorting order">
<option data-field="name" data-order="asc">Name, A-Z</option>
<option data-field="name" data-order="desc">Name, Z-A</option>
<option data-field="date_added" data-order="desc">Date added, newer first</option>
<option data-field="date_added" data-order="asc">Date added, older first</option>
<option data-field="date_last_chat" data-order="desc">Recently chatted</option>
<option data-field="chat_size" data-order="desc">Most chatted</option>
<option data-field="chat_size" data-order="asc">Least chatted</option>
</select>
</form>
<div id="rm_print_characters_block"></div>
</div>
<!-- only displays after creating/deleting a character/group -->
<div id="rm_info_block" class="right_menu">
<div id="rm_info_panel">
<div id="rm_info_avatar"></div>
<div id="rm_info_text"></div>
<div id="rm_info_button" class="menu_button">Back</div>
</div> </div>
</div> </div>
</nav> </nav>

View File

@ -305,11 +305,11 @@ function OpenNavPanels() {
} }
} }
// draggable sheld
// Make the DIV element draggable: // Make the DIV element draggable:
dragElement(document.getElementById("sheld")); dragElement(document.getElementById("sheld"));
dragElement(document.getElementById("left-nav-panel")); dragElement(document.getElementById("left-nav-panel"));
dragElement(document.getElementById("right-nav-panel"));
function dragElement(elmnt) { function dragElement(elmnt) {

View File

@ -725,6 +725,8 @@ input[type="file"] {
#right-nav-panel-tabs { #right-nav-panel-tabs {
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
width: 100%; width: 100%;
max-height: 30px; max-height: 30px;
display: flex; display: flex;
@ -808,7 +810,7 @@ input[type="file"] {
} }
.selected-right-tab { .selected-right-tab {
filter: brightness(200%); filter: brightness(150%);
} }
/* ####################################################################### */ /* ####################################################################### */
@ -2764,13 +2766,14 @@ a {
#right-nav-panel { #right-nav-panel {
width: calc((100svw - var(--sheldWidth) - 2px) /2); width: calc((100svw - var(--sheldWidth) - 2px) /2);
height: 99.9svh; max-height: calc(100svh - 42px);
height: calc(100svh - 42px);
position: fixed; position: fixed;
top: 0; top: 0;
margin: 0; margin: 0;
right: 0; right: 0;
left: auto; left: calc(100% - var(--sheldWidth) /2 + var(--sheldWidth) +1px);
padding: 0; padding: 5px;
margin-bottom: 5px; margin-bottom: 5px;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeBlurTintColor);
@ -2779,7 +2782,7 @@ a {
border: 0; border: 0;
border-left: 1px solid var(--grey30a); border-left: 1px solid var(--grey30a);
border-bottom: 1px solid var(--grey30a); border-bottom: 1px solid var(--grey30a);
max-height: 100svh; /* max-height: 100svh; */
box-shadow: none; box-shadow: none;
border-radius: 0 0 0 20px; border-radius: 0 0 0 20px;
overflow-y: hidden; overflow-y: hidden;
@ -2798,10 +2801,10 @@ a {
z-index: 3001; z-index: 3001;
} }
#right-nav-panel>div:not(#right-nav-panel-tabs) { /* #right-nav-panel>div:not(#right-nav-panel-tabs) {
height: calc(100% - 50px); height: calc(100% - 50px);
overflow-y: auto; overflow-y: auto;
} } */
#hidden-divs { #hidden-divs {
display: none; display: none;
@ -2909,7 +2912,7 @@ label[for="extensions_autoconnect"] {
padding-top: 5px; padding-top: 5px;
height: 40px; height: 40px;
max-width: var(--sheldWidth); max-width: var(--sheldWidth);
color: white; /* color: white; */
justify-content: center; justify-content: center;
display: grid; display: grid;
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10%; grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10%;
@ -2936,7 +2939,7 @@ label[for="extensions_autoconnect"] {
.drawer-icon.openIcon { .drawer-icon.openIcon {
filter: brightness(200%) drop-shadow(0px 0px 2px black); filter: drop-shadow(0px 0px 2px black);
; ;
transition: all 0.275s; transition: all 0.275s;
} }
@ -2986,7 +2989,7 @@ label[for="extensions_autoconnect"] {
.drawer-content { .drawer-content {
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeBlurTintColor);
color: white; color: var(--SmartThemeBodyColor);
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
border: 1px solid var(--grey30a); border: 1px solid var(--grey30a);
@ -3014,7 +3017,7 @@ label[for="extensions_autoconnect"] {
.fillLeft { .fillLeft {
width: calc((100svw - var(--sheldWidth) - 2px) /2); width: calc((100svw - var(--sheldWidth) - 2px) /2);
/* height: 99.9svh; */ height: calc(100svh - 42px);
max-height: calc(100svh - 42px); max-height: calc(100svh - 42px);
position: fixed; position: fixed;
top: 0; top: 0;