From abf536aa9b20fe974cab1b453769b45dba8c400c Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Mon, 24 Feb 2020 14:03:06 -0800 Subject: [PATCH] Make commit changes its own collapsible section --- css/80_app.css | 8 --- data/core.yaml | 2 +- dist/locales/en.json | 2 +- modules/modes/save.js | 8 +-- modules/ui/commit.js | 21 +++++--- modules/ui/index.js | 1 - .../changes.js} | 52 ++++++++----------- modules/ui/sections/index.js | 1 + 8 files changed, 41 insertions(+), 54 deletions(-) rename modules/ui/{commit_changes.js => sections/changes.js} (80%) diff --git a/css/80_app.css b/css/80_app.css index caebc843a..725ac2c6e 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2236,9 +2236,6 @@ div.combobox { margin-top: 10px; font-weight: bold; } -.changeset-editor .more-fields { - padding: 15px 20px 0 20px; -} .more-fields label { display: flex; @@ -2270,7 +2267,6 @@ div.combobox { flex-flow: row nowrap; flex-direction: row-reverse; margin-top: -25px; - padding: 0 3px; } button.raw-tag-option { flex: 0 0 20px; @@ -4931,10 +4927,6 @@ svg.mouseclick use.right { color: #555; } -.mode-save .commit-section .changeset-list button { - border-left: 1px solid #ccc; -} - .changeset-list li span.count:before { content: '('; } .changeset-list li span.count:after { content: ')'; } diff --git a/data/core.yaml b/data/core.yaml index fa61cf5d8..594287189 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -456,7 +456,7 @@ en: request_review: "I would like someone to review my edits." save: Upload cancel: Cancel - changes: "{count} Changes" + changes: "Changes ({count})" download_changes: Download osmChange file errors: Errors warnings: Warnings diff --git a/dist/locales/en.json b/dist/locales/en.json index 7837c428e..a8e8406d0 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -590,7 +590,7 @@ "request_review": "I would like someone to review my edits.", "save": "Upload", "cancel": "Cancel", - "changes": "{count} Changes", + "changes": "Changes ({count})", "download_changes": "Download osmChange file", "errors": "Errors", "warnings": "Warnings", diff --git a/modules/modes/save.js b/modules/modes/save.js index 90605613d..cd6a3714d 100644 --- a/modules/modes/save.js +++ b/modules/modes/save.js @@ -36,12 +36,8 @@ export function modeSave(context) { .on('resultSuccess.modeSave', showSuccess); - function cancel(selectedID) { - if (selectedID) { - context.enter(modeSelect(context, [selectedID])); - } else { - context.enter(modeBrowse(context)); - } + function cancel() { + context.enter(modeBrowse(context)); } diff --git a/modules/ui/commit.js b/modules/ui/commit.js index 30abc4b01..82ac500fa 100644 --- a/modules/ui/commit.js +++ b/modules/ui/commit.js @@ -3,13 +3,12 @@ import { select as d3_select } from 'd3-selection'; import deepEqual from 'fast-deep-equal'; import { t } from '../util/locale'; -import { modeBrowse } from '../modes/browse'; import { osmChangeset } from '../osm'; import { svgIcon } from '../svg/icon'; import { services } from '../services'; import { tooltip } from '../util/tooltip'; import { uiChangesetEditor } from './changeset_editor'; -import { uiCommitChanges } from './commit_changes'; +import { uiSectionChanges } from './sections/changes'; import { uiCommitWarnings } from './commit_warnings'; import { uiSectionRawTagEditor } from './sections/raw_tag_editor'; import { utilArrayGroupBy, utilRebind } from '../util'; @@ -46,7 +45,7 @@ export function uiCommit(context) { .on('change', changeTags); var rawTagEditor = uiSectionRawTagEditor(context) .on('change', changeTags); - var commitChanges = uiCommitChanges(context); + var commitChanges = uiSectionChanges(context); var commitWarnings = uiCommitWarnings(context); @@ -217,7 +216,9 @@ export function uiCommit(context) { .attr('class', 'header-block header-block-outer header-block-close') .append('button') .attr('class', 'close') - .on('click', function() { context.enter(modeBrowse(context)); }) + .on('click', function() { + dispatch.call('cancel', this); + }) .call(svgIcon('#iD-icon-close')); var body = selection.selectAll('.body') @@ -363,8 +364,7 @@ export function uiCommit(context) { buttonSection.selectAll('.cancel-button') .on('click.cancel', function() { - var selectedID = commitChanges.entityID(); - dispatch.call('cancel', this, selectedID); + dispatch.call('cancel', this); }); buttonSection.selectAll('.save-button') @@ -402,9 +402,16 @@ export function uiCommit(context) { .render ); + var changesSection = body.selectAll('.commit-changes-section') + .data([0]); + + changesSection = changesSection.enter() + .append('div') + .attr('class', 'modal-section commit-changes-section') + .merge(changesSection); // Change summary - body.call(commitChanges); + changesSection.call(commitChanges.render); function toggleRequestReview() { diff --git a/modules/ui/index.js b/modules/ui/index.js index 2e7b6d78a..2ac852a93 100644 --- a/modules/ui/index.js +++ b/modules/ui/index.js @@ -5,7 +5,6 @@ export { uiChangesetEditor } from './changeset_editor'; export { uiCmd } from './cmd'; export { uiCombobox } from './combobox'; export { uiCommit } from './commit'; -export { uiCommitChanges } from './commit_changes'; export { uiCommitWarnings } from './commit_warnings'; export { uiConfirm } from './confirm'; export { uiConflicts } from './conflicts'; diff --git a/modules/ui/commit_changes.js b/modules/ui/sections/changes.js similarity index 80% rename from modules/ui/commit_changes.js rename to modules/ui/sections/changes.js index 88a084066..7cb868ff2 100644 --- a/modules/ui/commit_changes.js +++ b/modules/ui/sections/changes.js @@ -1,43 +1,46 @@ import { select as d3_select } from 'd3-selection'; -import { t } from '../util/locale'; -import { JXON } from '../util/jxon'; -import { actionDiscardTags } from '../actions/discard_tags'; -import { osmChangeset } from '../osm'; -import { svgIcon } from '../svg/icon'; -import { utilDetect } from '../util/detect'; +import { t } from '../../util/locale'; +import { JXON } from '../../util/jxon'; +import { actionDiscardTags } from '../../actions/discard_tags'; +import { osmChangeset } from '../../osm'; +import { svgIcon } from '../../svg/icon'; +import { utilDetect } from '../../util/detect'; +import { uiSection } from '../section'; import { utilDisplayName, utilDisplayType, utilEntityOrMemberSelector -} from '../util'; +} from '../../util'; -export function uiCommitChanges(context) { +export function uiSectionChanges(context) { var detected = utilDetect(); - var _entityID; var _discardTags = {}; context.data().get('discarded') .then(function(d) { _discardTags = d; }) .catch(function() { /* ignore */ }); + var section = uiSection('changes-list', context) + .title(function() { + var history = context.history(); + var summary = history.difference().summary(); + return t('commit.changes', { count: summary.length }); + }) + .disclosureContent(renderDisclosureContent); - function commitChanges(selection) { + function renderDisclosureContent(selection) { var history = context.history(); var summary = history.difference().summary(); - var container = selection.selectAll('.modal-section.commit-section') + var container = selection.selectAll('.commit-section') .data([0]); var containerEnter = container.enter() .append('div') - .attr('class', 'commit-section modal-section fillL2'); - - containerEnter - .append('h3') - .text(t('commit.changes', { count: summary.length })); + .attr('class', 'commit-section'); containerEnter .append('ul') @@ -150,25 +153,14 @@ export function uiCommitChanges(context) { function click(change) { - if (change.changeType === 'deleted') { - _entityID = null; - } else { + if (change.changeType !== 'deleted') { var entity = change.entity; - _entityID = change.entity.id; context.map().zoomToEase(entity); - context.surface().selectAll(utilEntityOrMemberSelector([_entityID], context.graph())) + context.surface().selectAll(utilEntityOrMemberSelector([entity.id], context.graph())) .classed('hover', true); } } } - - commitChanges.entityID = function(val) { - if (!arguments.length) return _entityID; - _entityID = val; - return commitChanges; - }; - - - return commitChanges; + return section; } diff --git a/modules/ui/sections/index.js b/modules/ui/sections/index.js index 85ed8e252..4a82fb478 100644 --- a/modules/ui/sections/index.js +++ b/modules/ui/sections/index.js @@ -1,6 +1,7 @@ export { uiSectionBackgroundDisplayOptions } from './background_display_options'; export { uiSectionBackgroundList } from './background_list'; export { uiSectionBackgroundOffset } from './background_offset'; +export { uiSectionChanges } from './changes'; export { uiSectionDataLayers } from './data_layers'; export { uiSectionEntityIssues } from './entity_issues'; export { uiSectionFeatureType } from './feature_type';