Skip to content

Add a color picker in the header #704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amacado merged 2 commits into from
Jun 30, 2021
Merged

Add a color picker in the header #704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd271a8
Add a color picker in the header
Thomas-Boi Jun 28, 2021
5c8c6d4
Merge branch 'develop' into thomas/colorPicker
amacado Jun 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 10 additions & 1 deletion docs/assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var devicon = angular.module('devicon', ['ngSanitize', 'ngAnimate']);
const DEFAULT_BACKGROUND = "#60be86";

/*
||==============================================================
Expand Down Expand Up @@ -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) {

Expand Down Expand Up @@ -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" ----*/

Expand Down Expand Up @@ -145,7 +155,6 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
});
}
/*---- End of "Change selected svg icon" ----*/

});

/*================ End of "Devicons controller" ================*/
Expand Down
10 changes: 5 additions & 5 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,13 @@ <h3>(Super) Quick Setup</h3>
<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>
Expand All @@ -74,9 +74,9 @@ <h4>Font versions</h4>
</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>
Expand Down