loleaflet/css/toolbar.css | 18 ++-------
loleaflet/src/control/ColorPicker.js | 46 ++++++++---------------
loleaflet/src/control/Control.JSDialogBuilder.js | 9 ++++
3 files changed, 29 insertions(+), 44 deletions(-)
New commits:
commit 202de19585c11b17639a456c5d080a56816f858b
Author: Marco Cecchetti <marco.cecche...@collabora.com>
AuthorDate: Mon Oct 21 18:31:02 2019 +0200
Commit: Marco Cecchetti <marco.cecche...@collabora.com>
CommitDate: Mon Oct 21 18:31:15 2019 +0200
loleaflet: use an svg icon as selection marker for sample tints
Change-Id: I2e94f0f65a8e7fc0e4883bca855ab23b77c96df8
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index e35d5da52..925c14406 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -1353,11 +1353,8 @@ menu-entry-with-icon.padding-left +
menu-entry-icon.width */
.colors-container-tint-mark {
width: 20px;
height: 20px;
- font-size: medium;
- color: #000 !important;
- background-color: whitesmoke !important;
- text-align: center;
- line-height: 21px;
+ background-image: url('images/icon-set-symbols1-check.svg');
margin-left: auto;
- border-radius: 100px;
+ background-repeat: no-repeat;
+ background-size: auto;
}
diff --git a/loleaflet/src/control/ColorPicker.js
b/loleaflet/src/control/ColorPicker.js
index be8f2c16e..4a820df70 100644
--- a/loleaflet/src/control/ColorPicker.js
+++ b/loleaflet/src/control/ColorPicker.js
@@ -44,7 +44,6 @@ L.ColorPicker = L.Class.extend({
this._tintSampleIdTag = L.ColorPicker.ID_TAG + this._id +
'-tint-';
this._noColorControlId = L.ColorPicker.ID_TAG + this._id +
'-no-color';
this._createBasicColorSelectionMark();
- this._createTintSelectionMark();
this._selectedColorElement = selectedColorSample;
this._selectedColor = this.options.selectedColor;
this._initIndexes();
@@ -140,9 +139,6 @@ L.ColorPicker = L.Class.extend({
size: 'big',
handlers: [{event: 'click', handler:
L.bind(this.onClickTintSample, this)}]
};
- if (selected) {
- entry.mark = this._tintSelectionMark;
- }
tintsEntries1.push(entry);
}
var tintsRow1 = {type: 'divcontainer', style:
'colors-container-tints', children: tintsEntries1};
@@ -158,9 +154,6 @@ L.ColorPicker = L.Class.extend({
size: 'big',
handlers: [{event: 'click', handler:
L.bind(this.onClickTintSample, this)}]
};
- if (selected) {
- entry.mark = this._tintSelectionMark
- }
tintsEntries2.push(entry);
}
var tintsRow2 = {type: 'divcontainer', style:
'colors-container-tints', children: tintsEntries2};
@@ -172,20 +165,6 @@ L.ColorPicker = L.Class.extend({
this._basicColorSelectionMark = L.DomUtil.create('div',
'colors-container-basic-color-mark', null);
},
- _createTintSelectionMark: function () {
- this._tintSelectionMark = L.DomUtil.create('div',
'colors-container-tint-mark', null);
- this._tintSelectionMark.innerHTML = '✔';
- },
-
- _getSelectionMark: function (colorType) {
- if (colorType === L.ColorPicker.BASIC_COLOR)
- return this._basicColorSelectionMark;
- else if (colorType === L.ColorPicker.TINT)
- return this._tintSelectionMark;
- else
- return null;
- },
-
_getBasicColorCount: function () {
return L.ColorPicker.BASIC_COLORS.length;
},
@@ -257,14 +236,22 @@ L.ColorPicker = L.Class.extend({
_unselectSample: function (colorIndex, colorType) {
var sampleElem = this._getSampleElement(colorIndex, colorType);
if (sampleElem && sampleElem.firstChild) {
- sampleElem.removeChild(sampleElem.firstChild);
+ if (colorType === L.ColorPicker.BASIC_COLOR) {
+ sampleElem.removeChild(sampleElem.firstChild);
+ } else if (colorType === L.ColorPicker.TINT) {
+ sampleElem.firstChild.style.visibility =
'hidden';
+ }
}
},
_selectSample: function (colorIndex, colorType) {
var sampleElem = this._getSampleElement(colorIndex, colorType);
if (sampleElem) {
-
sampleElem.appendChild(this._getSelectionMark(colorType));
+ if (colorType === L.ColorPicker.BASIC_COLOR) {
+
sampleElem.appendChild(this._basicColorSelectionMark);
+ } else if (colorType === L.ColorPicker.TINT &&
sampleElem.firstChild) {
+ sampleElem.firstChild.style.visibility =
'visible';
+ }
}
},
@@ -278,10 +265,13 @@ L.ColorPicker = L.Class.extend({
if (sampleElem) {
sampleElem.style.backgroundColor = tint;
sampleElem.name = tint.substring(1);
- if (tint === this._selectedColor) {
-
sampleElem.appendChild(this._getSelectionMark(L.ColorPicker.TINT));
- } else if (sampleElem.firstChild) {
-
sampleElem.removeChild(sampleElem.firstChild);
+ if (sampleElem.firstChild) {
+ if (tint === this._selectedColor) {
+
sampleElem.firstChild.style.visibility = 'visible';
+ }
+ else {
+
sampleElem.firstChild.style.visibility = 'hidden';
+ }
}
}
}
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js
b/loleaflet/src/control/Control.JSDialogBuilder.js
index 4855d2298..997bc51a6 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -653,7 +653,14 @@ L.Control.JSDialogBuilder = L.Control.extend({
colorSample.style.backgroundColor = data.color;
colorSample.name = data.color.substring(1);
- if (data.selected && data.mark) {
+ if (data.size === 'big') {
+ var selectionMarker = L.DomUtil.create('div',
'colors-container-tint-mark', colorSample);
+ if (data.selected) {
+ selectionMarker.style.visibility = 'visible';
+ } else {
+ selectionMarker.style.visibility = 'hidden';
+ }
+ } else if (data.selected && data.mark) {
colorSample.appendChild(data.mark);
}
commit e5035a3911c0d112bb08d47198b5ddf922e29b91
Author: Marco Cecchetti <marco.cecche...@collabora.com>
AuthorDate: Mon Oct 21 14:10:15 2019 +0200
Commit: Marco Cecchetti <marco.cecche...@collabora.com>
CommitDate: Mon Oct 21 18:31:15 2019 +0200
loleaflet: color-picker: selected basic color handled through css only
Change-Id: Ie23513a7f8246f92be08f7fde2d6b74ee3547a09
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index d229d25ce..e35d5da52 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -1347,14 +1347,7 @@ menu-entry-with-icon.padding-left +
menu-entry-icon.width */
}
.colors-container-basic-color-mark {
- width: 10px;
- height: 10px;
- font-size: x-large;
- color: darkslategray !important;
- background-color: transparent !important;
- margin-bottom: 2px;
- margin-left: 7px;
- vertical-align: bottom;
+ /*TODO: please, Pedro set up this one as you suggested on MM*/
}
.colors-container-tint-mark {
diff --git a/loleaflet/src/control/ColorPicker.js
b/loleaflet/src/control/ColorPicker.js
index 71a0e4224..be8f2c16e 100644
--- a/loleaflet/src/control/ColorPicker.js
+++ b/loleaflet/src/control/ColorPicker.js
@@ -170,7 +170,6 @@ L.ColorPicker = L.Class.extend({
_createBasicColorSelectionMark: function () {
this._basicColorSelectionMark = L.DomUtil.create('div',
'colors-container-basic-color-mark', null);
- this._basicColorSelectionMark.innerHTML = '●';
},
_createTintSelectionMark: function () {
@@ -178,7 +177,6 @@ L.ColorPicker = L.Class.extend({
this._tintSelectionMark.innerHTML = '✔';
},
-
_getSelectionMark: function (colorType) {
if (colorType === L.ColorPicker.BASIC_COLOR)
return this._basicColorSelectionMark;
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
