Commit dd268c48 authored by Martín (Netux) Rodríguez's avatar Martín (Netux) Rodríguez
Browse files

feat(extensions): add toggle all checkbox to Installed tab 

Small QoL addition.

While there is the option to disable all extensions with the radio buttons at the top, that only acts as an added flag and doesn't really change the state of the extensions in the UI.

An use case for this checkbox is to disable all extensions except for a few, which is important for debugging extensions.
You could do that before, but you'd have to uncheck and recheck every extension one by one.
parent 59419bd6

javascript/extensions.js

+18 −0
Original line number Diff line number Diff line
@@ -72,3 +72,21 @@ function config_state_confirm_restore(_, config_state_name, config_restore_type) 
    }

    return [confirmed, config_state_name, config_restore_type];

}



function toggle_all_extensions(event) {

    gradioApp().querySelectorAll('#extensions .extension_toggle').forEach(function(checkbox_el) {

        checkbox_el.checked = event.target.checked;

    });

}



function toggle_extension() {

    let all_extensions_toggled = true;

    for (const checkbox_el of gradioApp().querySelectorAll('#extensions .extension_toggle')) {

        if (!checkbox_el.checked) {

            all_extensions_toggled = false;

            break;

        }

    }



    gradioApp().querySelector('#extensions .all_extensions_toggle').checked = all_extensions_toggled;

}

modules/ui_extensions.py

+5 −2
Original line number Diff line number Diff line
@@ -138,7 +138,10 @@ def extension_table(): 
    <table id="extensions">

        <thead>

            <tr>

                <th><abbr title="Use checkbox to enable the extension; it will be enabled or disabled when you click apply button">Extension</abbr></th>

                <th>

                    <input class="gr-check-radio gr-checkbox all_extensions_toggle" type="checkbox" {'checked="checked"' if all(ext.enabled for ext in extensions.extensions) else ''} onchange="toggle_all_extensions(event)" />

                    <abbr title="Use checkbox to enable the extension; it will be enabled or disabled when you click apply button">Extension</abbr>

                </th>

                <th>URL</th>

                <th>Branch</th>

                <th>Version</th>
@@ -170,7 +173,7 @@ def extension_table(): 


        code += f"""

            <tr>

                <td><label{style}><input class="gr-check-radio gr-checkbox" name="enable_{html.escape(ext.name)}" type="checkbox" {'checked="checked"' if ext.enabled else ''}>{html.escape(ext.name)}</label></td>

                <td><label{style}><input class="gr-check-radio gr-checkbox extension_toggle" name="enable_{html.escape(ext.name)}" type="checkbox" {'checked="checked"' if ext.enabled else ''} onchange="toggle_extension(event)" />{html.escape(ext.name)}</label></td>

                <td>{remote}</td>

                <td>{ext.branch}</td>

                <td>{version_link}</td>

CRA Git | Maintained and supported by SUSTech CRA and CCSE