diff --git a/css/80_app.css b/css/80_app.css index 3927ee76e..92f2876de 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -648,6 +648,19 @@ button.add-note svg.icon { justify-content: center; } +.header-container { + display: flex; + justify-content: space-between; +} + +.header-block-outer { + width: 20%; +} + +.header-block-close { + display: flex; + justify-content: flex-end; +} /* Hide/Toggle collapsable sections (aka Disclosure) ------------------------------------------------------- */ diff --git a/modules/ui/commit.js b/modules/ui/commit.js index 4da3acbd9..5d818a152 100644 --- a/modules/ui/commit.js +++ b/modules/ui/commit.js @@ -14,6 +14,8 @@ import { uiCommitWarnings } from './commit_warnings'; import { uiRawTagEditor } from './raw_tag_editor'; import { utilDetect } from '../util/detect'; import { utilRebind } from '../util'; +import { modeBrowse } from '../modes'; +import { svgIcon } from '../svg'; var _changeset; @@ -100,11 +102,27 @@ export function uiCommit(context) { var header = selection.selectAll('.header') .data([0]); - header.enter() + var headerTitle = header.enter() .append('div') - .attr('class', 'header fillL') + .attr('class', 'header fillL header-container'); + + headerTitle + .append('div') + .attr('class', 'header-block header-block-outer'); + + headerTitle + .append('div') + .attr('class', 'header-block') .append('h3') .text(t('commit.title')); + + headerTitle + .append('div') + .attr('class', 'header-block header-block-outer header-block-close') + .append('button') + .attr('class', 'close') + .on('click', function() { context.enter(modeBrowse(context)); }) + .call(svgIcon('#iD-icon-close')); var body = selection.selectAll('.body') .data([0]);