Problem/Motivation
The operation links in the widget look plain and take up a lot of space.
Proposed resolution
Replace the links with a dropbutton so they are more in line with the rest of the Drupal interface (e.g. entity operations)
Problems with dropbuttons:
- extra click needed, to open the dropbuttons. Can they be open by default?
- when hiding the link 'Add time slot', there is an empty line in the dropbuttons.
Remaining tasks
Create a patch, review the patch, update tests (if necessary).
User interface changes
The operation links are replaced with a dropbutton.
Comments
Comment #2
dieterholvoet commentedIn addition to replacing the regular links with a dropbutton, I had to wrap the behavior with $(document).ready().
Comment #3
dieterholvoet commentedComment #4
wangshy commentedThe patch works well, re-rolled to 8.x-1.3
Be aware to hard refresh your browser to ensure js change take effect.
Comment #5
johnvComment #6
dieterholvoet commentedRe-rolled to 8.x-1.5.
Comment #7
tim-dielsThis would be a wonderful addition and in my eyes definitely needed for a better UX.
But unfortunately this is not applying anymore on the latest dev version.
Comment #9
johnvTo prepare for this, the sorting of links is changed in above patch, since '#type' operations does not seem to support the weights.
Comment #14
johnvPlease find a reroll against current code base. I have re-arranged the code base, to the patch only contains the intended changes.
Please check if the patch is correct.
I have some remarks:
- from UX perspective, it is undesirable that an extra click is needed to see all available options.
- not sure what 'close the dropbutton'. also, 2 calls are done against different classes 'open' vs. 'dropbutton-open'.
- when the first operation is hidden, an empty operation is added. this is not so in the original code. perhaps the class 'open' can be set always?
- operation 'add time slot' works fine, but is initially not set ok.(must only be shown if no next slot exist)
- operation 'clear/remove' does not work. I cannot find why
- operation 'copy previous day' works fine.
Comment #16
johnvAbove commit fixes the problem with operation 'clear/remove'.
Comment #17
johnvThis reroll fixes the lost functionality of sorting the operations, according to the 'weight' attribute (Note: not '#weight').
It still contains the 'bind's to the old links. They must be removed, eventually.
Comment #19
johnvAbove patch makes sure each link is on its own line.
Much like permanently expanded dropbutton.
Comment #21
johnvFor further work, see also #3476793-15: Fix accessibility issues in form, that also changes the links to buttons, taking another approach.
Please search for 'dropbutton' in the source to find some previsions.
Comment #22
hexabinaerFor context, using links (especially empty links) are setting up barriers. Since all action links are in fact triggers for functions, we provided a patch (see related issue) replacing them with submit buttons and providing audible feedback.
The approach to bundle the action links in a dropbutton was so appealing that we transformed that into a button-based dropbutton (see Paragraphs for reference).
Well aware now having two different further development approaches in two different issues. Hope we can merge that somehow.
Comment #23
johnvComment #24
johnvI am dropping the dropbutton for now.
I tried to implement the 2 provided patches. I did not succeed in targeting the correct action with the dropbutton.
Help is needed.
Also, I have the following UX-problems with dropbuttons:
- extra click needed, to open the dropbuttons. Can they be open by default, and stay open after clicking on it?
- when hiding the link 'Add time slot', there is an empty line in the dropbuttons.
Comment #27
tobiasbExtra click for more secondary actions is for a drop-button the expected behavior, because this is a drop-button form-element.
When configured only 1 time-slot then Clear is the primary action.
fyi: The MR also removes some php >= 8.3 changes. (https://php.watch/versions/8.3/typed-constants)
Comment #29
johnvMoving slowly towards perhaps applying the patch, by removing noise.
The mentioned const definitions were already changed, but I will create a separate issue for updating all const definitions, raising the php and drupal version bar.
In priciple, my doubts expressed above and in #3476793: Fix accessibility issues in form still exist.
Comment #32
johnvAbove patch factors out the $title and $weight variables, so the button can be easily inserted by adding the following lines after each definition of $title (already in current code):
However, that adds Action buttons, taking up unreasonable amount of space in my Olivero/Claro theme, so dropping that for now, and concentrating on pure dropbuttons.
[EDIT: Oh, i now see that the 'data-drupal-selector' must still be adapted in each operation.]
Comment #35
johnvOK, leaving this for now.
The code base is rationalized, so that the differences between codebase and pathc are minimalized.
Chunks from the patch have been committed to codebase.
Classes are added to the operation, they were omitted in the patch.
Please see attached files:
- the patch contains the changes to enable dropbuttons. 'clear' action does work. something is wrong for 'add' and 'copy' - I believe they did work before.
- the 'remaining' text file are the chunks from the patch that have not been used, for your reference.
- there is no setting to switch the UX, yet.
- see comment #32 about the 'action buttons'
- see comment #14 for UX and an older patch.
Comment #36
johnvRegarding the 'action buttons', that apparently are not supported.
In another module, I have the following form settings:
But perhaps you want the 'button' inside a 'select' list?
Comment #37
johnvIt would be helpful if the js is identical for both cases. I tried adding class = "js-office-hours-operation-$action", but that lead to the last operation having 3 such classes