Replace angular-bootstrap-colorpicker with EuiColorPicker (#17222)
* remove angular-bootstrap-colorpicker * add form-control class to make things like better
This commit is contained in:
parent
ef4145837e
commit
4ca65024ab
|
@ -89,7 +89,6 @@
|
|||
"accept-language-parser": "1.2.0",
|
||||
"angular": "1.6.5",
|
||||
"angular-aria": "1.6.6",
|
||||
"angular-bootstrap-colorpicker": "3.0.19",
|
||||
"angular-elastic": "2.5.0",
|
||||
"angular-route": "1.4.7",
|
||||
"angular-sanitize": "1.5.7",
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
|
||||
import 'ui/field_format_editor';
|
||||
import 'angular-bootstrap-colorpicker';
|
||||
import 'angular-bootstrap-colorpicker/css/colorpicker.css';
|
||||
import _ from 'lodash';
|
||||
import { RegistryFieldFormatsProvider } from 'ui/registry/field_formats';
|
||||
import { IndexPatternsFieldProvider } from 'ui/index_patterns/_field';
|
||||
|
@ -18,7 +16,7 @@ import {
|
|||
import { getKbnTypeNames } from '../../../utils';
|
||||
|
||||
uiModules
|
||||
.get('kibana', ['colorpicker.module'])
|
||||
.get('kibana')
|
||||
.directive('fieldEditor', function (Private, $sce, confirmModal, config) {
|
||||
const getConfig = (...args) => config.get(...args);
|
||||
const fieldFormats = Private(RegistryFieldFormatsProvider);
|
||||
|
|
|
@ -30,23 +30,21 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<label for="scriptFieldColorFont">Font Color</label>
|
||||
<input
|
||||
<color-picker
|
||||
id="scriptFieldColorFont"
|
||||
ng-model="color.text"
|
||||
colorpicker
|
||||
type="text"
|
||||
on-change="getSetTextColor($index)"
|
||||
color="color.text"
|
||||
class="form-control"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="scriptFieldColorBackground">Background Color</label>
|
||||
<input
|
||||
<color-picker
|
||||
id="scriptFieldColorBackground"
|
||||
ng-model="color.background"
|
||||
colorpicker
|
||||
type="text"
|
||||
on-change="getSetBackgroundColor($index)"
|
||||
color="color.background"
|
||||
class="form-control"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="scriptFieldColorExample">Example</label>
|
||||
|
|
|
@ -18,6 +18,31 @@ export function colorEditor() {
|
|||
$scope.removeColor = function (index) {
|
||||
$scope.editor.formatParams.colors.splice(index, 1);
|
||||
};
|
||||
|
||||
$scope.setColor = function (index, propName, value) {
|
||||
$scope.editor.formatParams.colors[index][propName] = value;
|
||||
};
|
||||
|
||||
// EuiColorPicker onChange prop expects a function taking a single parameter: 'value'
|
||||
// Updating color in $scope requires other parameters (like colors index).
|
||||
// Use bind to create a function to pass to react.
|
||||
// Must use a single bind and then store the function so react does not infinitely re-render.
|
||||
$scope.getSetBackgroundColor = function (index) {
|
||||
if ($scope.editor.formatParams.colors[index].setBackgroundColor) {
|
||||
return $scope.editor.formatParams.colors[index].setBackgroundColor;
|
||||
}
|
||||
|
||||
$scope.editor.formatParams.colors[index].setBackgroundColor = $scope.setColor.bind(null, index, 'background');
|
||||
return $scope.editor.formatParams.colors[index].setBackgroundColor;
|
||||
};
|
||||
$scope.getSetTextColor = function (index) {
|
||||
if ($scope.editor.formatParams.colors[index].setTextColor) {
|
||||
return $scope.editor.formatParams.colors[index].setTextColor;
|
||||
}
|
||||
|
||||
$scope.editor.formatParams.colors[index].setTextColor = $scope.setColor.bind(null, index, 'text');
|
||||
return $scope.editor.formatParams.colors[index].setTextColor;
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
@ -7,6 +7,7 @@ import {
|
|||
import {
|
||||
EuiConfirmModal,
|
||||
EuiIcon,
|
||||
EuiColorPicker,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { uiModules } from 'ui/modules';
|
||||
|
@ -18,3 +19,5 @@ app.directive('toolBarSearchBox', reactDirective => reactDirective(KuiToolBarSea
|
|||
app.directive('confirmModal', reactDirective => reactDirective(EuiConfirmModal));
|
||||
|
||||
app.directive('icon', reactDirective => reactDirective(EuiIcon));
|
||||
|
||||
app.directive('colorPicker', reactDirective => reactDirective(EuiColorPicker));
|
||||
|
|
|
@ -324,10 +324,6 @@ angular-aria@1.6.6:
|
|||
version "1.6.6"
|
||||
resolved "https://registry.yarnpkg.com/angular-aria/-/angular-aria-1.6.6.tgz#58dd748e09564bc8409f739bde57b35fbee5b6a5"
|
||||
|
||||
angular-bootstrap-colorpicker@3.0.19:
|
||||
version "3.0.19"
|
||||
resolved "https://registry.yarnpkg.com/angular-bootstrap-colorpicker/-/angular-bootstrap-colorpicker-3.0.19.tgz#557609636b33e1b5c83e2742cbfd0e4ea14c042c"
|
||||
|
||||
angular-elastic@2.5.0:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.yarnpkg.com/angular-elastic/-/angular-elastic-2.5.0.tgz#07736ac290ea955b9fe511aac84020df623c87ec"
|
||||
|
|
Loading…
Reference in a new issue