loleaflet/css/mobilewizard.css | 10 +--
loleaflet/src/control/ColorPicker.js | 63 ++++++++++++++++++-----
loleaflet/src/control/Control.JSDialogBuilder.js | 2
3 files changed, 59 insertions(+), 16 deletions(-)
New commits:
commit c96e0d7d230eb1b038489c1632bb4c214d96e500
Author: Marco Cecchetti <marco.cecche...@collabora.com>
AuthorDate: Mon Jun 29 11:32:15 2020 +0200
Commit: Andras Timar <andras.ti...@collabora.com>
CommitDate: Mon Jun 29 22:51:42 2020 +0200
leaflet: mobile: color picker has no automatic color control
Change-Id: I97b5e2b3e92c0c98a3835c71cd2d7d5d3b298ae4
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/97393
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
Reviewed-by: Andras Timar <andras.ti...@collabora.com>
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 0d9ef8a62..9cbad6825 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -67,7 +67,7 @@ span#main-menu-btn-icon {
border-radius: 100px;
}
-.no-color-selected {
+.no-color-selected, .auto-color-selected {
text-align: center;
font-size: 30pt;
line-height: 32px;
@@ -106,7 +106,7 @@ span#main-menu-btn-icon {
padding: 0 4%;
}
-.colors-container-no-color-row {
+.colors-container-no-color-row, .colors-container-auto-color-row{
display: flex;
justify-content: space-between;
height: 50px;
@@ -120,19 +120,19 @@ span#main-menu-btn-icon {
padding-bottom: 0px;
}
-.no-color-control-label {
+.no-color-control-label, .auto-color-control-label {
display:table-cell;
padding-left: 4px;
vertical-align: middle;
}
-.no-color-control-mark {
+.no-color-control-mark, .auto-color-control-mark {
color: #0b87e7 !important;
font-size: larger;
line-height: 0;
}
-.no-color-control-icon {
+.no-color-control-icon, .auto-color-control-icon {
display: table-cell;
height: 32px !important;
width: 32px !important;
diff --git a/loleaflet/src/control/ColorPicker.js
b/loleaflet/src/control/ColorPicker.js
index 153356f65..8428dc810 100644
--- a/loleaflet/src/control/ColorPicker.js
+++ b/loleaflet/src/control/ColorPicker.js
@@ -10,6 +10,7 @@ L.ColorPicker = L.Class.extend({
options: {
selectedColor: '#ff0000',
noColorControl: true,
+ autoColorControl: false,
selectionCallback: function () {}
},
@@ -55,10 +56,15 @@ L.ColorPicker = L.Class.extend({
initialize: function (selectedColorSample, options) {
L.setOptions(this, options);
+ if (this.options.noColorControl &&
this.options.autoColorControl) {
+ this.options.autoColorControl = false;
+ console.warn('L.ColorPicker: requested both no color
and auto color control');
+ }
this._id = L.ColorPicker.ID++;
this._basicColorSampleIdTag = L.ColorPicker.ID_TAG + this._id +
'-basic-color-';
this._tintSampleIdTag = L.ColorPicker.ID_TAG + this._id +
'-tint-';
this._noColorControlId = L.ColorPicker.ID_TAG + this._id +
'-no-color';
+ this._autoColorControlId = L.ColorPicker.ID_TAG + this._id +
'-auto-color';
this._createBasicColorSelectionMark();
this._selectedColorElement = selectedColorSample;
this._selectedColor = this.options.selectedColor;
@@ -105,26 +111,31 @@ L.ColorPicker = L.Class.extend({
_createControl: function () {
var children = [];
- if (this.options.noColorControl)
- children.push(this._createNoColorControl());
+ if (this.options.noColorControl ||
this.options.autoColorControl)
+ children.push(this._createPseudoColorControl());
children.push(this._createBasicColorSamples());
children.push(this._createTintSamples());
return {type: 'divcontainer', style: 'colors-container',
children: children};
},
- _createNoColorControl: function () {
+ _createPseudoColorControl: function () {
+ var noColorControl = this.options.noColorControl;
var icon = {
type: 'fixedtext',
text: '',
- style: 'no-color-control-icon'
+ style: noColorControl ? 'no-color-control-icon' :
'auto-color-control-icon'
};
- var label = {type: 'fixedtext', style:
'no-color-control-label', text: _('No color')};
+ var label =
+ noColorControl ? {type: 'fixedtext', style:
'no-color-control-label', text: _('No color')}
+ : {type: 'fixedtext',
style: 'auto-color-control-label', text: _('Automatic color')};
var description = {type: 'divcontainer', children: [icon,
label]};
- var checked = {type:'fixedtext', id: this._noColorControlId,
style: 'no-color-control-mark', text: ''};
+ var checked =
+ noColorControl ? {type:'fixedtext', id:
this._noColorControlId, style: 'no-color-control-mark', text: ''}
+ : {type:'fixedtext',
id: this._autoColorControlId, style: 'auto-color-control-mark', text: ''};
var container = {
type: 'divcontainer',
- style: 'colors-container-no-color-row',
- handlers: [{event: 'click', handler:
L.bind(this.onClickNoColor, this)}],
+ style: noColorControl ? 'colors-container-no-color-row'
: 'colors-container-auto-color-row',
+ handlers: [{event: 'click', handler:
L.bind(this.onClickPseudoColor, this)}],
children: [description, checked]
};
return container;
@@ -230,10 +241,11 @@ L.ColorPicker = L.Class.extend({
return sampleElem.name;
},
- onClickNoColor: function () {
+ onClickPseudoColor: function () {
this._selectedColor = '#';
this._unselectSample(this._selectedTintIndex,
L.ColorPicker.TINT);
- this._updateNoColorControl(true);
+ this._updatePseudoColorControl(true);
+ // transparent is fine for both no color and automatic color
this._selectionCallback('transparent');
},
@@ -256,7 +268,7 @@ L.ColorPicker = L.Class.extend({
_selectTintIndex: function (tintIndex) {
this._selectedTintIndex = this._updateSelectedSample(tintIndex,
this._selectedTintIndex, L.ColorPicker.TINT);
this._selectedColor = '#' +
this._getColorCode(this._selectedTintIndex, L.ColorPicker.TINT);
- this._updateNoColorControl(false);
+ this._updatePseudoColorControl(false);
this._updateSelectedColorElement();
this._selectionCallback(this._getColorCode(this._selectedTintIndex,
L.ColorPicker.TINT));
},
@@ -313,6 +325,13 @@ L.ColorPicker = L.Class.extend({
}
},
+ _updatePseudoColorControl: function (checked) {
+ if (this.options.noColorControl)
+ this._updateNoColorControl(checked);
+ else if (this.options.autoColorControl)
+ this._updateAutoColorControl(checked);
+ },
+
_updateNoColorControl: function (checked) {
var noColorElem = L.DomUtil.get(this._noColorControlId);
if (noColorElem) {
@@ -335,6 +354,28 @@ L.ColorPicker = L.Class.extend({
}
},
+ _updateAutoColorControl: function (checked) {
+ var autoColorElem = L.DomUtil.get(this._autoColorControlId);
+ if (autoColorElem) {
+ if (autoColorElem.checked !== checked) {
+ autoColorElem.checked = checked;
+ if (this._selectedColorElement) {
+ if (checked) {
+ autoColorElem.innerHTML =
'✔';
+ // update value for the related
menu entry
+
L.DomUtil.addClass(this._selectedColorElement, 'auto-color-selected');
+
this._selectedColorElement.innerHTML = '\\';
+ } else {
+ autoColorElem.innerHTML = '';
+ // update value for the related
menu entry
+
L.DomUtil.removeClass(this._selectedColorElement, 'auto-color-selected');
+
this._selectedColorElement.innerHTML = '';
+ }
+ }
+ }
+ }
+ },
+
_getSampleElement: function (index, type) {
var sampleId;
if (type === L.ColorPicker.BASIC_COLOR) {
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js
b/loleaflet/src/control/Control.JSDialogBuilder.js
index 2542e707b..ba6ee8fce 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -1916,6 +1916,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
var iconPath = builder._createIconURL(data.command);
var noColorControl = (data.command !== '.uno:FontColor' &&
data.command !== '.uno:Color');
+ var autoColorControl = (data.command === '.uno:FontColor' ||
data.command === '.uno:Color');
var callback = function(color) {
builder._sendColorCommand(builder, data, color);
@@ -1926,6 +1927,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
{
selectedColor: selectedColor,
noColorControl: noColorControl,
+ autoColorControl: autoColorControl,
selectionCallback: callback
});
builder._colorPickers.push(colorPickerControl);
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
