split counter from chevron, smarter toggling

885a278973253ecfb530f95fb92dd3dcfd94b24a

RossAscends <124905043+RossAscends@users.noreply.github.com>

public/index.html+2 -1 Viewed

                     </div>
                     <div class="mes_bias"></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>
             </div>

public/script.js+14 -14 Viewed

     resetMovableStyles,
     forceCharacterEditorTokenize,
     applyPowerUserSettings,
-    switchSwipeNumAllMessages,
 } from './scripts/power-user.js';
 import {

     if (showSwipes) {
         $('#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();
         showSwipeButtons();
+    }

+    }
     //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) {
-        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]));
     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
         //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(swipeId);
     //console.log(chat[chat.length - 1].swipes.length);
-    switchSwipeNumAllMessages();
+    //switchSwipeNumAllMessages();
+}
 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();
+}
 /**

+    }
     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)
         chat[chat.length - 1]['swipe_id'] = chat[chat.length - 1]['swipes'].length; //show that message slot (will be '...' while generating)

+    }
     // handles animated transitions when swipe right, specifically height transitions between messages
     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_block_height = this_mes_block[0].scrollHeight;

public/scripts/power-user.js+1 -24 Viewed

 export function switchSwipeNumAllMessages() {
     $('#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 = [];

public/style.css+15 -3 Viewed

     justify-content: center;
     z-index: 9999;
     grid-row-start: 2;
-    grid-column-start: 4;
-    flex-flow: column;
     font-size: 30px;
     cursor: pointer;
     align-self: center;
+}
+.swipe_left{
+position: absolute;
+bottom: 15px;
+flex-flow: column;
+}
+.swipeRightBlock {
     position: absolute;
-    bottom: 15px;
+    right: 0;
+    bottom: 0;
+}
 .swipes-counter {

     font-family: var(--mainFontFamily);
     font-weight: 400;
     align-self: center;
+    min-width: 40px;
+    display: flex;
+    justify-content: center;
+}
 .swipe_left {

 .swipe_right {
     right: 5px;
+    align-self:end;
+}
 .ui-settings {