Contrib.social

Style contextual links as buttons

Open on Drupal.org →
Created on 26 July 2024, 9 months ago
Updated 29 July 2024, 8 months ago

Problem/Motivation

Using lb_plus, editing sections and adding blocks get nice visual and UX improvements.
I would like to bring editing blocks in line with the looks and feel of editing sections.
That means inside editing a layout: always display and style the contextual links.
No more looking for an icon that only appears when hovering and no more total different styling between action to edit section and action to edit a block. I know there is a global discussion going on at #3042516 📌 Re-evaluate whether Contextual Links are the best interaction for configuring/moving/deleting blocks in Layout Builder Active about it, but that can take a very long time before anything is changed or implemented. And since the goal of this module is improve the layoutbuilder experience, that makes this module a perfect candidate for doing this.

Proposed resolution

Take a look at the before screenshot for the current situation. And look at the after screenshot for my proposal.
We could make styling of contextual links optional by adding a checkbox on this modules settings page for it.
If checked, include an extra css file.
This is the SCSS styling (need to be converted to css) that I used to create the after screenshot that can be used as a starting point:

.layout-builder__section{

    // Hide the contextual trigger button.
    .contextual-region .contextual .trigger{
        display: none;
    }

    // Always display the contextual links and style them as buttons.
    .contextual-region .contextual .contextual-links {
        padding: 0;
        background-color: var(--lb-plus-main-color);
        color: white;
        box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
        border-radius: 0;
        border: none;
        transition: all 0.2s ease;
        display: flex !important;

        li, a {
            margin: 0;
        }

        li {
            padding: 0;
        }

        a {
            padding: 1em;
            line-height: 1em;
            min-width: 45px;
            min-height: 40px;
        }
    }
}

// Edit button.
.layout-builder__section .contextual-region .contextual .contextual-links a[href*="/update/block"]{
    background: var(--lb-plus-main-color) url(/modules/contrib/lb_plus/assets/cog.svg)  center center /25px no-repeat !important;
    text-indent: -9999px;
    overflow: hidden;
}
// Delete button.
.layout-builder__section .contextual-region .contextual .contextual-links a[href*="/remove/block"]{
    background: var(--lb-plus-main-color) url(/modules/contrib/lb_plus/assets/remove.svg) center center /25px no-repeat !important;
    text-indent: -9999px;
    overflow: hidden;
}
// Duplicate button.
.layout-builder__section .contextual-region .contextual .contextual-links a[href*="/duplicate/block"]{
    background: var(--lb-plus-main-color) url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%20class%3D%22bi%20bi-copy%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4%202a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2zm2-1a1%201%200%200%200-1%201v8a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1V2a1%201%200%200%200-1-1zM2%205a1%201%200%200%200-1%201v8a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1v-1h1v1a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h1v1z%22%2F%3E%3C%2Fsvg%3E) center center /25px no-repeat !important;
    text-indent: -9999px;
    overflow: hidden;
}

Remaining tasks

- Create option in settings (disabled by default to not interrupt existing projects?) to enable contextual links styling
- Create css file (and necessary icons for possible contextual links, like duplicate)
- Attach css file if checked in settings

User interface changes

The way contextual links are shown on layout edit page

✨ Feature request
Status

Active

Version

2.1

Component

User interface

Created by

🇧🇪Belgium flyke

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

Comments & Activities

  • Issue created by @flyke
  • Comment 9 months ago →
    🇧🇪Belgium flyke
  • Comment 9 months ago →
    🇺🇸United States tim bozeman

    Ooo I really like that! That contextual menu does kind of stick out as weird now 🤔 Sometimes you have to already know it's hidden there and have to search to get it to show up....

    Since everything is an icon now with your new approach, how would we deal with people adding other items to that contextual menu? They wouldn't have a meaningful icon for that spot or even know that people may be using LB+ 🤔

  • Comment 8 months ago →
    🇧🇪Belgium flyke

    Well, the same is true for the new (experimental core) navigation module.
    What they do is via CSS style it so that if there is no icon, then you see the first two letters of the name.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024