buttonify instruct header toggles, style instruct columns when disabled

93bfe7f40b747b45df7f48288188e9ad374b6db1

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

Parents: 3ed198deb7702b9e5974cc87cd2ac0dddaf9aba0

public/index.html+8 -6 Viewed

                     </div>
                     <div id="InstructSettingsColumn" class="flex-container flexNoGap flexFlowColumn flex1">
-                        <div name="instructSettingsBlock">
+                        <div id="instructSettingsBlock">
                             <h4 class="standoutHeader title_restorable justifySpaceBetween">
                                 <div class="flex-container">
                                     <span data-i18n="Instruct Mode">Instruct Mode</span>

                                 </div>
                                 <div class="flex-container">
                                     <label for="instruct_enabled" class="checkbox_label flex1">
-                                        <input id="instruct_enabled" type="checkbox" />
+                                        <input id="instruct_enabled" type="checkbox" style="display:none;" />
-                                        <small data-i18n="Enabled"><i class="fa-solid fa-power-off"></i></small>
+                                        <small data-i18n="Enabled"><i class="fa-solid fa-power-off menu_button margin0"></i></small>
                                     </label>
                                     <label for="instruct_bind_to_context" class="checkbox_label flex1" title="If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference." data-i18n="[title]instruct_bind_to_context">
-                                        <input id="instruct_bind_to_context" type="checkbox" />
+                                        <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />
-                                        <small data-i18n="Bind to Context"><i class="fa-solid fa-link"></i></small>
+                                        <small data-i18n="Bind to Context"><i class="fa-solid fa-link menu_button margin0" title="If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference."></i></small>
                                     </label>
                                 </div>
                             </h4>

                                     <small data-i18n="Force for Groups and Personas">Force for Groups and Personas</small>
                                 </label>
                             </div>
+                        </div>
                         <hr>
                         <div name="tokenizerSettingsBlock">
                             <div data-newbie-hidden name="tokenizerSelectorBlock">

                                 <input id="token_padding" class="text_pole textarea_compact" type="number" min="-2048" max="2048" />
                             </div>
                         </div>
+                        <div>
+                            <h4 class="standoutHeader">Misc.</h4>
                             <div>
                                 <small>
                                     <span data-i18n="Non-markdown strings">

public/scripts/instruct-mode.js+20 -0 Viewed

     if (power_user.instruct.enabled) {
         $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');
+        $('#instructSettingsBlock, #InstructSequencesColumn').removeClass('disabled');
     } else {
         $('#instruct_enabled').parent().find('i').removeClass('toggleEnabled');
+        $('#instructSettingsBlock, #InstructSequencesColumn').addClass('disabled');
+    }
+    if (power_user.instruct.bind_to_context) {
+        $('#instruct_bind_to_context').parent().find('i').addClass('toggleEnabled');
+    } else {
+        $('#instruct_bind_to_context').parent().find('i').removeClass('toggleEnabled');
+    }
     controls.forEach(control => {

         //color toggle for the main switch
         if (power_user.instruct.enabled) {
             $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');
+            $('#instructSettingsBlock, #InstructSequencesColumn')
+                .removeClass('disabled');
         } else {
             $('#instruct_enabled').parent().find('i').removeClass('toggleEnabled');
+            $('#instructSettingsBlock, #InstructSequencesColumn')
+                .addClass('disabled');
+        }
         if (!power_user.instruct.bind_to_context) {

+        }
     });
+    $('#instruct_bind_to_context').on('change', function () {
+        if (power_user.instruct.bind_to_context) {
+            $('#instruct_bind_to_context').parent().find('i').addClass('toggleEnabled');
+        } else {
+            $('#instruct_bind_to_context').parent().find('i').removeClass('toggleEnabled');
+        }
+    });
     $('#instruct_presets').on('change', function () {
         const name = String($(this).find(':selected').val());
         const preset = instruct_presets.find(x => x.name === name);