rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add toggle for compact input area (mobile)

This commit is contained in:
Cohee 2023-12-16 01:35:28 +02:00
parent 0678a385d7
commit 9b9026b12e
3 changed files with 36 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/mobile-styles.css
View File

@ -1,5 +1,9 @@
/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
@media screen and (max-width: 1000px) {
#send_form.compact #leftSendForm, #send_form.compact #rightSendForm {
flex-wrap: nowrap;
width: unset;
}
.bg_button {
font-size: 15px;

4
public/index.html
View File

@ -2972,6 +2972,10 @@
<input id="messageTokensEnabled" type="checkbox" />
<span data-i18n="Show Message Token Count">Message Token Count</span>
</label>
<label for="compact_input_area" class="checkbox_label">
<input id="compact_input_area" type="checkbox" />
<span data-i18n="Compact Input Area (Mobile)">Compact Input Area&nbsp;<i class="fa-solid fa-mobile-screen-button"></i></span>
</label>
<label data-newbie-hidden for="hotswapEnabled" class="checkbox_label">
<input id="hotswapEnabled" type="checkbox" />
<span data-i18n="Characters Hotswap">Characters Hotswap</span>

28
public/scripts/power-user.js
View File

@ -232,6 +232,7 @@ let power_user = {
aux_field: 'character_version',
restore_user_input: true,
reduced_motion: false,
compact_input_area: true,
};
let themes = [];
@ -273,6 +274,7 @@ const storage_keys = {
enableZenSliders: 'enableZenSliders',
enableLabMode: 'enableLabMode',
reduced_motion: 'reduced_motion',
compact_input_area: 'compact_input_area',
};
const contextControls = [
@ -450,6 +452,13 @@ function switchReducedMotion() {
$('#reduced_motion').prop('checked', power_user.reduced_motion);
}
function switchCompactInputArea() {
const value = localStorage.getItem(storage_keys.compact_input_area);
power_user.compact_input_area = value === null ? true : value == 'true';
$('#send_form').toggleClass('compact', power_user.compact_input_area);
$('#compact_input_area').prop('checked', power_user.compact_input_area);
}
var originalSliderValues = [];
async function switchLabMode() {
@ -1246,6 +1255,15 @@ async function applyTheme(name) {
action: async () => {
localStorage.setItem(storage_keys.reduced_motion, String(power_user.reduced_motion));
$('#reduced_motion').prop('checked', power_user.reduced_motion);
switchReducedMotion();
},
},
{
key: 'compact_input_area',
action: async () => {
localStorage.setItem(storage_keys.compact_input_area, String(power_user.compact_input_area));
$('#compact_input_area').prop('checked', power_user.compact_input_area);
switchCompactInputArea();
},
},
];
@ -1504,6 +1522,7 @@ function loadPowerUserSettings(settings, data) {
$(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop('selected', true);
switchReducedMotion();
switchCompactInputArea();
reloadMarkdownProcessor(power_user.render_formulas);
loadInstructMode(data);
loadContextSettings();
@ -1932,6 +1951,8 @@ async function saveTheme() {
hotswap_enabled: power_user.hotswap_enabled,
custom_css: power_user.custom_css,
bogus_folders: power_user.bogus_folders,
reduced_motion: power_user.reduced_motion,
compact_input_area: power_user.compact_input_area,
};
const response = await fetch('/savetheme', {
@ -3151,6 +3172,13 @@ $(document).ready(() => {
saveSettingsDebounced();
});
$('#compact_input_area').on('input', function () {
power_user.compact_input_area = !!$(this).prop('checked');
localStorage.setItem(storage_keys.compact_input_area, String(power_user.compact_input_area));
switchCompactInputArea();
saveSettingsDebounced();
});
$(document).on('click', '#debug_table [data-debug-function]', function () {
const functionId = $(this).data('debug-function');
const functionRecord = debug_functions.find(f => f.functionId === functionId);