Skip to content
This repository has been archived by the owner on Sep 10, 2019. It is now read-only.

Commit

Permalink
Merge pull request #570 from soumak77/iconic-fixes
Browse files Browse the repository at this point in the history 
Fixes #569
  • Loading branch information
@gakimball
gakimball committed Apr 30, 2015
2 parents 8ea2e86 + f149ae1 commit c6194e7
Show file tree
Hide file tree
Showing 3 changed files with 271 additions and 26 deletions.
43 changes: 43 additions & 0 deletions docs/assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
.controller('MotionUIController', MotionUIController)
.controller('NavController', NavController)
.controller('AngularModsController', AngularModsController)
.controller('IconicController', IconicController)
;

config.$inject = ['$urlRouterProvider', '$locationProvider'];
Expand Down Expand Up @@ -253,4 +254,46 @@
};
}

IconicController.$inject = ['$scope', '$timeout'];

function IconicController($scope, $timeout) {
var iconNum = 0,
icons = [{
icon: 'account',
iconAttrs: { state: 'login' }
},{
icon: 'account',
iconAttrs: { state: 'logout' }
},{
icon: 'chevron',
iconAttrs: { direction: 'right' }
},{
icon: 'chevron',
iconAttrs: { direction: 'left' }
}];

$scope.rotatingIcon = icons[0];
$scope.staticIcon = icons[0];
$scope.delayLoadedIcon = null;

rotateIcon();
loadIcon();

function rotateIcon() {
$timeout(function() {
if (++iconNum == icons.length) {
iconNum = 0;
}
$scope.rotatingIcon = icons[iconNum];
rotateIcon();
}, 3000);
};

function loadIcon() {
$timeout(function() {
$scope.delayLoadedIcon = icons[0];
});
};
}

})();
168 changes: 150 additions & 18 deletions docs/templates/iconic.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
name: iconic
url: /iconic
controller: IconicController
---

<h2>Iconic</h2>
Expand Down Expand Up @@ -150,6 +151,42 @@ <h3>Icon Names</h3>

<hr>

<h3>Icon Attributes</h3>
<p>Iconic provides the ability to futher customize some of their icons by using data attributes. For example, one can create a chevron icon in any direction using <a href="https://useiconic.com/icons/chevron">data-direction</a>. Icon attributes can also be passed as an object to the iconic directive using the <strong>icon-attrs</strong> attribute.</p>

<div class="grid-block">
<div class="small-12 medium-6 grid-content text-center">
<img zf-iconic icon="chevron" data-direction="top" size="medium"></img>
<hljs>
<img zf-iconic icon="chevron" data-direction="top" size="medium"></img>
<img zf-iconic icon="chevron" icon-attrs="{ direction: 'top' }" size="medium"></img>
</hljs>
</div>
<div class="small-12 medium-6 grid-content text-center">
<img zf-iconic icon="chevron" data-direction="right" size="medium"></img>
<hljs>
<img zf-iconic icon="chevron" data-direction="right" size="medium"></img>
<img zf-iconic icon="chevron" icon-attrs="{ direction: right' }" size="medium"></img>
</hljs>
</div>
<div class="small-12 medium-6 grid-content text-center">
<img zf-iconic icon="chevron" data-direction="bottom" size="medium"></img>
<hljs>
<img zf-iconic icon="chevron" data-direction="bottom" size="medium"></img>
<img zf-iconic icon="chevron" icon-attrs="{ direction: 'bottom' }" size="medium"></img>
</hljs>
</div>
<div class="small-12 medium-6 grid-content text-center">
<img zf-iconic icon="chevron" data-direction="left" size="medium"></img>
<hljs>
<img zf-iconic icon="chevron" data-direction="left" size="medium"></img>
<img zf-iconic icon="chevron" icon-attrs="{ direction: 'left' }" size="medium"></img>
</hljs>
</div>
</div>

<hr>

<h3>Icon Names</h3>
<p>You can add in these sweet icons with this simple markup:</p>
<div class="grid-block">
Expand Down Expand Up @@ -194,6 +231,30 @@ <h3>Icon Colors</h3>
</div>
</div>

<hr>

<h3>Icon Sizing</h3>
<p>You can affect the size of the icons with our color classes like so:</p>
<div class="grid-block">
<div class="small-12 grid-content">
<hljs>
<img zf-iconic icon="thumb" size="small" class="iconic-color-primary">
<img zf-iconic icon="thumb" size="medium" class="iconic-color-success">
<img zf-iconic icon="thumb" size="large" class="iconic-color-dark">
</hljs>
</div>
<div class="small-12">
<div class="grid-content">
<img zf-iconic icon="thumb" size="small" class="iconic-color-primary"><span class="icon-label">Small</span> &nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="grid-content">
<img zf-iconic icon="thumb" size="medium" class="iconic-color-success"><span class="icon-label">Medium</span> &nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="grid-content">
<img zf-iconic icon="thumb" size="large" class="iconic-color-secondary"><span class="icon-label">Large</span>
</div>
</div>
</div>

