add option for toastr location to themes

87f547cd87cd940961e71a76cd61ffbcf70a4bdd

RossAscends <124905043+RossAscends@users.noreply.github.com>

Parents: 074ca4a55b5778b247fac44401b705230e859466
4 files changed, +70 -2Ignore whitespace
public/index.html+11 -0
@@ -4453,6 +4453,17 @@
44534453 <input class="neo-range-slider" type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
44544454 <input class="neo-range-input" type="number" min="0" max="5" step="1" data-for="shadow_width" id="shadow_width_counter">
44554455 </div>
4456+ <div class="flex-container alignItemsBaseline">
4457+ <span data-i18n="Notification Location:">Notification Location:</span><br>
4458+ <select id="toastr_position" class="widthNatural flex1 margin0">
4459+ <option value="toast-top-left" data-i18n="Top Left">Top Left</option>
4460+ <option value="toast-top-center" data-i18n="Top Center">Top Center</option>
4461+ <option value="toast-top-right" data-i18n="Top Right">Top Right</option>
4462+ <option value="toast-bottom-left" data-i18n="Bottom Left">Bottom Left</option>
4463+ <option value="toast-bottom-center" data-i18n="Bottom Center">Bottom Center</option>
4464+ <option value="toast-bottom-right" data-i18n="Bottom Right">Bottom Right</option>
4465+ </select>
4466+ </div>
44564467 </div>
44574468 <hr>
44584469 <div name="themeToggles">
public/script.js+3 -1
@@ -321,7 +321,7 @@ toastr.options.timeOut = 4000; // How long the toast will display without user i
321321toastr.options.extendedTimeOut = 10000; // How long the toast will display after a user hovers over it
322322toastr.options.progressBar = true; // Visually indicate how long before a toast expires.
323323toastr.options.closeButton = true; // enable a close button
324324//toastr.options.positionClass = 'toast-top-center'power_user.toastr_position; // Where to position the toast container
325325toastr.options.onHidden = () => {
326326 // 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
327327 // so the toasts still show up inside there.
@@ -7592,6 +7592,8 @@ export async function getSettings() {
75927592 // Apply theme toggles from power user settings
75937593 applyPowerUserSettings();
75947594
7595+ toastr.options.positionClass = power_user.toastr_position; // Where to position the toast container
7596+
75957597 // Load character tags
75967598 loadTagsSettings(settings);
75977599
public/scripts/power-user.js+55 -0
@@ -137,6 +137,7 @@ let power_user = {
137137 fast_ui_mode: true,
138138 avatar_style: avatar_styles.ROUND,
139139 chat_display: chat_styles.DEFAULT,
140+ toastr_position: 'toast-top-center',
140141 chat_width: 50,
141142 never_resize_avatars: false,
142143 show_card_avatar_urls: false,
@@ -1044,6 +1045,43 @@ function applyChatDisplay() {
10441045 }
10451046}
10461047
1048+function applyToastrPosition() {
1049+
1050+ if (!power_user.toastr_position) {
1051+ power_user.toastr_position = 'toast-top-center';
1052+ console.warn('applyToastrPosition: missing toastr position, defaulting to top-center');
1053+ }
1054+
1055+ switch (power_user.toastr_position) {
1056+ case 'toast-top-left': {
1057+ toastr.options.positionClass = 'toast-top-left';
1058+ break;
1059+ }
1060+ case 'toast-top-center': {
1061+ toastr.options.positionClass = 'toast-top-center';
1062+ break;
1063+ }
1064+ case 'toast-top-right': {
1065+ toastr.options.positionClass = 'toast-top-right';
1066+ break;
1067+ }
1068+ case 'toast-bottom-left': {
1069+ toastr.options.positionClass = 'toast-bottom-left';
1070+ break;
1071+ }
1072+ case 'toast-bottom-center': {
1073+ toastr.options.positionClass = 'toast-bottom-center';
1074+ break;
1075+ }
1076+ case 'toast-bottom-right': {
1077+ toastr.options.positionClass = 'toast-bottom-right';
1078+ break;
1079+ }
1080+ }
1081+
1082+ $('#toastr_position').val(power_user.toastr_position).prop('selected', true);
1083+}
1084+
10471085function applyChatWidth(type) {
10481086 if (type === 'forced') {
10491087 let r = document.documentElement;
@@ -1207,6 +1245,12 @@ function applyTheme(name) {
12071245 },
12081246 },
12091247 {
1248+ key: 'toastr_position',
1249+ action: () => {
1250+ applyToastrPosition();
1251+ },
1252+ },
1253+ {
12101254 key: 'avatar_style',
12111255 action: () => {
12121256 applyAvatarStyle();
@@ -1455,6 +1499,7 @@ function getExampleMessagesBehavior() {
14551499 return 'normal';
14561500}
14571501
1502+//MARK: loadPowerUser
14581503async function loadPowerUserSettings(settings, data) {
14591504 const defaultStscript = JSON.parse(JSON.stringify(power_user.stscript));
14601505 // Load from settings.json
@@ -1603,6 +1648,7 @@ async function loadPowerUserSettings(settings, data) {
16031648 $('#enableLabMode').prop('checked', power_user.enableLabMode).trigger('input', { fromInit: true });
16041649 $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop('checked', true);
16051650 $(`#chat_display option[value=${power_user.chat_display}]`).attr('selected', true).trigger('change');
1651+ $(`#toastr_position option[value=${power_user.toastr_position}]`).attr('selected', true).trigger('change');
16061652 $('#chat_width_slider').val(power_user.chat_width);
16071653 $('#token_padding').val(power_user.token_padding);
16081654 $('#aux_field').val(power_user.aux_field);
@@ -2372,6 +2418,7 @@ function getThemeObject(name) {
23722418 waifuMode: power_user.waifuMode,
23732419 avatar_style: power_user.avatar_style,
23742420 chat_display: power_user.chat_display,
2421+ toastr_position: power_user.toastr_position,
23752422 noShadows: power_user.noShadows,
23762423 chat_width: power_user.chat_width,
23772424 timer_enabled: power_user.timer_enabled,
@@ -3323,6 +3370,14 @@ $(document).ready(() => {
33233370 saveSettingsDebounced();
33243371 });
33253372
3373+ $('#toastr_position').on('change', function () {
3374+ console.error('saw toastr position change');
3375+ const value = $(this).find(':selected').val();
3376+ power_user.toastr_position = String(value);
3377+ applyToastrPosition();
3378+ saveSettingsDebounced();
3379+ });
3380+
33263381 $('#chat_width_slider').on('input', function (e, data) {
33273382 const applyMode = data?.forced ? 'forced' : 'normal';
33283383 power_user.chat_width = Number(e.target.value);
public/style.css+1 -1
@@ -3933,7 +3933,7 @@ grammarly-extension {
39333933
39343934/* Override toastr default styles */
39353935body #toast-container {
39363936 margin-top: var(--topBarBlockSize);
39373937}
39383938
39393939body #toast-container>div {