CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-30 17:00:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

2.x: Use keyboard styling for shortcuts in tooltips (re: #6574, re: a579e35fcc51d76f55eca16c7524d95c59b66c26)

Browse Source
This commit is contained in:
Quincy Morgan
2019-06-24 16:48:10 -04:00
parent 91b6844377
commit 6cbdb41e2d
2 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
css/80_app.css
View File

@@ -141,6 +141,21 @@ a:visited, a {
a:hover {
color: #597be7;
}
kbd {
display: inline-block;
text-align: center;
padding: 3px 5px;
font-size: 11px;
line-height: 12px;
min-width: 12px;
vertical-align: baseline;
background-color: #fcfcfc;
border: solid 1px #ccc;
margin: 0 2px;
border-bottom-color: #bbb;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb;
}
/* Forms
------------------------------------------------------- */
@@ -4982,20 +4997,7 @@ img.tile-debug {
}
.modal-shortcuts .shortcut-keys kbd {
display: inline-block;
text-align: center;
padding: 3px 5px;
font-size: 11px;
line-height: 12px;
min-width: 12px;
color: #555;
vertical-align: baseline;
background-color: #fcfcfc;
border: solid 1px #ccc;
margin: 0 2px;
border-bottom-color: #bbb;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb;
}
svg.mouseclick use.left {
@@ -5225,7 +5227,7 @@ svg.mouseclick use.right {
pointer-events: none;
}
.tooltip.in {
opacity: 0.9;
opacity: 0.95;
z-index: 5000;
height: auto;
display: block;
@@ -5356,12 +5358,12 @@ svg.mouseclick use.right {
margin: 10px -10px -10px -10px;
border-radius: 0 0 3px 3px;
}
.tooltip-inner .keyhint {
.tooltip-inner .shortcut {
font-weight: bold;
margin-left: 5px;
}
[dir='rtl'] .tooltip-inner .keyhint {
[dir='rtl'] .tooltip-inner .shortcut {
margin-left: 0;
margin-right: 5px;
}
@@ -5399,6 +5401,15 @@ svg.mouseclick use.right {
background: #000;
color: #ccc;
}
.tooltip.dark kbd,
.map-pane .tooltip kbd,
#sidebar .tooltip kbd {
background-color: #666;
border: solid 1px #444;
border-bottom-color: #333;
box-shadow: inset 0 -1px 0 #333;
color: #eee;
}
/* Exceptions for tooltip layouts */

12
modules/ui/tooltipHtml.js
View File

@@ -1,7 +1,7 @@
import { t } from '../util/locale';
export function uiTooltipHtml(text, key, heading) {
export function uiTooltipHtml(text, keys, heading) {
var s = '';
if (heading) {
@@ -10,9 +10,13 @@ export function uiTooltipHtml(text, key, heading) {
if (text) {
s += '<div class="tooltip-text"><span>' + text + '</span></div>';
}
if (key) {
s += '<div class="keyhint-wrap"><span>' + t('tooltip_keyhint') + '</span>' +
'<span class="keyhint">' + key + '</span></div>';
if (keys) {
if (!Array.isArray(keys)) keys = [keys];
s += '<div class="keyhint-wrap"><span>' + t('tooltip_keyhint') + '</span>';
keys.forEach(function(key) {
s += '<kbd class="shortcut">' + key + '</kbd>';
});
s += '</div>';
}
return s;