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

Continue making the UI responsive to text zoom (re: #7965)

Browse Source
This commit is contained in:
Quincy Morgan
2020-09-10 11:15:24 -04:00
parent e6703cb1cc
commit b980e47c3c
4 changed files with 106 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
css/80_app.css
View File

@@ -33,6 +33,8 @@
.main-content {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
touch-action: none;
@@ -467,10 +469,7 @@ button.disabled .icon.operation use,
/* Toolbar / Persistent UI Elements
------------------------------------------------------- */
.top-toolbar-wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
position: relative;
z-index: 101;
}
.top-toolbar {
@@ -748,9 +747,10 @@ button.add-note svg.icon {
/* Hide/Toggle collapsible sections (aka Disclosure)
------------------------------------------------------- */
.hide-toggle .icon.pre-text {
vertical-align: text-top;
vertical-align: middle;
width: 16px;
height: 16px;
margin-top: -3px;
margin-left: -3px;
}
.ideditor[dir='rtl'] .hide-toggle .icon.pre-text {
@@ -882,11 +882,15 @@ a.hide-toggle {
margin-bottom: 150px;
}
.sidebar .search-header {
position: relative;
overflow: hidden;
}
.sidebar .search-header .icon {
display: block;
display: inline-block;
position: absolute;
left: 10px;
top: 80px;
height: 100%;
pointer-events: none;
}
.ideditor[dir='rtl'] .sidebar .search-header .icon {
@@ -895,11 +899,8 @@ a.hide-toggle {
}
.sidebar .search-header input {
position: absolute;
top: 60px;
height: 60px;
width: 100%;
padding: 5px 10px;
padding: 10px 10px;
border-radius: 0;
border-width: 0;
border-bottom-width: 1px;
@@ -1034,7 +1035,7 @@ a.hide-toggle {
}
.preset-list-button-wrap {
height: 62px;
min-height: 62px;
display: flex;
border: 1px solid #ccc;
border-radius: 4px;
@@ -1045,6 +1046,7 @@ a.hide-toggle {
height: 100%;
position: relative;
display: flex;
align-items: center;
}
.preset-list.filtered .preset-list-item:first-child .preset-list-button {
@@ -1240,7 +1242,6 @@ a.hide-toggle {
}
.preset-list-button-wrap button.tag-reference-button {
height: 100%;
width: 32px;
flex: 0 0 auto;
background: #f6f6f6;
@@ -1268,6 +1269,9 @@ a.hide-toggle {
.preset-list-button-wrap button.tag-reference-button .icon {
opacity: .5;
}
.preset-list-button-wrap .accessory-buttons {
display: flex;
}
.current .preset-list-button,
@@ -1449,7 +1453,6 @@ a.hide-toggle {
flex-flow: row nowrap;
width: 100%;
flex: 1 1 auto;
min-height: 30px;
border-top: 0;
border-radius: 0 0 4px 4px;
}
@@ -1463,17 +1466,14 @@ a.hide-toggle {
.form-field-input-wrap > textarea,
.form-field-input-wrap > ul.chiplist {
flex: 1 1 auto;
min-height: 30px;
border: 1px solid #ccc;
border-top: 0;
border-radius: 0;
overflow: hidden;
position: relative;
}
.form-field-input-wrap > textarea {
height: 65px;
border-radius: 0 0 4px 4px;
overflow: auto;
}
/* Buttons inside fields */
@@ -1670,7 +1670,6 @@ a.hide-toggle {
.form-field-input-multicombo .input-wrap {
border: 1px solid #ddd;
width: 100px;
height: 31px;
}
.form-field-input-multicombo input {
border: none;
@@ -1757,7 +1756,6 @@ a.hide-toggle {
}
.form-field-input-check > input[type="checkbox"] {
flex: 0 1 auto;
min-height: 20px;
width: 20px;
margin-top: 0;
}
@@ -1959,7 +1957,6 @@ a.hide-toggle {
flex: 1 1 auto;
display: flex;
width: 100%;
min-height: 30px;
}
.addr-row > input {
@@ -2888,11 +2885,8 @@ input.key-trap {
.over-map {
position: absolute;
left: 0;
right: 0;
top: 71px;
bottom: 30px;
position: relative;
height: 100%;
pointer-events: none;
display: flex;
flex-direction: row-reverse;
@@ -3607,7 +3601,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
.nudge-container input {
width: 100%;
height: 20px;
padding: 2px;
text-align: center;
border: 0;
}
@@ -4038,9 +4032,14 @@ img.tile-debug {
/* Map
------------------------------------------------------- */
.main-map {
position: relative;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
height: 100%;
width: 100%;
background: #000;
user-select: none;
touch-action: none;
@@ -4273,14 +4272,13 @@ img.tile-debug {
------------------------------------------------------- */
.map-footer {
width: 100%;
position: absolute;
right: 0;
bottom: 0;
position: relative;
border-radius: 0;
pointer-events: none;
display: flex;
flex-direction: column;
-ms-user-select: element;
flex: 0 0 auto;
}
.map-footer-bar {
@@ -4316,8 +4314,9 @@ img.tile-debug {
------------------------------------------------------- */
.attribution-wrap {
width: 100%;
position: absolute;
height: 20px;
margin-bottom: 5px;
top: -25px;
}
.attribution-wrap * { pointer-events: all; }
@@ -4409,7 +4408,6 @@ img.tile-debug {
.map-footer-bar .scale-block {
vertical-align: bottom;
width: 250px;
max-height: 30px;
flex: 0 0 250px;
user-select: none;
}
@@ -4443,7 +4441,6 @@ img.tile-debug {
/* Footer - About, Source Switcher
------------------------------------------------------- */
.map-footer-bar .info-block {
max-height: 30px;
flex: 1 1 auto;
}
@@ -4541,6 +4538,9 @@ img.tile-debug {
.ideditor[dir='rtl'] .api-status {
text-align: left;
}
.api-status:empty {
display: none;
}
.api-status.offline,
.api-status.readonly,
@@ -5113,7 +5113,7 @@ img.tile-debug {
.notice .zoom-to {
margin: auto;
width: 300px;
height: 70px;
padding: 20px 5px;
font-size: 150%;
border-radius: 8px;
}

6
modules/ui/feature_list.js
View File

@@ -41,6 +41,9 @@ export function uiFeatureList(context) {
.append('div')
.attr('class', 'search-header');
searchWrap
.call(svgIcon('#iD-icon-search', 'pre-text'));
var search = searchWrap
.append('input')
.attr('placeholder', t('inspector.search'))
@@ -50,9 +53,6 @@ export function uiFeatureList(context) {
.on('keydown', keydown)
.on('input', inputevent);
searchWrap
.call(svgIcon('#iD-icon-search', 'pre-text'));
var listWrap = selection
.append('div')
.attr('class', 'inspector-body');

133
modules/ui/init.js
View File

@@ -162,6 +162,72 @@ export function uiInit(context) {
.attr('class', 'spinner')
.call(uiSpinner(context));
var overMap = content
.append('div')
.attr('class', 'over-map');
// Map controls
var controls = overMap
.append('div')
.attr('class', 'map-controls');
controls
.append('div')
.attr('class', 'map-control zoombuttons')
.call(uiZoom(context));
controls
.append('div')
.attr('class', 'map-control zoom-to-selection-control')
.call(uiZoomToSelection(context));
controls
.append('div')
.attr('class', 'map-control geolocate-control')
.call(uiGeolocate(context));
// Add panes
// This should happen after map is initialized, as some require surface()
var panes = overMap
.append('div')
.attr('class', 'map-panes');
var uiPanes = [
uiPaneBackground(context),
uiPaneMapData(context),
uiPaneIssues(context),
uiPanePreferences(context),
uiPaneHelp(context)
];
uiPanes.forEach(function(pane) {
controls
.append('div')
.attr('class', 'map-control map-pane-control ' + pane.id + '-control')
.call(pane.renderToggleButton);
panes
.call(pane.renderPane);
});
ui.info = uiInfo(context);
// Add absolutely-positioned elements that sit on top of the map
// This should happen after the map is ready (center/zoom)
overMap
.call(uiMapInMap(context))
.call(ui.info)
.call(uiNotice(context));
overMap
.append('div')
.attr('class', 'photoviewer')
.classed('al', true) // 'al'=left, 'ar'=right
.classed('hide', true)
.call(ui.photoviewer);
// Add attribution and footer
var about = content
.append('div')
@@ -270,73 +336,6 @@ export function uiInit(context) {
map.centerZoom([0, 0], 2);
}
var overMap = content
.append('div')
.attr('class', 'over-map');
// Map controls
var controls = overMap
.append('div')
.attr('class', 'map-controls');
controls
.append('div')
.attr('class', 'map-control zoombuttons')
.call(uiZoom(context));
controls
.append('div')
.attr('class', 'map-control zoom-to-selection-control')
.call(uiZoomToSelection(context));
controls
.append('div')
.attr('class', 'map-control geolocate-control')
.call(uiGeolocate(context));
// Add panes
// This should happen after map is initialized, as some require surface()
var panes = overMap
.append('div')
.attr('class', 'map-panes');
var uiPanes = [
uiPaneBackground(context),
uiPaneMapData(context),
uiPaneIssues(context),
uiPanePreferences(context),
uiPaneHelp(context)
];
uiPanes.forEach(function(pane) {
controls
.append('div')
.attr('class', 'map-control map-pane-control ' + pane.id + '-control')
.call(pane.renderToggleButton);
panes
.call(pane.renderPane);
});
ui.info = uiInfo(context);
// Add absolutely-positioned elements that sit on top of the map
// This should happen after the map is ready (center/zoom)
overMap
.call(uiMapInMap(context))
.call(ui.info)
.call(uiNotice(context));
overMap
.append('div')
.attr('class', 'photoviewer')
.classed('al', true) // 'al'=left, 'ar'=right
.classed('hide', true)
.call(ui.photoviewer);
// Bind events
window.onbeforeunload = function() {
return context.save();

6
modules/ui/preset_list.js
View File

@@ -117,6 +117,9 @@ export function uiPresetList(context) {
.append('div')
.attr('class', 'search-header');
searchWrap
.call(svgIcon('#iD-icon-search', 'pre-text'));
var search = searchWrap
.append('input')
.attr('class', 'preset-search-input')
@@ -127,9 +130,6 @@ export function uiPresetList(context) {
.on('keypress', keypress)
.on('input', inputevent);
searchWrap
.call(svgIcon('#iD-icon-search', 'pre-text'));
if (_autofocus) {
search.node().focus();
}