-
Notifications
You must be signed in to change notification settings - Fork 168
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Support color values in the middle of the variable string
- Loading branch information
Hannu Pelkonen
committed
Nov 24, 2014
1 parent
60a9bc4
commit e7bad9f
Showing
3 changed files
with
76 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
<div> | ||
<label>{{ variable.name }}<i ng-if="variable.dirty" class="fa fa-asterisk"></i></label> | ||
<input class="sg" type="color" ng-if="isColor(variable.value)" ng-model="variable.value"> | ||
<input class="sg" type="color" ng-if="hasColor(variable.value)" ng-model="color.value"> | ||
<input class="sg" type="text" ng-model="variable.value"> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
describe('Variable directive', function() { | ||
var $scope, scope, elem, directive, linkFn, html; | ||
|
||
beforeEach(module('sgApp')); | ||
|
||
beforeEach(function() { | ||
module(function($provide) { | ||
$provide.value('Styleguide', {}); | ||
$provide.value('Variables', { | ||
init: function() {} | ||
}); | ||
}); | ||
}); | ||
|
||
beforeEach(function() { | ||
html = '<div sg-variable></div>'; | ||
|
||
inject(function($compile, $rootScope, $templateCache) { | ||
$templateCache.put('views/partials/variable.html', '<div></div>'); | ||
$scope = $rootScope.$new(); | ||
$scope.variable = { | ||
value: '#000000' | ||
}; | ||
elem = angular.element(html); | ||
$compile(elem)($scope); | ||
$scope.$apply(); | ||
}); | ||
|
||
}); | ||
|
||
it('should have correct default value', function() { | ||
expect($scope.color.value).to.eql('#000000'); | ||
}); | ||
|
||
it('should parse color value correctly from the string', function() { | ||
$scope.variable.value = 'test #ff0000 !default'; | ||
$scope.$apply(); | ||
expect($scope.color.value).to.eql('#ff0000'); | ||
}); | ||
|
||
it('should parse only the first color if string has multiple colors', function() { | ||
$scope.variable.value = 'test #ff0000 #cccccc !default'; | ||
$scope.$apply(); | ||
expect($scope.color.value).to.eql('#ff0000'); | ||
}); | ||
|
||
it('replace color in the original string correctly', function() { | ||
$scope.variable.value = 'test #ff0000 !default'; | ||
$scope.$apply(); | ||
$scope.color.value = '#cccccc'; | ||
$scope.$apply(); | ||
expect($scope.variable.value).to.eql('test #cccccc !default'); | ||
}); | ||
}); |