[Libreoffice-commits] online.git: loleaflet/dist loleaflet/src

Marco Cecchetti marco.cecchetti at collabora.com
Mon Oct 30 09:42:30 UTC 2017


 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.cecchetti at 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 <mrcekets at gmail.com>
    Tested-by: Marco Cecchetti <mrcekets at 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();
 	},
 


More information about the Libreoffice-commits mailing list