yv01p/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

19
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -144,11 +144,14 @@ div.umb-codeeditor .umb-btn-toolbar {
/* pre-value editor */
.control-group.color-picker-preval {
.thumbnail {
width: 36px;
width: 34px;
height: 34px;
min-width: auto;
border: none;
cursor: move;
border-radius: 3px;
margin-top: auto;
margin-bottom: auto;
}
.handle {
@@ -160,19 +163,19 @@ div.umb-codeeditor .umb-btn-toolbar {
div.color-picker-prediv {
display: inline-flex;
align-items: center;
max-width: 85%;
max-width: 100%;
flex: 1;
pre {
display: inline-flex;
font-family: monospace;
margin-right: 10px;
margin-left: 10px;
margin-left: 15px;
margin-right: 15px;
white-space: nowrap;
overflow: hidden;
margin-bottom: 0;
vertical-align: middle;
padding-top: 7px;
padding-bottom: 7px;
padding: 6px 10px;
background: #f7f7f7;
flex: 0 0 auto;
}
@@ -201,11 +204,11 @@ div.umb-codeeditor .umb-btn-toolbar {
label {
border: 1px solid #fff;
padding: 7px 10px;
padding: 6px 10px;
font-family: monospace;
border: 1px solid #dfdfe1;
background: #f7f7f7;
margin: 0 15px 0 0;
margin: 0 15px 0 3px;
border-radius: 3px;
}
}

12
src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
View File

@@ -3,18 +3,22 @@
<div class="umb-prevalues-multivalues__left">
<input name="newColor" type="hidden" />
<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 class="umb-prevalues-multivalues__right">
<button class="btn btn-info add" ng-click="add($event)"><localize key="general_add">Add</localize></button>
</div>
</div>
<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>
<div class="umb-prevalues-multivalues__left">
<div class="thumbnail span1" hex-bg-color="{{item.value}}" bg-orig="transparent"></div>
<div class="color-picker-prediv"><pre>#{{item.value}}</pre><span>{{item.label}}</span></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 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 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>

6
src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
View File

@@ -5,8 +5,9 @@
var defaultLabel = null;
$scope.newColor = defaultColor;
$scope.newLavel = defaultLabel;
$scope.newLabel = defaultLabel;
$scope.hasError = false;
$scope.focusOnNew = false;
$scope.labels = {};
@@ -104,7 +105,6 @@
};
$scope.add = function (evt) {
evt.preventDefault();
if ($scope.newColor) {
@@ -117,7 +117,9 @@
value: $scope.newColor,
label: newLabel
});
$scope.newLabel = "";
$scope.hasError = false;
$scope.focusOnNew = true;
return;
}