Problem/Motivation
The horizontal/vertical icons of the toolbar are not always displayed, when the toolbar has multiple items.
This happens for example when other modules like the Workbench module are installed. The module adds the toolbar item "Workbench". I can see the icons, when I click the that "Workbench" toolbar item (see missing_icon2.png), but when I switch to "Manage" I will not see the icons anymore (see missing_icon.png).
I noticed that the buttons have the value "horizontal" or "vertical" when I am on "Workbench". Those values are completely missing when I'm on the other item and since the css uses for example [value="vertical"], it will not apply the styling (in this case the background-image) to the element.
This happens due to some changes of the toolbar's javascript (Issue #3239134):
Before the changes:
const $orientationToggle = this.$el.find('.toolbar-toggle-orientation').toggle(this.model.get('isTrayToggleVisible'));
$orientationToggle.find('button').val(antiOrientation).attr('title',this.strings[antiOrientation]).text(this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);After the changes:
var $orientationToggleButton = $orientationToggle.find('button');
$orientationToggleButton[0].value = antiOrientation;The [0] only applies the value to the first button, which is from the Workbench tab. That is why the icons are missing for the other tab.
Steps to reproduce
1. Install drupal/workbench module
2. Click the "Manage" tab of the toolbar
3. You should not see the vertical/horizontal Icon in the toolbar
4. Click the "Workbench" tab of the toolbar
5. You should see the vertical/horizontal Icon in the toolbar
Proposed resolution
Revert the changes in the toolbar javascript back to how it was before the change.
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | 3334212-vertical-horizontal-toolbar-icons-missing-drupal-10.patch | 1.04 KB | lmoeni |
| #10 | workbench icon.png | 45.74 KB | deepalij |
| #10 | manage icon.png | 53.84 KB | deepalij |
| missing_icon2.PNG | 55.17 KB | lmoeni | |
| missing_icon.PNG | 64.66 KB | lmoeni |
Issue fork drupal-3334212
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3334212-verticalhorizontal-icons-missing
changes, plain diff MR !3261
Comments
Comment #2
lmoeniComment #3
lmoeniComment #4
beatrizrodriguesI'll be working on that issue.
Comment #6
lmoeni@beatrizrodrigues sorry, I did not see your comment before creating the MR.
I'm quite new to this. Could you take a look at the MR? Or do you have some other sugesstions how to solve this issue?
Comment #7
lmoeniComment #8
beatrizrodriguesNo problem @lmoeni. I will just send this to needs work because it seems the test failed.
Something about:
Comment #9
lmoeni@beatrizrodrigues I didn't realize that val() and text() weren't allowed anymore. I changed it so that it applies the value and text to all necessary button elements without jquery.
Comment #10
deepalij commentedCouldn't able to reproduce the issue.
Able to see the vertical/horizontal Icon in the toolbar without applying the patch
Refer to the screenshots
Comment #11
hosterholzI can reproduce the issue. Proposed patch solves the problem.
Comment #12
jungleAs a bug, A test is expected.
Comment #13
lmoeniI added a patch for Drupal 10.
Comment #15
andriic commentedI've also noticed this bug.
Patch #13 for Drupal 10 helped!
tnx
Comment #17
quietone commentedThe Toolbar Module was approved for removal in #3476882: [Policy] Move Toolbar module to contrib.
This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.
The deprecation work is in #3484850: [meta] Tasks to deprecate Toolbar module and the removal work in #3488828: [meta] Tasks to remove Toolbar module.
Toolbar will be moved to a contributed project before Drupal 12.0.0 is released.
Comment #18
quietone commentedToolbar has moved to contrib