Allow custom styling of Collection ContentElementWrapping

[bwaidelich]

The rendering of (empty) ContentCollections is hard-coded in the Neos Backend: It renders the empty addEmptyContentCollectionOverlay-Div via JS that displays the grey 2px outline which is not changeable via custom CSS because of the dynamic class attribute from React.

In addition to a fixed class attribute it would be very handy to be able to set an "empty notice" from Fusion and/or further classes for custom styling per use case.

[bwaidelich]

In a customer project we achieved that using CSS variables:

# add "emptyNotice" property to ContentElementWrapping
prototype(Neos.Neos:ContentElementWrapping) {
    emptyNotice = ''
    @context.emptyNotice = ${this.emptyNotice}
    additionalAttributes {
        style = ${'--empty-notice: "' + emptyNotice + '"'}
        [email protected] = ${!String.isBlank(emptyNotice)}
    }
}

and the corresponding CSS:

.neos-backend .neos-contentcollection[style] > div:empty:after {
  content: var(--empty-notice);
}

(if anyone has similar requirements)

[bwaidelich]

Related to that the overlay should be rendered for all collections IMO not only ContentCollections

[Sebobo]

I like the idea and think that would be helpful for editors. But wouldn't the overlay be confusing for for normal collections when they might not be interactive / selectable?

[jonnitto]

I solve this always like that:

// Improve a bit UX when there's no content at all
// and add an indication where to click to start.

@keyframes empty-collection-arrow {
  0%,
  25%,
  100% {
    transform: translateY(0);
  }

  5%,
  15% {
    transform: translateY(-4px);
  }

  10%,
  20% {
    transform: translateY(4px);
  }
}

.neos-contentcollection > [class^="style__addEmptyContentCollectionOverlay"] {
  cursor: pointer;
  height: $height;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;

  &::before,
  &::after {
    display: inline-block;
    color: #adadad;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    line-height: 41px;
  }

  &::after {
    margin: 0 1rem;
    content: "\21e7";
    animation: empty-collection-arrow 2.5s infinite 2s;
  }

  &::before {
    content: "Click here to add content";
  }

  &:hover {
    &::before,
    &::after {
      opacity: 1;
    }
  }
}

[bwaidelich]

But wouldn't the overlay be confusing for for normal collections when they might not be interactive / selectable?

Yes, it should only be added for those that are

[class^="style__addEmptyContentCollectionOverlay"]

Haha, clever work around for the addressing issue. But I don't know how safe it is to rely on the internal creation of class names in React. I hope that we can use Web Components at some point, so this could be

neos-empty-content-collection-overlay {
  // ...
}

[jonnitto]

@bwaidelich Could you implement something like a CSS class neos-contentcollection--empty to have a proper way to address empty content collections?

[bwaidelich]

@jonnitto untested but this could work

prototype(Neos.Neos:ContentCollection) {
    [email protected] = ${value + ' neos-contentcollection--empty'}
    [email protected][email protected] = ${q(node).children().count() == 0}
}

But it would not be updated when you remove the last child unless you refresh the browser..

[bwaidelich]

..if you suggested to add this class to the dynamically added overlay - that's exactly what this ticket suggests :)