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

Add option to rename colorpicker labels (#3121)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2018-10-04 08:36:21 +02:00
committed by Sebastiaan Janssen
parent deca5d7bdb
commit 7355ba4b23
3 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/less/property-editors.less
+11 -8
View File
@@ -144,11 +144,14 @@ div.umb-codeeditor .umb-btn-toolbar {
/* pre-value editor */ /* pre-value editor */
.control-group.color-picker-preval { .control-group.color-picker-preval {
.thumbnail { .thumbnail {
width: 36px; width: 34px;
height: 34px;
min-width: auto; min-width: auto;
border: none; border: none;
cursor: move; cursor: move;
border-radius: 3px; border-radius: 3px;
margin-top: auto;
margin-bottom: auto;
} }
.handle { .handle {
@@ -160,19 +163,19 @@ div.umb-codeeditor .umb-btn-toolbar {
div.color-picker-prediv { div.color-picker-prediv {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
max-width: 85%; max-width: 100%;
flex: 1;
pre { pre {
display: inline-flex; display: inline-flex;
font-family: monospace; font-family: monospace;
margin-right: 10px; margin-left: 15px;
margin-left: 10px; margin-right: 15px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
padding-top: 7px; padding: 6px 10px;
padding-bottom: 7px;
background: #f7f7f7; background: #f7f7f7;
flex: 0 0 auto; flex: 0 0 auto;
} }
@@ -201,11 +204,11 @@ div.umb-codeeditor .umb-btn-toolbar {
label { label {
border: 1px solid #fff; border: 1px solid #fff;
padding: 7px 10px; padding: 6px 10px;
font-family: monospace; font-family: monospace;
border: 1px solid #dfdfe1; border: 1px solid #dfdfe1;
background: #f7f7f7; background: #f7f7f7;
margin: 0 15px 0 0; margin: 0 15px 0 3px;
border-radius: 3px; border-radius: 3px;
} }
} }
src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
+8 -4
View File
@@ -3,18 +3,22 @@
<div class="umb-prevalues-multivalues__left"> <div class="umb-prevalues-multivalues__left">
<input name="newColor" type="hidden" /> <input name="newColor" type="hidden" />
<label for="newColor" val-highlight="{{hasError}}">#{{newColor}}</label> <label for="newColor" val-highlight="{{hasError}}">#{{newColor}}</label>
<input name="newLabel" type="text" ng-model="newLabel" class="umb-editor color-label" placeholder="Label" ng-show="labelEnabled" /> <input name="newLabel" type="text" ng-model="newLabel" focus-when="{{focusOnNew}}" class="umb-editor color-label" placeholder="Label" ng-show="labelEnabled" />
</div> </div>
<div class="umb-prevalues-multivalues__right"> <div class="umb-prevalues-multivalues__right">
<button class="btn btn-info add" ng-click="add($event)"><localize key="general_add">Add</localize></button> <button class="btn btn-info add" ng-click="add($event)"><localize key="general_add">Add</localize></button>
</div> </div>
</div> </div>
<div ui-sortable="sortableOptions" ng-model="model.value"> <div ui-sortable="sortableOptions" ng-model="model.value">
<div class="control-group umb-prevalues-multivalues__listitem color-picker-preval" ng-repeat="item in model.value"> <div class="control-group umb-prevalues-multivalues__listitem color-picker-preval" ng-repeat="item in model.value track by $id(item)">
<i class="icon icon-navigation handle"></i> <i class="icon icon-navigation handle"></i>
<div class="umb-prevalues-multivalues__left"> <div class="umb-prevalues-multivalues__left">
<div class="thumbnail span1" hex-bg-color="{{item.value}}" bg-orig="transparent"></div> <div class="thumbnail span1" hex-bg-color="{{item.value}}" hex-bg-orig="transparent"></div>
<div class="color-picker-prediv"><pre>#{{item.value}}</pre><span>{{item.label}}</span></div> <div class="color-picker-prediv">
<pre>#{{item.value}}</pre>
<span ng-bind="item.value" ng-if="!labelEnabled"></span>
<input type="text" ng-if="labelEnabled" ng-model="item.label" val-server="item_{{$index}}" required />
</div>
</div> </div>
<div class="umb-prevalues-multivalues__right"> <div class="umb-prevalues-multivalues__right">
<a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></a> <a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></a>
src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
+4 -2
View File
@@ -5,8 +5,9 @@
var defaultLabel = null; var defaultLabel = null;
$scope.newColor = defaultColor; $scope.newColor = defaultColor;
$scope.newLavel = defaultLabel; $scope.newLabel = defaultLabel;
$scope.hasError = false; $scope.hasError = false;
$scope.focusOnNew = false;
$scope.labels = {}; $scope.labels = {};
@@ -104,7 +105,6 @@
}; };
$scope.add = function (evt) { $scope.add = function (evt) {
evt.preventDefault(); evt.preventDefault();
if ($scope.newColor) { if ($scope.newColor) {
@@ -117,7 +117,9 @@
value: $scope.newColor, value: $scope.newColor,
label: newLabel label: newLabel
}); });
$scope.newLabel = "";
$scope.hasError = false; $scope.hasError = false;
$scope.focusOnNew = true;
return; return;
} }