yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Proper handling of the selected color

Browse Source
This commit is contained in:
Kenn Jacobsen
2019-01-29 14:52:40 +01:00
committed by Sebastiaan Janssen
parent 4915efbb8d
commit bda8128e93
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
View File

@@ -36,10 +36,14 @@ Use this directive to generate color swatches to pick from.
scope.setColor = function (color, $index, $event) {
scope.selectedColor = color;
if (scope.onSelect) {
scope.onSelect(color, $index, $event);
scope.onSelect(color.color, $index, $event);
$event.stopPropagation();
}
};
scope.isSelectedColor = function (color) {
return scope.selectedColor && color.value === scope.selectedColor.value;
}
}
var directive = {

4
src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
View File

@@ -1,9 +1,9 @@
<div class="umb-color-swatches" ng-class="{ 'with-labels': useLabel }">
<button type="button" class="umb-color-box umb-color-box--{{size}} btn-{{color.value}}" ng-repeat="color in colors" title="{{useLabel || useColorClass ? (color.label || color.value) : ('#' + color.value)}}" hex-bg-inline="{{useColorClass === false}}" hex-bg-color="{{color.value}}" ng-class="{ 'active': color.value === selectedColor }" ng-click="setColor(color.value, $index, $event)">
<button type="button" class="umb-color-box umb-color-box--{{size}} btn-{{color.value}}" ng-repeat="color in colors" title="{{useLabel || useColorClass ? (color.label || color.value) : ('#' + color.value)}}" hex-bg-inline="{{useColorClass === false}}" hex-bg-color="{{color.value}}" ng-class="{ 'active': isSelectedColor(color) }" ng-click="setColor(color, $index, $event)">
<div class="umb-color-box-inner">
<div class="check_circle">
<i class="icon icon-check small" ng-show="selectedColor && color.value === selectedColor.value"></i>
<i class="icon icon-check small" ng-show="isSelectedColor(color)"></i>
</div>
<div class="umb-color-box__label" ng-if="useLabel">
<div class="umb-color-box__name truncate">{{ color.label || color.value }}</div>