mirror/devicon
1
0
Fork 0
mirror of https://github.com/konpa/devicon.git synced 2025-08-12 09:34:36 +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": { "ProgrammingLanguages": {
"name": "Programming Languages", "name": "Programming Languages",
"order": 1,
"icons": [ "icons": [
{ {
@@ -46,6 +47,7 @@
"DevelopmentTools": { "DevelopmentTools": {
"name": "Development tools", "name": "Development tools",
"order": 2,
"icons": [ "icons": [
{ {
@@ -125,6 +127,7 @@
"DesigningTools": { "DesigningTools": {
"name": "Designing tools", "name": "Designing tools",
"order": 3,
"icons": [ "icons": [
{ {

19
demo/assets/script.js
View File

@@ -1,8 +1,23 @@
var phonecatApp = angular.module('devicon', []); var devicon = angular.module('devicon', []);
devicon.controller('IconListCtrl', function ($scope, $http) {
phonecatApp.controller('IconListCtrl', function ($scope, $http) {
$http.get('assets/devicon.json').success(function(data) { $http.get('assets/devicon.json').success(function(data) {
$scope.icons = data[0]; $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 @import
"../scss/devicon.scss"; "../scss/devicon.scss";
ul {
margin: 0;
}
.devicons { .devicons {
padding: 3rem 0;
list-style: none; list-style: none;
li { li {
display: inline-block; display: inline-block;
padding: 1rem 2rem; padding: 2rem 3rem;
} }
} }

7
demo/assets/style.css
View File

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

24
demo/index.html
View File

@@ -16,7 +16,7 @@
<script src="assets/components/modernizr.js"></script> <script src="assets/components/modernizr.js"></script>
</head> </head>
<body ng-app="devicon"> <body ng-app="devicon" class="row">
<!--[if lt IE 7]> <!--[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> <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]--> <![endif]-->
@@ -25,15 +25,21 @@
<h1>devicon</h1> <h1>devicon</h1>
</header> --> </header> -->
<main class="main" ng-controller="IconListCtrl"> <main class="main columns large-12" ng-controller="IconListCtrl">
<ul class="devicons" ng-repeat="type in icons"> <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> <h2>{{ type.name }}</h2>
<li ng-repeat="icon in type.icons"> <ul>
<i class="devicon-{{ icon.name }}"></i> <li ng-repeat="icon in type.icons | filter:search | orderBy:'name'" class="">
<i class="devicon-{{ icon.name }}-color"></i> <i class="devicon-{{ icon.name }}{{text}}{{color}}"></i>
<i ng-if="icon.options.text == true" class="devicon-{{ icon.name }}-text"></i> </li>
<i ng-if="icon.options.text == true" class="devicon-{{ icon.name }}-text-color"></i> </ul>
</li>
</ul> </ul>
</main> </main>