Add arrow graphics to visualize open and close

Hi!

I thinking about something new for the D7 version. More like the gmail one a [+] and [-]. The main advantage is we can keep the same graphic for rtl language.

We can perhaps also have a graphic than actually works on light and dark color (using a border and transparent background).

Patch and proposition are more than welcome!

This could be back-ported on D6...

I close #241068: Collapsiblock in other themes - dark background but the issue as graphic for dark theme.

Options would be great to have for beginner site builders. V2 task.

I'm considering providing Font Awesome as an optional extra to provide additional, colourable icons for this module.

If you think that's a great or terrible idea, please chime in with reasons.

Bumping to 4.x, no engagement in the 7.x-2.x space.

Hi @darvanen

I will try to solve this problem. However, in order not to waste time, I would like to clarify some details:

1) If possible, please provide an example of the future chart;
2) What behavior do you expect the chart to have?
3) The Acquia slate theme is deprecated, what theme will we use to test the results?
4) Add important points to consider while working on the task;
5) Your suggestions for the final result of the assignment.

Thank you!

@bobi-mel, answers to your questions:

1. I'm sorry but I don't understand what you mean by "chart" here?
2. Same issue.
3. I think Gin theme has a dark mode and is quite popular, let's see if that meets our needs.
4. I don't have any specific points to make, just try to uphold Drupal's values.

As for 5, here's my current vision:

• Replace the current .png images with .svg images with fill="currentColor".
• Provide an interface where the admin can set the color of the indicator.
• Write a test for the new feature.

Bonus points for:

• Provide additional built-in glyph options commonly used for dropdowns.
• Create optional integrations with fontawesome and/or material_icons (probably better as a follow-up).

I am very happy to discuss if you have different ideas.

Hi @darvanen

1) I mean graphic not chart, sorry

2) I will investigate the issue and let you know my ideas to solve it.

@bobi-mel no apology needed, I can see it was just lost in translation.

2: Great, I look forward to hearing your ideas.

Hi @darvanen

I tried to use the Gin theme, but it is only an admin theme and can't be used for front-end part of the site.

I propose:
1) Add a new 'Dark mode' element to the module config form;
2) Also, Add text field 'Theme class for dark mode', because different themes add different custom classes the Body or HTML tag.
4) Use existing behavior if added theme dark mode class and enabled dark mode for module set the class 'collapsiblock-dark-mode' to the block title;
5) Create two SVG images for each type of arrow: dark and white;
6) By default use dark.
7) Use these arrows - https://www.svgrepo.com/svg/393200/triangle-down-filled as more modern.

Let me know what you think about it

Nice ideas @bobi-mel, on the whole I think that sounds good, the only thing I would add is to use form states to make the text field only visible if the checkbox is selected.

I don't see why we can't test it with an admin theme?

I thought it over and agree with you the Git theme will be good for a test.

@bobi-mel I just took a look and that MR was starting to look quite good, may I ask why you closed it?

Hi @darvanen

I have finished working on this task, but I faced the problem of creating and running a pipeline for the last commit for the PHPUnit tests to run with the Gin theme as the testing theme. I had assumed that it was a problem with the GitLab pipeline and hoped that closing it and creating a new merge request would solve it.
Unfortunately, this did not solve the problem.

Can you tell me how to start the pipeline for the last commit since I haven't found the cause of the problem yet?

Ah I see!

You'll need to add the gin theme to composer.json as a dev dependency for it to be available to the pipeline.

Thanks for support. It really helped.
See MR - https://git.drupalcode.org/project/collapsiblock/-/merge_requests/37

I've been sick for quite a while, starting to come good, ear-marking this for review as soon as I can.

So... what if a theme is dark by default and doesn't actually use the 'dark-mode' mechanism?

Do you mean a theme doesn't have the white mode at all?

Yes, that is what I mean

Hi @darvanen

I tried to emulate the cases by using the themes that are dark. I used Seven Dark and Dark Awesome. Unfortunately, these themes don't have a specific class that is added after the switched theme color mode, but have the 'js' class that are present in the HTML tag for authenticated and anonymous users.
Also, I am not sure that the site uses a contrib theme as a site theme. In the custom theme, a developer can add this specific class that can be used as a trigger to switch color mode for arrows.

Based on the above I propose the following:
1) rename the new checkbox label from 'Enable Dark mode' to 'Enable collapse arrow color switcher'
2) rename the field for the class that changes the color from "Theme dark mode class' to "Color mode trigger class'
3) Add an additional description for the 'Theme dark mode class'. If your theme is dark to set the white color for the arrow add the class that is present in the Body or HTML tag for authenticated and anonymous users or create it.

Let me know what you think about it.
Probably you have any suggestion

Thanks @bobi-mel, I like your ideas.

I'm thinking about the wider utility of having two colours to choose from rather the narrower use-case of enabling dark mode here. How about a small tweak to your suggestion:

• One field for "Default arrow color" which is "Black" on installation, with "white" as the other option.
• One field for "Color switching class" with a description that indicates this can be used with themes that apply a class to the element to change the colour of the theme, including implementations of dark mode.

My concern is that more modern themes could be using prefers-color-scheme to set darkmode instead of applying a class, so we need to spell out the kind of support we're providing.

With Drupal CMS (starshot) under active development I can see the utility of this module increasing as more Drupal beginners arrive in the community. In the back of my head I'm still considering a more feature-rich version where the user can choose from multiple arrow types and even supply their own in the UI. That said, if we went with the fields I have suggested above I don't see any reason they would block such an upgrade.

Thoughts?

Hi @darvanen

Your idea sounds great.
I've investigated the current implementation of arrows. They are added as a background for the field. I think the implementation of your suggestion will require big changes to the current logic and it will be a major update, and I'm not sure if we can apply these changes to sites that already use this module without breaking them.
So I propose to do the following.
1) Implement my suggestions in comment #28;
2) Make a new release of the module;
3) Within a month, check if there are any new suggestions for graphics from the developers;
4) Create an issue for the new version 5 of the module;
5) Create a problem for the graphics with a detailed description of how the graphic design of the module should look like for version 5 (several types of arrows, adding custom colors for arrows, compatibility with prefers-color-scheme);
6) Add this issue as a parent issue;
7) Create other issues that will expand the functionality of the module and follow the latest drupal trends.

What do you think of this idea?

This would be a great feature, so thanks for working on it. I gave your MR a test spin @bobi-mel, and it worked really well. I look forward to when it's ready :)

One field for "Default arrow color" which is "Black" on installation, with "white" as the other option.

Enabling Dark mode under /admin/config/user-interface/collapsiblock by setting a class works well, but I agree that having a radio style select option, with "Black" set as the default and "White" as the other option would be user friendly, while also offering a Dark mode class option.

I am adding a short Issue Summary, since it is empty. When you agree on the details, the "Remaining tasks" section can be updated.

Removing issue I thought about mentioning, decided not to, but forgot to delete :)

Thanks @ressa

@bobi-mel yes, I agree with the approach outlined in #30, let's get *something* happening now and then worry about expanding the scope.

Hi @darvanen

I added the latest changes as we plan. Also, fixed the MR conflict and fixed broken test.

Please check it.

Looking pretty good @bobi-mel, please update the schema and settings keys and labels to be more like the updated form.

Hi @darvanen

I updated the schema and settings keys and labels

Sorry it took me a few months to get to this, life is pretty hectic.

I've looked it over, fixed a few things where merge conflicts weren't resolved correctly or needed a first-language English speaker (no judgement).

I'm merging this now.