Added dropdown buttons #192
Conversation
|
wow, very nice, good work kasperp! |
|
Very cool! |
|
@luxuryluke the colors for the buttons are defined in preboot.less (however this seems to change in the 1.3). I made a .menu-color mixin in patterns.less, which take a button color and creates the styles that gives the menus their colors. I put the .menu-color mixin in patterns.less as I wanted to keep my change as 'local' as possible and not pollute to many files. |
|
nice |
|
These are great but don't drop down buttons typically work like normal buttons, and the menu is only shown when you click on the arrow part? |
|
@jimtreadway I believe there is a distinction between a split button and a dropdown button (also called menu button), and the distinction is what you pointed out. The split button has two parts; a button part and a menu part, the menu is then displayed when the arrow is clicked. The dropdown/menu button only has one part which displays a menu clicked. However these types of controls are called different things in different frameworks. In MS they are called splitbuttons and menubuttons In Dojo they are called combobutton and dropdownbutton I'm sure they are called different things in other frameworks. I don't really care what they are called, in my first attempt I called them for split buttons #131 which I realize was wroing. Anyway my intention was to provide a button with a menu, like you see in e.g. gmail. This is what I need for the project I'm currently working on. However a split button would also be a great addition to the framework. |
|
Yes, the Microsoft example (where the above are called "menu buttons") is what I was thinking of, sorry. Both "split" and "menu" be great additions, however, regardless of the terminology. So +1 here if it helps. ;) |
|
+1 from me too. Very good addition! |
|
To my eye, the arrow is too close to the text, and too far from the edge. Shouldn't this be more central to the space? Otherwise looks great! |
|
Agree w/ colinbm about the distance text - arrow |
|
@colinbm I agree there - it could use a little more spacing between the text and the arrow. |
|
Careful. If the distance is too big, they will look like split buttons. The current design makes it clear that the arrow is associated with the text, they form a single thing, which is the original goal of the button. So I would keep them as it is. |
|
To me the line (that isn't present here) would indicate split buttons, though I realise that would only be apparent once/if that's implemented, and where there were both on a page. Looking at it again though, if you see the arrow as being part of the text, rather than part of the button, then it begins to look right. (which is your point) |
|
Would love for you to fork 1.3 and add dropdown button support to it. |
|
+1 for this ! Great work ! |
|
+1 |
|
Very nice indeed, I hope this gets pulled in soon. |
|
This is great! +1 Found an outline issue in firefox 6: |
|
@markdotto can I use this in conjunction with the new 1.3 version of the twitter bootstrap? |
|
@kbond yes I see that, does anybody have an idea for a fix for that outline issue? |
…old classes for input elements
… want with .js-dismiss class
|
I like the way #192 (comment) looks a lot more than the latest. |
|
@kasperp Ok. But there is no Split button designed yet, right? I think it would be pretty easy to base this on your Dropdown button. I'll see what I can do :) |
|
@sebastianhoitz right there is no split button yet. |
|
Would love to use that right now, any plans when this will be merged/released? |
|
@granfatha issue #438 (which is kind of a duplicate) has been marked for release v2.0.0, I'm not sure that this is an indication of when this will be pulled. I'm not even sure that it will be pulled but fell free to clone my branch. I'll keep it alive and try to keep it up to date. |
|
Thanks, will do that! |
|
Just took a fresh look at this... still thinking there is too much code in there. At a high level, here's how I would approach adding dropdowns to the buttons:
Think that's everything. Let me know what you think. Oh, and compare this against the dev branch so you're as close to 1.4's upcoming release as possible. Would love to make this part of the release. |
|
Thank you for your amazing work on Bootstrap. |
|
When will v2.0 be release? i though it'll jump from 1.3 to 2.0.. that would be nice.. |
|
@markdotto with regards to the dropdown arrow, I have take the same approach as in the existing dropdowns. Not using :after would in my opinion lead to more code as I no longer would be able to use the exiting styles for the dropdown arrow (the |
|
@markdotto I had a go at implementing your refactoring suggestions. I have tried to incorporate dropdown buttons styles into the existing dropdown styles. I have removed any trace (I hope) from the btn styles. I haven't changed the :after styles for the arrow, as I think that this should work the same way as the existing dropdowns. Let me know what you think. I also merged with the 1.4-wip branch |
|
Double check your merge—looks like the pull request got polluted with a bunch of the commits we made outside your code. Edit: Ahh, I realize what happened. You merged with 1.4-wip, not the dev branch. Sorry for the confusion, I didn't realize 1.4-wip made it up to GitHub. Removing it now. |
|
@markdotto I guess I misunderstood you then, I thought you wanted me to merge with the 1.4 branch. Do you want me to revert the merge? Or make another pull request to another branch? |
|
We're developing 1.4 in the dev branch, which we'll be using for each minor point release. I mentioned using "the dev branch" in my previous comment, but alluded to 1.4. That, coupled with an old 1.4-wip branch, led to the confusion. Sorry for that. I think it'd be best to make a clean pull request to the Sound reasonable? |
|
Yes very reasonable, this pull request is starting to show its age ;-). |
|
Moved pull request to #467 |
|
Really great job @kasperp I did implement it in my code, but your version is so much better. Hope to change may code when the next release come! |
|
I made a slightly different version of this, and added a few features that I needed for my app. My version has nested dropdowns, icons, selected menus and intelligent positioning so it doesn't appear off screen :). I also added split buttons so you can have a main action on the button and a dropdown on the arrow, and as a by-product I created grouped buttons, to group related actions in a toolbar for example. Here are a few captures, hope it gives you some inspiration. Cheers from Argentina! :) |
|
Oh snap! Begun the dropdown-btn war has. |
|
I think there will be no war w/ dropdown btn w/ submenus because markotto said "It's not a great paradigm to begin with and piling on other levels never works well for users." #424 (comment) |
|
I agree, multiple levels are not a very good experience for users, I discourage the use of them, but I needed it for retro compatibility and I made them just like Mac OS native dropdowns. |
|
Most of the time they are a bad choice. But when you have a hierarchy of things and you want the user to select one element, you sometimes have no clear alternative. |
|
I actually like multiple dropdown items, but i guess ill have to make my own because some really fits it by design. Its nice to have it and need it when you dont have it. just saying. |
|
@santiquiss those look very nice. I especially like the split buttons, can't wait for you make a pull request with those :). I believe that the button groups are already a part of bootstrap, check this pull request #308. |
I had another go at adding dropdown menu support to buttons, based on the dropdown introduced in 1.2.0. I went back and forth weather to color the menu based on the colors of the buttons, but decided to do so.
They now look this this:
Primary
Default
Info
Success
Danger