Create custom theme container for epub renderer [GSoC '23] #10877

akila-i · 2023-06-20T06:37:36Z

Summary

Kolibri EPUB renderer currently has 6 fixed built in themes, which are not allowed to be edited by users. Also, Kolibri does not allow adding new color themes to the EPUB renderer with the colors of user's preference. Changes in this PR will bring the ability for the users to add, edit and delete custom color themes for the epub viewer as they prefer.

User Interfaces :

- Before -

- Current status -
  1.1 Settings side bar in EPUB viewer (Desktop)

1.2 Settings side bar in EPUB viewer (Mobile)

2.1 Add a theme modal (Desktop)

2.2 Add a theme modal (Mobile)

3.1 Select a color using the color picker (Desktop) [CSS to be added]

3.2 Select a color using the color picker (Mobile) [CSS to be added]

References

Adding a custom text color picker for Kolibri EPUB renderer : GSoC '23 #10741

Color picker used : vue-color

Reviewer guidance

Can try the following features

Adding a new theme by selecting preferred colors for the text and background (link color is not implemented yet)

Deleting a custom created theme

Applying a custom created theme to the EPUB viewer

Editing a custom created theme to change the colors (right now it creates a new theme with the changed colors as the themeName property is not implemented yet)

Testing checklist

Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical user journeys are covered by Gherkin stories
Critical and brittle code paths are covered by unit tests

PR process

PR has the correct target branch and milestone
PR has 'needs review' or 'work-in-progress' label
If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
If this is an important user-facing change, PR or related issue has a 'changelog' label
If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

Automated test coverage is satisfactory
PR is fully functional
PR has been tested for accessibility regressions
External dependency files were updated if necessary (yarn and pip)
Documentation is updated
Contributor is in AUTHORS.md

kolibri/plugins/epub_viewer/assets/src/views/EpubConstants.js

kolibri/plugins/epub_viewer/assets/src/views/ThemeNameTextBox.vue

yarn.lock

akila-i · 2023-06-21T17:27:05Z

Linters need to be run and the changes need to be pushed (TODO)

github-actions · 2023-06-21T17:51:51Z

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b1.dev0_git.118.ga97d034b.pex
Windows Installer (EXE)	kolibri-0.16.0b1.dev0+git.118.ga97d034b-unsigned.exe
Debian Package	kolibri_0.16.0b1.dev0+git.118.ga97d034b-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b1.dev0+git.118.ga97d034b-0.3.0.dmg
TAR file	kolibri-0.16.0b1.dev0+git.118.ga97d034b.tar.gz
WHL file	kolibri-0.16.0b1.dev0+git.118.ga97d034b-py2.py3-none-any.whl

akila-i · 2023-06-22T18:20:19Z

Linters need to be run and the changes need to be pushed (TODO)

Linting test failures are fixed.

- TODO: visibility of the button addNewTheme function

tomiwaoLE · 2023-08-15T15:55:48Z

@marcellamaki just wondering if I can be any help here?

marcellamaki · 2023-08-15T17:04:59Z

@tomiwaoLE - yes but probably in the follow up PR. This is just the MVP for functionality, and @akila-i has some other in-progress work that includes the designs that you worked on, which would be great to have your feedback on. I'll be sure tag you for review when that's ready :) thank you!!

radinamatic · 2023-08-18T12:53:58Z

Hey @akila-i ! I'm still trying to finish the full test with the screen reader, but there is a one set of issues that you can already jump on fixing: the 3 new buttons that are in the New/Edit theme dialog (Background, Text, Link) do have visible labels, but those are not properly associated with the respective buttons:

See how in the NVDA Speech log it can only announce 'button' and does not say the labels? Compare with how the labels for 'Cancel' and 'Save' are properly announced at the end:

labels.mp4

akila-i · 2023-08-18T13:30:41Z

Hey @akila-i ! I'm still trying to finish the full test with the screen reader, but there is a one set of issues that you can already jump on fixing: the 3 new buttons that are in the New/Edit theme dialog (Background, Text, Link) do have visible labels, but those are not properly associated with the respective buttons:

See how in the NVDA Speech log it can only announce 'button' and does not say the labels? Compare with how the labels for 'Cancel' and 'Save' are properly announced at the end:

labels.mp4

Thanks for pointing it out. Will fix that before the sync up

akila-i · 2023-08-21T13:32:05Z

Hey @akila-i ! I'm still trying to finish the full test with the screen reader, but there is a one set of issues that you can already jump on fixing: the 3 new buttons that are in the New/Edit theme dialog (Background, Text, Link) do have visible labels, but those are not properly associated with the respective buttons:

See how in the NVDA Speech log it can only announce 'button' and does not say the labels? Compare with how the labels for 'Cancel' and 'Save' are properly announced at the end:
labels.mp4

Thanks for pointing it out. Will fix that before the sync up

H @radinamatic , this issue has been fixed. Please test and confirm

