add option for toastr location to themes

87f547cd87cd940961e71a76cd61ffbcf70a4bdd

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

Parents: 074ca4a55b5778b247fac44401b705230e859466

public/index.html+11 -0 Viewed

                                     <input class="neo-range-slider" type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
                                     <input class="neo-range-input" type="number" min="0" max="5" step="1" data-for="shadow_width" id="shadow_width_counter">
                                 </div>
+                                <div class="flex-container alignItemsBaseline">
+                                    <span data-i18n="Notification Location:">Notification Location:</span><br>
+                                    <select id="toastr_position" class="widthNatural flex1 margin0">
+                                        <option value="toast-top-left" data-i18n="Top Left">Top Left</option>
+                                        <option value="toast-top-center" data-i18n="Top Center">Top Center</option>
+                                        <option value="toast-top-right" data-i18n="Top Right">Top Right</option>
+                                        <option value="toast-bottom-left" data-i18n="Bottom Left">Bottom Left</option>
+                                        <option value="toast-bottom-center" data-i18n="Bottom Center">Bottom Center</option>
+                                        <option value="toast-bottom-right" data-i18n="Bottom Right">Bottom Right</option>
+                                    </select>
+                                </div>
                             </div>
                             <hr>
                             <div name="themeToggles">

public/script.js+3 -1 Viewed

 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.

         // 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);

public/scripts/power-user.js+55 -0 Viewed

     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,

+    }
+}
+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;

             },
         },
+        {
+            key: 'toastr_position',
+            action: () => {
+                applyToastrPosition();
+            },
+        },
+        {
             key: 'avatar_style',
             action: () => {
                 applyAvatarStyle();

     return 'normal';
+}
+//MARK: loadPowerUser
 async function loadPowerUserSettings(settings, data) {
     const defaultStscript = JSON.parse(JSON.stringify(power_user.stscript));
     // Load from settings.json

     $('#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);

         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,

         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);

public/style.css+1 -1 Viewed

 /* Override toastr default styles */
 body #toast-container {
-    top: var(--topBarBlockSize);
+    margin-top: var(--topBarBlockSize);
+}
 body #toast-container>div {