rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-03-30 03:40:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add close buttons and theming

Browse Source
This commit is contained in:
city-unit 2023-08-30 20:08:48 -04:00
parent 218cfb43d8
commit d5409a5fea
2 changed files with 47 additions and 2 deletions
public
scripts/extensions/gallery
index.js
style.css

36
public/scripts/extensions/gallery/index.js

@ -60,8 +60,17 @@ async function initGallery(items, url) {
galleryMaxRows : 3,
galleryPaginationTopButtons: false,
galleryNavigationOverlayButtons: true,
"galleryDisplayMode": "pagination",
"fnThumbnailOpen": viewWithDragbox,
galleryTheme: {
navigationBar: { background: 'none', borderTop: '', borderBottom: '', borderRight: '', borderLeft: '' },
navigationBreadcrumb: { background: '#111', color: '#fff', colorHover: '#ccc', borderRadius: '4px' },
navigationFilter: { color: '#ddd', background: '#111', colorSelected: '#fff', backgroundSelected: '#111', borderRadius: '4px' },
navigationPagination: { background: '#111', color: '#fff', colorHover: '#ccc', borderRadius: '4px' },
thumbnail: { background: '#444', backgroundImage: 'linear-gradient(315deg, #111 0%, #445 90%)', borderColor: '#000', borderRadius: '0px', labelOpacity: 1, labelBackground: 'rgba(34, 34, 34, 0)', titleColor: '#fff', titleBgColor: 'transparent', titleShadow: '', descriptionColor: '#ccc', descriptionBgColor: 'transparent', descriptionShadow: '', stackBackground: '#aaa' },
thumbnailIcon: { padding: '5px', color: '#fff', shadow: '' },
pagination: { background: '#181818', backgroundSelected: '#666', color: '#fff', borderRadius: '2px', shapeBorder: '3px solid var(--SmartThemeQuoteColor)', shapeColor: '#444', shapeSelectedColor: '#aaa' }
},
galleryDisplayMode: "pagination",
fnThumbnailOpen: viewWithDragbox,
});
$(document).ready(function () {
@ -155,6 +164,7 @@ async function showCharGallery() {
}
} catch (err) {
console.trace();
console.error(err);
}
}
@ -256,6 +266,10 @@ function makeMovable(id="gallery"){
// add no-scrollbar class to this element
newElement.addClass('no-scrollbar');
// get the close button and set its id and data-related-id
const closeButton = newElement.find('.dragClose');
closeButton.attr('id', `${id}close`);
closeButton.attr('data-related-id', `${id}`);
$(`#dragGallery`).css('display', 'block');
@ -270,6 +284,11 @@ function makeMovable(id="gallery"){
e.preventDefault();
return false;
});
$('body').on('click', '.dragClose', function () {
const relatedId = $(this).data('related-id'); // Get the ID of the related draggable
$(`#${relatedId}`).remove(); // Remove the associated draggable
});
}
/**
@ -314,6 +333,14 @@ function makeDragImg(id, url) {
// Ensure that the newly added element is displayed as block
draggableElem.style.display = 'block';
// Add an id to the close button
// If the close button exists, set related-id
const closeButton = draggableElem.querySelector('.dragClose');
if (closeButton) {
closeButton.id = `${uniqueId}close`;
closeButton.dataset.relatedId = uniqueId;
}
// Find the .drag-grabber and set its matching unique ID
const dragGrabber = draggableElem.querySelector('.drag-grabber');
if (dragGrabber) {
@ -340,6 +367,11 @@ function makeDragImg(id, url) {
} else {
console.error("Failed to append the template content or retrieve the appended content.");
}
$('body').on('click', '.dragClose', function () {
const relatedId = $(this).data('related-id'); // Get the ID of the related draggable
$(`#${relatedId}`).remove(); // Remove the associated draggable
});
}

13
public/style.css

@ -1239,6 +1239,19 @@ input[type="file"] {
opacity: 1;
}
.dragClose {
height: 15px;
aspect-ratio: 1 / 1;
font-size: 20px;
opacity: 0.5;
transition: all 250ms;
}
.dragClose:hover {
cursor: pointer;
opacity: 1;
}
#floatingPrompt .drag-grabber {
position: unset;
}