The notifications dropdown does not behave like the other 3 dropdowns in
the navigation bar, but a user would expect it to, since it is also
visually a dropdown like the others.
Added JavaScript for a click listener that would collapse the
notifications dropdown if the user clicks anywhere outside the dropdown
area.
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- In the Calibre app page, the enable/disable toggle button has dark colors in
dark theme mode. The colors are proper when enabled, disabled, enabling,
disabling, hover.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- Select-all button in create backup page has mostly unchanged color in light
mode and more consistent color in dark mode.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- Main header's shadow is unchanged in light mode. In dark mode, it is still the
same and not really visible. This is better than casting a white shadow.
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- Insert event.preventDefault() in form submission code for submission buttons.
- For various button styles, submit the form. Running status indicator appears
on the form button. The styles for the indicator is appropriate in dark and
light themes.
- Calibre delete library confirmation page has btn-danger.
- Software Update, configuration update button has btn-primary.
- Software Update, 'update now' button has btn-default.
- Change a button from btn-primary to btn-link. Running status is not shown
for this type of button.
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- They were only present for compatibility with Bootstrap 5.2. The values were
picked directly from Bootstrap 5.3. So, there is no change in output.
Tests:
- Go to user creation form and make errors. A form element with error has red
outline like more. The help text and error message are also in red like before.
In dark mode, they are more appropriate with the rest of the page and with
higher contrast.
- On default styled button, background color on hover is also improved
similarly.
- The border for select-all button in the create new backup page is also
improved similarly.
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- In apps and system pages, the tags text in a card is unchanged in light theme.
In dark theme, it is more consistent with the rest of the page.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- In network connection editing page, find some form elements that are disabled
and their light mode color is mostly unchanged. In dark mode, it looks
consistent with the rest of the page.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Use color variables provided by Bootstrap. These automatically adjust to light
and dark themes.
Tests:
- In light mode, the style for 'Update now' button in Software Update app is
close to what it was before. In dark mode, the styling is consistent with the
rest of the page.
- Same is true for Calibre app 'Delete Library' button and extra options button
in an app.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Use the right CSS variable.
Tests:
- In a form, the help text for an input is unchanged in light mode. And in dark
mode, it is more appropriate.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- In the app header as well as tag search bar.
- De-emphasize the tag buttons in app header so that users won't see them as
sections of the page.
- Add a bullet Unicode character between the tags in app header to separate them
properly with new de-emphasized styling.
- Fix vertical alignment of text between tag buttons in app header and the close
button in tags in tag search bar.
Tests:
- In the app header, styling has been de-emphasized and tags now look more like
simple text. They are a separated with a bullet Unicode character. Vertical
alignment of bullets is accurate.
- In the tag search bar, tags continue to look like buttons but more like default
buttons. Vertical alignment of close button is accurate.
- In both areas tags look properly in dark and light color themes.
- In mobile view when there are a lot of tags, tags flow into second line.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- This simplifies the implementation and gets it ready for dark/light mode.
Tests:
- In the upgrades main view, set is_busy = True and disable setting
refresh_page_sec. Load the upgrades app and notice that the 'Updating...' button
is showing proper styling in light anddark modes.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Add a toggle menu for selecting the color scheme. JS code largely taken from
Bootstrap documentation and slightly customized.
- Use local storage to store the setting for dark/light/auto. Default to auto
which means browser level preference is picked up (which could be system level
preference).
Tests:
- Appearance of the toggle menu is consistent. Check box is shown on the
currently selected value.
- Deleting the local storage value reverts the preference to browser set value.
- Menu is collapsed at smaller screen sizes. Appearance and functionality as
expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- View logs menu entry is shown only for apps with daemons. It is now shown for
others such as Backups. It does not add menu for apps such as power.
- View logs entry for Date & Time shows show logs for multiple units. View logs
entry for Nextcloud shows many units.
- The textarea occupies full width. It is not editable. It is always scrolled to
the bottom. Control-A and Control-C selects all the text in it. It is re-sizable
vertically.
- The header shows unit name and unit description correctly.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Mostly for styling and just to fix the linter.
Tests:
- After package availability check in bepasty page, 'Install' button is enabled.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- The most pleasant font on any system is the default system font.
- It is the most optimized and styled font for the system considering screen
type and screen sizes.
- Used by all the system apps. Websites can become consistent with system apps
by using system fonts. GNOME, KDE, Ubuntu, Android, Chrome OS, iOS, and MacOS,
all have their own system fonts.
- Changed by the user using OS settings if they don't like it.
- Many popular sites have started using system fonts.
- No extra fonts have to be loaded making page loading jerk free and much
faster. On the first FreedomBox UI page load, the largest item is the font.
- We won't have carry the binary woff files in FreedomBox source tree anymore.
Also eliminates a bunch of lintian warnings.
- Lato font was used because it is prescribed by the FreedomBox identity manual.
Lato can still be used in other places such as marketing materials.
Tests:
- System font is used in the UI. When system font is changed in Gnome settings
and browser is restarted, the new font is shown in the UI.
- Check that the overall layout of the app grids is not effected by the font
size change.
- Check that all the tables in the UI are not affected by the font change.
- Backups repository listing shows each backup archive in one line.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
Fixes: #1358
- Refresh the apt cache if required packages for an app are not found and if the
cache is more than 1 hour old (or non-existent).
- If required packages are found, don't refresh the package cache even if the
cache is outdated. This is because the check operation could lead to many
minutes of waiting before app can be installed.
Tests:
- Remove /var/lib/apt/lists/* and /var/cache/apt/pkgcache.bin. Visit an app
setup page. apt cache is updated and it take a while to check that the app is
available. App is shown as available. If page is refreshed, this time, the cache
is not updated.
- Set the modification of /var/cache/apt/pkgcache.bin file to more than 2 hours
ago with 'touch -d "2 hours ago" /var/cache/apt/pkgcache.bin'. Then refreshing
the page will not refresh the cache.
- Repeat test with an app that is not available such as Janus. Again apt cache
is refreshed. App is shown as not available. On refresh, the cache is not
updated.
- Set the modification of /var/cache/apt/pkgcache.bin file to more than 2 hours
ago with 'touch -d "2 hours ago" /var/cache/apt/pkgcache.bin'. Then refreshing
the page will not refresh the cache.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
- Remove redundant if condition in setup.html template
- Use JavaScript fetch() API instead of XMLHTTPRequest class
- Update a comment in test_package.py
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
- Using AJAX request instead of loading the initial page slowly.
Tests:
- Unit tests passes.
- Deluge app is not available in bookworm and is available in Trixie.
- When app is available, no message is shown. Install button is enabled.
- When app is not available a proper warning alert message is shown. Install
button is disabled.
- During check for the availability, the progress message is shown. Install
button is disabled.
- When Javascript is disabled on the page, no availability check is performed.
Install button is enabled.
- When an exception is raised in the is-available view, error message is shown.
Install button is enabled.
- When is-available view return HTML response, error message is shown. Install
button is enabled.
- When is-available view invalid JSON response, error message is shown. Install
button is enabled.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
- Notifications are displayed in a user-friendly "time ago" format.
- Use last_update_time instead of created_time
Sunil:
- Some notifications don't have app name and app icon. Styling for those
notification was different due to the last update time. Revert back to
positioning for it. Use CSS float for it.
- Use localized, locale specific date/time format for the tooltip.
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Fixes an issue where confirming user deletion is not submitting the user
edit form.
Also fixes an issue where the user edit submit button is disabled after user
deletion confirmation is cancelled.
Fixes#2513.
Tests performed:
- Deleting a user works.
- All the users module tests pass.
- After cancelling the user deletion confirmation dialog, the user edit
submit button is clickable.
- On the app pages, submit buttons are disabled when app enabling or disabling
is in progress.
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
We were using the Unicode point "Katakana middle dot" which was not showing up
on some systems. Separators may not show up the same on all machines depending
on the font used. So, use an SVG image instead.
Tests:
- On the front page and apps page, the separators appears as expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Latest version of libjs-bootstrap5 depends on
node-popper2. However, version in Debian bookworm still continue to have
incorrect dependency. So, add explicit dependency on node-popper2 until we stop
supporting Bookworm.
Tests:
- In stable and testing VMs, install node-popper2 and notices that the following
work as expected:
- User menu dropdown in desktop and mobile layouts.
- Help menu dropdown in desktop and mobile layouts.
- Notification dropdown.
- App extra actions dropdown.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Closes: #2488.
This is due to outdated django-bootstrap-form package that does not set
.form-select class on dropdowns as needed by Bootstrap 5.
Tests:
- On stable and testing VMs, dropdowns in the 'Add backup location' page show
arrows.
- On a mobile layout, the overflowing text does not overlap onto the dropdown
arrow.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Due to their fixed widths they were causing the drop down navigation bar to
placed incorrectly in mobile view.
Tests:
- In mobile view in home, apps, system, and help pages the navbar dropdown
button is placed correctly.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Most notable of the problems is the missing hover color on cards.
Tests:
- Cards have a gray hover color.
- Forms with errors have input boxes with red borders and help text with red
color.
- Select all button in created backup has a border.
- UI is consistent across stable and testing for tested cases.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Currently, there is a bug with section header with Bootstrap 5 migration in
stable. It causes the section headers not to have underline in Debian stable but
only in Debian testing. This is due to the variable --bs-secondar-border-subtle
being defined only in Bootstrap 5.3 (testing) but not in Bootstrap 5.2 (stable).
- The removal of the border is actually reducing visual noise. So, commit to it
by removing the border even on testing. To Increase contrast to the section
headers, increase their font size (but reduce font weight).
Tests:
- In testing and stable VMs, the style is same and as expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This extra margin was accidentally introduced when migrating to Bootstrap 5
and a generic rule was introduced to add spacing before each section that is not
the first one.
Tests:
- In app pages, icon and title are at the same level.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes#2460
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
[sunil: Update the style to provide spacing after tags lines]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
- Instead of showing traceback details only for action exceptions, show them for
normal exceptions also.
- Also adjust the gap between the error message and the preformatted text to
make it appear better.
Tests:
- Alter code to raise an exception with the utility. See that details are as
expected.
- Raise an exception in a privileged action, ensure that the details shown as
before.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Don't show them on section pages: home, apps, system and help pages.
- Tweak the appearance so that home icon is bigger, spacing between crumbs is
larger and to use '>' as separator.
- Change the name of the help menu item to show the value in breadcrumbs.
- Change the URLs for anchors in the help page so that they don't appear as part
of the breadcrumbs.
Tests:
- Section pages: home, apps, system and help pages don't have breadcrumbs.
- Visit various pages. Breadcrumbs are shown and all the links in the
breadcrumbs work as expected.
- Mobile view looks good.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- During the placement computation for the drop down menu, the height of the
dropdown-menu is very high and that leads to it getting placed at the top of the
page instead of the below the search element.
- To avoid the problem, cap the height of the dropdown. Somehow, the original
calculation for the height using CSS calc() does not seem to working as
expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Custom CSS variables were declared with Bootstrap 4 since it did not use CSS
variables itself. In Boostrap 5, CSS variables are available. Use them to
eliminate custom color definitions. This means that when Bootstrap colors are
changed, custom colored elements will not look different.
- Use color utilities from Bootstratp instead of .processing, .warning, and
.normal.
- Collect more repeated colors into variables. This will make themeing easier.
- Using Bootstrap variables also makes implement dark mode easier.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- .nav-link classes are meant to be used in navbars and tab navigations. Don't
use them incorrectly in .card to avoid potential breakages and readability.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Notifications dropdown is shown briefly before page load. After the page load,
it disappears. This is quite annoying and happens due to the following reason.
- We add .no-js class to <html> tag and later remove using Javascript.
- We load most of our Javascirpt using 'defer' attribute leading display of
layout of content before Javascript is loaded.
- We also wait for DOMContentLoaded event to fire before removing the .no-js
class on <html> element.
- Solve the problem by adding special class to notifications dropdown to ensure
that it is not shown even when Javascript is not available.
- There might be a better fix to the problem.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- In mobile view, when the burger menu is clicked on, the menu is expanded and
options are shown. In those options, notifications icon is shown while the menu
is expanding but not when it is fully expanded. To fix this, hide it while
expanding too.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- In Bootstrap 5, dropdown button and dropdown menu not being siblings does not
work like it did in Bootstrap 4.
- Use collapse component instead of dropdown. Collapse component does not have
the same limitations. Apply some of the styling from dropdown-menu to restore
previous appearance.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Workaround Debian bug #1087969. popper.js 2.x is needed for Bootstrap 5,
however, the current version on in Debian is 1.x. Implement a Popper 2.x method
that Bootstrap 5 is expecting and translate the call into Popper 1.x.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Drop menu_link and menu_link_active classes and use the bootstrap's default
classes.
- Override values for bootstrap variables instead of overriding the styles
themselves.
Tests:
- Test that navbar shows same colors as before in mobile view and desktop view.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Since django-bootstrap-form still generates styling for Bootstrap 3, we need
to adapt styling for Bootstrap 5 for it.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- The new styling has much higher contrast compared to older styling.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Tags have important text that is too small and could cause problems with users
with limited vision. Make them regular buttons. Make the buttons shorter and
rounder to resemble previous styling.
- Drop underlining of text in the process.
- In code, don't call them 'badges' anymore.
Tests:
- Run functional tests for tags.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Bootstrap 5, unlike Bootstrap 4 overrides button styling when hovered on and
disabled. Provide the values for these overrides using CSS variables.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Styling for form-group has been removed in Bootstrap 5.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
