Tests:
- All the icons appear as before in both light/dark themes.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- All the icons appear as before in both light/dark themes.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- In Privoxy app with only internal interface defined, the icon appears as
before in message in light/dark themes.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- The icon appears as before in navbar in light/dark themes.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- The icons appears as before in toolbar in light/dark themes.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- The home icon appears as before in breadcrumb in light/dark themes.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- All the icons appear as before.
- They change colors in light/dark mode.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- Icons works in light/dark mode.
- All icons appear as expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Use 'currentColor' as color in SVG images to make them adapt to light/dark
modes.
- Introduce a new {% icon %} template tag to read SVG files, attach attributes,
remove <?xml> header, and make all IDs inside unique.
- Use the {% icon %} template tag to inline SVGs in app page, home page,
app pages, and notifications.
- Relax the content security policy to allow inline styling with 'style='
attribute.
Tests:
- Allow the icons looks as before in the following pages: home page, apps page,
app specific page, and in notifications.
- Icons that are fully dark become white when theme is switched to dark mode.
- All the inlined SVG icons have a prefixed unique ID.
- W3C HTML validator shows no new errors.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- Functional tests of many apps pass with the patch.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- Through code changes, ensure that dist upgrade notification, updated to new
release notification, privacy notification, and app installed notification show
up. Ensure that they have correct hx- attributes and URL property for dismiss
button. Clicking dismiss button works as expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
- Delete only the <li> of the notification using HTMX.
- Notifications list stays open. User can dismiss another notification.
- Decrement notification counter using JavaScript after removing
notification from the list.
- Added HTMX to every kind of notification.
- Tested dismissing notifications from the top, middle and bottom of the
list.
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
[sunil: Update comment format in .js file]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Tests:
- When app install button is clicked, the new page shows that app is being
installed. However, when app installation is complete, the notification still
shows that app is being installed. With the patch, the issues is resolved.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.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>
- 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>
Instead of detecting 'custom' in the name of the icons (which can happen if the
icon basename itself contains the word 'custom'), check if the icon is already
an absolute URL path.
Tests:
- Add a custom shortcut and provide a custom icon for it in
/var/www/plinth/custom/static/icons/. Visit the frontpage and ensure that the
icon is visible.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Closes: #2414.
- Remove separate implementation for showing logs in help page.
- Add link to the page in diagnostics app so that FreedomBox logs can more
easily be discovered by users.
Tests:
- Raise an exception in the common error middleware to cause a 500 internal
server error. Run FreedomBox service with the --develop option and notice that
500 error page is served. There, the link to logs page works. It shows the logs
for Diagnostics app.
- Diagnostics page description is update. Link to logs page works.
- Diagnostics page shows logs for plinth.service and freedombox-develop.service.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.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>
Fixes: #2528
Tests:
- In Responsive Design Mode in Firefox, expand the screen width to be beyond
1400px. The left side of popup for the user menu will be aligned with the left
side of the menu item itself. When the width of the page is less than 1400px,
the right side of the popup will be right aligned with the right side of the
menu item.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
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>
- Use btn-toolbar class instead of <p> tag for more consistent spacing between
buttons and the bottom of the notification.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
- 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>
Tests:
- Visit the add static domain page. Notice that additional form description is
visible.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Tests:
- On app and system pages, canceling the search using the close button at the
end of the search bar will remove the search tags but will stay on the same
page.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Tests:
- In apps page, notice that all the tags are displayed as expected.
- Inside an app from apps sections, clicking on an tag shows the apps with that
tag filtered.
- Clicking on the search bar shows the list of all tags.
- Clicking on tag from search list adds that tag to the search list.
- Labels are shown properly in the search bar.
- Clicking on label removes it from search.
- Search results are sorted based on the number of matches.
- Clicking on the close button the tags search input removes filtering.
- All the above tests work for systems page with systems app. Sections are shown
even when apps are filtered by tags. Sections without results are not shown.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.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>
- Also remove the extra unwanted space between the tags.
- This allows different shortcuts of the same app to have different tags on the
home page. Example: email shortcuts on the home page.
- This also allows custom shortcuts to have their own tags without being
attached to any app provided by FreedomBox.
- Filter shown menu items by tags on the menu item rather than tags on the app.
They could be different.
Tests:
- Home page shows shortcuts with tags.
- Apps and system pages show shortcuts with apps.
- Apps are properly filtered when tags are clicked on in the app page.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
Since there are currently no apps with short description, it does not show
already anyway.
Tests:
- Installing an app works.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
- They should only be present in the <head>. Since all files are loaded with
'defer' attribute, it is no longer needed to place the JS files at the bottom of
the page.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This improves page rendering time. If JS files are not loaded in deferred or
async mode, they will halt the page rendering until JS files are loaded from
network.
- 'defer' mode guarantees that the load order is same as the order in which JS
files appeared in the HTML page.
Tests:
- Run at least one function of each affected JS file and ensure that is works.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.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>
sunil:
- Add explicit dependency on libjs-jquery in janus even though another
dependency brings it in.
- Fix looking for elements before DOMContentLoaded is fired. Since most of the
scripts are added at the end of the page, it might work now, but doing this
properly after DOMContentLoaded allows us to relocate the scripts to the header
of the page and add 'defer' attribute on them.
- Fix issue with IPv6 method getting selected as 'dchp' in networks.js.
- Don't focus on the first element in the form after the page loads. This is bad
for accessibility.
- Fix issue with setting the readonly/required states of IPv4/IPv6 fields on
page load.
- Password fields can now be changed to text fields and vice versa without a
problem. Simplify.
- Fix incorrect repetition of code setting 'show' class in onInvalidEvent().
- Prefer exception getting raised instead of functionality silently failing when
expected elements are not found.
- Use 'const' instead of 'var' wherever possible.
- Prefer .closest() to get to ancestors instead of .parentNode;
- Don't CSS transitions when showing an element, 'transition' CSS property does
not work on 'display' property. Instead they have to implemented on 'height',
'opacity', etc.
- Minor styling changes. Consistent casing. Use arrow styled functions.
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>
- It was never intended that breadcrumbs be shown in these pages.
Tests:
- When running first wizard, the busy page, the welcome page, user account
create page, and the next steps page are all shown without breadcrumbs. Same for
login page.
- Other pages which had breadcrumbs earlier continue to show them, that is, app
pages, system pages, help pages, and pages under those.
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>
- We were using hacky logic of assuming that if a page using the URL
/plinth/sys/..., then it belongs to 'system' section based on the URL match.
This won't work when the URL does not follow this pattern for any reason.
- Instead use the breadcrumbs mechanism which uses menu items and URL names to
determine the section a page belongs to.
Tests:
- Visit page, apps page, system page, help pages, an app page in apps sections,
an app page in system section, backups -> create backup page and notice that the
correct section is highlighted.
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>
