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

Slight layout fixes to the char import popup

Browse Source 
- Need to pull my "wider" popup type from the other branch, because 1/1 aspect ratio scaling is just bad
- Add a few tailwind-like classes for ul-li styling
- Add <kbd> element styling for keyboard buttons
This commit is contained in:
Wolfsblvt 2024-06-03 01:17:19 +02:00
parent 9b969b283e
commit 98905e0e53
5 changed files with 47 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/css/st-tailwind.css
View File

@ -572,3 +572,23 @@ textarea:disabled {
text-align: center;
padding: 5px;
}
ul.li-padding-b-1 li {
padding-bottom: 1em;
}
ul.li-padding-b-2 li {
padding-bottom: 2em;
}
ul.li-padding-b-5 li {
padding-bottom: 5em;
}
ul.li-padding-bot5 li {
padding-bottom: 5px;
}
ul.li-padding-bot10 li {
padding-bottom: 10px;
}

2
public/script.js
View File

@ -10539,7 +10539,7 @@ jQuery(async function () {
const html = await renderTemplateAsync('importCharacters');
/** @type {string?} */
const input = await callGenericPopup(html, POPUP_TYPE.INPUT, '', { wide: true, okButton: $('#shadow_popup_template').attr('popup_text_import'), rows: 4 });
const input = await callGenericPopup(html, POPUP_TYPE.INPUT, '', { wider: true, okButton: $('#shadow_popup_template').attr('popup_text_import'), rows: 4 });
if (!input) {
console.debug('Custom content import cancelled');

7
public/scripts/popup.js
View File

@ -48,7 +48,7 @@ export class Popup {
* @param {string} inputValue - Value to set the input to.
* @param {PopupOptions} options - Options for the popup.
*/
constructor(text, type, inputValue = '', { okButton, cancelButton, rows, wide, large, allowHorizontalScrolling, allowVerticalScrolling } = {}) {
constructor(text, type, inputValue = '', { okButton, cancelButton, rows, wide, wider, large, allowHorizontalScrolling, allowVerticalScrolling } = {}) {
this.type = type;
/**@type {HTMLTemplateElement}*/
@ -64,6 +64,7 @@ export class Popup {
this.cancel = this.dom.querySelector('.dialogue_popup_cancel');
if (wide) dlg.classList.add('wide_dialogue_popup');
if (wider) dlg.classList.add('wider_dialogue_popup');
if (large) dlg.classList.add('large_dialogue_popup');
if (allowHorizontalScrolling) dlg.classList.add('horizontal_scrolling_dialogue_popup');
if (allowVerticalScrolling) dlg.classList.add('vertical_scrolling_dialogue_popup');
@ -225,12 +226,12 @@ export class Popup {
* @param {PopupOptions} options - Options for the popup.
* @returns
*/
export function callGenericPopup(text, type, inputValue = '', { okButton, cancelButton, rows, wide, large, allowHorizontalScrolling, allowVerticalScrolling } = {}) {
export function callGenericPopup(text, type, inputValue = '', { okButton, cancelButton, rows, wide, wider, large, allowHorizontalScrolling, allowVerticalScrolling } = {}) {
const popup = new Popup(
text,
type,
inputValue,
{ okButton, cancelButton, rows, wide, large, allowHorizontalScrolling, allowVerticalScrolling },
{ okButton, cancelButton, rows, wide, wider, large, allowHorizontalScrolling, allowVerticalScrolling },
);
return popup.show();
}

6
public/scripts/templates/importCharacters.html
View File

@ -2,7 +2,7 @@
<h4 data-i18n="Enter the URL of the content to import">Enter the URL of the content to import</h3>
<div class="sources_list justifyLeft">
<span data-i18n="Supported sources:">Supported sources:</span><br>
<ul class="marginTop5">
<ul class="marginTop5 li-padding-bot5">
<li><span data-i18n="char_import_1">Chub Character (Direct Link or ID)</span><br><span data-i18n="char_import_example">Example:</span> <tt>Anonymous/example-character</tt></li>
<li><span data-i18n="char_import_2">Chub Lorebook (Direct Link or ID)</span><br><span data-i18n="char_import_example">Example:</span> <tt>lorebooks/bartleby/example-lorebook</tt></li>
<li><span data-i18n="char_import_3">JanitorAI Character (Direct Link or UUID)</span><br><span data-i18n="char_import_example">Example:</span> <tt>ddd1498a-a370-4136-b138-a8cd9461fdfe_character-aqua-the-useless-goddess</tt></li>
@ -19,7 +19,7 @@
<span data-i18n="Write each URL or ID into a new line.">
Write each URL or ID into a new line.
</span>
<span data-i18n="(Shift + Enter to start a new line)">
(Shift + Enter to start a new line)
<span data-i18n="(&lt;kbd&gt;Shift&lt;/kbd&gt; + &lt;kbd&gt;Enter&lt;/kbd&gt; to start a new line)">
(<kbd>Shift</kbd> + <kbd>Enter</kbd> to start a new line)
</span>
</small>

19
public/style.css
View File

@ -430,6 +430,21 @@ code {
color: var(--white70a);
}
kbd {
display: inline-block;
padding: 2px 4px;
font-family: Consolas, monospace;
white-space: nowrap;
/* background-color: #eeeeee; */
background-color: rgba(255, 255, 255, 0.9);
color: #333;
border: 1px solid #b4b4b4;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
font-size: 90%;
line-height: 1;
}
hr {
background-image: linear-gradient(90deg, var(--transparent), var(--SmartThemeBodyColor), var(--transparent));
@ -3069,6 +3084,10 @@ grammarly-extension {
min-width: var(--sheldWidth);
}
.wider_dialogue_popup {
min-width: 750px;
}
.horizontal_scrolling_dialogue_popup {
overflow-x: unset !important;
}