javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(item): Create .icon-accessory and remove auto nav icons, closes #1061

Browse Source 
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>
This commit is contained in:
Adam Bradley
2014-04-07 15:33:32 -05:00
parent 518e54ee86
commit c7e3defca5
3 changed files with 40 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
scss/_items.scss
View File

@@ -300,6 +300,18 @@ a.item-content {
left: auto;
}
.item-icon-left .icon-accessory,
.item-icon-right .icon-accessory {
color: $item-icon-accessory-color;
font-size: $item-icon-accessory-font-size;
}
.item-icon-left .icon-accessory {
left: round($item-padding / 5);
}
.item-icon-right .icon-accessory {
right: round($item-padding / 5);
}
/**
* Item Button
@@ -375,59 +387,6 @@ button.item.item-button-right {
}
/**
* Auto Right Arrow Icon
* --------------------------------------------------
* By default, if an .item is created out of an <a> or <button>
* then a arrow will be added to the right side of the item.
*/
a.item,
button.item,
.item[href] .item-content,
.item[ng-click] .item-content {
padding-right: (($item-padding * 3) - 5);
&:after {
// By default, both <a> and <button> have right side arrow icons
@include font-smoothing(antialiased);
position: absolute;
top: 50%;
right: $item-padding - 4;
display: block;
margin-top: -8px;
color: #ccc;
content: "\f125"; // ion-chevron-right
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
font-family: 'Ionicons';
line-height: 1;
speak: none;
}
}
.grade-c {
a.item:after,
button.item:after,
.item[href] .item-content:after,
.item[ng-click] .item-content:after {
@include font-smoothing(none);
}
}
// do not show the default right arrow when they want their own right side icon
a.item-icon-right:after,
button.item-icon-right:after,
a.item-button-right:after,
button.item-button-right:after,
.item a.item-content:after {
display: none;
}
// Item Avatar
// -------------------------------

3
scss/_variables.scss
View File

@@ -289,6 +289,9 @@ $item-button-line-height: 32px !default;
$item-icon-font-size: 32px !default;
$item-icon-fill-font-size: 28px !default;
$item-icon-accessory-color: #ccc !default;
$item-icon-accessory-font-size: 16px !default;
$item-avatar-width: 40px !default;
$item-avatar-height: 40px !default;

38
test/html/lists.html
View File

@@ -36,9 +36,20 @@
Check mail
</a>
<a href="#" class="item item-icon-left">
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-right">
Right side nav icon
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-chevron-left icon-accessory"></i>
Left side nav icon
</a>
</div>
@@ -49,10 +60,11 @@
Work
</div>
<a href="#" class="item item-icon-left">
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-email"></i>
Check mail
<span class="badge">5</span>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<div class="item item-icon-left item-button-right">
@@ -364,7 +376,7 @@
<div class="item-content">
<i class="icon ion-heart brand-assertive fill-icon"></i>
Madison, WI
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</a>
@@ -372,7 +384,7 @@
<div class="item-content slide-left">
<i class="icon ion-image brand-energized fill-icon"></i>
Driving Directions
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
@@ -383,7 +395,7 @@
<div class="item-content slide-right">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Settings
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</a>
@@ -418,7 +430,7 @@
Default has no wrap! This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-left item-icon-right item-text-wrap">
@@ -426,7 +438,7 @@
Assigned "item-text-wrap". This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
@@ -435,7 +447,7 @@
Default no wrap and has item-content! This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
@@ -448,7 +460,7 @@
Assigned "item-text-wrap" and has item-content. This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
@@ -465,7 +477,7 @@
<h3>Thumbnails .item-thumbnail</h3>
<div class="list">
<a href="#" class="item item-avatar">
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
@@ -473,7 +485,7 @@
</div>
</a>
<a href="#" class="item item-avatar">
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
@@ -481,7 +493,7 @@
</div>
</a>
<a href="#" class="item item-avatar">
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
@@ -489,7 +501,7 @@
</div>
</a>
<a href="#" class="item item-avatar">
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>gjpqy</h2>