strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

loleaflet: change annotation appearance

Browse source 
Change-Id: I9c27b0576b686ac5b8a92bda8ab7960a1b400777
This commit is contained in:
Henry Castro 2017-03-01 17:40:57 -04:00
parent f0ac4913ef
commit dc24fdea67
4 changed files with 80 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
loleaflet/dist/images/submenu.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 156 B

BIN
loleaflet/dist/images/user.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 979 B

67
loleaflet/dist/loleaflet.css vendored
View file

@ -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;
}

33
loleaflet/src/layer/marker/Annotation.js
View file

@ -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 () {