CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-14 21:28:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make all panes inherit from a standard uiPane class (re: #7368)

Browse Source
This commit is contained in:
Quincy Morgan
2020-02-18 10:40:27 -08:00
parent b16f37499a
commit 5c150718a3
9 changed files with 263 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/80_app.css
+23 -44
View File
@@ -440,19 +440,6 @@ button[disabled].action:hover {
color: #333;
}
.notification-badge {
display: block;
position: absolute;
width: 10px;
height: 10px;
right: 7px;
top: 9px;
}
.notification-badge.hide {
display: none;
}
/* Toolbar / Persistent UI Elements
------------------------------------------------------- */
@@ -556,7 +543,7 @@ button.save .count {
text-align: center;
}
.help-wrap svg.icon.pre-text.add-note,
.help-pane svg.icon.pre-text.add-note,
button.add-note svg.icon {
height: 15px;
width: 15px;
@@ -573,7 +560,7 @@ button.add-note svg.icon {
margin-left: 4px;
margin-right: unset;
}
.help-wrap svg.icon.pre-text.add-note {
.help-pane svg.icon.pre-text.add-note {
margin-left: 3px;
margin-right: 3px;
}
@@ -3185,10 +3172,6 @@ button.autofix.action.active {
/*fill: #597be7;*/
}
.notification-badge.warning {
color: #ffdf5c;
}
/* error styles */
.errors-list,
@@ -3232,10 +3215,6 @@ button.autofix.action.active {
/*fill: #597be7;*/
}
.notification-badge.error {
color: #ff0c05;
}
/* Issues Pane */
.issues-options-container {
@@ -3584,7 +3563,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
z-index: 10;
}
.map-pane.help-wrap {
.map-pane.help-pane {
width: 600px;
}
@@ -3624,12 +3603,12 @@ li.issue-fix-item:not(.actionable) .fix-icon {
/* Help
------------------------------------------------------- */
.help-wrap p {
.help-pane p {
font-size: 15px;
margin-bottom: 20px;
}
.help-wrap .left-content .body p code {
.help-pane .left-content .body p code {
padding: 3px 4px;
font-size: 12px;
color: #555;
@@ -3642,14 +3621,14 @@ li.issue-fix-item:not(.actionable) .fix-icon {
box-shadow: inset 0 -1px 0 #bbb;
}
.help-wrap .left-content .icon.pre-text {
.help-pane .left-content .icon.pre-text {
vertical-align: text-top;
margin-right: 0;
margin-left: 0;
display: inline-block;
}
.help-wrap .toc {
.help-pane .toc {
width: 40%;
float: right;
margin-left: 20px;
@@ -3657,68 +3636,68 @@ li.issue-fix-item:not(.actionable) .fix-icon {
padding-left: 5px;
}
.help-wrap .toc li a,
.help-wrap .nav a {
.help-pane .toc li a,
.help-pane .nav a {
display: block;
border: 1px solid #ccc;
padding: 5px 10px;
}
.help-wrap .toc li a {
.help-pane .toc li a {
border-bottom: 0;
}
.help-wrap .toc li a:hover,
.help-wrap .nav a:hover {
.help-pane .toc li a:hover,
.help-pane .nav a:hover {
background: #ececec;
}
.help-wrap .toc li a.selected {
.help-pane .toc li a.selected {
background: #e8ebff;
}
.help-wrap .toc li:first-child a {
.help-pane .toc li:first-child a {
border-radius: 4px 4px 0 0;
}
.help-wrap .toc li:nth-last-child(3) a {
.help-pane .toc li:nth-last-child(3) a {
border-bottom: 1px solid #ccc;
border-radius: 0 0 4px 4px
}
.help-wrap .toc li.shortcuts a,
.help-wrap .toc li.walkthrough a {
.help-pane .toc li.shortcuts a,
.help-pane .toc li.walkthrough a {
overflow: hidden;
margin-top: 10px;
border-bottom: 1px solid #ccc;
border-radius: 4px;
}
.help-wrap .toc li.walkthrough a {
.help-pane .toc li.walkthrough a {
text-align: center;
}
.help-wrap .nav {
.help-pane .nav {
position: relative;
padding-bottom: 30px;
}
.help-wrap .nav a {
.help-pane .nav a {
float: left;
width: 50%;
text-align: center;
}
.help-wrap .nav a:first-child {
.help-pane .nav a:first-child {
border-radius: 4px 0 0 4px;
}
.help-wrap .nav a:last-child:not(:only-child) {
.help-pane .nav a:last-child:not(:only-child) {
border-radius: 0 4px 4px 0;
border-left: 0;
}
.help-wrap .nav a:only-child {
.help-pane .nav a:only-child {
width: 100%;
border-radius: 4px;
}
modules/ui/index.js
-4
View File
@@ -1,7 +1,6 @@
export { uiInit } from './init';
export { uiAccount } from './account';
export { uiAttribution } from './attribution';
export { uiBackground } from './background';
export { uiBackgroundDisplayOptions } from './background_display_options';
export { uiBackgroundOffset } from './background_offset';
export { uiChangesetEditor } from './changeset_editor';
@@ -27,7 +26,6 @@ export { uiFlash } from './flash';
export { uiFormFields } from './form_fields';
export { uiFullScreen } from './full_screen';
export { uiGeolocate } from './geolocate';
export { uiHelp } from './help';
export { uiImproveOsmComments } from './improveOSM_comments';
export { uiImproveOsmDetails } from './improveOSM_details';
export { uiImproveOsmEditor } from './improveOSM_editor';
@@ -40,7 +38,6 @@ export { uiKeepRightEditor } from './keepRight_editor';
export { uiKeepRightHeader } from './keepRight_header';
export { uiLasso } from './lasso';
export { uiLoading } from './loading';
export { uiMapData } from './map_data';
export { uiMapInMap } from './map_in_map';
export { uiModal } from './modal';
export { uiNotice } from './notice';
@@ -48,7 +45,6 @@ export { uiNoteComments } from './note_comments';
export { uiNoteEditor } from './note_editor';
export { uiNoteHeader } from './note_header';
export { uiNoteReport } from './note_report';
export { uiPreferences } from './preferences';
export { uiPresetEditor } from './preset_editor';
export { uiPresetIcon } from './preset_icon';
export { uiPresetList } from './preset_list';
modules/ui/init.js
+22 -39
View File
@@ -14,22 +14,17 @@ import { utilGetDimensions } from '../util/dimensions';
import { uiAccount } from './account';
import { uiAttribution } from './attribution';
import { uiBackground } from './background';
import { uiContributors } from './contributors';
import { uiFeatureInfo } from './feature_info';
import { uiFullScreen } from './full_screen';
import { uiGeolocate } from './geolocate';
import { uiHelp } from './help';
import { uiInfo } from './info';
import { uiIntro } from './intro';
import { uiIssues } from './issues';
import { uiIssuesInfo } from './issues_info';
import { uiLoading } from './loading';
import { uiMapData } from './map_data';
import { uiMapInMap } from './map_in_map';
import { uiNotice } from './notice';
import { uiPhotoviewer } from './photoviewer';
import { uiPreferences } from './preferences';
import { uiRestore } from './restore';
import { uiScale } from './scale';
import { uiShortcuts } from './shortcuts';
@@ -42,6 +37,11 @@ import { uiVersion } from './version';
import { uiZoom } from './zoom';
import { uiCmd } from './cmd';
import { uiBackground } from './panes/background';
import { uiHelp } from './panes/help';
import { uiIssues } from './panes/issues';
import { uiMapData } from './panes/map_data';
import { uiPreferences } from './panes/preferences';
export function uiInit(context) {
var _initCounter = 0;
@@ -106,35 +106,20 @@ export function uiInit(context) {
.attr('class', 'map-control geolocate-control')
.call(uiGeolocate(context));
var background = uiBackground(context);
controls
.append('div')
.attr('class', 'map-control background-control')
.call(background.renderToggleButton);
var uiPanes = [
uiBackground(context),
uiMapData(context),
uiIssues(context),
uiPreferences(context),
uiHelp(context)
];
var mapData = uiMapData(context);
controls
.append('div')
.attr('class', 'map-control map-data-control')
.call(mapData.renderToggleButton);
var issues = uiIssues(context);
controls
.append('div')
.attr('class', 'map-control map-issues-control')
.call(issues.renderToggleButton);
var preferences = uiPreferences(context);
controls
.append('div')
.attr('class', 'map-control preferences-control')
.call(preferences.renderToggleButton);
var help = uiHelp(context);
controls
.append('div')
.attr('class', 'map-control help-control')
.call(help.renderToggleButton);
uiPanes.forEach(function(pane) {
controls
.append('div')
.attr('class', 'map-control ' + pane.id + '-control')
.call(pane.renderToggleButton);
});
content
.append('div')
@@ -252,12 +237,10 @@ export function uiInit(context) {
.append('div')
.attr('class', 'map-panes');
panes
.call(background.renderPane)
.call(mapData.renderPane)
.call(issues.renderPane)
.call(preferences.renderPane)
.call(help.renderPane);
uiPanes.forEach(function(pane) {
panes
.call(pane.renderPane);
});
ui.info = uiInfo(context);
modules/ui/pane.js
+118
View File
@@ -0,0 +1,118 @@
import {
event as d3_event,
select as d3_select
} from 'd3-selection';
import { svgIcon } from '../svg/icon';
import { textDirection } from '../util/locale';
import { tooltip } from '../util/tooltip';
import { uiTooltipHtml } from './tooltipHtml';
export function uiPane(id, context) {
var _key;
var _title = '';
var _description = '';
var _iconName = '';
var _paneSelection = d3_select(null);
var _paneTooltip;
var pane = {
id: id
};
pane.title = function(val) {
if (!arguments.length) return _title;
_title = val;
return pane;
};
pane.key = function(val) {
if (!arguments.length) return _key;
_key = val;
return pane;
};
pane.description = function(val) {
if (!arguments.length) return _description;
_description = val;
return pane;
};
pane.iconName = function(val) {
if (!arguments.length) return _iconName;
_iconName = val;
return pane;
};
pane.selection = function() {
return _paneSelection;
};
function hidePane() {
context.ui().togglePanes();
}
pane.togglePane = function() {
if (d3_event) d3_event.preventDefault();
_paneTooltip.hide();
context.ui().togglePanes(!_paneSelection.classed('shown') ? _paneSelection : undefined);
};
pane.renderToggleButton = function(selection) {
if (!_paneTooltip) {
_paneTooltip = tooltip()
.placement((textDirection === 'rtl') ? 'right' : 'left')
.html(true)
.title(uiTooltipHtml(_description, _key));
}
selection
.append('button')
.on('click', pane.togglePane)
.call(svgIcon('#' + _iconName, 'light'))
.call(_paneTooltip);
};
pane.renderContent = function() {
// override
};
pane.renderPane = function(selection) {
_paneSelection = selection
.append('div')
.attr('class', 'fillL map-pane hide ' + id + '-pane')
.attr('pane', id);
var heading = _paneSelection
.append('div')
.attr('class', 'pane-heading');
heading
.append('h2')
.text(_title);
heading
.append('button')
.on('click', hidePane)
.call(svgIcon('#iD-icon-close'));
_paneSelection
.append('div')
.attr('class', 'pane-content')
.call(pane.renderContent);
if (_key) {
context.keybinding()
.on(_key, pane.togglePane);
}
};
return pane;
}
modules/ui/background.js → modules/ui/panes/background.js
+23 -65
View File
@@ -3,22 +3,22 @@ import _debounce from 'lodash-es/debounce';
import { descending as d3_descending, ascending as d3_ascending } from 'd3-array';
import { event as d3_event, select as d3_select } from 'd3-selection';
import { t, textDirection } from '../util/locale';
import { svgIcon } from '../svg/icon';
import { uiBackgroundDisplayOptions } from './background_display_options';
import { uiBackgroundOffset } from './background_offset';
import { uiCmd } from './cmd';
import { uiDisclosure } from './disclosure';
import { uiMapInMap } from './map_in_map';
import { uiSettingsCustomBackground } from './settings/custom_background';
import { uiTooltipHtml } from './tooltipHtml';
import { tooltip } from '../util/tooltip';
import { t, textDirection } from '../../util/locale';
import { tooltip } from '../../util/tooltip';
import { svgIcon } from '../../svg/icon';
import { uiBackgroundDisplayOptions } from '../background_display_options';
import { uiBackgroundOffset } from '../background_offset';
import { uiCmd } from '../cmd';
import { uiDisclosure } from '../disclosure';
import { uiMapInMap } from '../map_in_map';
import { uiSettingsCustomBackground } from '../settings/custom_background';
import { uiTooltipHtml } from '../tooltipHtml';
import { uiPane } from '../pane';
export function uiBackground(context) {
var key = t('background.key');
var _pane = d3_select(null);
var _key = t('background.key');
var _customSource = context.background().findSource('custom');
var _previousBackground = context.background().findSource(context.storage('background-last-used-toggle'));
@@ -51,7 +51,7 @@ export function uiBackground(context) {
.html(true)
.title(function() {
var tip = '<div>' + t('background.switch') + '</div>';
return uiTooltipHtml(tip, uiCmd('⌘' + key));
return uiTooltipHtml(tip, uiCmd('⌘' + _key));
})
);
} else if (description || isOverflowing) {
@@ -292,11 +292,11 @@ export function uiBackground(context) {
function update() {
if (!_pane.select('.disclosure-wrap-background_list').classed('hide')) {
if (!backgroundPane.selection().select('.disclosure-wrap-background_list').classed('hide')) {
updateBackgroundList();
}
if (!_pane.select('.disclosure-wrap-overlay_list').classed('hide')) {
if (!backgroundPane.selection().select('.disclosure-wrap-overlay_list').classed('hide')) {
updateOverlayList();
}
@@ -318,55 +318,14 @@ export function uiBackground(context) {
}
}
var paneTooltip = tooltip()
.placement((textDirection === 'rtl') ? 'right' : 'left')
.html(true)
.title(uiTooltipHtml(t('background.description'), key));
uiBackground.togglePane = function() {
if (d3_event) d3_event.preventDefault();
paneTooltip.hide();
context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
};
var backgroundPane = uiPane('background', context)
.key(_key)
.title(t('background.title'))
.description(t('background.description'))
.iconName('iD-icon-layers');
function hidePane() {
context.ui().togglePanes();
}
uiBackground.renderToggleButton = function(selection) {
selection
.append('button')
.on('click', uiBackground.togglePane)
.call(svgIcon('#iD-icon-layers', 'light'))
.call(paneTooltip);
};
uiBackground.renderPane = function(selection) {
_pane = selection
.append('div')
.attr('class', 'fillL map-pane background-pane hide')
.attr('pane', 'background');
var heading = _pane
.append('div')
.attr('class', 'pane-heading');
heading
.append('h2')
.text(t('background.title'));
heading
.append('button')
.on('click', hidePane)
.call(svgIcon('#iD-icon-close'));
var content = _pane
.append('div')
.attr('class', 'pane-content');
backgroundPane.renderContent = function(content) {
// background list
content
@@ -411,9 +370,8 @@ export function uiBackground(context) {
update();
context.keybinding()
.on(key, uiBackground.togglePane)
.on(uiCmd('⌘' + key), quickSwitch);
.on(uiCmd('⌘' + _key), quickSwitch);
};
return uiBackground;
return backgroundPane;
}
modules/ui/help.js → modules/ui/panes/help.js
+17 -67
View File
@@ -1,23 +1,17 @@
import {
event as d3_event,
select as d3_select
} from 'd3-selection';
import marked from 'marked';
import { svgIcon } from '../svg/icon';
import { uiCmd } from './cmd';
import { uiIntro } from './intro/intro';
import { uiShortcuts } from './shortcuts';
import { uiTooltipHtml } from './tooltipHtml';
import { svgIcon } from '../../svg/icon';
import { uiCmd } from '../cmd';
import { uiIntro } from '../intro/intro';
import { uiShortcuts } from '../shortcuts';
import { uiTooltipHtml } from '../tooltipHtml';
import { uiPane } from '../pane';
import { t, textDirection } from '../util/locale';
import { tooltip } from '../util/tooltip';
import { icon } from './intro/helper';
import { t, textDirection } from '../../util/locale';
import { tooltip } from '../../util/tooltip';
import { icon } from '../intro/helper';
export function uiHelp(context) {
var key = t('help.key');
var _pane = d3_select(null);
var docKeys = [
['help', [
@@ -281,36 +275,18 @@ export function uiHelp(context) {
};
});
var paneTooltip = tooltip()
.placement((textDirection === 'rtl') ? 'right' : 'left')
.html(true)
.title(uiTooltipHtml(t('help.title'), key));
var helpPane = uiPane('help', context)
.key(t('help.key'))
.title(t('help.title'))
.description(t('help.title'))
.iconName('iD-icon-help');
function hidePane() {
context.ui().togglePanes();
}
uiHelp.togglePane = function() {
if (d3_event) d3_event.preventDefault();
paneTooltip.hide();
context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
};
uiHelp.renderToggleButton = function(selection) {
selection.append('button')
.on('click', uiHelp.togglePane)
.call(svgIcon('#iD-icon-help', 'light'))
.call(paneTooltip);
};
uiHelp.renderPane = function(selection) {
helpPane.renderContent = function(content) {
function clickHelp(d, i) {
var rtl = (textDirection === 'rtl');
content.property('scrollTop', 0);
doctitle.html(d.title);
helpPane.selection().select('.pane-heading h2').html(d.title);
body.html(d.html);
body.selectAll('a')
@@ -373,29 +349,6 @@ export function uiHelp(context) {
context.container().call(uiShortcuts(context), true);
}
_pane = selection.append('div')
.attr('class', 'help-wrap map-pane fillL hide')
.attr('pane', 'help');
var heading = _pane
.append('div')
.attr('class', 'pane-heading');
var doctitle = heading
.append('h2')
.text(t('help.title'));
heading
.append('button')
.on('click', hidePane)
.call(svgIcon('#iD-icon-close'));
var content = _pane
.append('div')
.attr('class', 'pane-content');
var toc = content
.append('ul')
.attr('class', 'toc');
@@ -454,10 +407,7 @@ export function uiHelp(context) {
clickHelp(docs[0], 0);
context.keybinding()
.on(key, uiHelp.togglePane);
};
return uiHelp;
return helpPane;
}
modules/ui/issues.js → modules/ui/panes/issues.js
+25 -97
View File
@@ -2,19 +2,18 @@ import _debounce from 'lodash-es/debounce';
import { event as d3_event, select as d3_select } from 'd3-selection';
import { t, textDirection } from '../util/locale';
import { tooltip } from '../util/tooltip';
import { t } from '../../util/locale';
import { tooltip } from '../../util/tooltip';
//import { actionNoop } from '../actions/noop';
import { geoSphericalDistance } from '../geo';
import { svgIcon } from '../svg/icon';
import { uiDisclosure } from './disclosure';
import { uiTooltipHtml } from './tooltipHtml';
import { utilGetSetValue, utilHighlightEntities, utilNoAuto } from '../util';
import { geoSphericalDistance } from '../../geo';
import { svgIcon } from '../../svg/icon';
import { uiDisclosure } from '../disclosure';
import { utilGetSetValue, utilHighlightEntities, utilNoAuto } from '../../util';
import { uiPane } from '../pane';
export function uiIssues(context) {
var key = t('issues.key');
var MINSQUARE = 0;
var MAXSQUARE = 20;
@@ -23,8 +22,6 @@ export function uiIssues(context) {
var _errorsSelection = d3_select(null);
var _warningsSelection = d3_select(null);
var _rulesList = d3_select(null);
var _pane = d3_select(null);
var _toggleButton = d3_select(null);
var _errors = [];
var _warnings = [];
@@ -42,22 +39,6 @@ export function uiIssues(context) {
);
function addNotificationBadge(selection) {
var d = 10;
selection.selectAll('svg.notification-badge')
.data([0])
.enter()
.append('svg')
.attr('viewbox', '0 0 ' + d + ' ' + d)
.attr('class', 'notification-badge hide')
.append('circle')
.attr('cx', d / 2)
.attr('cy', d / 2)
.attr('r', (d / 2) - 1)
.attr('fill', 'currentColor');
}
function renderErrorsList(selection) {
_errorsSelection = selection
.call(drawIssuesList, 'errors', _errors);
@@ -402,7 +383,7 @@ export function uiIssues(context) {
var opts = cases[type];
var hiddenIssues = context.validator().getIssues(opts);
if (hiddenIssues.length) {
_pane.select('.issues-none .details')
issuesPane.selection().select('.issues-none .details')
.text(t(
'issues.no_issues.hidden_issues.' + type,
{ count: hiddenIssues.length.toString() }
@@ -410,7 +391,7 @@ export function uiIssues(context) {
return;
}
}
_pane.select('.issues-none .details')
issuesPane.selection().select('.issues-none .details')
.text(t('issues.no_issues.hidden_issues.none'));
}
@@ -465,7 +446,7 @@ export function uiIssues(context) {
messageType = 'no_edits';
}
_pane.select('.issues-none .message')
issuesPane.selection().select('.issues-none .message')
.text(t('issues.no_issues.message.' + messageType));
}
@@ -487,31 +468,25 @@ export function uiIssues(context) {
_warnings = _warnings.slice(0, 1000);
_toggleButton.selectAll('.notification-badge')
.classed('error', (_errors.length > 0))
.classed('warning', (_errors.length === 0 && _warnings.length > 0))
.classed('hide', (_errors.length === 0 && _warnings.length === 0));
_pane.selectAll('.issues-errors')
issuesPane.selection().selectAll('.issues-errors')
.classed('hide', _errors.length === 0);
if (_errors.length > 0) {
_pane.selectAll('.hide-toggle-issues_errors .hide-toggle-text')
issuesPane.selection().selectAll('.hide-toggle-issues_errors .hide-toggle-text')
.text(t('issues.errors.list_title', { count: errorCount }));
if (!_pane.select('.disclosure-wrap-issues_errors').classed('hide')) {
if (!issuesPane.selection().select('.disclosure-wrap-issues_errors').classed('hide')) {
_errorsSelection
.call(drawIssuesList, 'errors', _errors);
}
}
_pane.selectAll('.issues-warnings')
issuesPane.selection().selectAll('.issues-warnings')
.classed('hide', _warnings.length === 0);
if (_warnings.length > 0) {
_pane.selectAll('.hide-toggle-issues_warnings .hide-toggle-text')
issuesPane.selection().selectAll('.hide-toggle-issues_warnings .hide-toggle-text')
.text(t('issues.warnings.list_title', { count: warningCount }));
if (!_pane.select('.disclosure-wrap-issues_warnings').classed('hide')) {
if (!issuesPane.selection().select('.disclosure-wrap-issues_warnings').classed('hide')) {
_warningsSelection
.call(drawIssuesList, 'warnings', _warnings);
renderIgnoredIssuesReset(_warningsSelection);
@@ -520,14 +495,14 @@ export function uiIssues(context) {
var hasIssues = _warnings.length > 0 || _errors.length > 0;
var issuesNone = _pane.select('.issues-none');
var issuesNone = issuesPane.selection().select('.issues-none');
issuesNone.classed('hide', hasIssues);
if (!hasIssues) {
renderIgnoredIssuesReset(issuesNone);
setNoIssuesText();
}
if (!_pane.select('.disclosure-wrap-issues_rules').classed('hide')) {
if (!issuesPane.selection().select('.disclosure-wrap-issues_rules').classed('hide')) {
updateRulesList();
}
@@ -654,58 +629,14 @@ export function uiIssues(context) {
}
function hidePane() {
context.ui().togglePanes();
}
var issuesPane = uiPane('issues', context)
.key(t('issues.key'))
.title(t('issues.title'))
.description(t('issues.title'))
.iconName('iD-icon-alert');
var paneTooltip = tooltip()
.placement((textDirection === 'rtl') ? 'right' : 'left')
.html(true)
.title(uiTooltipHtml(t('issues.title'), key));
uiIssues.togglePane = function() {
if (d3_event) d3_event.preventDefault();
paneTooltip.hide();
context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
};
uiIssues.renderToggleButton = function(selection) {
_toggleButton = selection
.append('button')
.on('click', uiIssues.togglePane)
.call(svgIcon('#iD-icon-alert', 'light'))
.call(addNotificationBadge)
.call(paneTooltip);
};
uiIssues.renderPane = function(selection) {
_pane = selection
.append('div')
.attr('class', 'fillL map-pane issues-pane hide')
.attr('pane', 'map-issues');
var heading = _pane
.append('div')
.attr('class', 'pane-heading');
heading
.append('h2')
.text(t('issues.title'));
heading
.append('button')
.on('click', hidePane)
.call(svgIcon('#iD-icon-close'));
var content = _pane
.append('div')
.attr('class', 'pane-content');
issuesPane.renderContent = function(content) {
content
.append('div')
@@ -743,10 +674,7 @@ export function uiIssues(context) {
);
// update();
context.keybinding()
.on(key, uiIssues.togglePane);
};
return uiIssues;
return issuesPane;
}
modules/ui/map_data.js → modules/ui/panes/map_data.js
+22 -68
View File
@@ -3,19 +3,19 @@ import {
select as d3_select
} from 'd3-selection';
import { svgIcon } from '../svg/icon';
import { t, textDirection } from '../util/locale';
import { tooltip } from '../util/tooltip';
import { geoExtent } from '../geo';
import { modeBrowse } from '../modes/browse';
import { uiDisclosure } from './disclosure';
import { uiSettingsCustomData } from './settings/custom_data';
import { uiTooltipHtml } from './tooltipHtml';
import { uiCmd } from './cmd';
import { svgIcon } from '../../svg/icon';
import { t, textDirection } from '../../util/locale';
import { tooltip } from '../../util/tooltip';
import { geoExtent } from '../../geo';
import { modeBrowse } from '../../modes/browse';
import { uiDisclosure } from '../disclosure';
import { uiSettingsCustomData } from '../settings/custom_data';
import { uiTooltipHtml } from '../tooltipHtml';
import { uiCmd } from '../cmd';
import { uiPane } from '../pane';
export function uiMapData(context) {
var key = t('map_data.key');
var osmDataToggleKey = uiCmd('⌥' + t('area_fill.wireframe.key'));
var features = context.features().keys();
var layers = context.layers();
@@ -24,8 +24,6 @@ export function uiMapData(context) {
var settingsCustomData = uiSettingsCustomData(context)
.on('change', customChanged);
var _pane = d3_select(null);
var _fillSelected = context.storage('area-fill') || 'partial';
var _dataLayerContainer = d3_select(null);
var _photoOverlayContainer = d3_select(null);
@@ -775,16 +773,16 @@ export function uiMapData(context) {
function update() {
if (!_pane.select('.disclosure-wrap-data_layers').classed('hide')) {
if (!mapDataPane.selection().select('.disclosure-wrap-data_layers').classed('hide')) {
updateDataLayers();
}
if (!_pane.select('.disclosure-wrap-photo_overlays').classed('hide')) {
if (!mapDataPane.selection().select('.disclosure-wrap-photo_overlays').classed('hide')) {
updatePhotoOverlays();
}
if (!_pane.select('.disclosure-wrap-fill_area').classed('hide')) {
if (!mapDataPane.selection().select('.disclosure-wrap-fill_area').classed('hide')) {
updateFillList();
}
if (!_pane.select('.disclosure-wrap-map_features').classed('hide')) {
if (!mapDataPane.selection().select('.disclosure-wrap-map_features').classed('hide')) {
updateFeatureList();
}
@@ -809,56 +807,13 @@ export function uiMapData(context) {
context.map().pan([0,0]); // trigger a redraw
}
var paneTooltip = tooltip()
.placement((textDirection === 'rtl') ? 'right' : 'left')
.html(true)
.title(uiTooltipHtml(t('map_data.description'), key));
function hidePane() {
context.ui().togglePanes();
}
uiMapData.togglePane = function() {
if (d3_event) d3_event.preventDefault();
paneTooltip.hide();
context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
};
uiMapData.renderToggleButton = function(selection) {
selection
.append('button')
.on('click', uiMapData.togglePane)
.call(svgIcon('#iD-icon-data', 'light'))
.call(paneTooltip);
};
uiMapData.renderPane = function(selection) {
_pane = selection
.append('div')
.attr('class', 'fillL map-pane map-data-pane hide')
.attr('pane', 'map-data');
var heading = _pane
.append('div')
.attr('class', 'pane-heading');
heading
.append('h2')
.text(t('map_data.title'));
heading
.append('button')
.on('click', hidePane)
.call(svgIcon('#iD-icon-close'));
var content = _pane
.append('div')
.attr('class', 'pane-content');
var mapDataPane = uiPane('map-data', context)
.key(t('map_data.key'))
.title(t('map_data.title'))
.description(t('map_data.description'))
.iconName('iD-icon-data');
mapDataPane.renderContent = function(content) {
// data layers
content
@@ -905,7 +860,6 @@ export function uiMapData(context) {
setFill(_fillSelected);
context.keybinding()
.on(key, uiMapData.togglePane)
.on(t('area_fill.wireframe.key'), toggleWireframe)
.on(osmDataToggleKey, function() {
d3_event.preventDefault();
@@ -915,5 +869,5 @@ export function uiMapData(context) {
.on(t('map_data.highlight_edits.key'), toggleHighlightEdited);
};
return uiMapData;
}
return mapDataPane;
}
modules/ui/preferences.js → modules/ui/panes/preferences.js
+13 -57
View File
@@ -1,23 +1,15 @@
import { event as d3_event, select as d3_select } from 'd3-selection';
import { event as d3_event } from 'd3-selection';
import { svgIcon } from '../svg/icon';
import { t, textDirection } from '../util/locale';
import { tooltip } from '../util/tooltip';
import { uiDisclosure } from './disclosure';
import { uiTooltipHtml } from './tooltipHtml';
import { svgIcon } from '../../svg/icon';
import { t } from '../../util/locale';
import { tooltip } from '../../util/tooltip';
import { uiDisclosure } from '../disclosure';
import { uiPane } from '../pane';
export function uiPreferences(context) {
const key = t('preferences.key');
let _pane = d3_select(null);
let _showThirdPartyIcons = context.storage('preferences.privacy.thirdpartyicons') || 'true';
const paneTooltip = tooltip()
.placement((textDirection === 'rtl') ? 'right' : 'left')
.html(true)
.title(uiTooltipHtml(t('preferences.description'), key));
function renderPrivacyOptions(selection) {
// enter
let privacyOptionsListEnter = selection.selectAll('.privacy-options-list')
@@ -74,46 +66,13 @@ export function uiPreferences(context) {
}
}
let preferencesPane = uiPane('preferences', context)
.key(t('preferences.key'))
.title(t('preferences.title'))
.description(t('preferences.description'))
.iconName('fas-user-cog');
uiPreferences.togglePane = () => {
if (d3_event) d3_event.preventDefault();
paneTooltip.hide();
context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
};
uiPreferences.renderToggleButton = (selection) => {
selection
.append('button')
.on('click', uiPreferences.togglePane)
.call(svgIcon('#fas-user-cog', 'light'))
.call(paneTooltip);
};
uiPreferences.renderPane = (selection) => {
_pane = selection
.append('div')
.attr('class', 'fillL map-pane preferences-pane hide')
.attr('pane', 'preferences');
let heading = _pane
.append('div')
.attr('class', 'pane-heading');
heading
.append('h2')
.text(t('preferences.title'));
heading
.append('button')
.on('click', () => context.ui().togglePanes())
.call(svgIcon('#iD-icon-close'));
let content = _pane
.append('div')
.attr('class', 'pane-content');
preferencesPane.renderContent = (content) => {
content
.append('div')
@@ -122,10 +81,7 @@ export function uiPreferences(context) {
.title(t('preferences.privacy.title'))
.content(renderPrivacyOptions)
);
context.keybinding()
.on(key, uiPreferences.togglePane);
};
return uiPreferences;
return preferencesPane;
}