<hr>
<h3>Responsive Icons</h3>
Expand Down Expand Up @@ -229,31 +290,102 @@ <h3>Responsive Icons</h3>
</div>
</div>

<hr>
<h3>Dynamic Icons</h3>
<p>All icons seen to this point have been static. The icon to display and the data attributes to use were hard-coded into the HTML. Sometimes the icon to display needs to be determined programatically. Examples of how to use dynamic icons are shown below. At the end you'll find the controller used for the examples.</p>

<h3>Icon Sizing</h3>
<p>You can affect the size of the icons with our color classes like so:</p>
<h4>Rotating Icon</h4>
<p>This example renders a rotating icon. The icon rotates through 4 different icons, changing every 3 seconds.</p>
<div class="grid-block">
<div class="small-12 grid-content">
<hljs>
<img zf-iconic icon="thumb" size="small" class="iconic-color-primary">
<img zf-iconic icon="thumb" size="medium" class="iconic-color-success">
<img zf-iconic icon="thumb" size="large" class="iconic-color-dark">
</hljs>
<div class="grid-content small-12 medium-6">
<hljs>
<img zf-iconic="" dyn-icon="rotatingIcon.icon" dyn-icon-attrs="rotatingIcon.iconAttrs" size="large"></img>
</hljs>
</div>
<div class="small-12">
<div class="grid-content">
<img zf-iconic icon="thumb" size="small" class="iconic-color-primary"><span class="icon-label">Small</span> &nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="grid-content">
<img zf-iconic icon="thumb" size="medium" class="iconic-color-success"><span class="icon-label">Medium</span> &nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="grid-content">
<img zf-iconic icon="thumb" size="large" class="iconic-color-secondary"><span class="icon-label">Large</span>
</div>
<div class="grid-content small-12 medium-6 text-center">
<img zf-iconic="" dyn-icon="rotatingIcon.icon" dyn-icon-attrs="rotatingIcon.iconAttrs" size="large"></img>
</div>
</div>

<h4>Pre Loaded Icon</h4>
<p>This example sets the icon programatically <strong>BEFORE</strong> the iconic directive is compiled by angular.</p>
<div class="grid-block">
<div class="grid-content small-12 medium-6">
<hljs>
<img zf-iconic="" dyn-icon="staticIcon.icon" dyn-icon-attrs="staticIcon.iconAttrs" size="large"></img>
</hljs>
</div>
<div class="grid-content small-12 medium-6 text-center">
<img zf-iconic="" dyn-icon="staticIcon.icon" dyn-icon-attrs="staticIcon.iconAttrs" size="large"></img>
</div>
</div>

<h4>Delay Loaded Icon</h4>
<p>This example sets the icon programically <strong>AFTER</strong> the iconic directive is compiled by angular. The same method for displaying the icon will not work as with the preloaded icon.</p>
<div class="grid-block">
<div class="grid-content small-12 medium-6">
<hljs>
<img zf-iconic="" dyn-icon="delayLoadedIcon.icon" dyn-icon-attrs="delayLoadedIcon.iconAttrs" size="large"></img>
</hljs>
</div>
<div class="grid-content small-12 medium-6 text-center">
<img zf-iconic="" dyn-icon="delayLoadedIcon.icon" dyn-icon-attrs="delayLoadedIcon.iconAttrs" size="large"></img>
</div>
</div>
<p>One way to fix this is to set a default icon and change the value later. This is similar to how the rotating icon works. Another solution is to use <strong>ng-if</strong> to not have angular render the icon until it is available.</p>
<div class="grid-block">
<div class="grid-content small-12 medium-6">
<hljs>
<img ng-if="delayLoadedIcon" zf-iconic="" dyn-icon="delayLoadedIcon.icon" dyn-icon-attrs="delayLoadedIcon.iconAttrs" size="large"></img>
</hljs>
</div>
<div class="grid-content small-12 medium-6 text-center">
<img ng-if="delayLoadedIcon" zf-iconic="" dyn-icon="delayLoadedIcon.icon" dyn-icon-attrs="delayLoadedIcon.iconAttrs" size="large"></img>
</div>
</div>

<h4>Example Angular Controller</h4>
<hljs>
function IconicController($scope, $timeout) {
var iconNum = 0,
icons = [{
icon: 'account',
iconAttrs: { state: 'login' }
},{
icon: 'account',
iconAttrs: { state: 'logout' }
},{
icon: 'chevron',
iconAttrs: { direction: 'right' }
},{
icon: 'chevron',
iconAttrs: { direction: 'left' }
}];

$scope.rotatingIcon = icons[0];
$scope.staticIcon = icons[0];
$scope.delayLoadedIcon = null;

rotateIcon();
loadIcon();

function rotateIcon() {
$timeout(function() {
if (++iconNum == icons.length) {
iconNum = 0;
}
$scope.rotatingIcon = icons[iconNum];
rotateIcon();
}, 3000);
};

function loadIcon() {
$timeout(function() {
$scope.delayLoadedIcon = icons[0];
}, 3000);
};
}
</hljs>

<hr>
<h3>Customize with Sass</h3>
Expand Down
Loading

0 comments on commit c6194e7

Please sign in to comment.