marcellamaki · 2023-09-07T14:25:30Z

Closing as this work has been superseded by the work completed by @akila-i and merged into [epub-custom-themes](https://github.com/learningequality/kolibri/tree/epub-custom-themes) (#11156 and #11041)

github-actions bot added the SIZE: very large label Jun 20, 2023

akila-i commented Jun 20, 2023

View reviewed changes

kolibri/plugins/epub_viewer/assets/src/views/EpubConstants.js Outdated Show resolved Hide resolved

akila-i commented Jun 20, 2023

View reviewed changes

kolibri/plugins/epub_viewer/assets/src/views/ThemeNameTextBox.vue Outdated Show resolved Hide resolved

akila-i commented Jun 20, 2023

View reviewed changes

yarn.lock Show resolved Hide resolved

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch from 22cb862 to 62f7743 Compare June 21, 2023 17:19

github-actions bot added the SIZE: large label Jun 21, 2023

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch from 62f7743 to d02d2d9 Compare June 21, 2023 17:20

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch 5 times, most recently from 3f78df5 to 677f794 Compare June 22, 2023 18:10

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch 2 times, most recently from e3258e7 to 9e2654e Compare July 1, 2023 05:08

akila-i closed this Jul 1, 2023

akila-i reopened this Jul 1, 2023

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch 2 times, most recently from c21dd53 to 0b62368 Compare July 7, 2023 16:07

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch 3 times, most recently from ff316e3 to fc14b40 Compare July 23, 2023 05:10

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch from 2279acd to 7a86863 Compare July 31, 2023 03:56

akila-i added 5 commits August 7, 2023 15:16

Add button to add a new custom theme

66572a8

- TODO: visibility of the button addNewTheme function

Add sample custom themes for reference

f419ae1

Add buttons for available customThemes

cb1a403

Fix visibility of Add New Custom Theme Button

3e4dc47

Set custom themes to be saved in local storage

4d27411

akila-i added 16 commits August 7, 2023 15:16

Add textbox funstions for customThemeName

a595250

Fix textbox validation - partially

af390b8

Fix linting errors

1882507

Change color picker btn text from Accept to Select

d23af43

Add a label to theme preview box

ab910e5

Add themeAriaLabel for custom themes

5155f56

Change color picker library

32e371f

Fix linting errors

546af85

Make the theme applied when added or edited

461755a

Introduce new AddEditThemeModal

e8ecf4e

Change the Modal component into AddEditCustomThemeModal

c158bd1

Add warning for unsigned users

2d25b0e

Change link color when a theme is applied

426c7a0

bugFix: set theme name on saving

b53070a

Apply default theme when deleting the currently applied theme

a41a7a2

Remove unused components

718ea2b

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch from 7a86863 to 718ea2b Compare August 7, 2023 09:47

marcellamaki self-requested a review August 14, 2023 12:32

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch 2 times, most recently from f898019 to c7869cf Compare August 18, 2023 19:05

akila-i added 2 commits August 21, 2023 18:50

Add aria labels for edit & delete theme buttons

0f61185

Add aria labels for color select buttons in modal

8e64e86

akila-i force-pushed the create_custom_theme_container_for_epub_renderer branch from ed80a66 to 8e64e86 Compare August 21, 2023 13:28

marcellamaki closed this Sep 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Create custom theme container for epub renderer [GSoC '23] #10877

Create custom theme container for epub renderer [GSoC '23] #10877

Uh oh!

akila-i commented Jun 20, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

akila-i commented Jun 21, 2023

Uh oh!

github-actions bot commented Jun 21, 2023 •

edited

Loading

Uh oh!

akila-i commented Jun 22, 2023

Uh oh!

tomiwaoLE commented Aug 15, 2023

Uh oh!

marcellamaki commented Aug 15, 2023

Uh oh!

radinamatic commented Aug 18, 2023

Uh oh!

akila-i commented Aug 18, 2023

Uh oh!

akila-i commented Aug 21, 2023

Uh oh!

marcellamaki commented Sep 7, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Create custom theme container for epub renderer [GSoC '23] #10877

Create custom theme container for epub renderer [GSoC '23] #10877

Uh oh!

Conversation

akila-i commented Jun 20, 2023

Summary

References

Reviewer guidance

Testing checklist

PR process

Reviewer checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

akila-i commented Jun 21, 2023

Uh oh!

github-actions bot commented Jun 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Build Artifacts

Uh oh!

akila-i commented Jun 22, 2023

Uh oh!

tomiwaoLE commented Aug 15, 2023

Uh oh!

marcellamaki commented Aug 15, 2023

Uh oh!

radinamatic commented Aug 18, 2023

Uh oh!

akila-i commented Aug 18, 2023

Uh oh!

akila-i commented Aug 21, 2023

Uh oh!

marcellamaki commented Sep 7, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

github-actions bot commented Jun 21, 2023 •

edited

Loading