Move total token counter. Tighten the UI

This commit is contained in:
Cohee 2023-08-21 17:00:28 +03:00
parent c735bf546a
commit 05d719107f
4 changed files with 17 additions and 44 deletions

View File

@ -2554,7 +2554,7 @@
</div>
<div class="flex-container spaceEvenly">
<div id="UI-Theme-Block" class="flex-container flexFlowColumn drawer33pWidth">
<div id="color-picker-block" class="flex-container flexFlowColumn">
<div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
<h4><span data-i18n="UI Colors">UI Colors</span></h4>
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
@ -3084,13 +3084,18 @@
<div id="rm_button_selected_ch">
<h2></h2>
</div>
<i id="hideCharPanelAvatarButton" class="fa-solid fa-eye right_menu_button"></i>
<div id="result_info" class="flex-container" style="display: none;">
<span id="result_info_text" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">
<strong id="result_info_total_tokens">Calculating...</strong> Total Tokens
</span>
<a id="chartokenwarning" class="right_menu_button fa-solid fa-triangle-exclamation" href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank" title="About Token 'Limits'"></a>
<i title="Click for stats!" class="fa-solid fa-ranking-star right_menu_button rm_stats_button"></i>
<i title="Toggle character info panel" id="hideCharPanelAvatarButton" class="fa-solid fa-eye right_menu_button"></i>
</div>
</div>
</div>
<!-- end group peeking cope structure-->
<div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
@ -3173,14 +3178,6 @@
<a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
<span class="expander">&nbsp;</span>
<div id="result_info" class="flex-container" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">
<span id="result_info_text"><strong id="result_info_total_tokens">Calculating...</strong> Total Tokens</span>
<i title="Click for stats!" class="fa-solid fa-circle-info rm_stats_button"></i>
<div id="chartokenwarning" class="menu_button margin0 whitespacenowrap">
<a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank">About Token 'Limits'</a>
</div>
</div>
</div>
<textarea id="description_textarea" data-i18n="[placeholder]Describe your character's physical and mental traits here." placeholder="Describe your character's physical and mental traits here." class="marginBot5" name="description" placeholder=""></textarea>

View File

@ -195,7 +195,6 @@ export {
setEditedMessageId,
setSendButtonState,
selectRightMenuWithAnimation,
setRightTabSelectedClass,
openCharacterChat,
saveChat,
messageFormatting,
@ -5819,7 +5818,7 @@ function selectRightMenuWithAnimation(selectedMenuId) {
'rm_api_block': 'grid',
'rm_characters_block': 'flex',
};
$('#hideCharPanelAvatarButton').toggle(selectedMenuId === 'rm_ch_create_block');
$('#result_info').toggle(selectedMenuId === 'rm_ch_create_block');
document.querySelectorAll('#right-nav-panel .right_menu').forEach((menu) => {
$(menu).css('display', 'none');
@ -5837,16 +5836,6 @@ function selectRightMenuWithAnimation(selectedMenuId) {
})
}
function setRightTabSelectedClass(selectedButtonId) {
document.querySelectorAll('#right-nav-panel-tabs .right_menu_button').forEach((button) => {
button.classList.remove('selected-right-tab');
if (selectedButtonId && selectedButtonId.replace('#', '') === button.id) {
button.classList.add('selected-right-tab');
}
});
}
function select_rm_info(type, charId, previousCharId = null) {
if (!type) {
toastr.error(`Invalid process (no 'type')`);
@ -5909,7 +5898,6 @@ function select_rm_info(type, charId, previousCharId = null) {
}
}
}, 100);
setRightTabSelectedClass();
if (previousCharId) {
const newId = characters.findIndex((x) => x.avatar == previousCharId);
@ -5926,7 +5914,6 @@ export function select_selected_character(chid) {
menu_type = "character_edit";
$("#delete_button").css("display", "flex");
$("#export_button").css("display", "flex");
setRightTabSelectedClass('rm_button_selected_ch');
var display_name = characters[chid].name;
//create text poles
@ -6001,8 +5988,6 @@ function select_rm_create() {
}
selectRightMenuWithAnimation('rm_ch_create_block');
setRightTabSelectedClass();
$('#set_chat_scenario').hide();
$("#delete_button_div").css("display", "none");
@ -6049,7 +6034,6 @@ function select_rm_create() {
function select_rm_characters() {
menu_type = "characters";
selectRightMenuWithAnimation('rm_characters_block');
setRightTabSelectedClass('rm_button_characters');
printCharacters(false); // Do a quick refresh of the characters list
}
@ -7369,7 +7353,6 @@ export async function deleteCharacter(name, avatar) {
name2 = systemUserName;
chat = [...safetychat];
chat_metadata = {};
setRightTabSelectedClass();
$(document.getElementById("rm_button_selected_ch")).children("h2").text("");
clearChat();
this_chid = undefined;
@ -7485,7 +7468,6 @@ $(document).ready(function () {
selected_button = "settings";
menu_type = "settings";
selectRightMenuWithAnimation('rm_api_block');
setRightTabSelectedClass('rm_button_settings');
});
$("#rm_button_characters").click(function () {
selected_button = "characters";
@ -9242,7 +9224,7 @@ $(document).ready(function () {
doCharListDisplaySwitch();
});
$("#hideCharPanelAvatarButton").hide().on('click', () => {
$("#hideCharPanelAvatarButton").on('click', () => {
$('#avatar-and-name-block').slideToggle()
});
});

View File

@ -35,7 +35,6 @@ import {
online_status,
talkativeness_default,
selectRightMenuWithAnimation,
setRightTabSelectedClass,
default_ch_mes,
deleteLastMessage,
showSwipeButtons,
@ -832,7 +831,6 @@ async function deleteGroup(id) {
select_rm_info("group_delete", id);
$("#rm_button_selected_ch").children("h2").text('');
setRightTabSelectedClass();
}
}
@ -1139,7 +1137,6 @@ function select_group_chats(groupId, skipAnimation) {
if (group) {
$("#rm_group_automode_label").show();
$("#rm_button_selected_ch").children("h2").text(groupName);
setRightTabSelectedClass('rm_button_selected_ch');
}
else {
$("#rm_group_automode_label").hide();

View File

@ -717,7 +717,6 @@ hr {
.ui-settings {
display: flex;
flex-direction: column;
gap: 5px;
flex-grow: 1;
}
@ -986,7 +985,7 @@ input[type="file"] {
align-items: center;
gap: 10px;
overflow: hidden;
width: fit-content;
width: 100%;
}
#rm_PinAndTabs {
@ -1000,6 +999,7 @@ input[type="file"] {
#right-nav-panel-tabs .right_menu_button,
#CharListButtonAndHotSwaps .right_menu_button {
padding-right: 0;
color: unset;
}
#chartokenwarning.menu_button {
@ -1586,11 +1586,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
display: flex;
}
#description_div {
display: flex;
align-items: center;
}
#name_div {
width: 100%;
}
@ -1677,11 +1672,12 @@ grammarly-extension {
align-self: center !important;
}
#description_div,
#first_message_div {
position: relative;
display: flex;
align-items: center;
}
#rm_characters_block .form_create_bottom_buttons_block {
justify-content: space-evenly !important;
flex-grow: 0;
@ -1716,6 +1712,7 @@ grammarly-extension {
font-size: calc(var(--mainFontSize) * 0.9);
display: flex;
align-items: baseline;
gap: 10px;
}
.rm_stats_button {