mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
UI performance fixes (#3207)
* Optimize visibility checks for burger and wand menus
* Optimize message actions visibility toggle
* Run drawer toggle in animation frame
* Replace jQuery slideToggle with a 3rd-party lib
* Refactor export button functionality to manage popup state with a boolean flag
* Do not close the pinned drawer on unpin
* Revert "Do not close the pinned drawer on unpin"
This reverts commit e3b34e9a58
.
* Refactor slideToggle options
* ease-in-out
* Don't skip frame on drawer toggle
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import { DOMPurify, Bowser } from '../lib.js';
|
||||
import { DOMPurify, Bowser, slideToggle } from '../lib.js';
|
||||
|
||||
import {
|
||||
characters,
|
||||
@ -19,6 +19,7 @@ import {
|
||||
menu_type,
|
||||
substituteParams,
|
||||
sendTextareaMessage,
|
||||
getSlideToggleOptions,
|
||||
} from '../script.js';
|
||||
|
||||
import {
|
||||
@ -748,8 +749,8 @@ export function initRossMods() {
|
||||
$(RightNavDrawerIcon).removeClass('drawerPinnedOpen');
|
||||
|
||||
if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
|
||||
$(RightNavPanel).slideToggle(200, 'swing');
|
||||
$(RightNavDrawerIcon).toggleClass('openIcon closedIcon');
|
||||
slideToggle(RightNavPanel, getSlideToggleOptions());
|
||||
$(RightNavDrawerIcon).toggleClass('closedIcon openIcon');
|
||||
$(RightNavPanel).toggleClass('openDrawer closedDrawer');
|
||||
}
|
||||
}
|
||||
@ -766,8 +767,8 @@ export function initRossMods() {
|
||||
$(LeftNavDrawerIcon).removeClass('drawerPinnedOpen');
|
||||
|
||||
if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
|
||||
$(LeftNavPanel).slideToggle(200, 'swing');
|
||||
$(LeftNavDrawerIcon).toggleClass('openIcon closedIcon');
|
||||
slideToggle(LeftNavPanel, getSlideToggleOptions());
|
||||
$(LeftNavDrawerIcon).toggleClass('closedIcon openIcon');
|
||||
$(LeftNavPanel).toggleClass('openDrawer closedDrawer');
|
||||
}
|
||||
}
|
||||
@ -786,8 +787,8 @@ export function initRossMods() {
|
||||
|
||||
if ($(WorldInfo).hasClass('openDrawer') && $('.openDrawer').length > 1) {
|
||||
console.debug('closing WI after lock removal');
|
||||
$(WorldInfo).slideToggle(200, 'swing');
|
||||
$(WIDrawerIcon).toggleClass('openIcon closedIcon');
|
||||
slideToggle(WorldInfo, getSlideToggleOptions());
|
||||
$(WIDrawerIcon).toggleClass('closedIcon openIcon');
|
||||
$(WorldInfo).toggleClass('openDrawer closedDrawer');
|
||||
}
|
||||
}
|
||||
|
@ -417,26 +417,30 @@ async function addExtensionsButtonAndMenu() {
|
||||
|
||||
const button = $('#extensionsMenuButton');
|
||||
const dropdown = $('#extensionsMenu');
|
||||
//dropdown.hide();
|
||||
let isDropdownVisible = false;
|
||||
|
||||
let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
|
||||
placement: 'top-start',
|
||||
});
|
||||
|
||||
$(button).on('click', function () {
|
||||
if (dropdown.is(':visible')) {
|
||||
if (isDropdownVisible) {
|
||||
dropdown.fadeOut(animation_duration);
|
||||
isDropdownVisible = false;
|
||||
} else {
|
||||
dropdown.fadeIn(animation_duration);
|
||||
isDropdownVisible = true;
|
||||
}
|
||||
popper.update();
|
||||
});
|
||||
|
||||
$('html').on('click', function (e) {
|
||||
if (!isDropdownVisible) return;
|
||||
const clickTarget = $(e.target);
|
||||
const noCloseTargets = ['#sd_gen', '#extensionsMenuButton', '#roll_dice'];
|
||||
if (dropdown.is(':visible') && !noCloseTargets.some(id => clickTarget.closest(id).length > 0)) {
|
||||
$(dropdown).fadeOut(animation_duration);
|
||||
if (!noCloseTargets.some(id => clickTarget.closest(id).length > 0)) {
|
||||
dropdown.fadeOut(animation_duration);
|
||||
isDropdownVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
Reference in New Issue
Block a user