Media library redesign (#233)

* Media library: new layout, equal cards, folder sidebar; report partial uploads

The media pages get their own tiles layout: the folder list replaces the
Powered-by card in the sidebar, and a viewport meta tag lets the page
reflow on phones, where a folder picker replaces the list.

Files show as equal cards in a CSS grid. Long names wrap in two lines,
and each card shows type, size and a selection checkbox with an
accessible label. Search, the selection toolbar (select page, clear,
move, delete) and the Upload button now sit above the files.

Uploading several files no longer hides the ones that were saved when
another fails: the success page lists the failures with their names and
reasons. The unused Name field and the broken Cancel, Upload more and
No enclosure controls are fixed.

* Media library: one paged query for folders and search; details page

Browsing a folder and searching now run the same paged query (48 files
a page) with an explicit order and the ID as tie-breaker, so pages never
repeat or skip files. Newest first is the default. Search can cover the
current folder or all folders, matches names that start with the text in
any case, and is a GET, so the page state lives in the URL. The shared
pager says Previous and Next for media.

The library offers a list view (name, type, size, uploaded) beside the
grid, remembered in the browser. Actions on the selection return to the
same folder, search, sort and page.

File details move from an iframe dialog to their own page: preview,
facts, Copy URL, Open original, Create entry and Delete, then the
metadata form, with a link back to the library page the user came from.

* Media upload: one picker with drag and drop, per-file results, retry failed files

The upload page has one multiple-file picker and a drop area. Chosen
files go into a list with a preview, name, size and a remove button;
the shared description, tags and copyright come after the files, and
each file keeps its own name. The page shows the configured limits.

With JavaScript the files go in one request and MediaFileAddResult.jsp
answers with a result per file and a fresh salt, so a retry sends only
the files that failed and never uploads a saved file twice. If the
connection drops or the server fails after the files were sent, the
outcome is reported as unknown, with a link to the folder, and nothing
is retried. Without JavaScript the form posts as before.

The server caps one upload at uploads.maxFilesPerRequest files (20).

* Media chooser on the shared card; description as alt text

The entry editor's media chooser uses the library's card and query: a
page of a folder, newest first, with a name search and the shared pager.
Inserting an image uses its description as the alt text (the file name
when there is none), and the editor builds the inserted markup with DOM
APIs, so names and descriptions are escaped. Create entry escapes them
too. The description field is labeled as the alt text.

The upload success page shows readable sizes and no longer shows pixel
dimensions for non-images. Old media styles are removed, and the user
guide describes the new library, upload, details and chooser.

* Media pages keep the Powered-by card on wide screens

The card hides on narrow screens, where the folder picker takes the
sidebar's place, so the files stay near the top of the page.

* UI tests for the media library

WeblogMediaLibraryIT covers the library's main uses with the journey's
account and weblog: uploading several files at once, keeping saved files
when another fails and retrying only the failed one, moving files between
folders, searching by name in a folder or all folders, paging a folder of
50 files without repeats or gaps, the remembered list view, editing a
file on its details page and returning to the same library page,
deleting files, and inserting a file into an entry with its description
as the alt text.

The new-user journey picks its upload from the new file picker.

* Media library: keep the toolbar on one line; space out the upload form

Sort order and layout move up beside the file count, so the selection
count no longer wraps the toolbar and pushes the files down. The upload
form's spacing rule targeted a fieldset that the simple theme does not
render.

* Media library: one search box, type chips, selection bar, aligned cards

* Media library: address review comments

- Refuse new files while an upload runs; leave the page only when every file uploaded
- Keep the details form after a validation error; keep the folder after Upload more
- Keep the new-folder form on narrow screens; cap the page number
- Build the library link from this weblog; remove a duplicate Javadoc
- Restore CRLF line endings in three files; add a CHANGES.md entry

* Media library: address second review

- Keep the library search when a name contains *
- List a failed upload once on the success page
- Show 1048575 bytes as 1 MB, not 1024 KB
42 files changed
tree: f72418fc01da22c8bec380eee1b33882b08a111a
  1. .github/
  2. app/
  3. assembly-release/
  4. binary-includes/
  5. db-utils/
  6. docker/
  7. docs/
  8. it-playwright/
  9. skills/
  10. testing/
  11. .asf.yaml
  12. .dockerignore
  13. .gitignore
  14. CHANGES.md
  15. CONTRIBUTING.md
  16. doap_roller.rdf
  17. docker-compose.yml
  18. Dockerfile
  19. LICENSE.txt
  20. nbactions.xml
  21. NOTICE.txt
  22. pom.xml
  23. README.md
  24. SECURITY.md
  25. version-rules.xml
README.md

Apache Roller

Apache Roller is a Java-based, full-featured, multi-user and group-blog server suitable for blog sites large and small. Roller is typically run with Apache Tomcat and MySQL. Roller is made up of the following Maven projects:

  • roller-project: Top level project
  • app: Roller Weblogger webapp, JSP pages, Velocity templates
  • assembly-release: Used to create official distributions of Roller
  • docs: Roller documentation in ASCII Doc format
  • it-playwright: Browser tests for Roller using Playwright (run separately, see below)

Documentation

The Roller Install, User and Template Guides are available in ODT format (for OpenOffice or LibraOffice):

For more information

Hit the Roller Confluence wiki:

Installing Roller

If you want to run Roller in production, then you should down load the latest official release and install it by following the Installation Guide, which you can find at the documentation link: https://github.com/apache/roller/tree/master/docs.

Quick start: Running via Maven

You probably should not run Roller in production using this technique, but it‘s a relatively easy way to try Roller for yourself. Assuming you’ve got a UNIX shell, Java, Maven and Git:

Get the code:

$ git clone https://github.com/apache/roller.git

Compile and build Roller:

$ cd roller
$ mvn -DskipTests=true install

Run Roller in Jetty with an in-memory Derby database (for testing only):

$ mvn jetty:run

Once Jetty is up and running browse to http://localhost:8080/roller to try to Roller.

Quick start: running via Docker

Another way to try Roller is to use Docker. This is actually easier than running via Maven because you do not need Maven or Java. If you‘ve got Docker, here’s how you can run Roller for demo purposes.

Get the code:

$ git clone https://github.com/apache/roller.git

The compose stack runs Roller against a PostgreSQL database with Keycloak as an OpenID Connect identity provider. Roller and your browser must both reach Keycloak at the same hostname, so add this line to /etc/hosts once:

127.0.0.1 keycloak

Run Docker Compose to build and launch everything:

$ cd roller
$ docker compose up

It will take a while to build and start the Docker image. Once it's done browse to http://localhost:8080/ and log in as admin/admin (administrator) or user/user (regular user).

Running the tests

Unit tests run as part of the normal build:

$ mvn install

Browser-based UI tests live in it-playwright and run against a started Roller, whichever way you started it. See it-playwright/README.md for instructions. CI runs both on every push and pull request.