CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-12 16:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Begin making UI adapt correctly to scaled text sizes (re: #7965)

Browse Source
This commit is contained in:
Quincy Morgan
2020-09-09 16:11:46 -04:00
parent 59f45b39fe
commit e6703cb1cc
8 changed files with 68 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
css/80_app.css
View File

@@ -172,8 +172,7 @@ input[type=email] {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
padding: 5px 20px 5px 10px;
height: 30px;
padding: 0px 20px 0px 10px;
border-radius: 4px;
text-overflow: ellipsis;
overflow: auto;
@@ -204,16 +203,14 @@ input.disabled {
input[type="checkbox"],
input[type="radio"] {
float: left;
width: 14px;
height: 14px;
margin-right: 5px;
margin-top: 3px;
cursor: pointer;
vertical-align: middle;
}
.ideditor[dir='rtl'] input[type="checkbox"],
.ideditor[dir='rtl'] input[type="radio"] {
float: right;
margin-left: 5px;
margin-right: 0;
}
@@ -303,14 +300,12 @@ li.hide {
------------------------------------------------------- */
button {
text-align: center;
line-height: 20px;
border: 0;
background: #fff;
font-weight: bold;
color: #333;
font-size: 12px;
display: inline-block;
height: 40px;
border-radius: 4px;
}
@@ -402,7 +397,7 @@ button[disabled].action {
/* Icons
------------------------------------------------------- */
.icon {
vertical-align: top;
vertical-align: middle;
width: 20px;
height: 20px;
}
@@ -423,8 +418,9 @@ button.disabled .icon.operation use,
.icon.inline {
vertical-align: text-top;
width: 14px;
height: 14px;
display: inline-block;
width: 1.17em;
height: 1.17em;
margin: 0px 3px;
}
@@ -578,7 +574,7 @@ button.save .count {
text-align: center;
}
.help-pane svg.icon.pre-text.add-note,
.help-pane svg.icon.inline.add-note,
button.add-note svg.icon {
height: 15px;
width: 15px;
@@ -595,7 +591,7 @@ button.add-note svg.icon {
margin-left: 4px;
margin-right: unset;
}
.help-pane svg.icon.pre-text.add-note {
.help-pane svg.icon.inline.add-note {
margin-left: 3px;
margin-right: 3px;
}
@@ -937,7 +933,6 @@ a.hide-toggle {
background-color: #ccc;
margin: 30px auto;
padding: 5px;
height: auto;
min-height: 40px;
}
@@ -1382,7 +1377,6 @@ a.hide-toggle {
display: flex;
flex-flow: row nowrap;
flex: 1 1 100%;
height: 30px;
position: relative;
font-weight: bold;
color: #333;
@@ -1395,10 +1389,10 @@ a.hide-toggle {
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
padding: 5px 0 5px 10px;
padding: 5px 0 4px 10px;
}
.ideditor[dir='rtl'] .field-label .label-text {
padding: 5px 10px 5px 0;
padding: 5px 10px 4px 0;
}
.field-label .label-text span {
white-space: nowrap;
@@ -1435,6 +1429,7 @@ a.hide-toggle {
}
.field-label .icon {
opacity: .5;
}
.field-label .modified-icon,
@@ -1484,7 +1479,6 @@ a.hide-toggle {
/* Buttons inside fields */
.form-field-button {
flex: 0 0 auto;
height: 30px;
width: 32px;
position: relative;
background-color: #fff;
@@ -1816,9 +1810,9 @@ a.hide-toggle {
flex: 1 1 auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 100%;
padding: 5px 10px;
height: 30px;
background-color: #fff;
color: #7092ff;
cursor: pointer;
@@ -2189,7 +2183,7 @@ div.combobox {
.combobox-caret {
display: inline-block;
position: relative;
height: 30px;
height: 100%;
width: 30px !important;
margin-left: -30px;
vertical-align: top;
@@ -2344,7 +2338,6 @@ div.combobox {
}
.form-field-input-wrap .label {
height: 30px;
background: #f6f6f6;
padding: 5px 10px;
}
@@ -2431,7 +2424,6 @@ button.raw-tag-option svg.icon {
}
.tag-row input {
height: 31px;
border: 0;
border-radius: 0;
border-bottom: 1px solid #ccc;
@@ -2469,8 +2461,7 @@ button.raw-tag-option svg.icon {
border-top: 1px solid #ccc;
}
.tag-row button {
flex: 0 0 32px;
height: 31px;
flex: 0 0 auto;
width: 32px;
border: 1px solid #ccc;
border-top-width: 0;
@@ -2939,9 +2930,13 @@ input.key-trap {
right: auto;
}
.map-control {
position: relative;
}
.map-control > button {
position: relative;
width: 40px;
height: 40px;
background: rgba(0,0,0,.5);
border-radius: 0;
pointer-events: auto;
@@ -3045,11 +3040,6 @@ div.full-screen > button:active {
/* Background / Map Data Settings
------------------------------------------------------- */
.map-data-control,
.background-control {
position: relative;
}
.imagery-faq {
margin-bottom: 10px;
white-space: nowrap;
@@ -3062,7 +3052,6 @@ div.full-screen > button:active {
}
.layer-list > li {
height: 30px;
background-color: #fff;
color: #7092ff;
position: relative;
@@ -3121,6 +3110,7 @@ div.full-screen > button:active {
cursor: pointer;
flex: 1 1 auto;
display: flex;
align-items: center;
overflow: hidden;
}
@@ -3141,7 +3131,6 @@ div.full-screen > button:active {
.map-data-pane .layer-list button,
.background-pane .layer-list button {
height: 100%;
border-left: 1px solid #ccc;
border-radius: 0;
padding-left: 4px;
@@ -3637,6 +3626,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
float: left;
display: block;
width: 20%;
height: 40px;
position: relative;
background-color: transparent;
}
@@ -3728,7 +3718,6 @@ li.issue-fix-item:not(.actionable) .fix-icon {
flex-flow: row nowrap;
justify-content: space-between;
border-bottom: 1px solid #ccc;
height: 60px;
}
.pane-heading h2 {
@@ -3737,7 +3726,6 @@ li.issue-fix-item:not(.actionable) .fix-icon {
.pane-heading button {
width: 40px;
height: 100%;
border-radius: 0;
}
@@ -3764,11 +3752,11 @@ li.issue-fix-item:not(.actionable) .fix-icon {
margin-bottom: 20px;
}
.help-pane .left-content .icon.pre-text {
vertical-align: text-top;
.help-pane .left-content .icon.inline {
margin-right: 0;
margin-left: 0;
display: inline-block;
height: 1.34em;
width: 1.34em;
}
.help-pane .toc {
@@ -5606,7 +5594,6 @@ li.hide + li.version .badge .tooltip .popover-arrow {
.huge-modal-button {
width: 100%;
height: auto;
padding: 20px;
}

14
modules/ui/field_help.js
View File

@@ -57,13 +57,13 @@ export function uiFieldHelp(context, fieldName) {
var replacements = {
distField: t('restriction.controls.distance'),
viaField: t('restriction.controls.via'),
fromShadow: icon('#iD-turn-shadow', 'pre-text shadow from'),
allowShadow: icon('#iD-turn-shadow', 'pre-text shadow allow'),
restrictShadow: icon('#iD-turn-shadow', 'pre-text shadow restrict'),
onlyShadow: icon('#iD-turn-shadow', 'pre-text shadow only'),
allowTurn: icon('#iD-turn-yes', 'pre-text turn'),
restrictTurn: icon('#iD-turn-no', 'pre-text turn'),
onlyTurn: icon('#iD-turn-only', 'pre-text turn')
fromShadow: icon('#iD-turn-shadow', 'inline shadow from'),
allowShadow: icon('#iD-turn-shadow', 'inline shadow allow'),
restrictShadow: icon('#iD-turn-shadow', 'inline shadow restrict'),
onlyShadow: icon('#iD-turn-shadow', 'inline shadow only'),
allowTurn: icon('#iD-turn-yes', 'inline turn'),
restrictTurn: icon('#iD-turn-no', 'inline turn'),
onlyTurn: icon('#iD-turn-only', 'inline turn')
};

2
modules/ui/intro/area.js
View File

@@ -436,7 +436,7 @@ export function uiIntroArea(context, reveal) {
});
reveal('.entity-editor-pane',
helpString('intro.areas.describe_playground', { button: icon('#iD-icon-close', 'pre-text') }),
helpString('intro.areas.describe_playground', { button: icon('#iD-icon-close', 'inline') }),
{ duration: 300 }
);

4
modules/ui/intro/building.js
View File

@@ -300,7 +300,7 @@ export function uiIntroBuilding(context, reveal) {
timeout(function() {
reveal('.entity-editor-pane',
helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'pre-text') })
helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
);
}, 500);
@@ -628,7 +628,7 @@ export function uiIntroBuilding(context, reveal) {
timeout(function() {
reveal('.entity-editor-pane',
helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'pre-text') })
helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
);
}, 500);

56
modules/ui/intro/helper.js
View File

@@ -51,34 +51,34 @@ export function helpString(id, replacements) {
// only load these the first time
if (!helpStringReplacements) helpStringReplacements = {
// insert icons corresponding to various UI elements
point_icon: icon('#iD-icon-point', 'pre-text'),
line_icon: icon('#iD-icon-line', 'pre-text'),
area_icon: icon('#iD-icon-area', 'pre-text'),
note_icon: icon('#iD-icon-note', 'pre-text add-note'),
plus: icon('#iD-icon-plus', 'pre-text'),
minus: icon('#iD-icon-minus', 'pre-text'),
move_icon: icon('#iD-operation-move', 'pre-text operation'),
merge_icon: icon('#iD-operation-merge', 'pre-text operation'),
delete_icon: icon('#iD-operation-delete', 'pre-text operation'),
circularize_icon: icon('#iD-operation-circularize', 'pre-text operation'),
split_icon: icon('#iD-operation-split', 'pre-text operation'),
orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text operation'),
disconnect_icon: icon('#iD-operation-disconnect', 'pre-text operation'),
layers_icon: icon('#iD-icon-layers', 'pre-text'),
data_icon: icon('#iD-icon-data', 'pre-text'),
inspect: icon('#iD-icon-inspect', 'pre-text'),
help_icon: icon('#iD-icon-help', 'pre-text'),
undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
save_icon: icon('#iD-icon-save', 'pre-text'),
leftclick: icon('#iD-walkthrough-mouse-left', 'pre-text operation'),
rightclick: icon('#iD-walkthrough-mouse-right', 'pre-text operation'),
mousewheel_icon: icon('#iD-walkthrough-mousewheel', 'pre-text operation'),
tap_icon: icon('#iD-walkthrough-tap', 'pre-text operation'),
doubletap_icon: icon('#iD-walkthrough-doubletap', 'pre-text operation'),
longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'),
touchdrag_icon: icon('#iD-walkthrough-touchdrag', 'pre-text operation'),
pinch_icon: icon('#iD-walkthrough-pinch-apart', 'pre-text operation'),
point_icon: icon('#iD-icon-point', 'inline'),
line_icon: icon('#iD-icon-line', 'inline'),
area_icon: icon('#iD-icon-area', 'inline'),
note_icon: icon('#iD-icon-note', 'inline add-note'),
plus: icon('#iD-icon-plus', 'inline'),
minus: icon('#iD-icon-minus', 'inline'),
move_icon: icon('#iD-operation-move', 'inline operation'),
merge_icon: icon('#iD-operation-merge', 'inline operation'),
delete_icon: icon('#iD-operation-delete', 'inline operation'),
circularize_icon: icon('#iD-operation-circularize', 'inline operation'),
split_icon: icon('#iD-operation-split', 'inline operation'),
orthogonalize_icon: icon('#iD-operation-orthogonalize', 'inline operation'),
disconnect_icon: icon('#iD-operation-disconnect', 'inline operation'),
layers_icon: icon('#iD-icon-layers', 'inline'),
data_icon: icon('#iD-icon-data', 'inline'),
inspect: icon('#iD-icon-inspect', 'inline'),
help_icon: icon('#iD-icon-help', 'inline'),
undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'inline'),
redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'inline'),
save_icon: icon('#iD-icon-save', 'inline'),
leftclick: icon('#iD-walkthrough-mouse-left', 'inline operation'),
rightclick: icon('#iD-walkthrough-mouse-right', 'inline operation'),
mousewheel_icon: icon('#iD-walkthrough-mousewheel', 'inline operation'),
tap_icon: icon('#iD-walkthrough-tap', 'inline operation'),
doubletap_icon: icon('#iD-walkthrough-doubletap', 'inline operation'),
longpress_icon: icon('#iD-walkthrough-longpress', 'inline operation'),
touchdrag_icon: icon('#iD-walkthrough-touchdrag', 'inline operation'),
pinch_icon: icon('#iD-walkthrough-pinch-apart', 'inline operation'),
// insert keys; may be localized and platform-dependent
shift: uiCmd.display('⇧'),

2
modules/ui/intro/line.js
View File

@@ -338,7 +338,7 @@ export function uiIntroLine(context, reveal) {
timeout(function() {
reveal('.entity-editor-pane',
helpString('intro.lines.name_road', { button: icon('#iD-icon-close', 'pre-text') }),
helpString('intro.lines.name_road', { button: icon('#iD-icon-close', 'inline') }),
{ tooltipClass: 'intro-lines-name_road' }
);
}, 500);

8
modules/ui/intro/navigation.js
View File

@@ -356,7 +356,7 @@ export function uiIntroNavigation(context, reveal) {
var href = d3_select(selector).attr('href') || '#iD-icon-close';
reveal('.entity-editor-pane',
helpString('intro.navigation.close_townhall', { button: icon(href, 'pre-text') })
helpString('intro.navigation.close_townhall', { button: icon(href, 'inline') })
);
context.on('exit.intro', function() {
@@ -369,7 +369,7 @@ export function uiIntroNavigation(context, reveal) {
var href = d3_select(selector).attr('href') || '#iD-icon-close';
reveal('.entity-editor-pane',
helpString('intro.navigation.close_townhall', { button: icon(href, 'pre-text') }),
helpString('intro.navigation.close_townhall', { button: icon(href, 'inline') }),
{ duration: 0 }
);
});
@@ -493,7 +493,7 @@ export function uiIntroNavigation(context, reveal) {
reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
helpString('intro.navigation.editor_street', {
button: icon(href, 'pre-text'),
button: icon(href, 'inline'),
field1: onewayField.label(),
field2: maxspeedField.label()
}));
@@ -509,7 +509,7 @@ export function uiIntroNavigation(context, reveal) {
reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
helpString('intro.navigation.editor_street', {
button: icon(href, 'pre-text'),
button: icon(href, 'inline'),
field1: onewayField.label(),
field2: maxspeedField.label()
}), { duration: 0 }

4
modules/ui/intro/point.js
View File

@@ -254,7 +254,7 @@ export function uiIntroPoint(context, reveal) {
});
reveal('.entity-editor-pane',
helpString('intro.points.add_close', { button: icon(href, 'pre-text') })
helpString('intro.points.add_close', { button: icon(href, 'inline') })
);
function continueTo(nextStep) {
@@ -351,7 +351,7 @@ export function uiIntroPoint(context, reveal) {
timeout(function() {
reveal('.entity-editor-pane',
helpString('intro.points.update_close', { button: icon('#iD-icon-close', 'pre-text') })
helpString('intro.points.update_close', { button: icon('#iD-icon-close', 'inline') })
);
}, 500);