Fix unusual tooltip styles...

- Annotations: 3 dot menu tooltip
- Ruler: left/right margin tooltip
- follow the same rules as everywhere else (from jquery-ui-lightness file)

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Ia2dbe80e6550641e58c013679382de29bb0991ef
This commit is contained in:
Pedro Pinto Silva 2020-11-04 15:41:56 +01:00 committed by pedropintosilva
parent 5b862c52a4
commit 869ae7fb97
3 changed files with 43 additions and 8 deletions

View file

@ -875,7 +875,8 @@ button.ui-button::-moz-focus-inner {
}
/* Component containers
----------------------------------*/
.ui-widget {
.ui-widget,
[data-title]:after {
font-family: var(--jquery-ui-font);
font-size: 1.1em;
}
@ -912,17 +913,20 @@ button.ui-button::-moz-focus-inner {
/*Tooltips
----------------------------------*/
.ui-tooltip {
.ui-tooltip,
[data-title]:after {
padding: 7px 9px;
position: absolute;
z-index: 9999;
max-width: 300px;
background: #2a2a2a;
}
body .ui-tooltip {
body .ui-tooltip,
[data-title]:after {
border-width: 2px;
}
.ui-tooltip-content {
.ui-tooltip-content,
[data-title]:after {
font-size: 0.8em;
color: #fff;
background: #2a2a2a;
@ -1285,24 +1289,28 @@ a.ui-button:active,
----------------------------------*/
/* Corner radius */
[data-title]:after,
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 4px;
}
[data-title]:after,
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 4px;
}
[data-title]:after,
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 4px;
}
[data-title]:after,
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
@ -1316,7 +1324,8 @@ a.ui-button:active,
opacity: .5;
filter: Alpha(Opacity=50); /* support: IE8 */
}
.ui-widget-shadow {
.ui-widget-shadow,
[data-title]:after {
-webkit-box-shadow: 0px 0px 4px 2px rgb(217, 217, 217);
box-shadow: 0px 0px 4px 2px rgb(217, 217, 217);
}

View file

@ -494,6 +494,26 @@ body {
padding: 0;
vertical-align: top;
}
/*Tooltips
----------------------------------*/
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
font-size: 1em !important;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
opacity: 0;
border-color: #2a2a2a;
visibility: hidden;
}
[data-title] {
position: relative;
}
.loleaflet-annotation-caption {
font-weight: bold;

View file

@ -241,13 +241,17 @@ L.Annotation = L.Layer.extend({
var acceptButton = this._acceptButton = L.DomUtil.create('button', 'loleaflet-redline-accept-button', tdAccept);
var tdReject = L.DomUtil.create(tagTd, 'loleaflet-annotation-menubar', tr);
var rejectButton = this._rejectButton = L.DomUtil.create('button', 'loleaflet-redline-reject-button', tdReject);
var acceptButtonTooltipText = _('Accept change');
var rejectButtonTooltipText = _('Reject change');
acceptButton.title = _('Accept change');
acceptButton.dataset.title = acceptButtonTooltipText;
acceptButton.setAttribute('aria-label', acceptButtonTooltipText);
L.DomEvent.on(acceptButton, click, function() {
this._map.fire('RedlineAccept', {id: this._data.id});
}, this);
rejectButton.title = _('Reject change');
rejectButton.dataset.title = rejectButtonTooltipText;
rejectButton.setAttribute('aria-label', rejectButtonTooltipText);
L.DomEvent.on(rejectButton, click, function() {
this._map.fire('RedlineReject', {id: this._data.id});
}, this);
@ -256,7 +260,9 @@ L.Annotation = L.Layer.extend({
if (this.options.noMenu !== true && this._map.isPermissionEditForComments()) {
var tdMenu = L.DomUtil.create(tagTd, 'loleaflet-annotation-menubar', tr);
var divMenu = this._menu = L.DomUtil.create(tagDiv, this._data.trackchange ? 'loleaflet-annotation-menu-redline' : 'loleaflet-annotation-menu', tdMenu);
divMenu.title = _('Open menu');
var divMenuTooltipText = _('Open menu');
divMenu.dataset.title = divMenuTooltipText;
divMenu.setAttribute('aria-label', divMenuTooltipText);
divMenu.annotation = this;
}
if (this._data.trackchange) {