Commit Graph

65 Commits

Author SHA1 Message Date
Perry Govier
9ff1b965bf fix(listItem): apply color styles to complex list items 2014-06-18 13:38:24 -05:00
Andrew Joslin
3c15b118ca fix(activator): properly activate elements nested inside an item.
Addresses #1373.

Before: if an `<a>`, `ng-click`, or `<button>` inside of a .item,
was clicked, the activator would walk up .item and activate it.

Now:  If an `<a>`, `ng-click`, or `<button>` inside of a
.item is clicked, the activator will activate that element.

Additionally, CSS was added so `a.item-content.activated` would look
activated.
2014-05-13 08:56:37 -06:00
Adam Bradley
6a1ac355a8 refactor(item): Adjust item padding variables, create item-avatar-right 2014-04-08 11:50:50 -05:00
Adam Bradley
c7e3defca5 refactor(item): Create .icon-accessory and remove auto nav icons, closes #1061
BREAKING CHANGE: The developer should be stating exactly how an icon
should show, but previously the right nav arrow icon violates this by
automatically showing a right arrow when an item was an anchor or
button. Instead of using the `:after` item selector, which was always
applied by default, it uses the same markup as `item-icon-right`, which
is easier to understand, customizable and not a hard coded default.

This change removes the `:after` nav icon styling, and creates a new
class, `icon-accessory`, based off of similar CSS. The change makes a
nav arrow highly customizable, allows RTL developers to easily control
the arrow direction, and the accessory class is something that's
reusable.

An example of right side arrow using `ion-chevron-right` as the icon:

    <a class="item item-icon-right" href="#">
      Check mail
      <i class="icon ion-chevron-right icon-accessory"></i>
    </a>
2014-04-07 15:33:36 -05:00
Adam Bradley
9bac6050a0 feat(avatar): Adding .item-avatar-left and deprecating .item-avatar 2014-04-07 11:43:57 -05:00
Andy Joslin
986dbac893 refactor(ionList): more expressive, declarative (breaking change)
Closes #1024.

BREAKING CHANGE: ion-list syntax has changed in favor of simplicity &
flexibility.

