Updated: Comment #0

Problem/Motivation

The entity toolbar's initial position, its animated repositioning and its changing width can be very distracting/annoying.

Proposed resolution

Make it feel nice and out of the way.

Remaining tasks

TBD.

User interface changes

Better entity toolbar positioning

API changes

None.

#2080217: Polish entity toolbar visually

CommentFileSizeAuthor
#22 Screen Shot 2021-07-12 at 9.12.52 PM.png28.87 KBpameeela
#12 out-4.ogv_.zip1.58 MBgaele
#8 Screen Shot 2014-07-29 at 2.57.54 PM.png33.7 KBtkoleary
#7 Screen Shot 2014-07-29 at 2.36.13 PM.png51.54 KBtkoleary
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented

Now that the node title has become in-place editable, this has become even more important.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Priority: Normal » Major
Issue summary: View changes
Issue tags: +Spark
Related issues: +#2154891: Quick Edit contextual link not shown

We really need to solve this, especially on the body field it's extremely annoying right now. That exact problem was also reported for the D7 backport of Edit at #2154891-25: Quick Edit contextual link not shown.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Priority: Major » Minor

Correct, this is apparently a D7-only problem. In D8, it's working fine.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Related issues: +#2160517: Entity toolbar when using the CKEditor in-place editor repositions way too slowly: very annoying

Here's the D7 issue: #2160517: Entity toolbar when using the CKEditor in-place editor repositions way too slowly: very annoying.

xjm’s picture

xjm
she/her
Primary language English
CreditAttribution: xjm commented
Component: edit.module » quickedit.module
tkoleary’s picture

tkoleary CreditAttribution: tkoleary commented

This would be both smooth and quick:

.quickedit-toolbar-container {
 -moz-transition: all ease-in-out .5s;
 -webkit-transition: all ease-in-out .5s;
  transition: all ease-in-out .5s;
}

(was: transition: all 1s;)

tkoleary’s picture

tkoleary CreditAttribution: tkoleary commented
FileSize
Screen Shot 2014-07-29 at 2.36.13 PM.png51.54 KB

I also took a quick look at how we could make the overall look both more compact and simpler.

Some of this would involve overrides to CKE styles.

image

Here's the CSS I used to achieve this in chrome inspector (without prefixes)

.quickedit-toolbar-container > .quickedit-toolbar-content, .quickedit-toolbar-container > .quickedit-toolbar-lining {
  border-radius: 0px;
}

.quickedit-toolbar-container > .quickedit-toolbar-content {
  background-image: linear-gradient(top,#f9f9f9,#e4e4e4);
  box-sizing: border-box;
  color: #333;
  padding: 0px;
  position: relative;
  user-select: none;
  z-index: 2;
}

.quickedit-toolbar-content .cke_toolgroup {
  float: left;
  margin: 0;
  border-bottom: 0px;
  border-left: 0px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-radius: 0px;
  background: transparent;
}
tkoleary’s picture

tkoleary CreditAttribution: tkoleary commented
FileSize
Screen Shot 2014-07-29 at 2.57.54 PM.png33.7 KB

Better image

image

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented

Why would we go for hard corners here? That is not in alignment with the style guide for Seven.

Also, how is it relevant to this issue? Which is about positioning, not look.

tkoleary’s picture

tkoleary CreditAttribution: tkoleary commented

@bojhan @LewisNyman

Why would we go for hard corners here? That is not in alignment with the style guide for Seven.

Form follows function. Hard corners make the buttons easier to mortice together into a single block which in turn makes the whole bar both smaller and less complex, reducing visual noise and making it fit better on mobile devices.

IMO no round corners does not make this significantly diverge from seven's style but Lewis can make the call on that.

Also, how is it relevant to this issue? Which is about positioning, not look.

That's a fair point. I'll split this off into another issue.

tkoleary’s picture

tkoleary CreditAttribution: tkoleary commented

@bojhan the new style issue is here: #2315915: Simplify style of entity toolbar

gaele’s picture

gaele CreditAttribution: gaele commented
Priority: Minor » Normal
FileSize
out-4.ogv_.zip1.58 MB

Testing with Firefox 32.0.3 on Ubuntu I encountered several problems. See attached video.

  • The editor toolbar is covering the first line of the body. If I close the editor and reopen it the problem goes away.
  • After editing the body it is difficult to also edit the title, as the toolbar is obstructing most of the clickable title area.
  • After closing the toolbar with "Discard changes", the toolbar doesn't disappear, and closing it by clicking the "X" doesn't work.
Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented

#12: All valid points, thanks for reporting them explicitly, and even with a video! I wish all bug reports were like this :)

Also agreed with the priority bump.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

pameeela’s picture

pameeela CreditAttribution: pameeela commented
Status: Active » Closed (works as designed)
Issue tags: +Bug Smash Initiative
FileSize
Screen Shot 2021-07-12 at 9.12.52 PM.png28.87 KB

This works quite well now, for fields with CKEditor it loads in a modal:

I think if there are further suggestions/improvements needed for Quick Edit we should open new issues.