- 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:
- 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>
- 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>
- 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 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>
- This improves modularity. Each app brings its own icons in its directory
instead of a centralized directory.
Tests:
- Install an app and notice that the installation notification has the icon.
- Visit an app's page in Apps and System (cockpit) section and ensure that the
app's icon is being shown.
- Visit the Apps and System section and notice that apps' icons are being shown.
- Visit the home page and notice that shortcuts' icons are being shown.
- Visit the URL /plinth/api/0/shortcuts and notice that the URLs for icons are
accessible and lead to proper icon files.
- Build developer documentation and notice that Tutorial -> View and Reference >
Menu pages show the expected updates.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Left side border of the notification is the color of the severity
level. Helps when there are multiple notifications with different
severity levels.
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Drop styling for unused 'notification-light' class]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
