diff --git a/public/index.html b/public/index.html index 0bedd1767..63c672b57 100644 --- a/public/index.html +++ b/public/index.html @@ -4453,6 +4453,17 @@ +
+ Notification Location:
+ +

diff --git a/public/script.js b/public/script.js index b54948e4c..ed9671022 100644 --- a/public/script.js +++ b/public/script.js @@ -321,7 +321,7 @@ toastr.options.timeOut = 4000; // How long the toast will display without user i toastr.options.extendedTimeOut = 10000; // How long the toast will display after a user hovers over it toastr.options.progressBar = true; // Visually indicate how long before a toast expires. toastr.options.closeButton = true; // enable a close button -toastr.options.positionClass = 'toast-top-center'; // Where to position the toast container +//toastr.options.positionClass = power_user.toastr_position; // Where to position the toast container toastr.options.onHidden = () => { // If we have any dialog still open, the last "hidden" toastr will remove the toastr-container. We need to keep it alive inside the dialog though // so the toasts still show up inside there. @@ -7592,6 +7592,8 @@ export async function getSettings() { // Apply theme toggles from power user settings applyPowerUserSettings(); + toastr.options.positionClass = power_user.toastr_position; // Where to position the toast container + // Load character tags loadTagsSettings(settings); diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 98e811363..7d3369adf 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -137,6 +137,7 @@ let power_user = { fast_ui_mode: true, avatar_style: avatar_styles.ROUND, chat_display: chat_styles.DEFAULT, + toastr_position: 'toast-top-center', chat_width: 50, never_resize_avatars: false, show_card_avatar_urls: false, @@ -1044,6 +1045,43 @@ function applyChatDisplay() { } } +function applyToastrPosition() { + + if (!power_user.toastr_position) { + power_user.toastr_position = 'toast-top-center'; + console.warn('applyToastrPosition: missing toastr position, defaulting to top-center'); + } + + switch (power_user.toastr_position) { + case 'toast-top-left': { + toastr.options.positionClass = 'toast-top-left'; + break; + } + case 'toast-top-center': { + toastr.options.positionClass = 'toast-top-center'; + break; + } + case 'toast-top-right': { + toastr.options.positionClass = 'toast-top-right'; + break; + } + case 'toast-bottom-left': { + toastr.options.positionClass = 'toast-bottom-left'; + break; + } + case 'toast-bottom-center': { + toastr.options.positionClass = 'toast-bottom-center'; + break; + } + case 'toast-bottom-right': { + toastr.options.positionClass = 'toast-bottom-right'; + break; + } + } + + $('#toastr_position').val(power_user.toastr_position).prop('selected', true); +} + function applyChatWidth(type) { if (type === 'forced') { let r = document.documentElement; @@ -1206,6 +1244,12 @@ function applyTheme(name) { applyChatDisplay(); }, }, + { + key: 'toastr_position', + action: () => { + applyToastrPosition(); + }, + }, { key: 'avatar_style', action: () => { @@ -1455,6 +1499,7 @@ function getExampleMessagesBehavior() { return 'normal'; } +//MARK: loadPowerUser async function loadPowerUserSettings(settings, data) { const defaultStscript = JSON.parse(JSON.stringify(power_user.stscript)); // Load from settings.json @@ -1603,6 +1648,7 @@ async function loadPowerUserSettings(settings, data) { $('#enableLabMode').prop('checked', power_user.enableLabMode).trigger('input', { fromInit: true }); $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop('checked', true); $(`#chat_display option[value=${power_user.chat_display}]`).attr('selected', true).trigger('change'); + $(`#toastr_position option[value=${power_user.toastr_position}]`).attr('selected', true).trigger('change'); $('#chat_width_slider').val(power_user.chat_width); $('#token_padding').val(power_user.token_padding); $('#aux_field').val(power_user.aux_field); @@ -2372,6 +2418,7 @@ function getThemeObject(name) { waifuMode: power_user.waifuMode, avatar_style: power_user.avatar_style, chat_display: power_user.chat_display, + toastr_position: power_user.toastr_position, noShadows: power_user.noShadows, chat_width: power_user.chat_width, timer_enabled: power_user.timer_enabled, @@ -3323,6 +3370,14 @@ $(document).ready(() => { saveSettingsDebounced(); }); + $('#toastr_position').on('change', function () { + console.error('saw toastr position change'); + const value = $(this).find(':selected').val(); + power_user.toastr_position = String(value); + applyToastrPosition(); + saveSettingsDebounced(); + }); + $('#chat_width_slider').on('input', function (e, data) { const applyMode = data?.forced ? 'forced' : 'normal'; power_user.chat_width = Number(e.target.value); diff --git a/public/style.css b/public/style.css index eb5cd8d89..cc3082ea5 100644 --- a/public/style.css +++ b/public/style.css @@ -3933,7 +3933,7 @@ grammarly-extension { /* Override toastr default styles */ body #toast-container { - top: var(--topBarBlockSize); + margin-top: var(--topBarBlockSize); } body #toast-container>div {