Bug 35633 - Upgrade Chocolat JS library from v1.1.0 to v1.1.2
Summary: Upgrade Chocolat JS library from v1.1.0 to v1.1.2
Status: Passed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Architecture, internals, and plumbing (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 35584 28180
Blocks:
  Show dependency treegraph
 
Reported: 2023-12-21 19:15 UTC by Owen Leonard
Modified: 2024-01-12 10:57 UTC (History)
3 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 35633: Upgrade Chocolat JS library from v1.1.0 to v1.1.2 (156.74 KB, patch)
2023-12-21 20:25 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 35633: (follow-up) Custom style updates (116.57 KB, patch)
2023-12-21 20:25 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 35633: Upgrade Chocolat JS library from v1.1.0 to v1.1.2 (156.74 KB, patch)
2023-12-21 20:30 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 35633: (follow-up) Custom style updates (117.42 KB, patch)
2023-12-21 20:30 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 35633: (follow-up) Custom style updates (117.48 KB, patch)
2024-01-08 22:46 UTC, Phan Tung Bui
Details | Diff | Splinter Review
Bug 35633: Upgrade Chocolat JS library from v1.1.0 to v1.1.2 (158.35 KB, patch)
2024-01-12 10:57 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 35633: (follow-up) Custom style updates (117.57 KB, patch)
2024-01-12 10:57 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2023-12-21 19:15:50 UTC
This patch will upgrade the Chocolat JS library and add some CSS to override the default Chocolat CSS (avoiding the addition of custom image files).
Comment 1 Owen Leonard 2023-12-21 20:25:43 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2023-12-21 20:25:46 UTC Comment hidden (obsolete)
Comment 3 Owen Leonard 2023-12-21 20:30:27 UTC
Created attachment 160219 [details] [review]
Bug 35633: Upgrade Chocolat JS library from v1.1.0 to v1.1.2

This patch updates Chocolat JS library assets from v1.1.0 to v1.1.2 in
both the OPAC and staff interface. The new version uses SVG images
encoded as data-uris in CSS, so default images can now be overridden in
our CSS. For that reason the Chocolat-related images files are removed
by this patch.
Comment 4 Owen Leonard 2023-12-21 20:30:29 UTC
Created attachment 160220 [details] [review]
Bug 35633: (follow-up) Custom style updates

This patch adds custom CSS to the OPAC and staff interface to override
the default style of Chocolat controls (for left arrow, right arrow,
loading, and close window). These controls are given a green color
matching Koha's color scheme.

The bibliographic detail pages in the OPAC and staff interface have been
revised so that the inclusion of Chocolat CSS comes before the inclusion
of Koha's global CSS. We should do this with third-party CSS so that it
can be more easily overridden by ours.

The patch also makes a minor change to chocolat.js to correct a bug. See
commit 6ac89ca8558.

To test, apply the patch and rebuild the OPAC and staff interface CSS.

- Go to Administration -> System preferences and enable the
  AllowMultipleCovers, OPACLocalCoverImages, and LocalCoverImages
  system preferences.
- Add a local cover image to a bibliographic record:
  - Locate a bibliographic record.
  - From the detail page, click the "Images" tab and then "Upload."
  - Upload an image to attach to the record.
  - Upload another image.
- Return to the bibliographic detail page fro that record, and click the
  image you uploaded.
  - The full-page image viewer should appear, and the controls should
    look correct, with green matching Koha's color scheme:
    - The close button in the upper-right
    - The right-arrow, and then when you click through to the second
      image, the left-arrow.
    - In the footer, the "edit" link should work correctly.
    - Test that the "Full screen" control works too.
- Click the "OPAC view" link to load the record in the OPAC, and perform
  the same tests.
Comment 5 Phan Tung Bui 2024-01-08 22:46:01 UTC
Created attachment 160667 [details] [review]
Bug 35633: (follow-up) Custom style updates

This patch adds custom CSS to the OPAC and staff interface to override
the default style of Chocolat controls (for left arrow, right arrow,
loading, and close window). These controls are given a green color
matching Koha's color scheme.

The bibliographic detail pages in the OPAC and staff interface have been
revised so that the inclusion of Chocolat CSS comes before the inclusion
of Koha's global CSS. We should do this with third-party CSS so that it
can be more easily overridden by ours.

The patch also makes a minor change to chocolat.js to correct a bug. See
commit 6ac89ca8558.

To test, apply the patch and rebuild the OPAC and staff interface CSS.

- Go to Administration -> System preferences and enable the
  AllowMultipleCovers, OPACLocalCoverImages, and LocalCoverImages
  system preferences.
- Add a local cover image to a bibliographic record:
  - Locate a bibliographic record.
  - From the detail page, click the "Images" tab and then "Upload."
  - Upload an image to attach to the record.
  - Upload another image.
- Return to the bibliographic detail page fro that record, and click the
  image you uploaded.
  - The full-page image viewer should appear, and the controls should
    look correct, with green matching Koha's color scheme:
    - The close button in the upper-right
    - The right-arrow, and then when you click through to the second
      image, the left-arrow.
    - In the footer, the "edit" link should work correctly.
    - Test that the "Full screen" control works too.
- Click the "OPAC view" link to load the record in the OPAC, and perform
  the same tests.
- Nicely done!
Signed-off-by: Phan Tung Bui <phan-tung.bui@inlibro.com>
Comment 6 Jonathan Druart 2024-01-12 10:57:12 UTC
Created attachment 160926 [details] [review]
Bug 35633: Upgrade Chocolat JS library from v1.1.0 to v1.1.2

This patch updates Chocolat JS library assets from v1.1.0 to v1.1.2 in
both the OPAC and staff interface. The new version uses SVG images
encoded as data-uris in CSS, so default images can now be overridden in
our CSS. For that reason the Chocolat-related images files are removed
by this patch.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 7 Jonathan Druart 2024-01-12 10:57:15 UTC
Created attachment 160927 [details] [review]
Bug 35633: (follow-up) Custom style updates

This patch adds custom CSS to the OPAC and staff interface to override
the default style of Chocolat controls (for left arrow, right arrow,
loading, and close window). These controls are given a green color
matching Koha's color scheme.

The bibliographic detail pages in the OPAC and staff interface have been
revised so that the inclusion of Chocolat CSS comes before the inclusion
of Koha's global CSS. We should do this with third-party CSS so that it
can be more easily overridden by ours.

The patch also makes a minor change to chocolat.js to correct a bug. See
commit 6ac89ca8558.

To test, apply the patch and rebuild the OPAC and staff interface CSS.

- Go to Administration -> System preferences and enable the
  AllowMultipleCovers, OPACLocalCoverImages, and LocalCoverImages
  system preferences.
- Add a local cover image to a bibliographic record:
  - Locate a bibliographic record.
  - From the detail page, click the "Images" tab and then "Upload."
  - Upload an image to attach to the record.
  - Upload another image.
- Return to the bibliographic detail page fro that record, and click the
  image you uploaded.
  - The full-page image viewer should appear, and the controls should
    look correct, with green matching Koha's color scheme:
    - The close button in the upper-right
    - The right-arrow, and then when you click through to the second
      image, the left-arrow.
    - In the footer, the "edit" link should work correctly.
    - Test that the "Full screen" control works too.
- Click the "OPAC view" link to load the record in the OPAC, and perform
  the same tests.

Signed-off-by: Phan Tung Bui <phan-tung.bui@inlibro.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>