Visually indicate style

We have similar questions in #2848116: Allow specifying icons representing grid layouts in yaml files. I was thinking about this a bit and:

1. in #2846682: New Plugin: Visibility per language we added select2, which allows some theming (see: https://select2.github.io/examples.html#themes-templating-responsive-design). We can go with select2, although the space available to show the icon staying in the dropdown context is not that big. So if we have something bigger than an icon this could not be enough
2. we could provide some kind of new element that suits our needs, but that adds code not related to this module and for now we probably don't need this

If we use some small-enough icon we could use that in the closed display summary too.

The idea that came with the original grid layout(#2835795: Create a fixed equal width grid plugin) of displaying next to the select makes sense I would say. What if for styles adding a square with a letter on it would represent the style that will be applied. Like:

Proposal:
1. Checkbox in the configuration form (Display template) - for whether to show an image or not
2. Image in the behavior form defined with a path in the yml file.

Screenshots:
Configuration form:

Behavior form when adding style:

1. +++ b/modules/paragraphs_collection_demo/paragraphs_collection_demo.paragraphs.style.yml
   @@ -26,3 +32,5 @@ paragraphs-slideshow-dark:
   +  style_image:
   +    - 'style_image.png'
   diff --git a/modules/paragraphs_collection_demo/src/images/style_image.png b/modules/paragraphs_collection_demo/src/images/style_image.png
   

   This was probably just a temporary name and path, but let's have those images named according to the style and put somewhere else. Not sure what the convention for images in modules, probably /images

2. +++ b/src/Plugin/paragraphs/Behavior/ParagraphsStylePlugin.php
   @@ -72,6 +72,14 @@ class ParagraphsStylePlugin extends ParagraphsBehaviorBase implements ContainerF
   +     $form['display'] = [
   +       '#theme' => 'image',
   

   Are we going to update this with ajax depending on the selection? That could work

   On a general note, we have to keep in mind, that the ui is cluttered as it is now.

3. +++ b/src/Plugin/paragraphs/Behavior/ParagraphsStylePlugin.php
   @@ -87,6 +95,12 @@ class ParagraphsStylePlugin extends ParagraphsBehaviorBase implements ContainerF
   +    $form['display'] = [
   +      '#type' => 'checkbox',
   

   I am not sure if we really need this per paragraph type. Maybe we can make this configurable globally. See paragraph_collection.settings.yml

hmmm i was thinking on instead using images, we could generate dynamically the preview, so I mean, add the classes so it looks as it should.

@yongt9412 well that would be certainly nice, I am not sure though how complex this would be. There are a lot of elements that a style can affect. So we would have to generate markup that would cover a lot of cases. Having images sort of moves the responsibility to the style creator.

@yongt9412 cool idea but i think it's a way to big work. Lets not forget that some styles can be general and applied to lot of components or all of them and some can be more specific or very specific. If we have dependency information in Styles to what components they can be applied then we could do this, without that info its not possible - and i think we don't have this info for now? Even if we add this info in the future this will still be a fair amount of work to implement. Going with simple image is much faster for now.

Yeah, too much work for now, maybe later. :) Instead then, shouldn't we use a simple image file? maybe svg?

Yeah simple image file is OK. If we can create SVG vectors that would be better for sure because images can be scaled then.

But the problem with SVG is that Drupal file field support is not that good or something i think? I know we used that in couple of places and stuff like image styles does not work - which make sense its only when Drupal think it should apply image style to vector and then maybe mess can happen?

On the other hand if we are not using field for this for storage then it is fine. Are we using it or not?

I found a jquery plugin which we can use, combobox (http://www.marghoobsuleman.com/jquery-image-dropdown)
We can use this for the dropdown (this plugin adds icons to the options) and display image additionally when selecting an option.

We could for starters just convert it to checkboxes and use images as labels (http://stackoverflow.com/questions/17541614/use-image-instead-of-radio-b...), so that we can move forward here. If this works fine we can use the same approach for grids.

One thing to keep in mind is that we now have #2861611: Display description when layout or style is selected, which helps to further explain a style or grid.

Just did some testing to see if it would work. Also included the txt file (that ca be changed to svg). :)