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 {