9 Commits

Author SHA1 Message Date
Sunil Mohan Adapa
7ba559a8a9
base.html: Drop dependency on modernizr.js library
- The library performs a large number of tests to determine if various features
are available in the browser. In Debian most tests seem to be present unlike
other methods of distribution where users select which tests they want and build
a customized library for their app. This leads to increased page load time.

- The only functionality we use from Modernizr library are the .js and .no-js
classes we use in our CSS styling. Modernizr is not needed by Bootstrap library.
We don't use 'Modernizr.' properties in Javascript.

- A bug in the test to determine if an <input> element with type="number" allows
localization or not causes the page to scroll down to the end. This behavior
appeared in version 3.x of modernizr and despite the bug report and the fix, it
is not gone. Dropping modernizr fixes this issue.

Tests:

- The logout link in the header bar is visible only when Javascript is disabled.

- The dropdown icons next to header menus only appear when Javascript is
enabled.

- For each feature detection provided by Modernizr library, search if our
project is using that in CSS styling.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
2024-08-07 23:26:32 +03:00
Sunil Mohan Adapa
a150cd15bd
static: js: css: Make multiple select fields work with Django 4.0
Closes: #2228.

- Django 4.0 changed to using <div> instead of using <ul> and <li> for multiple
choice select fields. Update code for the select-all button to work with the new
HTML structure.

- Add styling to ensure that multiple choice select field appears similar to
previous <ul> and <li> based style.

- This patch assumes that django-bootstrap-form has support for Django 4.0 as
seen in https://github.com/tzangms/django-bootstrap-form/pull/110 .

Tests:

- Radio select seem to have no issues. Checked in networks -> connection type
page.

- Open Backups -> Create backup page and ensure that select all button works
and appears same on testing (Django 3.2) and unstable (Django 4.0).

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
2022-07-04 21:03:02 -04:00
Sunil Mohan Adapa
d79f97f752
ui: css: New style for select all checkbox
- Make the box look different from the rest of the options so that this it does
not look like an option without label.

- Give it the appearance of a button so that it is becomes an operation rather
than option.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
2021-01-21 20:33:34 -05:00
Sunil Mohan Adapa
9b8388734d
ui: js: Make select all checkbox option available more broadly
- Make the code work outside backups module.

- Move code to main.js so that any app can use this functionality.

- Make the code work for multiple such form fields in the same page.

- Use only pure JS, don't use jQuery.

- Add event handlers only after DOM content is loaded to avoid race conditions.

Tests performed:

- Checking the select-all button checks all options.

- De-checking the select-all button de-checks all options.

- De-checking one option when everything is checked, de-checks the select-all
button.

- Checking the last option when everything else is checked, checks the
select-all button.

- When loading a schedule page with all options checked, select-all button is
checked.

- When loading a schedule page with some option unchecked, select-all button is
unchecked.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
2021-01-21 20:33:28 -05:00
Veiko Aasa
472590f6fc
javascript: Fix disabled submit buttons when navigating back to a page
When navigating back to a page, enable buttons that were previously
**temporarily** disabled.

Closes #1996

Tested that on the manage snapshots page, when browsing to delete view
and then back, the "Create Snapshot" button is enabled.

Signed-off-by: Veiko Aasa <veiko17@disroot.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
2020-12-19 14:01:33 -08:00
Veiko Aasa
5829fde5f4
templates: Make toggle button responsive
- Immediately after submitting a form with a toggle button, toggle and disable
the button and show a spinner on the button.
- Disable all other form button elements on the page when a form is submitted
to allow only one form submission at a time.

Closes #1993

Tests performed:
- Check that when enabling and disabling an app, the toggle button is responsive
- On the Samba app page, check that when enabling a share, the toggle button is
responsive and all other toggle buttons on the page are disabled.
- On the Samba app page, check that clicking the diagnostics button still works
while a share is being enabled or disabled.
- On the SSH confugration app page, check that after clicking the Update setup button,
a spinner is shown and the app enable/disable toggle button is disabled.
- Test on Firefox and Chromium.

Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Narrow the scope to only toggle buttons excluding others cases]
[sunil: Minor cosmetic and styling changes]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
2020-12-13 19:43:27 -08:00
Sunil Mohan Adapa
4a6a936de4
js: Don't show running status on buttons pulled to right
This prevents incorrect animation for running status on first wizard steps.

Tests:

- In the first boot wizard, network topology step, click next and notice that
the running status does not appear next to 'skip wizard' link.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
2020-08-22 10:52:32 +05:30
Sunil Mohan Adapa
3efff2fa42
js: Simplify auto-refresh page logic
- Implement ability to refresh page at the framework level so that every page
does not need to handle it.

- Refresh after number of seconds specified in context of the view.

Tests performed:

- Trigger the following functions and ensure that page reload after 3 seconds
during the running operation while it does refresh before and after the
operation.
  - Diagnostics tests from the module.
  - Gitweb repository cloning.
  - Monkeysphere publish key to server.
  - OpenVPN setup.
  - Tor configuration update.
  - Manual software update.
  - App installation.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
2020-06-29 10:09:04 +03:00
Sunil Mohan Adapa
ff84d3f97e
templates: Disable button and show spinner on submit for all forms
Tests performed:

- Submit a form and notice that button has a spinner soon after click.

- Select a from like Gitweb repository creation form and submit it. After submit
go back to previous form using back button. Notice that button has been restored
to proper state.

- Without filling valid information the form, press submit. Notice that the
button does not change to a spinner.

- Check installing an app, snapshots management, network forms, wireguard forms,
etc.

- Test on Firefox and Chromium.

- Test with LibreJS that the script is accepted as valid free software license.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
2020-06-29 10:08:23 +03:00