Display the type icon in the add button

Created on 8 December 2016, over 8 years ago
Updated 5 February 2025, 3 months ago

Problem/Motivation

After adding the paragraph type icons in #2830016: Add a thumbnail/icon field to Paragraphs type we should use the icon to better identify the types.

The add button is sometimes not satisfyingly accessible with the type labels.

Proposed resolution

Show the type icons in the "Add paragraph" button prepending to the type labels.
This is truly optional.

User interface changes

Buttons will contain icons.

Feature request
Status

Needs work

Version

1.0

Component

User interface

Created by

🇨🇭Switzerland miro_dietiker Switzerland

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • I've made something that's not useable for the community; the patch is simply applicable for our own specific situation, however I still wanted to share. I've added a screenshot aswell.

    It's a little patch and some custom CSS for Gin which we load in through a different module.

    The custom CSS is super basic and looks like this:

    #edit-field-paragraphs-add-more:has(> .field-add-more-submit.add-mode-button) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 100%;
    }
    
    #edit-field-paragraphs-add-more > .field-add-more-submit.add-mode-button {
      height: 4rem;
      font-size: 14px;
      padding-left: 4.4rem;
      text-align: start;
      background-size: 4rem;
      background-position: left;
      background-repeat: no-repeat;
    }
    
    #edit-field-paragraphs-add-more > .field-add-more-submit.add-mode-button:hover {
      color: var(--gin-color-primary);
      background-color: var(--gin-bg-header);
    }
    
Production build 0.71.5 2024