mirror/devicon
1
0
Fork 0
mirror of https://github.com/konpa/devicon.git synced 2025-08-06 14:46:46 +02:00
Code Issues Releases Wiki Activity

Add a color picker to enhance the devicon.dev ui (#704)

Browse Source 
Co-authored-by: Clemens Bastian <8781699+amacado@users.noreply.github.com>
This commit is contained in:
Thomas Bui
2021-06-30 02:47:26 -07:00
committed by GitHub
parent 1b018fb177
commit d1f8d1736b
3 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/assets/css/style.css
View File

@@ -409,3 +409,9 @@ header {
.footer {
margin-top: 6rem;
text-align: center; }
input[type='color'] {
width: 1.25em;
height: 1.25em;
margin-left: 0.5em;
}

11
docs/assets/js/script.js
View File

@@ -1,4 +1,5 @@
var devicon = angular.module('devicon', ['ngSanitize', 'ngAnimate']);
const DEFAULT_BACKGROUND = "#60be86";
/*
||==============================================================
@@ -34,9 +35,15 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
|-----------------------------------------
*/
// icons related stuff
$scope.icons = [];
$scope.selectedIcon = {};
// background color related stuff
// default is the default site background color
$scope.fontBackground = DEFAULT_BACKGROUND;
$scope.svgBackground = DEFAULT_BACKGROUND;
// Loop through devicon.json
angular.forEach(data, function(devicon, key) {
@@ -95,6 +102,9 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
$scope.selectedFontIndex = 0;
$scope.selectedSvgIcon = $scope.selectSvg(icon.svg[0], 0);
// reset color
$scope.fontBackground = DEFAULT_BACKGROUND;
$scope.svgBackground = DEFAULT_BACKGROUND;
}
/*---- End of "Change selected icon" ----*/
@@ -145,7 +155,6 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
});
}
/*---- End of "Change selected svg icon" ----*/
});
/*================ End of "Devicons controller" ================*/

10
docs/index.html
View File

@@ -54,13 +54,13 @@
<h5>First select an icon on the right, then select the version below and copy/paste the code into your project.</h5>
<ul>
<li>
<h4>Font versions</h4>
<h4>Font versions <input type='color' value='#60be86' ng-model="fontBackground"></h4>
<ul class="icons-list">
<div ng-repeat="fontVersion in selectedIcon.font">
<li ng-click="selectFont(fontVersion, false, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && !colored)}">
<li ng-click="selectFont(fontVersion, false, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && !colored)}" ng-style="{'background-color': fontBackground}">
<i class="devicon-{{selectedIcon.name}}-{{fontVersion}}"></i>
</li>
<li ng-click="selectFont(fontVersion, true, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && colored)}">
<li ng-click="selectFont(fontVersion, true, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && colored)}" ng-style="{'background-color': fontBackground}">
<i class="devicon-{{selectedIcon.name}}-{{fontVersion}} colored"></i>
</li>
</div>
@@ -74,9 +74,9 @@
</div>
</li>
<li>
<h4>SVG versions</h4>
<h4>SVG versions <input type='color' value='#60be86' ng-model="svgBackground"></h4>
<ul class="icons-list">
<li ng-repeat="svgVersion in selectedIcon.svg" ng-click="selectSvg(svgVersion, $index)" ng-class="{'selected-version' : $index == selectedSvgIndex}">
<li ng-repeat="svgVersion in selectedIcon.svg" ng-click="selectSvg(svgVersion, $index)" ng-class="{'selected-version' : $index == selectedSvgIndex}" ng-style="{'background-color': svgBackground}">
<img ng-src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
</li>
</ul>