Change spectrumpicker to colorpicker in all editors

This commit is contained in:
Enric León
2014-10-28 16:21:16 +01:00
parent 2859eb560c
commit 81fdae3dc4
8 changed files with 12 additions and 23 deletions

View File

@@ -3,7 +3,7 @@
/* Canvasdesigner panel app and controller */
/*********************************************************************************************************/
var app = angular.module("Umbraco.canvasdesigner", ['spectrumcolorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services'])
var app = angular.module("Umbraco.canvasdesigner", ['colorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services'])
.controller("Umbraco.canvasdesignerController", function ($scope, $http, $window, $timeout, $location, dialogService) {

View File

@@ -2,8 +2,8 @@
<div ng-controller="Umbraco.canvasdesigner.background">
<div class="box-slider">
<spectrum colorselected="item.values.color"></spectrum>
</div>
<div colorpicker ng-model="item.values.color"></div>
</div>
<div class="box-slider">
<div class="imagePickerPreview" ng-click="open(item.values)" style="background-image:{{ item.values.imageorpattern }}">

View File

@@ -10,7 +10,7 @@ angular.module("Umbraco.canvasdesigner")
if (!$scope.item.values) {
$scope.item.values = {
imageorpattern: '',
color:''
color: ''
};
}

View File

@@ -4,12 +4,11 @@
<div class="box-slider">
<ul class="box-preview">
<li ng-repeat="border in borderList" class="border-{{border}}" ng-class="{selected: selectedBorder.name == border}" ng-click="setselectedBorder(border)"></li>
</ul>
</div>
<div class="box-slider">
<spectrum colorselected="selectedBorder.color"></spectrum>
<div class="box-slider" ng-repeat="border in borderList" ng-show="selectedBorder.name == border">
<div colorpicker ng-model="item.values[(border !== 'all' ? border : '') + 'bordercolor']"></div>
<select class="borderStyleSelect" ng-model="selectedBorder.type" ng-options="bordertype for bordertype in bordertypes"></select>
<!--<i ng-if="selectedBorder.color != ''" ng-click="selectedBorder.color= ''" class="icon icon-delete colorPickerDelete"></i>-->
</div>

View File

@@ -92,35 +92,30 @@ angular.module("Umbraco.canvasdesigner")
$scope.setselectedBorder($scope.borderList[0]);
}, false);
$scope.$watch( "selectedBorder", function () {
$scope.$watch("selectedBorder", function () {
if ($scope.selectedBorder.name == "all") {
$scope.item.values.bordersize = $scope.selectedBorder.size;
$scope.item.values.bordercolor = $scope.selectedBorder.color;
$scope.item.values.bordertype =$scope.selectedBorder.type;
$scope.item.values.bordertype = $scope.selectedBorder.type;
}
if ($scope.selectedBorder.name == "left") {
$scope.item.values.leftbordersize = $scope.selectedBorder.size;
$scope.item.values.leftbordercolor = $scope.selectedBorder.color;
$scope.item.values.leftbordertype = $scope.selectedBorder.type;
}
if ($scope.selectedBorder.name == "right") {
$scope.item.values.rightbordersize = $scope.selectedBorder.size;
$scope.item.values.rightbordercolor = $scope.selectedBorder.color;
$scope.item.values.rightbordertype = $scope.selectedBorder.type;
}
if ($scope.selectedBorder.name == "top") {
$scope.item.values.topbordersize = $scope.selectedBorder.size;
$scope.item.values.topbordercolor = $scope.selectedBorder.color;
$scope.item.values.topbordertype = $scope.selectedBorder.type;
}
if ($scope.selectedBorder.name == "bottom") {
$scope.item.values.bottombordersize = $scope.selectedBorder.size;
$scope.item.values.bottombordercolor = $scope.selectedBorder.color;
$scope.item.values.bottombordertype = $scope.selectedBorder.type;
}

View File

@@ -1,8 +1,3 @@
<div ng-controller="Umbraco.canvasdesigner.color">
<div class="box-slider">
<spectrum colorselected="item.values.color"></spectrum>
</div>
<div class="box-slider">
<div colorpicker ng-model="item.values.color"></div>
</div>

View File

@@ -9,7 +9,7 @@ angular.module("Umbraco.canvasdesigner")
if (!$scope.item.values) {
$scope.item.values = {
color: '',
color: ''
};
}

View File

@@ -1027,7 +1027,7 @@ iframe {
height: 24px;
}
.bordereditor .spectrumcolorpicker {
.bordereditor .color-picker-preview {
display: inline-block;
width: 120px;
float: left;