loleaflet/dist/spreadsheet.css | 101 ++++++--------------------
loleaflet/src/control/Control.ColumnHeader.js | 7 +
loleaflet/src/control/Control.Header.js | 64 ++++++++++++++--
loleaflet/src/control/Control.RowHeader.js | 8 +-
4 files changed, 92 insertions(+), 88 deletions(-)
New commits:
commit 7f9cdb2e52b09d4315a2779248a20622c71aae6e
Author: Marco Cecchetti <marco.cecche...@collabora.com>
Date: Mon Oct 30 10:36:36 2017 +0100
loleflet: calc: canvas styles for headers are fetched from css file
Change-Id: I0423c353d22736aa2edaf45d55112af001d46692
Reviewed-on: https://gerrit.libreoffice.org/44049
Reviewed-by: Marco Cecchetti <mrcek...@gmail.com>
Tested-by: Marco Cecchetti <mrcek...@gmail.com>
diff --git a/loleaflet/dist/spreadsheet.css b/loleaflet/dist/spreadsheet.css
index 15ea4ff9..8435b271 100644
--- a/loleaflet/dist/spreadsheet.css
+++ b/loleaflet/dist/spreadsheet.css
@@ -110,28 +110,25 @@
}
.spreadsheet-header-column {
- border-right: 1px solid darkgrey;
- display: inline-block;
- text-align: left;
- padding: 0px;
- padding-top: 1px;
- margin: 0px;
- height: 100%;
- overflow: hidden;
- }
+ border: 1px solid darkgray;
+ font: 12px/1.5 "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
+ color: black;
+ background-color: lightgray;
+ cursor: pointer;
+}
-.spreadsheet-header-selected {
- background: #3465A4; /* For browsers that do not support gradients */
- background: -webkit-linear-gradient(#3465A4, #729FCF, #004586);
- background: -o-linear-gradient(#3465A4, #729FCF, #004586);
- background: -moz-linear-gradient(#3465A4, #729FCF, #004586);
- background: linear-gradient(#3465A4, #729FCF, #004586);
+.spreadsheet-header-column-hover {
+ background-color: #DDD;
+}
+
+.spreadsheet-header-column-selected {
color: white;
- }
+ background: linear-gradient(#3465A4, #729FCF, #004586);
+}
-.spreadsheet-header-column:hover {
- background-color: #DDD;
- }
+.spreadsheet-header-column-resize {
+ cursor: col-resize;
+}
.spreadsheet-header-rows-container {
border: 1px solid darkgrey;
@@ -155,72 +152,22 @@
}
.spreadsheet-header-row {
- border-bottom: 1px solid darkgrey;
- padding: 0px;
- margin: 0px;
- height: 100%;
- overflow: hidden;
- }
-
-.spreadsheet-header-row:hover {
- background-color: #DDD;
- }
-
-.spreadsheet-header-column-text {
- display: inline-block;
- vertical-align: top;
+ border: 1px solid darkgray;
font: 12px/1.5 "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: center;
- height: 100%;
- margin: 0px;
- border: 0px;
- padding: 0px;
+ color: black;
+ background-color: lightgray;
cursor: pointer;
-
- /* Make the text unselectable for all browsers */
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
}
-.spreadsheet-header-column-resize {
- display: inline-block;
- vertical-align: top;
- cursor: col-resize;
- height: 100%;
- margin: 0px;
- border: 0px;
- padding: 0px;
+.spreadsheet-header-row-hover {
+ background-color: #DDD;
}
-.spreadsheet-header-row-text {
- font: 12px/1.5 "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: center;
- height: 100%;
- margin: 0px;
- border: 0px;
- padding: 0px;
- overflow: hidden;
- cursor: pointer;
-
- /* Make the text unselectable for all browsers */
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
+.spreadsheet-header-row-selected {
+ color: white;
+ background: linear-gradient(#3465A4, #729FCF, #004586);
}
.spreadsheet-header-row-resize {
cursor: row-resize;
- height: 100%;
- margin: 0px;
- border: 0px;
- padding: 0px;
}
diff --git a/loleaflet/src/control/Control.ColumnHeader.js
b/loleaflet/src/control/Control.ColumnHeader.js
index 6d86d7fa..27765ec7 100644
--- a/loleaflet/src/control/Control.ColumnHeader.js
+++ b/loleaflet/src/control/Control.ColumnHeader.js
@@ -27,6 +27,11 @@ L.Control.ColumnHeader = L.Control.Header.extend({
L.DomEvent.addListener(cornerHeader, 'click',
this._onCornerHeaderClick, this);
this._headersContainer = L.DomUtil.create('div',
'spreadsheet-header-columns-container', rowColumnFrame);
+ this._initHeaderEntryStyles('spreadsheet-header-column');
+
this._initHeaderEntryHoverStyles('spreadsheet-header-column-hover');
+
this._initHeaderEntrySelectedStyles('spreadsheet-header-column-selected');
+
this._initHeaderEntryResizeStyles('spreadsheet-header-column-resize');
+
this._headerCanvas = L.DomUtil.create('canvas',
'spreadsheet-header-columns', this._headersContainer);
this._canvasContext = this._headerCanvas.getContext('2d');
this._headerCanvas.width =
parseInt(L.DomUtil.getStyle(this._headersContainer, 'width'));
@@ -239,7 +244,7 @@ L.Control.ColumnHeader = L.Control.Header.extend({
ctx.fillText(content, end - width / 2, height / 2);
// draw row separator
ctx.fillStyle = this._borderColor;
- ctx.fillRect(end -1, 0, 1, height);
+ ctx.fillRect(end -1, 0, this._borderWidth, height);
ctx.restore();
},
diff --git a/loleaflet/src/control/Control.Header.js
b/loleaflet/src/control/Control.Header.js
index 1c522caf..a94663a2 100644
--- a/loleaflet/src/control/Control.Header.js
+++ b/loleaflet/src/control/Control.Header.js
@@ -16,17 +16,63 @@ L.Control.Header = L.Control.extend({
this._lastMouseOverIndex = undefined;
this._hitResizeArea = false;
- // styles
- this._backgroundColor = 'lightgray';
- this._hoverColor = '#DDD';
- this._borderColor = 'darkgray';
- this._textColor = 'black';
- this._font = '12px/1.5 "Segoe UI", Tahoma, Arial, Helvetica,
sans-serif';
- this._cursor = 'pointer';
- this._selectionTextColor = 'white';
this._selectionBackgroundGradient = [ '#3465A4', '#729FCF',
'#004586' ];
},
+ _initHeaderEntryStyles: function (className) {
+ var baseElem = document.getElementsByTagName('body')[0];
+ var elem = L.DomUtil.create('div', className, baseElem);
+ this._textColor = L.DomUtil.getStyle(elem, 'color');
+ this._backgroundColor = L.DomUtil.getStyle(elem,
'background-color');
+ this._font = L.DomUtil.getStyle(elem, 'font');
+ this._borderColor = L.DomUtil.getStyle(elem, 'border-color');
+ var borderWidth = L.DomUtil.getStyle(elem, 'border-width');
+ this._borderWidth = parseInt(borderWidth.slice(0, -2));
+ this._cursor = L.DomUtil.getStyle(elem, 'cursor');
+ L.DomUtil.remove(elem);
+ },
+
+ _initHeaderEntryHoverStyles: function (className) {
+ var baseElem = document.getElementsByTagName('body')[0];
+ var elem = L.DomUtil.create('div', className, baseElem);
+ this._hoverColor = L.DomUtil.getStyle(elem, 'background-color');
+ L.DomUtil.remove(elem);
+ },
+
+ _initHeaderEntrySelectedStyles: function (className) {
+ var baseElem = document.getElementsByTagName('body')[0];
+ var elem = L.DomUtil.create('div', className, baseElem);
+ this._selectionTextColor = L.DomUtil.getStyle(elem, 'color');
+
+ var selectionBackgroundGradient = [];
+ var gradientColors = L.DomUtil.getStyle(elem,
'background-image');
+ gradientColors =
gradientColors.slice('linear-gradient('.length, -1);
+ while (gradientColors) {
+ var color = gradientColors.split(',', 3);
+ color = color.join(','); // color = 'rgb(r, g, b)'
+ selectionBackgroundGradient.push(color);
+ gradientColors = gradientColors.substr(color.length);
// remove last parsed color
+ gradientColors =
gradientColors.substr(gradientColors.indexOf('r')); // remove ', ' stuff
+ }
+
+ if (selectionBackgroundGradient.length) {
+ this._selectionBackgroundGradient =
selectionBackgroundGradient;
+ }
+ L.DomUtil.remove(elem);
+ },
+
+ _initHeaderEntryResizeStyles: function (className) {
+ if (this.options.cursor) {
+ this._resizeCursor = this.options.cursor;
+ }
+ else {
+ var baseElem = document.getElementsByTagName('body')[0];
+ var elem = L.DomUtil.create('div', className, baseElem);
+ this._resizeCursor = L.DomUtil.getStyle(elem, 'cursor');
+ L.DomUtil.remove(elem);
+ }
+ },
+
mouseInit: function (element) {
L.DomEvent.on(element, 'mousedown', this._onMouseDown, this);
},
@@ -199,7 +245,7 @@ L.Control.Header = L.Control.extend({
else {
L.DomEvent.on(this._headerCanvas, 'click',
this._onHeaderClick, this);
}
- var cursor = isMouseOverResizeArea ?
this.options.cursor : this._cursor;
+ var cursor = isMouseOverResizeArea ? this._resizeCursor
: this._cursor;
L.DomUtil.setStyle(this._headerCanvas, 'cursor',
cursor);
this._hitResizeArea = isMouseOverResizeArea;
}
diff --git a/loleaflet/src/control/Control.RowHeader.js
b/loleaflet/src/control/Control.RowHeader.js
index 99945f7d..520a0893 100644
--- a/loleaflet/src/control/Control.RowHeader.js
+++ b/loleaflet/src/control/Control.RowHeader.js
@@ -25,6 +25,12 @@ L.Control.RowHeader = L.Control.Header.extend({
this._headersContainer = L.DomUtil.create('div',
'spreadsheet-header-rows-container', rowColumnFrame);
this._headerCanvas = L.DomUtil.create('canvas',
'spreadsheet-header-rows', this._headersContainer);
+
+ this._initHeaderEntryStyles('spreadsheet-header-row');
+
this._initHeaderEntryHoverStyles('spreadsheet-header-row-hover');
+
this._initHeaderEntrySelectedStyles('spreadsheet-header-row-selected');
+
this._initHeaderEntryResizeStyles('spreadsheet-header-row-resize');
+
this._canvasContext = this._headerCanvas.getContext('2d');
this._headerCanvas.width =
parseInt(L.DomUtil.getStyle(this._headersContainer, 'width'));
this._headerCanvas.height =
parseInt(L.DomUtil.getStyle(this._headersContainer, 'height'));
@@ -230,7 +236,7 @@ L.Control.RowHeader = L.Control.Header.extend({
ctx.fillText(content, width / 2, end - (height / 2));
// draw row separator
ctx.fillStyle = this._borderColor;
- ctx.fillRect(0, end -1, width, 1);
+ ctx.fillRect(0, end -1, width, this._borderWidth);
ctx.restore();
},
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
