Edit toolbar tab animation is distracting

Created on 25 July 2017, over 7 years ago
Updated 18 September 2024, 3 months ago

Problem/Motivation

This has been reported by @webchick in chat, by @xjm at #2896143-11: Unintentional animation of the body while Settings Tray is installed :

The Edit button on the normal toolbar flickers when Settings Tray is enabled and you navigate in the page.

Proposed resolution

Remove this animation.

Remaining tasks

A video of the problem would be helpful.
Respond to questions in #12

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
Settings tray 

Last updated about 2 hours ago

  • Maintained by
  • 🇺🇸United States @tedbow
Created by

🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

  • Needs screenshots

    The change alters the user interface, so before and after screenshots should be added to document the UI change. Make sure to capture the relevant region only. Use a tool such as Aviary on Windows or Skitch on Mac OS X.

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.

  • 🇺🇸United States smustgrave

    This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request as a guide.

    Was previously tagged for issue summary update in #10 that still needs to happen.

    Tagging for screenshots or better yet videos of the before/after.

    Thanks!

  • 🇮🇳India gauravvvv Delhi, India

    This CSS no longer applies anywhere.

    /* Transition the edit icon in the toolbar. */
    #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
      transition: all 0.7s ease;
    }

    <button class="toolbar-icon toolbar-icon-edit toolbar-item is-active" aria-pressed="true" type="button" data-drupal-settingstray="toggle" data-once="settingstray">Editing</button> Button no longer has toolbar-bar ID.

    <nav id="toolbar-bar" role="navigation" aria-label="Toolbar items" class="toolbar-bar clearfix js-settings-tray-edit-mode" data-offset-top="" data-once="admin-toolbar-search"> have the toolbar ID.

  • Status changed to Active almost 2 years ago
  • 🇳🇿New Zealand quietone

    This was a bugsmash daily triage target today.

    This still needs an issue summary update, taking note that #12 it is reported that the issue happens with the settings tray module enabled and questions were asked there that need to be answered. Since #12 needs to be addressed before working on a patch, I am setting the status to active. I have updated the Issue Summary with some tasks.

  • tried patch from #22 but not applied please share process to reproduce the issue.

  • i have tried to replicate the issue on 9.2 and 11.x but unable to reproduce even applied patch manually but nothing happened this css

    #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit::before {
      transition: all 0.7s ease;
    }

    its not applying any where until i modify it like this but still no flicker issue found.

    #toolbar-bar button.toolbar-icon.toolbar-icon.toolbar-icon-edit::before {
       transition: all 0.7s ease;
    }

    if i am doing something wrong do let me know or explain the issue with more detail so i can replicate it correctly.

Production build 0.71.5 2024