mirror/devicon
1
0
Fork 0
mirror of https://github.com/konpa/devicon.git synced 2025-08-11 09:04:27 +02:00
Code Issues Releases Wiki Activity

Add some controls to demo

Browse Source
This commit is contained in:
Julien Monty
2014-03-02 22:16:09 +01:00
parent db76ee9081
commit 96252550e6
5 changed files with 48 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demo/assets/devicon.json
View File

@@ -2,6 +2,7 @@
"ProgrammingLanguages": {
"name": "Programming Languages",
"order": 1,
"icons": [
{
@@ -46,6 +47,7 @@
"DevelopmentTools": {
"name": "Development tools",
"order": 2,
"icons": [
{
@@ -125,6 +127,7 @@
"DesigningTools": {
"name": "Designing tools",
"order": 3,
"icons": [
{

21
demo/assets/script.js
View File

@@ -1,8 +1,23 @@
var phonecatApp = angular.module('devicon', []);
var devicon = angular.module('devicon', []);
phonecatApp.controller('IconListCtrl', function ($scope, $http) {
devicon.controller('IconListCtrl', function ($scope, $http) {
$http.get('assets/devicon.json').success(function(data) {
$scope.icons = data[0];
});
});
devicon.filter('toArray', function () {
'use strict';
return function (obj) {
if (!(obj instanceof Object)) {
return obj;
}
return Object.keys(obj).map(function (key) {
return Object.defineProperty(obj[key], '$key', {__proto__: null, value: key});
});
}
});

7
demo/assets/scss/style.scss
View File

@@ -1,11 +1,16 @@
@import
"../scss/devicon.scss";
ul {
margin: 0;
}
.devicons {
padding: 3rem 0;
list-style: none;
li {
display: inline-block;
padding: 1rem 2rem;
padding: 2rem 3rem;
}
}

7
demo/assets/style.css
View File

@@ -316,12 +316,17 @@
color: #faa625;
}
ul {
margin: 0;
}
.devicons {
padding: 3rem 0;
list-style: none;
}
.devicons li {
display: inline-block;
padding: 1rem 2rem;
padding: 2rem 3rem;
}
i {

24
demo/index.html
View File

@@ -16,7 +16,7 @@
<script src="assets/components/modernizr.js"></script>
</head>
<body ng-app="devicon">
<body ng-app="devicon" class="row">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
@@ -25,15 +25,21 @@
<h1>devicon</h1>
</header> -->
<main class="main" ng-controller="IconListCtrl">
<ul class="devicons" ng-repeat="type in icons">
<main class="main columns large-12" ng-controller="IconListCtrl">
<label>Search icon
<input type="text" placeholder="Search icon" ng-model="search">
</label>
<label>Options</label>
<input id="color" type="checkbox" ng-true-value="-color" ng-false-value="" ng-model="color"><label for="color">Color</label>
<input id="text" type="checkbox" ng-true-value="-text" ng-false-value="" ng-model="text"><label for="text">Text</label>
</label>
<ul class="devicons" ng-repeat="type in icons | toArray | orderBy:'order'">
<h2>{{ type.name }}</h2>
<li ng-repeat="icon in type.icons">
<i class="devicon-{{ icon.name }}"></i>
<i class="devicon-{{ icon.name }}-color"></i>
<i ng-if="icon.options.text == true" class="devicon-{{ icon.name }}-text"></i>
<i ng-if="icon.options.text == true" class="devicon-{{ icon.name }}-text-color"></i>
</li>
<ul>
<li ng-repeat="icon in type.icons | filter:search | orderBy:'name'" class="">
<i class="devicon-{{ icon.name }}{{text}}{{color}}"></i>
</li>
</ul>
</ul>
</main>