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>
Tests:
- In apps and system page, removing the last tag from search bar keeps the same
page but without any filtering.
Signed-off-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>
- Wrap each app's results in a <section>. Style section to maintain gap with
previous sections.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- So much spacing is not required as we have remove the background and borders.
- This is similar in approach to Bootstrap 4/5 which does not provide top
margins for heading elements and instead provides them only when they are not
the first element.
- Increase the margin between the end of a section and beginning of the next
heading.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Without the change, the exception information formatted in <pre> overflows the
alert's boundaries and make a long line. With the change, it now sows a
horizontal scrollbar instead.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Same color as in Bootstrap 4 but removed in Bootstrap 5.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This allows for system page to show 4 items in a row instead of 3.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Keep the badge-{severity} classes as they are meant for convenience of mapping
severity to style.
- Match bootstrap colors to maintain consistency and contrast.
Tests:
- Visually confirm that all the changes effective.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Overall, this is something we can try out.
- This looks better in some cases
- Default large list of disabled apps
- Home page with very few icons
- Help index page /plinth/help
- Mobile views
- This looks somewhat worse in some cases
- Last row of a large list of apps, esp. when the number apps left is even and
the number of apps in the previous row is not (similarly with odd number of
apps).
- Mismatch between enabled/disabled app section.
Thanks to @Ged296123 and @fefekrzr for suggesting the change.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- On a page without tags, tags.js still loads and initializes. When a tag input
search bar does not exist on the page, this leads to a harmless exception
getting printed on the browser console.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Drop the box shadow around a card item. Applies to home, apps, system, and
help pages.
- Replace the box shadow on hover with gray background. This gives the card a
much flatter look.
- Drop the top and bottom padding for app title as this is no longer necessary
as the white space around the icon/text is not overwhelming.
- Add top padding for app titles to make them level with icon tops.
- Drop the margin around the cards as it is not needed anymore. This completely
removes non-clickable area between the cards (which is unnecessary).
- Increase the padding to compensate for the reduction in the total gap
between the cards.
- In system page, increase in top margin for the section title is needed to
compensate for the loss of bottom margin for cards.
- In system page, increase in the total width of the card is necessary to make
the total row size the size of the container.
Tests:
- In apps and system pages, gap between the section title and cards in the
previous row is sufficient.
- In system page, 4 cards fit exactly in each row given the screen is large
enough.
- In apps page, app titles margins appear pleasant.
- In system page, the app titles align with icon tops.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- When the box shadows are dropped, the cards overlay on those backgrounds is
not pleasant.
Tests:
- MediaWiki functional tests pass.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