Relevant documentation:
[ionList](http://ionicframework.com/docs/api/directive/ionList),
[ionItem](http://ionicframework.com/docs/api/directive/ionItem),
[ionOptionButton](http://ionicframework.com/docs/api/directive/ionOptionButton),
[ionReorderButton](http://ionicframework.com/docs/api/directive/ionReorderButton),
[ionDeleteButton](http://ionicframework.com/docs/api/directive/ionDeleteButton),
[$ionicListDelegate](http://ionicframework.com/docs/api/service/$ionicListDelegate).

To migrate, change your code from this:

```html
<ion-list option-buttons="[{text:'hello',type:'button-positive',onTap:tap()}]"
          on-delete="onDelete(el)"
          delete-icon="ion-minus-circled"
          can-delete="true"
          show-delete="shouldShowDelete"
          on-reorder="onReorder(el, startIndex, toIndex)"
          reorder-icon="ion-navicon"
          can-reorder="true"
          show-reorder="shouldShowReorder">
  <ion-item ng-repeat="item in items">
    {{item}}
  </ion-item>
</ion-list>
```

To this:

```html
<ion-list show-delete="shouldShowDelete"
          show-reorder="shouldShowReorder">
  <ion-item ng-repeat="item in items">
    {{item}}
    <ion-delete-button class="ion-minus-circled"
                       ng-click="onDelete(item)">
    </ion-delete-button>
    <ion-reorder-button class="ion-navicon"
                       ng-click="onReorder(item, $fromIndex, $toIndex)">
    </ion-reorder-button>
    <ion-option-button class="button-positive" ng-click="tap()">
      Hello
    </ion-option-button>
  </ion-item>
</ion-list>
```
2014-04-04 10:12:16 -06:00
Adam Bradley
5b0f5d024c fix(item): Vertically align nav icon w/out flexbox to prevent android crashes, #928 2014-04-01 22:33:28 -05:00
Adam Bradley
04b4d771c6 fix(item): Fix css overflow overrides for .item-text-wrap 2014-03-31 11:26:34 -05:00
Adam Bradley
044211def3 fix(item): Fix delete icon alignment in .item-icon.left, closes #946 2014-03-28 16:33:49 -05:00
Adam Bradley
870dcd6f99 fix(active): Taps/clicks now use .activated instead of .active, closes #913
Both .active and .activated classes exist within the css now. When a
button/link/item is “active”, the .activated class gets added and
removed. This is so Ionic is not removing any user defined .active
classes, but also so users can use Ionic’s active classes (but not have
to worry about them being removed automatically by Ionic). Styled the
same by default, but easily overridden.
2014-03-27 21:26:59 -05:00
Adam Bradley
aa280910df fix(pointer): Add pointer styling to .item[ng-click], closes #858 2014-03-21 09:23:10 -05:00
Adam Bradley
fe44a7d98b rename .item-drag to .item-reorder, further standardize item editing 2014-03-20 16:02:50 -05:00
Adam Bradley
3718c47e8a also transform .item-left-edit w/ .item-left-editing parent 2014-03-20 14:57:48 -05:00
Adam Bradley
07c824db8d fix(item): Restructure item editing css for added reusability and organization 2014-03-20 14:18:12 -05:00
Adam Bradley
256ab116cd update .item-avatar .item-img to .item-image for consistency w/ thumbnails 2014-03-18 22:56:13 -05:00
Adam Bradley
947b8d6943 fix(item): fix avatar/thumbnail in .item-complex, and avatar misspelling 2014-03-18 22:39:33 -05:00
Adam Bradley
ded469311d fix(badge): Badge horizontal alignment over item right side buttons, closes #826 2014-03-18 15:55:05 -05:00
Adam Bradley
baa04cde4d feat(active): Removing use of :active in favor of .active for more control of active state
Using the :active pseudo works fine for desktop, but mobile is a
completely different beast, especially with the quirks of each
platform. By intentionally not using any :active selectors and manually
adding/removing a .active class, it gives us a precise control on how
the active state works for ALL platforms. Additionally, this places
less selectors in the css, and reduces the possibility of unnecessary
repaints. Currently this method of using .active instead of :active is
being applied to .button and .item elements.
2014-03-15 01:12:56 -05:00
Eric Wang
c882392a4b Fix item-input-inset active state highlight issue
Fix #798
2014-03-14 19:15:35 -07:00
Adam Bradley
28aaa27447 Item dividers should not be allowed to go active by default, closes #789 2014-03-14 11:11:05 -05:00
Adam Bradley
cb5510c184 fix(badge): Vertical align a badge in an item-divider, closes #707 2014-03-03 10:42:38 -06:00
Adam Bradley
4d3667106e fix(item): Fix badge moving to new line when text is too long, closes #551 2014-03-01 00:15:14 -06:00
Adam Bradley
11a4338d13 fix(item): Fix item-icon-left / right animating Ionicon not centered, closes #670 2014-02-28 23:44:13 -06:00
Adam Bradley
3a69bb3452 fix(item): degrade .item right arrows by grade for low end devices 2014-02-24 13:42:33 -06:00
Adam Bradley
977c1cc6e5 fix(thumbnail): Correctly apply thumbnail style to item directive, closes #509 2014-02-22 22:34:51 -06:00
Adam Bradley
327a686626 feat(item): Auto right-arrow for complex list items w/ ng-click/href, closes #472 2014-02-20 14:29:41 -06:00
Adam Bradley
82c2089b41 punk commit to kickstart travis 2014-02-11 17:21:26 -06:00
Adam Bradley
0b2d1eeb24 remove old comments 2014-02-11 17:15:12 -06:00
Adam Bradley
c27427f336 fix active class for list items and complex items, closes #498 2014-02-11 17:14:13 -06:00
Adam Bradley
0c50fec13e feature(itemTextWrap): Set text-wrapping at the list level, closes #500 2014-02-09 22:42:10 -06:00
Adam Bradley
91652112a0 fix(listButtons): Update list button sizes, closes #478 2014-02-09 21:22:23 -06:00
Adam Bradley
a66cf95462 tweak for ionicons updates 2014-01-20 20:47:22 -06:00
Adam Bradley
1ea7218578 up z-index item-reordering 2013-12-13 22:55:15 -06:00
Adam Bradley
2779609766 improve list animations, closes #105 2013-12-13 22:33:17 -06:00
Adam Bradley
288f418e8c transition transform mixin and fixes 2013-12-13 15:22:32 -06:00
Adam Bradley
48a58d9278 removed link-item and onSelect 2013-12-13 09:52:10 -06:00
Adam Bradley
d9eb0440e6 list updates 2013-12-12 20:24:59 -06:00
Adam Bradley
aae39e64f5 z-index variables 2013-12-12 11:35:31 -06:00
Max Lynch
1e07b821b4 Added multi button support 2013-12-10 20:10:57 -06:00
Adam Bradley
9cb7826329 fix missing right padding for .item with .item-icon-right 2013-12-06 22:13:31 -06:00
dbaq
21ea1481ea fix missing right padding for .item with .item-icon-right 2013-12-06 17:15:03 -08:00
Adam Bradley
b70dc49a24 items scss cleanup 2013-11-27 07:43:10 -06:00
Sheldon Baker
98a43b78c0 Target only direct descendants of .item-thumbnail-*
Prevents the `img` from being positioned twice in the case of: `div.item-thumbnail-left > div.item-image > img`
2013-11-23 12:21:51 -08:00
Max Lynch
fef493a976 Merge branch 'master' of https://github.com/driftyco/ionic
Conflicts:
	dist/css/ionic.css
2013-11-21 11:49:52 -06:00
Max Lynch
26b0a72a29 Fixed item complex background color 2013-11-21 11:49:37 -06:00
Adam Bradley
c358a9cef0 .item.active states only for <a> and <button> 2013-11-20 15:51:35 -06:00
Max Lynch
86b19f9923 removed overflow auto on item-wrap 2013-11-18 10:59:48 -06:00
Adam Bradley
136ba7262d active list bg fix 2013-11-18 10:05:55 -06:00
Adam Bradley
8e17aabf64 simplier way to center item icons 2013-11-16 13:03:36 -06:00
Adam Bradley
1dd3816918 update icon alignment w/in .item 2013-11-15 23:19:16 -06:00