U4-11588 - Adjustments of color picker (#2864)
This commit is contained in:
Bjarne Fyrstenborg
committed by
Sebastiaan Janssen
Sebastiaan Janssen
parent
25aa74b4cd
commit
865cdc09c6
@@ -11,32 +11,36 @@ function hexBgColor() {
|
||||
restrict: "A",
|
||||
link: function (scope, element, attr, formCtrl) {
|
||||
|
||||
var origColor = null;
|
||||
if (attr.hexBgOrig) {
|
||||
//set the orig based on the attribute if there is one
|
||||
origColor = attr.hexBgOrig;
|
||||
}
|
||||
|
||||
attr.$observe("hexBgColor", function (newVal) {
|
||||
if (newVal) {
|
||||
if (!origColor) {
|
||||
//get the orig color before changing it
|
||||
origColor = element.css("border-color");
|
||||
}
|
||||
//validate it - test with and without the leading hash.
|
||||
if (/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
|
||||
element.css("background-color", "#" + newVal);
|
||||
return;
|
||||
}
|
||||
if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
|
||||
element.css("background-color", newVal);
|
||||
return;
|
||||
}
|
||||
}
|
||||
element.css("background-color", origColor);
|
||||
});
|
||||
// Only add inline hex background color if defined and not "true".
|
||||
if (attr.hexBgInline === undefined || (attr.hexBgInline !== undefined && attr.hexBgInline === "true")) {
|
||||
|
||||
var origColor = null;
|
||||
if (attr.hexBgOrig) {
|
||||
// Set the orig based on the attribute if there is one.
|
||||
origColor = attr.hexBgOrig;
|
||||
}
|
||||
|
||||
attr.$observe("hexBgColor", function (newVal) {
|
||||
if (newVal) {
|
||||
if (!origColor) {
|
||||
// Get the orig color before changing it.
|
||||
origColor = element.css("border-color");
|
||||
}
|
||||
// Validate it - test with and without the leading hash.
|
||||
if (/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
|
||||
element.css("background-color", "#" + newVal);
|
||||
return;
|
||||
}
|
||||
if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
|
||||
element.css("background-color", newVal);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
element.css("background-color", origColor);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
angular.module('umbraco.directives').directive("hexBgColor", hexBgColor);
|
||||
angular.module('umbraco.directives').directive("hexBgColor", hexBgColor);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
|
||||
/**
|
||||
/**
|
||||
@ngdoc directive
|
||||
@name umbraco.directives.directive:umbColorSwatches
|
||||
@restrict E
|
||||
@@ -15,9 +14,10 @@ Use this directive to generate color swatches to pick from.
|
||||
</umb-color-swatches>
|
||||
</pre>
|
||||
@param {array} colors (<code>attribute</code>): The array of colors.
|
||||
@param {string} colors (<code>attribute</code>): The array of colors.
|
||||
@param {string} selectedColor (<code>attribute</code>): The selected color.
|
||||
@param {string} size (<code>attribute</code>): The size (s, m).
|
||||
@param {string} useLabel (<code>attribute</code>): Specify if labels should be used.
|
||||
@param {string} useColorClass (<code>attribute</code>): Specify if color values are css classes.
|
||||
@param {function} onSelect (<code>expression</code>): Callback function when the item is selected.
|
||||
**/
|
||||
|
||||
@@ -28,6 +28,11 @@ Use this directive to generate color swatches to pick from.
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
// Set default to true if not defined
|
||||
if (angular.isUndefined(scope.useColorClass)) {
|
||||
scope.useColorClass = false;
|
||||
}
|
||||
|
||||
scope.setColor = function (color) {
|
||||
//scope.selectedColor({color: color });
|
||||
scope.selectedColor = color;
|
||||
@@ -47,7 +52,9 @@ Use this directive to generate color swatches to pick from.
|
||||
colors: '=?',
|
||||
size: '@',
|
||||
selectedColor: '=',
|
||||
onSelect: '&'
|
||||
onSelect: '&',
|
||||
useLabel: '=',
|
||||
useColorClass: '=?'
|
||||
},
|
||||
link: link
|
||||
};
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
.umb-prevalues-multivalues__left {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.umb-prevalues-multivalues__right {
|
||||
|
||||
@@ -1,18 +1,22 @@
|
||||
.umb-color-swatches {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.umb-color-box {
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
border-radius: 3px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: box-shadow .3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover, &:focus {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
@@ -34,4 +38,55 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.with-labels {
|
||||
|
||||
.umb-color-box {
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.umb-color-box-inner {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
min-height: 80px;
|
||||
padding-top: 10px;
|
||||
|
||||
.umb-color-box__label {
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
flex: 0 0 100%;
|
||||
padding: 1px 5px;
|
||||
max-width: 100%;
|
||||
margin-top: auto;
|
||||
margin-bottom: -3px;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
text-indent: 0;
|
||||
text-align: left;
|
||||
border: 1px solid @gray-8;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
overflow: hidden;
|
||||
|
||||
.umb-color-box__name {
|
||||
color: @black;
|
||||
font-weight: bold;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.umb-color-box__description {
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
color: @gray-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -133,33 +133,6 @@ div.umb-codeeditor .umb-btn-toolbar {
|
||||
//
|
||||
// Color picker
|
||||
// --------------------------------------------------
|
||||
ul.color-picker li {
|
||||
padding: 2px;
|
||||
margin: 3px;
|
||||
border: 2px solid transparent;
|
||||
width: 60px;
|
||||
|
||||
&.active {
|
||||
.check_circle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail{
|
||||
min-width: auto;
|
||||
width: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
height: 50px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor:pointer;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* pre-value editor */
|
||||
.control-group.color-picker-preval {
|
||||
@@ -180,7 +153,7 @@ ul.color-picker li {
|
||||
div.color-picker-prediv {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 80%;
|
||||
max-width: 85%;
|
||||
|
||||
pre {
|
||||
display: inline-flex;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
<div ng-controller="Umbraco.Overlays.IconPickerOverlay">
|
||||
|
||||
<div class="umb-control-group">
|
||||
@@ -17,7 +15,11 @@
|
||||
</div>
|
||||
|
||||
<div class="umb-control-group">
|
||||
<umb-color-swatches colors="colors" selected-color="color" size="s"></umb-color-swatches>
|
||||
<umb-color-swatches colors="colors"
|
||||
selected-color="color"
|
||||
size="s"
|
||||
use-color-class="true">
|
||||
</umb-color-swatches>
|
||||
</div>
|
||||
|
||||
<umb-load-indicator ng-if="loading"></umb-load-indicator>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
<div class="umb-color-swatches">
|
||||
<div class="umb-color-swatches" ng-class="{ 'with-labels': useLabel }">
|
||||
|
||||
<button class="umb-color-box umb-color-box--{{size}} btn-{{color.value}}" ng-repeat="color in colors" title="{{color.name}}" ng-class="{active:color.value === selectedColor}" ng-click="setColor(color.value)">
|
||||
<div class="check_circle">
|
||||
<i class="icon icon-check small"></i>
|
||||
<button type="button" class="umb-color-box umb-color-box--{{size}} btn-{{color.value}}" ng-repeat="color in colors" title="{{color.label}}" hex-bg-inline="{{useColorClass === false}}" hex-bg-color="{{color.value}}" ng-class="{ 'active': color.value === selectedColor }" ng-click="setColor(color.value)">
|
||||
<div class="umb-color-box-inner">
|
||||
<div class="check_circle">
|
||||
<i class="icon icon-check small"></i>
|
||||
</div>
|
||||
<div class="umb-color-box__label" ng-if="useLabel">
|
||||
<div class="umb-color-box__name truncate">{{ color.label }}</div>
|
||||
<div class="umb-color-box__description">#{{ color.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
|
||||
@@ -1,20 +1,15 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
|
||||
|
||||
<div ng-if="!isConfigured" >
|
||||
<localize key="colorpicker_noColors">You haven't defined any colors</localize>
|
||||
</div>
|
||||
<div ng-if="!isConfigured">
|
||||
<localize key="colorpicker_noColors">You haven't defined any colors</localize>
|
||||
</div>
|
||||
|
||||
<ul class="thumbnails color-picker">
|
||||
<li ng-repeat="(key, val) in model.config.items" ng-class="{active: isActiveColor(val)}">
|
||||
<a ng-click="toggleItem(val)" class="thumbnail" hex-bg-color="{{val.value}}">
|
||||
<div class="check_circle">
|
||||
<i class="icon icon-check small"></i>
|
||||
</div>
|
||||
</a>
|
||||
<span class="color-label" ng-if="model.useLabel" ng-bind="val.label"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<umb-color-swatches colors="model.config.items"
|
||||
selected-color="model.value.value"
|
||||
size="m"
|
||||
use-label="model.useLabel">
|
||||
</umb-color-swatches>
|
||||
|
||||
<input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory"/>
|
||||
<input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory" />
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user