Colorpicker improvements (#5002)
* add readonly and disabled support to colorpicker * add support for attributes in colorpicker widget * Hide default options is disabled and readonly state. Modify styling to be more inline with spectrum disabled state
This commit is contained in:
Klaas Poortinga
GitHub
parent
2ad046f7ae
commit
280ae00b88
|
|
@ -43,6 +43,16 @@ class ColorPicker extends FormWidgetBase
|
|||
*/
|
||||
public $showAlpha = false;
|
||||
|
||||
/**
|
||||
* @var bool If true, the color picker is set to read-only mode
|
||||
*/
|
||||
public $readOnly = false;
|
||||
|
||||
/**
|
||||
* @var bool If true, the color picker is set to disabled mode
|
||||
*/
|
||||
public $disabled = false;
|
||||
|
||||
//
|
||||
// Object properties
|
||||
//
|
||||
|
|
@ -61,6 +71,8 @@ class ColorPicker extends FormWidgetBase
|
|||
'availableColors',
|
||||
'allowEmpty',
|
||||
'showAlpha',
|
||||
'readOnly',
|
||||
'disabled',
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
@ -83,6 +95,8 @@ class ColorPicker extends FormWidgetBase
|
|||
$this->vars['availableColors'] = $availableColors = $this->getAvailableColors();
|
||||
$this->vars['allowEmpty'] = $this->allowEmpty;
|
||||
$this->vars['showAlpha'] = $this->showAlpha;
|
||||
$this->vars['readOnly'] = $this->readOnly;
|
||||
$this->vars['disabled'] = $this->disabled;
|
||||
$this->vars['isCustomColor'] = !in_array($value, $availableColors);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,17 @@
|
|||
.field-colorpicker >ul li.custom-color:hover span,
|
||||
.field-colorpicker >ul li.custom-color.active span {border-style:solid}
|
||||
.field-colorpicker >ul li.custom-color:before {text-indent:0;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;content:"\f0d8";display:block;text-align:center;color:#000;background:#e0e0e0;font-size:9px;height:9px;line-height:9px;width:9px;position:absolute;bottom:3px;right:3px}
|
||||
.field-colorpicker.disabled >ul li:hover {cursor:not-allowed;background-color:transparent}
|
||||
.field-colorpicker.disabled >ul li:hover span {border:1px solid #cecece}
|
||||
.field-colorpicker.disabled >ul li.active {background-color:transparent}
|
||||
.field-colorpicker.disabled >ul li.custom-color {position:relative}
|
||||
.field-colorpicker.disabled >ul li.custom-color span {border-style:dashed}
|
||||
.field-colorpicker.disabled >ul li.custom-color span.disabled.is-empty:before,
|
||||
.field-colorpicker.disabled >ul li.custom-color span.disabled.is-empty:after {position:absolute;left:15px;content:' ';height:24px;width:1px;background-color:#cecece}
|
||||
.field-colorpicker.disabled >ul li.custom-color span.disabled.is-empty:before {transform:rotate(45deg)}
|
||||
.field-colorpicker.disabled >ul li.custom-color span.disabled.is-empty:after {transform:rotate(-45deg)}
|
||||
.field-colorpicker.disabled >ul li.custom-color:hover span {border-style:dashed}
|
||||
.field-colorpicker.disabled >ul li.custom-color.active span {border:1px solid #cecece}
|
||||
.sp-hue,
|
||||
.sp-slider {cursor:row-resize}
|
||||
.sp-color,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* ColorPicker plugin
|
||||
*
|
||||
*
|
||||
* Data attributes:
|
||||
* - data-control="colorpicker" - enables the plugin on an element
|
||||
* - data-data-locker="input#locker" - Input element to store and restore the chosen color
|
||||
|
|
@ -28,7 +28,8 @@
|
|||
ColorPicker.DEFAULTS = {
|
||||
showAlpha: false,
|
||||
allowEmpty: false,
|
||||
dataLocker: null
|
||||
dataLocker: null,
|
||||
disabled: false
|
||||
}
|
||||
|
||||
ColorPicker.prototype.init = function() {
|
||||
|
|
@ -39,10 +40,12 @@
|
|||
this.$customColorSpan = $('>span', this.$customColor)
|
||||
this.originalColor = this.$customColor.data('hexColor')
|
||||
|
||||
this.$colorList.on('click', '>li', function(){
|
||||
self.selectColor(this)
|
||||
self.$dataLocker.trigger('change')
|
||||
})
|
||||
if (!this.options.disabled) {
|
||||
this.$colorList.on('click', '>li', function(){
|
||||
self.selectColor(this)
|
||||
self.$dataLocker.trigger('change')
|
||||
})
|
||||
}
|
||||
|
||||
/*
|
||||
* Custom color
|
||||
|
|
@ -57,6 +60,7 @@
|
|||
chooseText: $.oc.lang.get('colorpicker.choose', 'Ok'),
|
||||
cancelText: '⨯',
|
||||
appendTo: 'parent',
|
||||
disabled: this.options.disabled,
|
||||
hide: function(color) {
|
||||
var hex = color ? color.toHexString() : ''
|
||||
self.$customColorSpan.css('background', hex)
|
||||
|
|
|
|||
|
|
@ -69,6 +69,61 @@
|
|||
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
> ul {
|
||||
li {
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
|
||||
span {
|
||||
border: 1px solid @color-colorpicker-border;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.custom-color {
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
border-style: dashed;
|
||||
|
||||
&.disabled.is-empty {
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
content: ' ';
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
background-color: #cecece;
|
||||
}
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
border-style: dashed;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
span {
|
||||
border: 1px solid @color-colorpicker-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -3,26 +3,32 @@
|
|||
<?php else: ?>
|
||||
<div
|
||||
id="<?= $this->getId() ?>"
|
||||
class="field-colorpicker"
|
||||
class="field-colorpicker <?php if($readOnly || $disabled): ?>disabled<?php endif; ?>"
|
||||
data-control="colorpicker"
|
||||
<?php if ($showAlpha): ?>data-show-alpha="<?= $showAlpha ?>"<?php endif ?>
|
||||
<?php if ($allowEmpty): ?>data-allow-empty="<?= $allowEmpty ?>"<?php endif ?>
|
||||
data-data-locker="#<?= $this->getId('input') ?>">
|
||||
data-data-locker="#<?= $this->getId('input') ?>"
|
||||
<?php if ($readOnly || $disabled): ?>data-disabled="true"<?php endif; ?>
|
||||
<?= $this->formField->getAttributes() ?>>
|
||||
|
||||
<ul>
|
||||
<?php foreach ($availableColors as $index => $color): ?>
|
||||
<li
|
||||
class="<?= $color == $value ? 'active' : null ?>"
|
||||
data-hex-color="<?= $color ?>">
|
||||
<span style="background: <?= $color ?>"><?= $color ?></span>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
<?php if (!$readOnly && !$disabled): ?>
|
||||
<?php foreach ($availableColors as $index => $color): ?>
|
||||
<li
|
||||
class="<?= $color == $value ? 'active' : null ?>"
|
||||
data-hex-color="<?= $color ?>">
|
||||
<span style="background: <?= $color ?>"><?= $color ?></span>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<li
|
||||
class="custom-color <?= $isCustomColor == $value ? 'active' : null ?>"
|
||||
data-hex-color="<?= $isCustomColor ? e($value) : '#ffffff' ?>"
|
||||
data-custom-color>
|
||||
<span style="background: <?= $isCustomColor ? e($value) : '#ffffff' ?>"></span>
|
||||
<span
|
||||
class="<?php if (!$value): ?>is-empty<?php endif; ?> <?php if ($readOnly || $disabled): ?>disabled<?php endif; ?>"
|
||||
style="background: <?= $isCustomColor ? e($value) : '#ffffff' ?>"></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue