[Libreoffice-commits] online.git: loleaflet/dist loleaflet/src
Henry Castro
hcastro at collabora.com
Wed Mar 1 21:52:21 UTC 2017
loleaflet/dist/images/submenu.png |binary
loleaflet/dist/images/user.png |binary
loleaflet/dist/loleaflet.css | 67 ++++++++++++++++++++++++++++---
loleaflet/src/layer/marker/Annotation.js | 33 ++++++++-------
4 files changed, 80 insertions(+), 20 deletions(-)
New commits:
commit dc24fdea67236190333f60c0a4037cf38a54739d
Author: Henry Castro <hcastro at collabora.com>
Date: Wed Mar 1 17:40:57 2017 -0400
loleaflet: change annotation appearance
Change-Id: I9c27b0576b686ac5b8a92bda8ab7960a1b400777
diff --git a/loleaflet/dist/images/submenu.png b/loleaflet/dist/images/submenu.png
new file mode 100644
index 0000000..5159693
Binary files /dev/null and b/loleaflet/dist/images/submenu.png differ
diff --git a/loleaflet/dist/images/user.png b/loleaflet/dist/images/user.png
new file mode 100644
index 0000000..88d9050
Binary files /dev/null and b/loleaflet/dist/images/user.png differ
diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index cebdde0..a5e3f05 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -135,13 +135,16 @@ body {
}
.loleaflet-annotation-content-wrapper {
- padding: 1px;
+ padding: 8px;
+ font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
+ font-size: 13px;
text-align: left;
border-radius: 5px;
- background: #ffffc0;
- box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+ background-color: #f5f5f5;
+ box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
color: #333;
- border: 1px solid #999;
+ border: none;
+ border-radius: 2px;
}
.loleaflet-annotation-content {
@@ -149,15 +152,26 @@ body {
line-height: 1.4;
}
+.loleaflet-annotation-content-author {
+ margin: 0;
+ margin-top: 2px;
+ height: 18px;
+}
+
.loleaflet-annotation-edit {
margin: 3px 3px;
line-height: 1.4;
}
.loleaflet-annotation-textarea {
+ font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
+ font-size: 13px;
border: 1px solid #c8c8c8;
resize: none;
- background-color: #ffffc0;
+ background-color: white;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ width: 95%;
}
.loleaflet-cell-annotation {
@@ -171,3 +185,46 @@ body {
left: 0;
top: 0;
}
+
+.loleaflet-annotation-table {
+ border-spacing: 0;
+ border-collapse: separate;
+ white-space: nowrap;
+ width: 100%;
+}
+
+.loleaflet-annotation-img {
+ max-width: 32px;
+ display: inline-block;
+}
+
+.loleaflet-annotation-author {
+ padding-left: 10px;
+ vertical-align: top;
+ display: table-cell;
+}
+
+.loleaflet-annotation-date {
+ font-size: 11px;
+}
+
+.loleaflet-annotation-userline {
+ background-color: darkblue;
+ width: 32px;
+ height: 6px;
+}
+
+.loleaflet-annotation-menu {
+ background: url(../images/submenu.png) no-repeat;
+ margin: 0;
+ padding: 0;
+ min-width: 15px;
+ height: 21px;
+ text-align: right;
+ border: 1px solid transparent;
+ display: inline-block;
+}
+
+.loleaflet-annotation-menu:hover {
+ border: 1px solid darkgrey;
+}
diff --git a/loleaflet/src/layer/marker/Annotation.js b/loleaflet/src/layer/marker/Annotation.js
index 26299b0..4ff80dd 100644
--- a/loleaflet/src/layer/marker/Annotation.js
+++ b/loleaflet/src/layer/marker/Annotation.js
@@ -4,7 +4,7 @@
L.Annotation = L.Layer.extend({
options: {
- minWidth: 200,
+ minWidth: 240,
maxHeight: 50
},
@@ -81,19 +81,23 @@ L.Annotation = L.Layer.extend({
L.DomUtil.create('div', 'loleaflet-annotation');
var wrapper = this._wrapper =
L.DomUtil.create('div', 'loleaflet-annotation-content-wrapper', container);
-
- L.DomEvent.disableScrollPropagation(this._container);
+ var table = L.DomUtil.create('table', 'loleaflet-annotation-table', wrapper);
+ var tbody = L.DomUtil.create('tbody', '', table);
+ var tr = L.DomUtil.create('tr', '', tbody);
+ var tdImg = L.DomUtil.create('td', 'loleaflet-annotation-img', tr);
+ var tdAuthor = L.DomUtil.create('td', 'loleaflet-annotation-author', tr);
+ var tdMenu = L.DomUtil.create('td', '', tr);
+ var imgAuthor = L.DomUtil.create('img', '', tdImg);
+ imgAuthor.src = L.Icon.Default.imagePath + '/user.png';
+ L.DomUtil.create('div', 'loleaflet-annotation-userline', tdImg);
+ this._contentAuthor = L.DomUtil.create('div', 'loleaflet-annotation-content-author', tdAuthor);
+ this._contentDate = L.DomUtil.create('div', 'loleaflet-annotation-date', tdAuthor);
+ L.DomUtil.create('div', 'loleaflet-annotation-menu', tdMenu);
this._contentNode = L.DomUtil.create('div', 'loleaflet-annotation-content', wrapper);
this._contentNode.annotation = this;
this._editNode = L.DomUtil.create('div', 'loleaflet-annotation-edit', wrapper);
-
this._contentText = L.DomUtil.create('div', '', this._contentNode);
- this._contentAuthor = L.DomUtil.create('div', '', this._contentNode);
- this._contentDate = L.DomUtil.create('div', '', this._contentNode);
-
this._editText = L.DomUtil.create('textarea', 'loleaflet-annotation-textarea', this._editNode);
- this._editAuthor = L.DomUtil.create('div', '', this._editNode);
- this._editDate = L.DomUtil.create('div', '', this._editNode);
var buttons = L.DomUtil.create('div', '', this._editNode);
var button = L.DomUtil.create('input', 'loleaflet-controls', buttons);
@@ -104,6 +108,7 @@ L.Annotation = L.Layer.extend({
button.type = 'button';
button.value = _('Cancel');
L.DomEvent.on(button, 'click', this._onCancelClick, this);
+ L.DomEvent.disableScrollPropagation(this._container);
this._container.style.visibility = 'hidden';
this._editNode.style.display = 'none';
@@ -150,19 +155,17 @@ L.Annotation = L.Layer.extend({
},
_updateLayout: function () {
- var style = this._contentNode.style;
- var width = Math.max(this._contentNode.offsetWidth, this.options.minWidth);
- var height = Math.max(this._contentNode.offsetHeight, this.options.maxHeight);
+ var style = this._wrapper.style;
+ var width = Math.min(this._wrapper.offsetWidth, this.options.minWidth);
style.width = (width + 1) + 'px';
style.whiteSpace = '';
- style.height = height + 'px';
},
_updateContent: function () {
this._contentText.innerHTML = this._editText.innerHTML = this._data.text;
- this._contentAuthor.innerHTML = this._editAuthor.innerHTML = this._data.author;
- this._contentDate.innerHTML = this._editDate.innerHTML = this._data.dateTime;
+ this._contentAuthor.innerHTML = this._data.author;
+ this._contentDate.innerHTML = this._data.dateTime;
},
_updatePosition: function () {
More information about the Libreoffice-commits
mailing list