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.

Command icon 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:

Comments

DieterHolvoet created an issue. See original summary.

dieterholvoet’s picture

StatusFileSize
new13.44 KB

In addition to replacing the regular links with a dropbutton, I had to wrap the behavior with $(document).ready().

dieterholvoet’s picture

Assigned: dieterholvoet » Unassigned
Status: Active » Needs review
wangshy’s picture

StatusFileSize
new13.68 KB

The patch works well, re-rolled to 8.x-1.3

Be aware to hard refresh your browser to ensure js change take effect.

johnv’s picture

Priority: Normal » Minor
dieterholvoet’s picture

StatusFileSize
new13.69 KB

Re-rolled to 8.x-1.5.

tim-diels’s picture

Status: Needs review » Needs work

This 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.

  • johnv committed 0096ee4b on 8.x-1.x
    Issue #3135259: In widget, replace operation links with a dropbutton -...
johnv’s picture

To prepare for this, the sorting of links is changed in above patch, since '#type' operations does not seem to support the weights.

  • johnv committed 120bbc84 on 8.x-1.x
    Issue #3135259: In widget office_hours.js, replace operation links -...

  • johnv committed 16f651a3 on 8.x-1.x
    Issue #3135259: In widget office_hours.js, factor out the functions
    

  • johnv committed 31a9df86 on 8.x-1.x
    Issue #3135259: Widget office_hours.js - phpcs
    

  • johnv committed c40b2c29 on 8.x-1.x
    Issue #3135259: Widget office_hours.js - phpcs
    
johnv’s picture

StatusFileSize
new8.44 KB

Please 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.

  • johnv committed d20c10f2 on 8.x-1.x
    Issue #3135259: Widget office_hours.js - fix Clear/Remove/Delete link...
johnv’s picture

Above commit fixes the problem with operation 'clear/remove'.

johnv’s picture

StatusFileSize
new10.57 KB

This 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.

  • johnv committed 5bf7da4a on 8.x-1.x
    Issue #3135259: Each operation link on its own line
    
johnv’s picture

Above patch makes sure each link is on its own line.
Much like permanently expanded dropbutton.

  • johnv committed f909739b on 8.x-1.x
    Issue #3135259: Each operation link on its own line
    
johnv’s picture

For 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.

hexabinaer’s picture

For 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.

johnv’s picture

Issue summary: View changes
johnv’s picture

I 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.

tobiasb made their first commit to this issue’s fork.

tobiasb’s picture

Status: Needs work » Needs review

Extra 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)

  • johnv committed b9280e17 on 8.x-1.x
    Issue #3135259: Replace operation links - remove js-office-hours-...
johnv’s picture

Moving 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.

  • johnv committed 46cc32ce on 8.x-1.x
    Issue #3135259: Make code more moveable in OfficeHoursBaseSlot.php
    

  • johnv committed 010e3594 on 8.x-1.x
    Issue #3135259: Add better reference in OfficeHoursSeasonHeader.php
    
johnv’s picture

Above 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):

use Drupal\Core\Render\Markup;

$title = sprintf('<button type="button" class="button" data-drupal-selector="clear">%s</button>', $title);
$title = Markup::create($title);

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.]

  • johnv committed 284433cc on 8.x-1.x
    Issue #3135259: Make code more moveable in OfficeHoursBaseSlot.php
    

  • johnv committed 2d1780b9 on 8.x-1.x
    Issue #3135259 by dieterholvoet, johnv, wangshy: Add $(document).ready(...
johnv’s picture

Status: Needs review » Needs work
StatusFileSize
new5.7 KB
new2.67 KB

OK, 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.

johnv’s picture

Regarding the 'action buttons', that apparently are not supported.
In another module, I have the following form settings:

    $form['basic']['options'] = [
      '#type' => 'select',
      '#title' => $this->t('How to show the available...'),
      '#required' => FALSE,
      '#default_value' => ...,
      '#options' => [
        // These options are taken from options.module.
        'select' => $this->t('Select list'),
        'radios' => $this->t('Radio buttons'),
        'buttons' => $this->t('Action buttons'),
        'dropbutton' => $this->t('Drop button'),
      ],
      '#description' => $this->t(Decide which is the best way to show them.'),
    ];

But perhaps you want the 'button' inside a 'select' list?

johnv’s picture

It 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