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>
- 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>
- Make a separate image for 'FreedomBox Powered'.
- Link to the now publicly available about page.
Tests:
- Clicking on the new 'Powered' image leads to about page which is available to
logged in and logged out users.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2464.
- This page will act as replacement for the footer links in the home page.
- Remove link to FreedomBox Foundation and add link to Weblate project. We
already have a donate link to the foundation website.
Tests:
- About page is shown as expected. Old 'Learn more' button is no more. So is the
last paragraph.
- Styling is as expected. All the section have equal width.
- All links work.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- The container border is, strictly speaking, no longer required as the background and
content container don't have different styles.
- This makes the mobile and desktop interfaces a lot more similar.
- Don't change any margins and padding for the content container.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Update the mediawiki functional tests which were using this image.
- Slightly increase the darkness of the shadow around the cards to compensate
for the loss of the contrast with the noise background.
Tests:
- Re-run mediawiki functional tests.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2418.
- This resolves a issue that icons being misaligned when the name of the app
flows into multiple lines. The increase in size of the card is not very
bothering as long as icons are not still aligning. If the noise background is
removed (to be proposed later), the increased size of the icon is even less
bothering.
- The other options would have been to reflect the increased size of the tile to
neighboring apps in that row (does not seem possible with CSS) or ellipsize the
title when it overflows.
- Redo all the spacing in spacing inside the card to better match the new
layout. The height of the card reduces slightly due this change, which looks
better and closer to other icons grids in other UIs.
Tests:
- In index, apps, and help:index pages, the title has change location. Spacings
are as expected and appealing. System page is unaffected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Making most of text that is read in a page bold is useless. Emphasis should
instead be used for some text that should stand out of the rest of the text.
- The need to make the text bold goes away if the text color is not such a
lighter shade of gray. Reset this to the regular text color.
Tests:
- Observe changes in home, apps, system, and help index pages.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2179.
Tests:
- Set language to Magyar (hu). Test that items in the system page are large enough to
accommodate most names/descriptions.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Increase the width of the containers that hold home cards, app cards, system
cards, and help cards. This helps in:
- Showing system page layout better with wider cards for each item.
- Showing more apps in the app page. This does not decrease the readability in
the same way that increasing the size of the paragraph does beyond a certain
point.
- Also increase the width of the navbar to make it appear consistent.
- Other containers such as content container remain at the same width.
Increasing this width would make a reading a paragraph harder.
- Behavior is mobile layouts is unchanged.
Tests:
- Test that apps, system, home and help views show cards in a wider layout.
- Success/error messages shown in apps, system, home and help views are narrow
and are not effected.
- In home and help:index pages (reached when clicking help icon without JS), the
icons are wide but the content is narrow.
- Individual app pages, confirmation pages, and help pages remain at the older
width.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Use CSS based styling instead of styling based on bootstrap classes.
- Add a placeholder for the input box to easily locate it and convey what it
does.
- Drop dead code for '.tag-input .tag'.
- Drop some repeated data- attributes by using DOM navigation.
- Drop redundant styling.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
- Add tags to Info component of apps. Use only English tags for all operations.
Localized tags are used for presentation to the user only. Add tags to all the
apps. Conventions (English):
1. Tags describing use cases should be in kebab case.
2. Protocols in tag names should be in their canonical format.
3. Tags needn't be 100% technically correct. This can get in the way of
comparing apps using a tag. Words that describe use cases that users can
easily understand should be preferred over being pedantic.
4. Tags should be short, ideally not more than 2 words. Avoid conjunctions
like "and", "or" in tags.
5. Avoid redundant words like "server", or "web-clients". Most apps on
FreedomBox are either servers or web clients.
6. Keep your nouns singular in tags.
- Use query
params to filter the Apps page by tags. When all tags are removed, redirect to /apps.
- Add UI elements to add and remove tag filters in the Apps page. Make the UI
similar to GitLab issue tags. Since there are 40 apps, there will be at least 40
tags. Selecting a tag from a dropdown will be difficult on mobile devices. A
fuzzy search is useful to find tags to add to the filter. Allow user to find the
best match for the search term and highlight it visually. The user can then
press Enter to select the highlighted tag. Make tag search case-insensitive.
Make the dropdown menu scrollable with a fixed size. User input is debounced by
300 ms during search.
- tests: Add missing mock in test_module_loader.py
- Add functional tests
[sunil]
- 'list' can be used instead of 'List' for typing in recent Python versions.
- Reserve tripe-quoted strings for docstrings.
- Undo some changes in module initialization, use module_name for logging
errors.
- isort and yapf changes.
- Encode parameters before adding them to the URL.
Tests:
- Tested the functionality of filtering by tag with one tag and two tags.
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>
Fix the following:
- In mobile layout, the logout button has incorrect text color and when
hovering, wrong background color.
- In mobile layout, when user menu is expanded, there is no spacing between the
end of the menu and the border for the expanded menu items.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Only item in the navbar present during first boot in mobile layout is the
toggler. Set its height such that it maintains the height of the entire navbar.
Tests:
- After the account setup screen, switch to mobile layout. Notice that the
navbar is no longer tiny but the usual height.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Fixes#2456.
- Replace the first setup wait message with a spinner. This is sufficient to let
the user know that they have to wait.
- The message does not convey anything more.
Tests:
- Remove /var/lib/plinth/plinth.sqlite3 and start the service. After the service
starts listening visit the web interface and notice that the first setup screen
shows up. The size and position of the spinner are as expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Fixes: #888.
- Suggest all the steps that a typical user should likely take.
- Custom styling to make the page look good.
- Open the links in new windows as this page can't be reached again.
- Add a button for software updates as this can be done easily and the most
important step.
Tests:
- Trigger first setup by removing plinth.sqlite3. Notice the improved setup
complete page. Text and icons are as expected. Links work and open in a new
window. Clicking on 'Update now' button opens a page to software updates with
manual upgrade triggered.
- Mobile view looks good.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Closes: #2161.
- Sections are ordered by importance on which administrator must act after
setting up the system.
- Consistent order across all the languages.
- Update the styling for the section hearers.
- For system section, make them compact.
- Make them look like a header text (with underline) rather than a
divider (like in a menu).
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This prevents CSRF attacks that allow adversarial websites from logging out
users from FreedomBox. Django itself has made this change in 4.x releases.
Tests:
- Logout works with the menu item in drop-down when Javascript is enabled. The
menu item appears similar to other drop-down menu items.
- Logout works with the menu item when JavaScript is disabled on the page. The
menu item appears similar to other menu items.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
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>
Fixes: #2049.
This is regression introduced by me in 213cf16f8daa66dbfd3c761a61483c959c753559.
Although this case was tested for regression, the test setup was incorrect.
Tests:
- In networks page to details of a connection, the Delete button is aligned to
the right.
- In snapshots page, the Create Snapshot button is aligned to the left and
Delete Snapshots button is aligned to the right. Clicking on the buttons does
not change their position.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Add running spinner before every app installation step text, this
makes the fact that installation is in progress visually more noticeable.
Tested when installing the mediawiki app, the running spinner is shown
on every installation step.
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Horizontally align the text and spinner by the spinner inline]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Pull the delete button in the connection show page to the right to prevent
hitting it by accident.
Signed-off-by: Fioddor Superconcentrado <fioddor@gmail.com>
[sunil: Use a new consistent style compatible with bootstrap4]
[sunil: Styled the delete button with danger color]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
- 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>
- attr() CSS function can't used practically on anything but the content
property.
- Introduce a hack for setting any arbitrary percentage width on an element
similar to w-25, w-50, w-75 and w-100 bootstrap utilities. This hack should not
be used widely.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This is a temporary fix until proper bootstrap 4 forms are generated by
django-bootstrap-form.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- The emphasis brought by italics is wasted when all of the items have a same
style. Without it the style is simpler and more pleasent.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- When the base font size is changed, all the measure will scale appropriately.
- Bootstrap 4 has done the same.
- Keep using px for responsive lengths and some border widths that need not
scale.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Closes: #1818. The new navbar collapse handles items better without a scrollbar.
- Switch dependency to newer bootstrap4 library.
- Bootstrap 4 has 5 grid levels instead of 4. Adjust all classes accordingly to
retain current semantics.
- Update for newer markup for dropdowns.
- Replace use for labels with badges. Labels have been removed. Use
badge-secondary instead of label-default.
- Replace use of btn-xs with btn-sm. Size is roughly the same.
- Accommodate removal of form-horizontal.
- .hidden* and .visible* classes have been removed. Use alternate utilities.
- Replace use of table-condensed with table-sm.
- Update progress bar background styling. .progress-bar-* have been replaced
with bg-*.
- Drop support for IE9 and below. Bootstrap 4 does not support those browsers.
- Use the new simplified markup for navs, navbar and navbar-toggler. Accommodate
removal of .navbar-fixed-top.
- Update the JSXC page too.
- Update all values that are using rem units. The base font size is now 1rem =
16px instead of 1rem = 10px. This the default for bootstrap 4.
- A button inside a dropdown menu is natively supported by bootstrap 4. Remove
custom styling done earlier.
- Drop use of removed class thumbnail.
- Override colors for buttons and warnings to keep the old style.
- Use new markup for close buttons inside alerts.
- Use .collapse.show instead of .collapse.in as per bootstrap 4 styling.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- 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>
This is high visibility to the donation link and almost prompts users to donate
instead of passively providing the information. Given how many free software
struggle to stay alive, this is needed.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Helps: #1938.
Fixed application of available translations in daemon.py and apache,
diagnostics, networks, firewall and users modules.
diagnostics:
- __init__.py: return the app name along its results.
- diagnostics.html: display the app name instead of its id.
- diagnostics_results.html:
- mark for translation,
- apply class to results <td> HTML tag.
main.css: center-align the results.
Locale files excluded. Will be regenerated automatically and translations to be
done via Weblate.
original testing (rebased later):
- Yapf applied.
- Flake8 without errors or warnings for changed files.
- (Unit) tests run without errors.
Signed-off-by: Fioddor Superconcentrado <fioddor@gmail.com>
[sunil: Translate 'None' app name]
[sunil: Don't translate tests strings second time in template]
[sunil: Tweak the center rule]
[sunil: Don't split a translation string]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Closes: #1939.
- Force a delay before returning the upgrade result to allow upgrade to kick in.
Otherwise when the flow returns, get_context_data() creates the context too
early and finds the upgrade not yet busy, causing the refresh loop to miss it.
The page renders static and the user gets no clue to the upgrade executing in
the background.
Signed-off-by: Fioddor Superconcentrado <fioddor@gmail.com>
[sunil: Retain the styling for the remainder of the page]
[sunil: Re-style the status section as a simple web-page]
[sunil: Drop unused running-status CSS styles]
[sunil: Rename CSS variables, minor changes to color values]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.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>
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>
See #1841 for discussion on why Turbolinks needs to be removed.
Closes: #1841.
Closes: #1804.
Tests performed:
- There are no more references to 'turbolinks' in source code other than .po(t)
files and the manual.
- When loading a page, turbolinks.js is no longer loaded.
- The following links don't have data-turbolinks attribute and work well when
clicked.a
- Gitweb repository links
- Download manual links (en, es)
- Ikiwiki wiki links
- Sharing app web share links
- TT-RSS mobile app link
- 'Launch web client' button
- 'Launch' button in web section of clients table
- Active and regular front page shortcut
- Roundcube does not have a link to /roundcube in description.
- turblinks not present in /static/jslicense.html . LibreJs accepts all scripts.
Reported-by: Veiko Aasa <veiko17@disroot.org>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Tested-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Introduce new API to mark an app that it can't be disabled.
- Mark jsxc, storage, config, upgrade and firewall apps as can't be disabled.
- Fixed functional tests
- Replaced AppForm with forms.Form in all modules' forms.py.
- Remove app.template.js.
- Remove unused styles.
- Remove app status checks in form_valid of Deluge, Diaspora, Matrix, Ejabberd,
MediaWiki, Storage, Transmission, Quassel
- Purge unused is_enabled context variables (Ikiwiki)
- ejabberd: Minor cleanup in template
- jsxc: Cleanup unneeded overrides
- tahoe: Cleanup unnecessary overrides
Tests performed:
- For all apps affected, test enable/disable button works and submitting
configuration form works: with changes updates message and without changes
'settings unchanged' message.
- avahi
- bind
- cockpit
- SKIP: coquelicot
- datetime
- deluge
- SKIP: diaspora
- ejabberd
- gitweb
- i2p
- infinoted
- ikiwiki
- matrixsynapse
- mediawiki
- minetest
- minidlna
- mldonkey
- mumble
- pagekite
- privoxy
- quassel
- radicale
- roundcube
- SKIP: samba
- searx
- SKIP: shaarli
- shadowsocks
- ssh
- tahoe
- transmission
- FAIL: tt-rss (not installable)
- wireguard
- Deluge test that configuration changes when app is disabled work
- Quassel test that setting the domain works when app is diabled
- Transmission test that setting the domain works when app is diabled
- Ikiwiki create form works properly
- Enable/disable button appears as expected when enabled and when disabled
- Enable/disable button works without Javascript
- Functional tests work for affected apps, Tor and OpenVPN
- AppForm is removed from developer documentation
- Forms reference
- Customizing tutorial
- Test all apps using directory select form
- Transmission
- Deluge
- Visit each template that overrides block configuration and ensure that it is
loaded properly and the display is as expected.
- All apps that use AppView that are not tested above should not have an
enable/disable button. That is JSXC, update, config, firewall, storage, users.
Signed-off-by: Alice Kile <buoyantair@protonmail.com>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Eliminate issue with collapsed navbar's drop-down menu text color when the
width is exactly 768px or less than 320px.
- Remove redundant footer's position: relative rule.
Tests performed:
- Change the browser width to 768px, the navbar is not collapsed and drop down
menu text color is black on white background.
- Change the browser width to 767px, the navbar is collapsed and drop down menu
text color is white on blue background.
- Change the browser width to less than 320px, the navbar is collapsed and drop
down menu text color is white on blue background.
- Footer on the main page and remaining pages is unchanged at <320px, =767px and
>= 768px.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
