split counter from chevron, smarter toggling

This commit is contained in:
RossAscends
2024-09-30 19:51:13 +09:00
parent 3614740f4e
commit 885a278973
4 changed files with 32 additions and 42 deletions

View File

@ -5943,7 +5943,8 @@
</div> </div>
<div class="mes_bias"></div> <div class="mes_bias"></div>
</div> </div>
<div class="swipe_right fa-solid" style="display: none;"> <div class="flex-container swipeRightBlock flexFlowColumn flexNoGap">
<div class="swipe_right fa-solid fa-chevron-right" style="display: none;"></div>
<div class="swipes-counter"></div> <div class="swipes-counter"></div>
</div> </div>
</div> </div>

View File

@ -83,7 +83,6 @@ import {
resetMovableStyles, resetMovableStyles,
forceCharacterEditorTokenize, forceCharacterEditorTokenize,
applyPowerUserSettings, applyPowerUserSettings,
switchSwipeNumAllMessages,
} from './scripts/power-user.js'; } from './scripts/power-user.js';
import { import {
@ -2381,8 +2380,8 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
if (showSwipes) { if (showSwipes) {
$('#chat .mes').last().addClass('last_mes'); $('#chat .mes').last().addClass('last_mes');
$('#chat .mes').eq(-2).removeClass('last_mes') $('#chat .mes').eq(-2).removeClass('last_mes');
.find('.swipe_right').removeClass('fa-chevron-right'); //otherwise it stays looking like it did when it was last_mes //.find('.swipe_right').hide(); //otherwise it stays looking like it did when it was last_mes
hideSwipeButtons(); hideSwipeButtons();
showSwipeButtons(); showSwipeButtons();
} }
@ -7495,16 +7494,17 @@ export function showSwipeButtons() {
} }
//only show right when generate is off, or when next right swipe would not make a generate happen //only show right when generate is off, or when next right swipe would not make a generate happen
if (is_send_press === false || chat[chat.length - 1].swipes.length >= swipeId) { if (is_send_press === false || chat[chat.length - 1].swipes.length >= swipeId) {
currentMessage.children('.swipe_right').css('display', 'flex'); console.error('showingSwipeButtons: showing.');
currentMessage.children('.swipe_right').css('opacity', '0.3'); currentMessage.find('.swipe_right').css('display', 'flex');
currentMessage.find('.swipe_right').css('opacity', '0.3');
} }
//console.log((chat[chat.length - 1])); //console.log((chat[chat.length - 1]));
if ((chat[chat.length - 1].swipes.length - swipeId) === 1) { if ((chat[chat.length - 1].swipes.length - swipeId) === 1) {
//console.log('highlighting R swipe'); console.error('highlighting R swipe');
//chevron was moved out of hardcode in HTML to class toggle dependent on last_mes or not //chevron was moved out of hardcode in HTML to class toggle dependent on last_mes or not
//necessary for 'swipe_right' div in past messages to have no chevron if 'show swipes for all messages' is turned on //necessary for 'swipe_right' div in past messages to have no chevron if 'show swipes for all messages' is turned on
currentMessage.children('.swipe_right').addClass('fa-chevron-right').css('opacity', '0.7'); currentMessage.find('.swipe_right').css('opacity', '0.7');
} }
//console.log(swipesCounterHTML); //console.log(swipesCounterHTML);
@ -7514,13 +7514,13 @@ export function showSwipeButtons() {
//console.log(swipeId); //console.log(swipeId);
//console.log(chat[chat.length - 1].swipes.length); //console.log(chat[chat.length - 1].swipes.length);
switchSwipeNumAllMessages(); //switchSwipeNumAllMessages();
} }
export function hideSwipeButtons() { export function hideSwipeButtons() {
//console.log('hideswipebuttons entered'); console.error('hideswipebuttons entered');
$('#chat').find('.last_mes .swipe_right').css('display', 'none'); $('#chat').find('.swipe_right').hide();
$('#chat').find('.swipe_left').css('display', 'none'); $('#chat').find('.swipe_left').hide();
} }
/** /**
@ -8355,8 +8355,8 @@ const swipe_right = () => {
} }
const currentMessage = $('#chat').children().filter(`[mesid="${chat.length - 1}"]`); const currentMessage = $('#chat').children().filter(`[mesid="${chat.length - 1}"]`);
let this_div = currentMessage.children('.swipe_right'); let this_div = currentMessage.find('.swipe_right');
let this_mes_div = this_div.parent(); let this_mes_div = this_div.parent().parent();
if (chat[chat.length - 1]['swipe_id'] > chat[chat.length - 1]['swipes'].length) { //if we swipe right while generating (the swipe ID is greater than what we are viewing now) if (chat[chat.length - 1]['swipe_id'] > chat[chat.length - 1]['swipes'].length) { //if we swipe right while generating (the swipe ID is greater than what we are viewing now)
chat[chat.length - 1]['swipe_id'] = chat[chat.length - 1]['swipes'].length; //show that message slot (will be '...' while generating) chat[chat.length - 1]['swipe_id'] = chat[chat.length - 1]['swipes'].length; //show that message slot (will be '...' while generating)
@ -8366,7 +8366,7 @@ const swipe_right = () => {
} }
// handles animated transitions when swipe right, specifically height transitions between messages // handles animated transitions when swipe right, specifically height transitions between messages
if (run_generate || run_swipe_right) { if (run_generate || run_swipe_right) {
let this_mes_block = this_mes_div.children('.mes_block').children('.mes_text'); let this_mes_block = this_mes_div.find('.mes_block .mes_text');
const this_mes_div_height = this_mes_div[0].scrollHeight; const this_mes_div_height = this_mes_div[0].scrollHeight;
const this_mes_block_height = this_mes_block[0].scrollHeight; const this_mes_block_height = this_mes_block[0].scrollHeight;

View File

@ -472,30 +472,7 @@ function switchCompactInputArea() {
export function switchSwipeNumAllMessages() { export function switchSwipeNumAllMessages() {
$('#show_swipe_num_all_messages').prop('checked', power_user.show_swipe_num_all_messages); $('#show_swipe_num_all_messages').prop('checked', power_user.show_swipe_num_all_messages);
$('.mes:not(.last_mes) .swipes-counter').toggle(power_user.show_swipe_num_all_messages);
if (power_user.show_swipe_num_all_messages) {
$('.mes').each(function () {
//if the div also has the .lst_mes class, skip the loop for that item
if ($(this).hasClass('last_mes')) {
return;
}
//add the cloned button to every .mes .swipe_right EXCLUDING .mes.last_mes
$(this).find('.swipe_right').css('display', 'flex');
});
} else if (!power_user.show_swipe_num_all_messages) {
$('.mes:not(.last_mes)').each(function () {
if ($(this).hasClass('last_mes')) {
return;
}
//add the cloned button back to its original spot
$(this).find('.swipe_right').css('display', 'none');
});
}
} }
var originalSliderValues = []; var originalSliderValues = [];

View File

@ -978,13 +978,21 @@ body .panelControlBar {
justify-content: center; justify-content: center;
z-index: 9999; z-index: 9999;
grid-row-start: 2; grid-row-start: 2;
grid-column-start: 4;
flex-flow: column;
font-size: 30px; font-size: 30px;
cursor: pointer; cursor: pointer;
align-self: center; align-self: center;
}
.swipe_left{
position: absolute;
bottom: 15px;
flex-flow: column;
}
.swipeRightBlock {
position: absolute; position: absolute;
bottom: 15px; right: 0;
bottom: 0;
} }
.swipes-counter { .swipes-counter {
@ -994,6 +1002,9 @@ body .panelControlBar {
font-family: var(--mainFontFamily); font-family: var(--mainFontFamily);
font-weight: 400; font-weight: 400;
align-self: center; align-self: center;
min-width: 40px;
display: flex;
justify-content: center;
} }
.swipe_left { .swipe_left {
@ -1003,6 +1014,7 @@ body .panelControlBar {
.swipe_right { .swipe_right {
right: 5px; right: 5px;
align-self:end;
} }
.ui-settings { .ui-settings {