Comments

joachim created an issue. See original summary.

emma.maria’s picture

Issue tags: +CSS, +frontend
emma.maria’s picture

Hi @joachim!

Dropbuttons are being thoroughly refactored in this issue #2278473: Simplify Dropbutton markup inline with our CSS standards, which includes a single option being printed as a button.

The work in that issue can most probably still go ahead and I've given it a poke to re-work the latest patch as we are now post D8 release

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

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now 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.

amourow’s picture

I recently found the same issue, and modified the css to fix it.

The css in the issue #2278473: Simplify Dropbutton markup inline with our CSS standards is already removed by adding .button class instead of .dropbutton-single

amourow’s picture

Reroll the patch with missing border.

bandanasharma’s picture

Please tell the step to reproduces this issue. I have try to reproduces this issue but not able to reproduces.

amourow’s picture

@bandanasharma, You have to install Workbench Moderation, then following the steps.

  1. Enable the moderation states at the content type, for instance the article: /admin/structure/types/manage/article/moderation
  2. Create an article and do "Save and Archive"
  3. Go back to the "Edit draft" to edit the article, you'll see the dropbutton with single option.
joachim’s picture

Alternatively, you could temporarily hack the node form code to only show one action.

bandanasharma’s picture

FileSize
83.85 KB
100.26 KB

@amourow and @joachim thanks for information.
@amourow Patch is apply successfully. I have attached before and after screen shot.

bandanasharma’s picture

But in the hand held device single dropbutton width is not 100% for the reference, I have attached screen shot.
Added patch with these changes, also add inter diff file.

amourow’s picture

Nice catch @bandanasharma!

I make some improvement in the patch
- make the text centered as well.
- remove 100% width for .js .dropbutton-single, since it goes along with .dropbutton-wrapper

I also find a issue after apply your patch that the button label is exceeded the with on small device e.g. iPhone SE while I also enabled the content translation.
- make the button text line breakable

bandanasharma’s picture

Status: Active » Reviewed & tested by the community
FileSize
27.26 KB
44.94 KB

@amourow Thanks for review my patch.
#12 patch is applied successfully. It is working fine for desktop and hand held device. Attached the screen shot.

xjm’s picture

Assigned: Unassigned » Cottser
droplet’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +JavaScript

It looks a bit odd to me. we made a mistake at the beginning I think. If there's a single button. that's a button. We shouldn't name/make it dropdown markup at first place.

Should we consider deprecate it? (We don't use this pattern in CORE?)

  1. +++ b/core/themes/seven/css/components/dropbutton.component.css
    @@ -162,10 +162,18 @@
    +  border-radius: 20em;
    +  text-align: center;
    +  white-space: normal;
    

    Needs keep it same as `.js .dropbutton-widget .dropbutton-action a` I think

  2. +++ b/core/themes/seven/css/components/dropbutton.component.css
    @@ -162,10 +162,18 @@
     .dropbutton-single .dropbutton-widget {
    -  border: 0;
    +  border-width: 1px;
    +  border-radius: 20em;
       position: static;
       display: inline-block;
     }
    

    keep most style same as `.js .dropbutton-multiple .dropbutton-widget`

  3. +++ b/core/themes/stable/css/core/dropbutton/dropbutton.css
    @@ -21,6 +21,9 @@
    +  .js .dropbutton-single .dropbutton-widget {
    +    width: 100%;
    +  }
    

    Remove it.

and prefix with .js

droplet’s picture

Yes, just confirmed. To remove the dropdown markup, just need to unset:

$element['publish']['#dropbutton'] = 'save';

I didn't see any reason to keep .dropdown-single style as a shortcut for the single-button mode then. any thoughts?

Cottser’s picture

Assigned: Cottser » Unassigned

It does seem like it would make sense to handle this server-side, I can't think of a case where we don't know server-side how many options there would be.

If we agree it's okay for a dropbutton with only one option to be converted to a button, I wonder if we could build this behaviour into the dropbutton render element.

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

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now 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.