Fixes #4017 (Count bubble) and #4114 (Mini Listviews) #4154

Closed
wants to merge 4 commits into
from

Projects

None yet

3 participants

@jaspermdegroot
Member

Select and Listview CSS:
Added/adjusted padding and absolute position rules for count bubble (fullsize and mini) and mini listview (all types of lists).

Button CSS:
Fixed: The padding left and right used for header/footer buttons with icon top or bottom should not apply to mini inline buttons and mini controlgroup buttons. Also, mini inline buttons had same padding as fullsize inline buttons at the side where the icon is.

Select JS:
When data-icon="false" is used on a select button it still gets the default data-iconpos="right". The small change I made set data-iconpos to false. This fixes the issue: no class ui-btn-icon-right anymore, which means no unwanted padding right.
Looking at the Selectmenu widget and ButtonMarkup I didn't see a solution to completely remove the data attribute, since there is a default value.
[Update: removed note about same happening for listview items with data-icon false]

Docs:
These changes are only applicable when mini listviews are going to be used. Added data-mini as option to the data attribute reference. Added thumb size info in the Thumbnails & icons section on the List basics & API page.

I created a test page with all types of buttons that are affected. One version where you can see the results and one version how buttons currently look for comparison.
To keep overview I made an Excel file with a schematic representation of the buttons and the values of padding and absolute positioning. The XLS and PDF prints of it can be found at the test page as well.

Link to test page: [edit: removed this link; link to new test page will be added to new PR]

This PR fixes #3979 (Count Bubble position problem) and #4114 (Listview data-mini="true")

This PR replaces #4017 and #4018

@jaspermdegroot
Member

Something that just crossed my mind...

When a custom select button has data-mini="true" it would be nice when the modal/dialog that opens is also mini version.

Next project :-)

@toddparker

Wow, this is incredibly detailed. Nice work @uGoMobi!

@toddparker

I just asked @Wilto to review this.

@Wilto
Wilto commented Apr 28, 2012

Man oh man.

I’ll review this first thing Monday. Great work.

@jaspermdegroot
Member

Thanks guys!

@Wilto See @toddparker his comment on issue #4114 about probably not supporting mini listviews. I have a version of the Listview CSS file without the additions/changes for mini listviews. So just let me know if you prefer that one.

@jaspermdegroot
Member

Fixes #4233

@jaspermdegroot
Member

Fixes #4252

@jaspermdegroot
Member

Fixes #2195

@toddparker

Looks like this PR might need an update.

@jaspermdegroot
Member

@toddparker

Yes it does indeed. I think it's better to close this PR and split it up. One new PR to remove the mini listview option from the JS and all the other changes to a new PR for "standardize buttons and forms".

@toddparker

+1

@jaspermdegroot
Member

New PR for disabling option mini listview: #4464

I am closing this PR now and will move the other changes - without mini listview CSS - to the new PR for buttons and form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment